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

package/src/screens/conversation_screen.tsx

@@ -1,19 +1,27 @@
+// @ts-expect-error
+import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
+  CommonActions,
+  RouteProp,
   StaticScreenProps,
   useNavigation,
   useTheme as useNavigationTheme,
   useRoute,
 } from '@react-navigation/native'
+import moment from 'moment'
 import React, { useCallback, useEffect } from 'react'
 import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Badge, Icon } from '../components'
+import { Badge, Icon, Text } from '../components'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
 import { KeyboardView } from '../components/display/keyboard_view'
+import { useTheme } from '../hooks'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { MessageResource } from '../types'
+import { getRelativeDateStatus } from '../utils/date'
 
 type ConversationRouteProps = {
   conversation_id: number
@@ -32,6 +40,8 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
   })
+  useEnsureConversationsRouteExists()
+  const messagesWithSeparators = groupMessages(messages)
 
   // Seems to be necessary to define this way so we get the route picked up
   const headerTitle = useCallback(
@@ -51,13 +61,19 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
           contentContainerStyle={styles.listContainer}
           refreshing={isRefetching}
           onRefresh={refetch}
-          data={messages}
+          data={messagesWithSeparators}
           keyExtractor={item => item.id}
-          renderItem={({ item }) => <Message {...item} conversation_id={conversation_id} />}
+          renderItem={({ item }) => {
+            if (item.type === 'DateSeparator') {
+              return <InlineDateSeparator {...item} />
+            }
+
+            return <Message {...item} conversation_id={conversation_id} />
+          }}
           onEndReached={() => fetchNextPage()}
         />
         <MessageForm.Root conversation={conversation}>
-          {/* <MessageForm.AttachmentPicker /> */}
+          <MessageForm.AttachmentPicker />
           <MessageForm.Commands />
           <MessageForm.TextInput />
           <MessageForm.SubmitButton />
@@ -67,6 +83,82 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   )
 }
 
+export type DateSeparator = { type: 'DateSeparator'; id: string; date: string }
+
+function InlineDateSeparator({ date }: DateSeparator) {
+  const styles = useDateSeparatorStyles()
+  const { isThisYear } = getRelativeDateStatus(date)
+  const showYear = !isThisYear
+  const dateStamp = formatDate(date, { style: 'long', year: showYear })
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.separator} />
+      <Text variant="footnote" style={styles.dateText}>
+        {dateStamp}
+      </Text>
+      <View style={styles.separator} />
+    </View>
+  )
+}
+
+const useDateSeparatorStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+    },
+    separator: {
+      flex: 1,
+      height: 1,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.borderColorDefaultBase,
+    },
+    dateText: {
+      paddingHorizontal: 8,
+    },
+  })
+}
+
+export const groupMessages = (ms: MessageResource[]) => {
+  let enrichedMessages: (MessageResource | DateSeparator)[] = []
+  let encounteredOneOfMyMessages = false
+
+  ms.forEach((message, i) => {
+    const prevMessage = ms[i + 1]
+    const nextMessage = ms[i - 1]
+    const date = moment(message.createdAt).format('YYYY-MM-DD')
+    const prevMessageDifferentAuthor = message.author?.id !== prevMessage?.author?.id
+    const nextMessageDifferentAuthor = message.author?.id !== nextMessage?.author?.id
+    const prevMessageMoreThan5Minutes =
+      prevMessage &&
+      new Date(message.createdAt).getTime() - new Date(prevMessage.createdAt).getTime() > 60000 * 5
+    const nextMessageMoreThan5Minutes =
+      nextMessage &&
+      new Date(nextMessage.createdAt).getTime() - new Date(message.createdAt).getTime() > 60000 * 5
+
+    if (message.mine && !encounteredOneOfMyMessages) {
+      encounteredOneOfMyMessages = true
+      message.myLatestInConversation = true
+    } else {
+      message.myLatestInConversation = false
+    }
+    message.lastInGroup = !nextMessage || nextMessageDifferentAuthor || nextMessageMoreThan5Minutes
+    message.renderAuthor =
+      !message.mine && (!prevMessage || prevMessageDifferentAuthor || prevMessageMoreThan5Minutes)
+
+    enrichedMessages.push(message)
+    if (!prevMessage || date !== moment(prevMessage.createdAt).format('YYYY-MM-DD')) {
+      enrichedMessages.push({ type: 'DateSeparator', id: `day-divider-${message.id}`, date })
+    }
+  })
+
+  return enrichedMessages
+}
+
 const PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {
   const styles = usePressableHeaderStyle()
   const navigation = useNavigation()
@@ -143,3 +235,30 @@ const useStyles = () => {
     },
   })
 }
+
+/**
+ * useEnsureConversationsRouteExists
+ */
+const useEnsureConversationsRouteExists = () => {
+  const navigation = useNavigation()
+  const { params } = useRoute<RouteProp<ConversationScreenProps['route']>>()
+
+  useEffect(() => {
+    const navigationState = navigation.getState()
+    const routes = navigationState?.routes || []
+    const conversationsRoute = routes.find(r => r.name === 'Conversations')
+
+    if (conversationsRoute) return
+
+    navigation.dispatch(state => {
+      return CommonActions.reset({
+        ...state,
+        routes: [
+          { name: 'Conversations', params: { chat_group_graph_id: params?.chat_group_graph_id } },
+          ...routes,
+        ],
+        index: state.index + 1,
+      })
+    })
+  }, [navigation, params?.chat_group_graph_id])
+}

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

@@ -0,0 +1,21 @@
+import { Text } from '../../../components'
+import { StyleSheet } from 'react-native'
+
+export const GroupsWithoutChatDisclaimerRow = () => {
+  const styles = useStyles()
+
+  return (
+    <Text variant="footnote" style={styles.disclaimer}>
+      *You have additional groups without chat enabled or permissions to start a new conversation.
+    </Text>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    disclaimer: {
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+    },
+  })
+}

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,79 @@
+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'
+import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row'
+
+export const ConversationSelectGroupRecipientsScreen = ({
+  route,
+}: ConversationSelectRecipientsScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const { data: groups = [] } = useGroupsGroups()
+  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
+  const showGroupsDisclaimer = groups.length > groupsWithCreatePermission.length
+
+  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`}
+          />
+        )
+      }}
+      ListFooterComponent={showGroupsDisclaimer ? <GroupsWithoutChatDisclaimerRow /> : null}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    contentContainer: {
+      paddingBottom: bottom,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      padding: 16,
+      paddingBottom: 4,
+    },
+  })
+}

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -1,26 +1,28 @@
-import { PlatformPressable } from '@react-navigation/elements'
-import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+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 { 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'
+import { ViewMoreLinkRow } from './components/view_more_link_row'
+import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row'
+const MAX_VISIBLE_GROUPS = 5
 
-type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
-  chat_group_graph_id?: string
-}>
-
-const ASPECT_RATIO = 16 / 9
-const THUMBNAIL_WIDTH = 80
-const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
-
-export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipientsScreenProps) => {
+export const ConversationSelectRecipientsScreen = ({
+  route,
+}: ConversationSelectRecipientsScreenProps) => {
   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 hasGroupsWithoutChatPermission = groups.length > groupsWithCreatePermission.length
+  const showGroupsDisclaimer = hasGroupsWithoutChatPermission && !hasMoreGroups
 
   const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
     navigation.navigate('New', {
@@ -28,48 +30,61 @@ export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipie
       params: {
         group_id: group.id,
         source_app_name: 'Groups',
+        ...route.params,
+      },
+    })
+  }
+
+  const handleGroupsViewMore = () => {
+    navigation.navigate('New', {
+      screen: 'ConversationSelectGroupRecipients',
+      params: {
+        ...route.params,
       },
     })
   }
 
   return (
-    <ScrollView style={styles.container}>
+    <ScrollView contentContainerStyle={styles.contentContainer}>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <Heading>My groups</Heading>
+          <Heading variant="h3">My groups</Heading>
         </View>
         <View>
-          {groupsWithCreatePermission.map(group => (
-            <PlatformPressable
-              key={group.id}
-              style={styles.row}
-              onPress={() => handleNavigateToConversationNew(group)}
-            >
-              <Image
-                source={{ uri: group.headerImage?.thumbnail }}
-                resizeMode="cover"
-                style={styles.rowImage}
-                alt={`Image for ${group.name}`}
+          {visibleGroups.map(group => {
+            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`}
               />
-              <View>
-                <Heading variant="h3">{group.name}</Heading>
-                <Text>{group.membershipsCount} members</Text>
-              </View>
-              <Icon name="general.rightChevron" size={16} style={styles.rowIconRight} />
-            </PlatformPressable>
-          ))}
+            )
+          })}
+          {hasMoreGroups && (
+            <ViewMoreLinkRow
+              onPress={handleGroupsViewMore}
+              accessibilityHint="Navigate to a full list of your groups."
+            />
+          )}
+          {showGroupsDisclaimer && <GroupsWithoutChatDisclaimerRow />}
         </View>
       </View>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <Heading>Teams I lead</Heading>
+          <Heading variant="h3">Teams I lead</Heading>
           <Button
             style={styles.selectTeamsButton}
             onPress={() =>
               navigation.navigate('New', {
                 screen: 'ConversationFilterRecipients',
                 params: {
-                  conversation_id: '2196252',
+                  source_app_name: 'Services',
                 },
               })
             }
@@ -85,45 +100,22 @@ export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipie
 
 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,
-    },
-    rowIconRight: {
-      marginLeft: 'auto',
-      color: theme.colors.fillColorNeutral030,
-    },
-    routeDebug: {
-      alignContent: 'center',
-      padding: 16,
-      paddingBottom: bottom,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.fillColorNeutral050Base,
-    },
   })
 }

package/src/screens/conversation_select_recipients/types/screen_props.tsx

@@ -0,0 +1,11 @@
+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>

package/src/screens/conversations/components/list_header_component.tsx

@@ -1,8 +1,8 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
-import React, { useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
-import { useTheme } from '../../../hooks'
+import { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { ConversationScreenProps } from '../conversations_screen'
@@ -23,6 +23,8 @@ export const ListHeaderComponent = () => {
   const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
   const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}
 
+  const { unreadCount } = useCurrentPerson()
+  const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
 
   const active: FilterTypes = useMemo(() => {
@@ -37,6 +39,20 @@ export const ListHeaderComponent = () => {
     return FilterTypes.All
   }, [chat_group_graph_id, group_source_app_name])
 
+  const handleMarkAllRead = useCallback(() => {
+    currentPersonCache.update({ unreadCount: 0 })
+    markAllRead()
+  }, [currentPersonCache, markAllRead])
+
+  const alertMarkAllRead = useCallback(() => {
+    if (active === FilterTypes.All) return handleMarkAllRead()
+
+    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [
+      { text: 'Cancel' },
+      { text: 'OK', onPress: () => handleMarkAllRead() },
+    ])
+  }, [active, handleMarkAllRead])
+
   const showAppFilters = canFilterByGroups && canFilterByTeams
 
   return (
@@ -45,7 +61,7 @@ export const ListHeaderComponent = () => {
         <Heading numberOfLines={1} variant="h2">
           Conversations
         </Heading>
-        <TextButton onPress={() => markAllRead()} disabled={isPending}>
+        <TextButton onPress={alertMarkAllRead} disabled={isPending || !unreadCount}>
           Mark all read
         </TextButton>
       </View>