@planningcenter/chat-react-native 3.2.0-rc.2 → 3.2.0-rc.21

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/index.tsx

@@ -1,5 +1,5 @@
 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'
@@ -10,5 +10,6 @@ export {
   ChatAdapters,
   ClipboardAdapter,
   Session,
+  Uri,
   platformFontWeightBold,
 } from './utils'

package/src/navigation/index.tsx

@@ -9,16 +9,17 @@ import { Icon } from '../components'
 import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
 import { ConversationScreen } from '../screens/conversation_screen'
 import { ConversationsScreen } from '../screens/conversations/conversations_screen'
-import { ConversationCreateScreen } from '../screens/create/conversation_create_screen'
+import { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'
 import {
   ConversationFilterReceipientsScreenOptions,
   ConversationFilterRecipientsScreen,
-} from '../screens/create/conversation_filter_recipients_screen'
-import { ConversationSelectRecipientsScreen } from '../screens/create/conversation_select_recipients_screen'
+} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'
+import { ConversationSelectRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_recipients_screen'
 import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
 } from '../screens/message_actions_screen'
+import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { HeaderRightButton } from './header'
@@ -28,8 +29,9 @@ 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 CreateConversationStack = createNativeStackNavigator({
+export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
   screenOptions: {
     headerBackButtonDisplayMode: 'minimal',
@@ -45,18 +47,41 @@ export const CreateConversationStack = 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: {
       screen: ConversationFilterRecipientsScreen,
       options: ConversationFilterReceipientsScreenOptions,
     },
-    ConversationCreate: {
-      screen: ConversationCreateScreen,
-      options: {
+    ConversationNew: {
+      screen: ConversationNewScreen,
+      options: ({ navigation, route }) => ({
         title: 'New conversation',
         headerLeft: () => null,
-      },
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton
+            {...props}
+            onPress={() => navigation.popTo('Conversations', route.params)}
+          >
+            Cancel
+          </HeaderRightButton>
+        ),
+      }),
     },
   },
 })
@@ -116,13 +141,17 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
-    Create: {
-      screen: CreateConversationStack,
+    New: {
+      screen: NewConversationStack,
       options: {
         headerShown: false,
         presentation: 'modal',
       },
     },
+    SendGiphy: {
+      screen: SendGiphyScreen,
+      options: SendGiphyScreenOptions,
+    },
     MessageActions: {
       screen: MessageActionsScreen,
       // Something about sheetAllowedDetents declared inline breaks TS

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

@@ -0,0 +1,120 @@
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import React from 'react'
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+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: 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',
+}
+
+export const ConversationFilterRecipientsScreen = ({}: ConversationFilterRecipientsScreenProps) => {
+  const styles = useStyles()
+
+  const { serviceTypes } = useServiceTypesWithTeams()
+  const data = useFlattenedArrayOfServiceTypesWithTeams({
+    data: serviceTypes,
+    firstRowStyle: styles.firstRow,
+    lastRowStyle: styles.lastRow,
+  })
+
+  return (
+    <FilterRecipientsProvider>
+      <View style={styles.listWrapper}>
+        <FlashList
+          data={data}
+          ListHeaderComponent={
+            <Heading variant="h3" style={styles.listHeader}>
+              Service Types
+            </Heading>
+          }
+          estimatedItemSize={50}
+          contentContainerStyle={styles.listContentContainer}
+          keyExtractor={item =>
+            `${item.type === SectionTypes.header ? item.data.serviceTypeId : item.data.teamId}`
+          }
+          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>
+    </FilterRecipientsProvider>
+  )
+}
+
+const useStyles = () => {
+  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({
+    listWrapper: {
+      flex: 1,
+      height: containerHeight,
+      backgroundColor: colors.surfaceColor080,
+    },
+    listContentContainer: {
+      padding: 16,
+      paddingBottom: bottom,
+    },
+    listHeader: {
+      paddingBottom: 16,
+    },
+    firstRow: {
+      borderTopStartRadius: tokens.borderRadiusLg,
+      borderTopEndRadius: tokens.borderRadiusLg,
+    },
+    lastRow: {
+      borderBottomStartRadius: tokens.borderRadiusLg,
+      borderBottomEndRadius: tokens.borderRadiusLg,
+      marginBottom: 16,
+    },
+  })
+}

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
+}