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

package/src/hooks/use_message_create.ts

@@ -2,7 +2,7 @@ import { InfiniteData, useMutation } from '@tanstack/react-query'
 import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages'
 import { useApiClient } from './use_api_client'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
-import { queryClient } from '../contexts/api_provider'
+import { chatQueryClient } from '../contexts/api_provider'
 import { updateOrCreateRecordInPagesData } from '../utils'
 import { DenormalizedAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource'
 
@@ -42,7 +42,7 @@ export function useMessageCreate({ conversationId }: Props) {
       type QueryData = InfiniteData<ApiCollection<MessageResource>>
       const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
 
-      queryClient.setQueryData<QueryData>(queryKey, data =>
+      chatQueryClient.setQueryData<QueryData>(queryKey, data =>
         updateOrCreateRecordInPagesData({
           data,
           record: updatedMessage,

package/src/hooks/use_suspense_api.ts

@@ -16,9 +16,15 @@ export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(
   args: SuspenseGetOptions
 ) => {
   type Resource = ApiResource<T>
+  const apiClient = useApiClient()
 
   const { data, ...query } = useSuspenseQuery<Resource, Response>({
     queryKey: getRequestQueryKey(args),
+    queryFn: ({ queryKey }) => {
+      const [url, d, headers, app = 'chat'] = queryKey as RequestQueryKey
+
+      return apiClient[app].get({ url, data: d, headers }) as Promise<Resource>
+    },
   })
 
   return { ...data, ...query }

package/src/hooks/use_upload_client.ts

@@ -0,0 +1,67 @@
+import { useContext, useMemo } from 'react'
+import { ChatContext } from '../contexts/chat_context'
+import { UploadUri } from '../utils/upload_uri'
+import { Client } from '../utils'
+
+export interface FileForUploadClient {
+  uri: string
+  name: string
+  type: string // Should be a MIME type
+}
+
+export const useUploadClient = () => {
+  const { session, onUnauthorizedResponse } = useContext(ChatContext)
+
+  const uri = useMemo(() => new UploadUri({ session }), [session])
+
+  const api = useMemo(
+    () =>
+      new UploadClient({
+        version: '2025-05-16', // not really needed, but required by the Client constructor
+        root: uri.baseUrl,
+        defaultHeaders: uri.headers,
+        onUnauthorizedResponse,
+      }),
+    [uri, onUnauthorizedResponse]
+  )
+
+  return api
+}
+
+class UploadClient extends Client {
+  async uploadFile(file: FileForUploadClient): Promise<UploadedResource> {
+    const formData = new FormData()
+    formData.append('file', file as unknown as Blob)
+
+    const response = await fetch(`${this.root}/v2/files`, {
+      method: 'POST',
+      headers: this.headers,
+      body: formData,
+    })
+
+    if (!response.ok) {
+      return this.handleNotOk(response)
+    }
+
+    const jsonResponse = await response.json()
+
+    return jsonResponse.data[0]
+  }
+}
+
+interface UploadedResource {
+  id: string
+  type: string
+  attributes: {
+    organization_id: string
+    person_id: string
+    md5: string
+    created_at: string
+    expires_at: string
+    source_ip: string
+    name: string
+    content_type: string
+    file_size: number
+    location: string
+  }
+}

package/src/index.tsx

@@ -1,14 +1,16 @@
 export * from './contexts/chat_context'
-export { ApiProvider } from './contexts/api_provider'
+export { ApiProvider, chatQueryClient } from './contexts/api_provider'
 export { DesignSystemScreen } from './screens'
 export * from './navigation'
 export * from './types'
 export * from './utils/client'
+export { GroupConversations } from './components'
 
 export {
   TemporaryDefaultColorsType,
   ChatAdapters,
   ClipboardAdapter,
   Session,
+  Uri,
   platformFontWeightBold,
 } from './utils'

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: {
@@ -54,10 +70,15 @@ export const NewConversationStack = createNativeStackNavigator({
     },
     ConversationNew: {
       screen: ConversationNewScreen,
-      options: {
+      options: ({ navigation }) => ({
         title: 'New conversation',
         headerLeft: () => null,
-      },
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton {...props} onPress={() => navigation.getParent()?.goBack()}>
+            Cancel
+          </HeaderRightButton>
+        ),
+      }),
     },
   },
 })

package/src/screens/conversation_details_screen.tsx

@@ -492,14 +492,14 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
   return StyleSheet.create({
     listContainer: {
       flex: 1,
-      backgroundColor: colors.fillColorNeutral080,
+      backgroundColor: colors.surfaceColor080,
     },
     contentContainer: {
       padding: space(2),
     },
     sectionOuterBase: {
       paddingLeft: space(2),
-      backgroundColor: colors.fillColorNeutral100Inverted,
+      backgroundColor: colors.surfaceColor100,
       borderTopLeftRadius: isStart ? space(1) : 0,
       borderTopRightRadius: isStart ? space(1) : 0,
       borderBottomLeftRadius: isEnd ? space(1) : 0,

package/src/screens/conversation_filter_recipients/components/checkbox_row.tsx

@@ -0,0 +1,101 @@
+import { Pressable, View, StyleSheet, type ViewStyle } from 'react-native'
+import { useTheme } from '../../../hooks'
+import { Icon, Text } from '../../../components'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { ConversationFilterRecipientsScreenProps, TeamProps } from '../types'
+import { type RouteProp, useRoute } from '@react-navigation/native'
+import { useFilterRecipientsContext } from '../context/conversation_filter_recipients_context'
+
+interface TeamRowProps {
+  data: TeamProps
+  style?: ViewStyle
+  accessibilityLabelledBy: string
+}
+
+export const CheckboxRow = ({ data, style, accessibilityLabelledBy }: TeamRowProps) => {
+  const styles = useStyles()
+  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
+  const { setTeamFilters } = useFilterRecipientsContext()
+
+  const { teamId, teamName } = data
+  const { team_ids: currentTeamIds } = route.params
+
+  const checked = currentTeamIds?.includes(teamId) ?? false
+  const newTeamIdAdded = [...(currentTeamIds ?? []), teamId]
+  const newTeamIdRemoved = (currentTeamIds ?? []).filter(currentId => currentId !== teamId)
+
+  const handlePress = () => {
+    setTeamFilters({
+      team_ids: checked ? newTeamIdRemoved : newTeamIdAdded,
+    })
+  }
+
+  return (
+    <Pressable
+      style={({ pressed }) => [styles.checkboxRow, pressed && styles.checkboxRowPressed, style]}
+      onPress={handlePress}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked }}
+      accessibilityLabelledBy={accessibilityLabelledBy}
+      accessibilityLabel={`${teamName} team`}
+    >
+      <CheckboxIcon checked={checked} />
+      <Text style={styles.label} numberOfLines={2}>
+        {teamName}
+      </Text>
+    </Pressable>
+  )
+}
+
+function CheckboxIcon({ checked }: { checked: boolean }) {
+  const styles = useStyles()
+  const checkedStyle = checked ? styles.checkedContainer : styles.uncheckedContainer
+
+  return (
+    <View style={checkedStyle}>
+      {checked && <Icon name="general.thickCheckmark" style={styles.checkedIcon} />}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  const baseCheckboxStyles: ViewStyle = {
+    width: 20,
+    height: 20,
+    borderRadius: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+
+  return StyleSheet.create({
+    checkboxRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      padding: 16,
+      borderTopWidth: 1,
+      borderTopColor: colors.borderColorDefaultDim,
+      backgroundColor: colors.surfaceColor100,
+    },
+    checkboxRowPressed: {
+      opacity: 0.5,
+    },
+    label: {
+      flex: 1,
+    },
+    checkedContainer: {
+      ...baseCheckboxStyles,
+      backgroundColor: colors.statusSuccessIcon,
+    },
+    uncheckedContainer: {
+      ...baseCheckboxStyles,
+      borderWidth: 2,
+      borderColor: colors.borderColorDefaultDarker,
+    },
+    checkedIcon: {
+      color: tokens.colorNeutral100White,
+    },
+  })
+}

package/src/screens/conversation_filter_recipients/components/header_row.tsx

@@ -0,0 +1,99 @@
+import { View, StyleSheet, type ViewStyle } from 'react-native'
+import { useTheme } from '../../../hooks'
+import { Icon, Heading, TextButton } from '../../../components'
+import type { ConversationFilterRecipientsScreenProps, ServiceTypeProps } from '../types'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { pluralize } from '../../../utils'
+import { useRoute, type RouteProp } from '@react-navigation/native'
+import { useFilterRecipientsContext } from '../context/conversation_filter_recipients_context'
+
+const BULK_SELECT_LIMIT = 10
+
+interface HeaderRowProps {
+  data: ServiceTypeProps
+  nativeID: string
+  style?: ViewStyle
+}
+
+export const HeaderRow = ({ data, nativeID, style }: HeaderRowProps) => {
+  const styles = useStyles()
+  const { setTeamFilters } = useFilterRecipientsContext()
+  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
+
+  const { serviceTypeName, teamIdsForServiceType } = data
+  const { team_ids: currentTeamIds = [] } = route.params
+
+  const newTeamIdsAdded = [...new Set([...currentTeamIds, ...teamIdsForServiceType])]
+  const newTeamIdsRemoved = currentTeamIds.filter(id => !teamIdsForServiceType.includes(id))
+
+  const allTeamsSelected = teamIdsForServiceType.every(id => currentTeamIds.includes(id))
+  const showSelectAll = teamIdsForServiceType.length <= BULK_SELECT_LIMIT
+  const selectLabel = allTeamsSelected ? 'Deselect' : 'Select'
+
+  const headingAccessibilityHint = `${pluralize(teamIdsForServiceType.length, 'team')} available to select`
+  const selectAllAccessibilityLabel = `${selectLabel} ${pluralize(teamIdsForServiceType.length, 'team')} for ${serviceTypeName}`
+
+  const handleSelectAll = () => {
+    setTeamFilters({
+      team_ids: allTeamsSelected ? newTeamIdsRemoved : newTeamIdsAdded,
+    })
+  }
+
+  return (
+    <View style={[styles.headerRow, style]}>
+      <View style={styles.headerContent}>
+        <Icon name="services.folderClosed" style={styles.headerIcon} />
+        <Heading
+          variant="h3"
+          style={styles.headerText}
+          numberOfLines={2}
+          nativeID={nativeID}
+          accessibilityHint={headingAccessibilityHint}
+        >
+          {serviceTypeName}
+        </Heading>
+      </View>
+
+      {showSelectAll && (
+        <TextButton
+          variant="tertiary"
+          onPress={handleSelectAll}
+          accessibilityLabel={selectAllAccessibilityLabel}
+        >
+          {selectLabel} all
+        </TextButton>
+      )}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    headerRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: 16,
+      gap: 12,
+      backgroundColor: colors.surfaceColor100,
+    },
+    headerText: {
+      fontWeight: 'normal',
+      flex: 1,
+      color: colors.textColorDefaultPrimary,
+      fontSize: tokens.fontSizeSm,
+    },
+    headerContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      flex: 1,
+    },
+    headerIcon: {
+      color: colors.interaction,
+      fontSize: tokens.fontSizeMd,
+    },
+  })
+}

package/src/screens/conversation_filter_recipients/components/navigation_header.tsx

@@ -0,0 +1,68 @@
+import { HeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Button, TextButton } from '../../../components'
+import { RouteProp, useRoute } from '@react-navigation/native'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import {
+  FilterRecipientsProvider,
+  useFilterRecipientsContext,
+} from '../context/conversation_filter_recipients_context'
+import { ConversationFilterRecipientsScreenProps } from '../types'
+
+export const FilterHeaderTitle = ({ tintColor }: HeaderTitleProps) => {
+  const styles = useStyles()
+
+  return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Teams I lead</HeaderTitle>
+}
+
+const HeaderRight = () => {
+  const styles = useStyles()
+  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
+  const { resetTeamFilters, applyTeamFilters } = useFilterRecipientsContext()
+
+  const { team_ids } = route.params
+  const noTeamsSelected = team_ids?.length === 0 || !team_ids
+  const applyButtonAccessibilityHint = noTeamsSelected
+    ? 'Select at least one team to navigate to the final step in creating your conversation.'
+    : 'Saves selected teams and navigates to the final step to create your conversation.'
+
+  return (
+    <View style={styles.headerRight}>
+      <TextButton
+        onPress={resetTeamFilters}
+        accessibilityHint="Cancels any selected teams and closes this modal."
+      >
+        Reset
+      </TextButton>
+      <Button
+        title="Apply"
+        accessibilityHint={applyButtonAccessibilityHint}
+        onPress={() => applyTeamFilters(route.params)}
+        disabled={noTeamsSelected}
+      />
+    </View>
+  )
+}
+
+export const HeaderRightWithContext = () => {
+  return (
+    <FilterRecipientsProvider>
+      <HeaderRight />
+    </FilterRecipientsProvider>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    headerTitle: {
+      fontSize: tokens.fontSizeLg,
+      flex: 1,
+    },
+    headerRight: {
+      flexDirection: 'row',
+      gap: 16,
+      alignItems: 'center',
+    },
+  })
+}

package/src/screens/conversation_filter_recipients/context/conversation_filter_recipients_context.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { createContext, PropsWithChildren } from 'react'
+import { RouteProp, StackActions, useNavigation, useRoute } from '@react-navigation/native'
+import {
+  ConversationFilterRecipientsParams,
+  ConversationFilterRecipientsScreenProps,
+} from '../types'
+import { NativeStackNavigationProp } from '@react-navigation/native-stack'
+
+export const FilterRecipientsContext = createContext<{
+  params: ConversationFilterRecipientsParams
+  resetTeamFilters: () => void
+  setTeamFilters: (params: ConversationFilterRecipientsParams) => void
+  applyTeamFilters: (params: ConversationFilterRecipientsParams) => void
+}>({
+  params: {
+    source_app_name: undefined,
+    team_ids: [],
+  },
+  resetTeamFilters: () => {},
+  setTeamFilters: () => {},
+  applyTeamFilters: () => {},
+})
+
+export const FilterRecipientsProvider = ({ children }: PropsWithChildren) => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<ConversationFilterRecipientsScreenProps>>()
+  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
+  const filterContextValue = {
+    params: route.params,
+    resetTeamFilters: () => {
+      navigation.goBack()
+    },
+    setTeamFilters: (params: Omit<ConversationFilterRecipientsParams, 'source_app_name'>) => {
+      navigation.setParams({
+        team_ids: params.team_ids,
+      })
+    },
+    applyTeamFilters: (params: ConversationFilterRecipientsParams) => {
+      navigation.dispatch(StackActions.popTo('ConversationNew', params))
+    },
+  }
+
+  return (
+    <FilterRecipientsContext.Provider value={filterContextValue}>
+      {children}
+    </FilterRecipientsContext.Provider>
+  )
+}
+
+export const useFilterRecipientsContext = () => {
+  return React.useContext(FilterRecipientsContext)
+}

package/src/screens/conversation_filter_recipients/conversation_filter_recipients_screen.tsx

@@ -1,79 +1,120 @@
-import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Button } from '../../components'
+import { FlashList } from '@shopify/flash-list'
+import { Heading } from '../../components'
 import { useTheme } from '../../hooks'
+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'
+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-'
 
 export const ConversationFilterReceipientsScreenOptions: NativeStackNavigationOptions = {
-  presentation: 'formSheet',
-  headerShown: false,
-  sheetAllowedDetents: [0.75],
+  presentation: Platform.select({ android: 'modal', ios: 'formSheet' }),
+  sheetAllowedDetents: Platform.select({
+    android: [0.75, 0.94],
+    default: [0.75, 1],
+  }),
   sheetGrabberVisible: true,
+  headerBackVisible: false,
+  headerRight: HeaderRightWithContext,
+  headerTitle: FilterHeaderTitle,
+  headerTitleAlign: 'left',
 }
 
-type ConversationFilterRecipientsScreenProps = StaticScreenProps<{}>
-
 export const ConversationFilterRecipientsScreen = ({}: ConversationFilterRecipientsScreenProps) => {
   const styles = useStyles()
-  const navigation = useNavigation()
+
+  const { serviceTypes } = useServiceTypesWithTeams()
+  const data = useFlattenedArrayOfServiceTypesWithTeams({
+    data: serviceTypes,
+    firstRowStyle: styles.firstRow,
+    lastRowStyle: styles.lastRow,
+  })
 
   return (
-    <View style={styles.container}>
-      <View style={styles.section}>
-        <Button
-          style={styles.selectTeamsButton}
-          onPress={() =>
-            navigation.dispatch(
-              StackActions.popTo('ConversationSelectRecipients', {
-                chat_group_graph_id: 'TBD',
-              })
-            )
+    <FilterRecipientsProvider>
+      <View style={styles.listWrapper}>
+        <FlashList
+          data={data}
+          ListHeaderComponent={
+            <Heading variant="h3" style={styles.listHeader}>
+              Service Types
+            </Heading>
           }
-          title="Redirect to select"
-          variant="outline"
-        />
-
-        <Button
-          style={styles.selectTeamsButton}
-          onPress={() =>
-            navigation.dispatch(
-              StackActions.popTo('ConversationCreate', {
-                chat_group_graph_id: 'TBD',
-              })
-            )
+          estimatedItemSize={50}
+          contentContainerStyle={styles.listContentContainer}
+          keyExtractor={item =>
+            `${item.type === SectionTypes.header ? item.data.serviceTypeId : item.data.teamId}`
           }
-          title="Redirect to form"
-          variant="outline"
+          renderItem={({ item }) => {
+            switch (item.type) {
+              case SectionTypes.header:
+                return (
+                  <HeaderRow
+                    data={item.data}
+                    style={item.sectionStyle}
+                    nativeID={`${SERVICE_TYPE_LABELLED_BY_PREFIX}${item.data.serviceTypeId}`}
+                  />
+                )
+              case SectionTypes.team:
+                return (
+                  <CheckboxRow
+                    data={item.data}
+                    style={item.sectionStyle}
+                    accessibilityLabelledBy={`${SERVICE_TYPE_LABELLED_BY_PREFIX}${item.data.serviceTypeId}`}
+                  />
+                )
+              default:
+                return null
+            }
+          }}
         />
       </View>
-    </View>
+    </FilterRecipientsProvider>
   )
 }
 
 const useStyles = () => {
-  const { bottom } = useSafeAreaInsets()
-  const theme = useTheme()
+  const { colors } = useTheme()
+  const { top, bottom } = useSafeAreaInsets()
+  const { height } = useWindowDimensions()
+  const headerHeight = useHeaderHeight()
+
+  const containerHeight = Platform.select({
+    android: height,
+    ios: height - top - headerHeight,
+  })
 
   return StyleSheet.create({
-    container: {
-      flex: 1,
-      gap: 8,
-    },
-    section: {
-      padding: 16,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
+    listWrapper: {
       flex: 1,
+      height: containerHeight,
+      backgroundColor: colors.surfaceColor080,
     },
-    selectTeamsButton: {},
-    routeDebug: {
-      alignContent: 'center',
+    listContentContainer: {
       padding: 16,
       paddingBottom: bottom,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.fillColorNeutral050Base,
+    },
+    listHeader: {
+      paddingBottom: 16,
+    },
+    firstRow: {
+      borderTopStartRadius: tokens.borderRadiusLg,
+      borderTopEndRadius: tokens.borderRadiusLg,
+    },
+    lastRow: {
+      borderBottomStartRadius: tokens.borderRadiusLg,
+      borderBottomEndRadius: tokens.borderRadiusLg,
+      marginBottom: 16,
     },
   })
 }