@planningcenter/chat-react-native 3.30.0 → 3.31.0-rc.0

package/src/components/conversation/system_message.tsx

@@ -0,0 +1,130 @@
+import { useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { useAnimatedMessageBackgroundColor, useTheme } from '../../hooks'
+import { ReactionCountResource } from '../../types/resources/reaction'
+import { Haptic } from '../../utils/native_adapters'
+import { SystemMessageResource } from '../../utils/system_messages'
+import { Text } from '../display'
+import { MessageReaction } from './message_reaction'
+
+interface SystemMessageProps {
+  message: SystemMessageResource
+  conversationId: number
+}
+
+export function SystemMessage({ message, conversationId }: SystemMessageProps) {
+  const { reactionCounts, systemTextParts, personIdsForSystemEvent } = message
+  const { names, overflowCount, action } = systemTextParts
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const { colors } = useTheme()
+  const text = systemMessageText(names, overflowCount, action)
+  const hasPeople = personIdsForSystemEvent.length > 0
+  const hasReactions = reactionCounts.length > 0
+  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
+    useAnimatedMessageBackgroundColor()
+
+  const handlePress = () => {
+    navigation.navigate('SystemMessagePeople', {
+      conversation_id: conversationId,
+      person_ids: personIdsForSystemEvent,
+    })
+  }
+
+  const handleLongPress = () => {
+    Haptic.impactLight()
+    navigation.navigate('MessageActions', {
+      message_id: message.id,
+      conversation_id: conversationId,
+      isSystemMessage: true,
+    })
+  }
+
+  const handleReactionLongPress = (reaction: ReactionCountResource) => {
+    Haptic.impactLight()
+    navigation.navigate('Reactions', {
+      message_id: message.id,
+      conversation_id: conversationId,
+      reaction_value: reaction.value,
+    })
+  }
+
+  return (
+    <Pressable
+      onPress={hasPeople ? handlePress : undefined}
+      onLongPress={handleLongPress}
+      onPressIn={handleMessagePressIn}
+      onPressOut={handleMessagePressOut}
+      android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
+      accessibilityRole="button"
+      accessibilityHint={
+        hasPeople
+          ? 'Tap to see people. Long press for message actions.'
+          : 'Long press for message actions.'
+      }
+    >
+      <Animated.View style={[styles.container, animatedBackgroundColor]}>
+        <Text variant="tertiary" style={styles.text}>
+          {text}
+        </Text>
+        {hasReactions && (
+          <View style={styles.reactions}>
+            {message.reactionCounts.map(reaction => (
+              <MessageReaction
+                key={reaction.value}
+                reaction={reaction}
+                onLongPress={handleReactionLongPress}
+                message={message}
+                conversationId={conversationId}
+              />
+            ))}
+          </View>
+        )}
+      </Animated.View>
+    </Pressable>
+  )
+}
+
+function systemMessageText(names: string[], overflowCount: number, action: string): string {
+  if (overflowCount > 0) {
+    const overflowLabel = `${overflowCount} ${overflowCount === 1 ? 'other' : 'others'}`
+    return `${names.join(', ')}, and ${overflowLabel} ${action}`
+  }
+
+  switch (names.length) {
+    case 0:
+      return `Someone ${action}`
+    case 1:
+      return `${names[0]} ${action}`
+    case 2:
+      return `${names[0]} and ${names[1]} ${action}`
+    // Backend guarantees names.length <= 3 when overflowCount is 0;
+    // overflow branch handles 4+ people.
+    default:
+      return `${names[0]}, ${names[1]}, and ${names[2]} ${action}`
+  }
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    container: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      alignItems: 'center',
+    },
+    text: {
+      color: colors.textColorDefaultSecondary,
+      textAlign: 'center',
+    },
+    reactions: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      gap: 4,
+      marginTop: 8,
+    },
+  })
+}

package/src/navigation/index.tsx

@@ -71,6 +71,10 @@ import { NotificationSettingsScreen } from '../screens/notification_settings_scr
 import { PreferredAppSelectionScreen } from '../screens/preferred_app_selection_screen'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
+import {
+  SystemMessagePeopleScreen,
+  SystemMessagePeopleScreenOptions,
+} from '../screens/system_message_people_screen'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
 import { ScreenLayoutWithChatAccessGate } from './screenLayout'
 
@@ -333,6 +337,10 @@ export const ChatStack = createNativeStackNavigator({
       screen: ReactionsScreen,
       options: ReactionsScreenOptions,
     },
+    SystemMessagePeople: {
+      screen: SystemMessagePeopleScreen,
+      options: SystemMessagePeopleScreenOptions,
+    },
     MessageReadReceipts: {
       screen: MessageReadReceiptsScreen,
       options: MessageReadReceiptsScreenOptions,

package/src/screens/conversation_screen.tsx

@@ -21,6 +21,7 @@ import {
   MemberMessagesDisabledBanner,
 } from '../components/conversation/messages_disabled_banners'
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
+import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
 import BlankState from '../components/primitive/blank_state_primitive'
@@ -40,6 +41,7 @@ import { ConversationBadgeResource } from '../types/resources/conversation_badge
 import { getRelativeDateStatus } from '../utils/date'
 import dayjs from '../utils/dayjs'
 import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
+import { isSystemMessage } from '../utils/system_messages'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -188,6 +190,10 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
                 )
               }
 
+              if (isSystemMessage(item)) {
+                return <SystemMessage message={item} conversationId={conversation_id} />
+              }
+
               return (
                 <Message
                   {...item}
@@ -293,6 +299,25 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
     const prevMessage = ms[i + 1]
     const nextMessage = ms[i - 1]
     const date = dayjs(message.createdAt).format('YYYY-MM-DD')
+
+    const prevMessageIsDateSeparator =
+      prevMessage && date !== dayjs(prevMessage.createdAt).format('YYYY-MM-DD')
+
+    if (isSystemMessage(message)) {
+      message.myLatestInConversation = false
+      message.lastInGroup = true
+      message.renderAuthor = false
+      message.nextRendersAuthor = nextMessage?.renderAuthor
+      message.isReplyShadowMessage = false
+      message.nextIsReplyShadowMessage = false
+      message.threadPosition = null
+      enrichedMessages.push(message)
+      if (prevMessageIsDateSeparator) {
+        enrichedMessages.push({ type: 'DateSeparator', id: `day-divider-${message.id}`, date })
+      }
+      return
+    }
+
     const inThread = message.replyRootId !== null
     const nextMessageInThread = nextMessage?.replyRootId !== null
     const threadRoot = message.replyRootId === message.id
@@ -307,8 +332,6 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
     const nextMessageMoreThan5Minutes =
       nextMessage &&
       new Date(nextMessage.createdAt).getTime() - new Date(message.createdAt).getTime() > 60000 * 5
-    const prevMessageIsDateSeparator =
-      prevMessage && date !== dayjs(prevMessage.createdAt).format('YYYY-MM-DD')
     const nextMessageIsDateSeparator =
       nextMessage && date !== dayjs(nextMessage.createdAt).format('YYYY-MM-DD')
     const insertReplyShadowMessage =

package/src/screens/index.ts

@@ -20,3 +20,4 @@ export * from './conversation_select_recipients/conversation_select_group_recipi
 export * from './conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
 export * from './attachment_actions/attachment_actions_screen'
 export * from './conversations/conversations_screen'
+export * from './system_message_people_screen'

package/src/screens/message_actions_screen.tsx

@@ -28,6 +28,7 @@ export type MessageActionsScreenProps = StaticScreenProps<{
   conversation_id: number
   canDeleteNonAuthoredMessages?: boolean
   inReplyScreen?: boolean
+  isSystemMessage?: boolean
 }>
 
 export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
@@ -37,6 +38,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     canDeleteNonAuthoredMessages,
     inReplyScreen,
     reply_root_author_name,
+    isSystemMessage,
   } = route.params
 
   const { messages, refetch } = useConversationMessages(
@@ -55,6 +57,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
       refetchMessages={refetch}
       inReplyScreen={inReplyScreen}
       replyRootAuthorName={reply_root_author_name}
+      isSystemMessage={isSystemMessage}
     />
   )
 }
@@ -66,6 +69,7 @@ function MessageActionsScreenContent({
   refetchMessages,
   inReplyScreen,
   replyRootAuthorName,
+  isSystemMessage,
 }: {
   message: MessageResource
   conversation_id: number
@@ -73,6 +77,7 @@ function MessageActionsScreenContent({
   refetchMessages: () => void
   inReplyScreen?: boolean
   replyRootAuthorName?: string
+  isSystemMessage?: boolean
 }) {
   const navigation = useNavigation()
   const apiClient = useApiClient()
@@ -240,65 +245,67 @@ function MessageActionsScreenContent({
           />
         ))}
       </View>
-      <View style={styles.actions}>
-        {!inReplyScreen && (
+      {!isSystemMessage && (
+        <View style={styles.actions}>
+          {!inReplyScreen && (
+            <FormSheet.Action
+              onPress={handleReplyPress}
+              title="Reply to message"
+              iconName="registrations.undo"
+              accessibilityHint="Navigates to the reply screen"
+              accessibilityRole="link"
+            />
+          )}
           <FormSheet.Action
-            onPress={handleReplyPress}
-            title="Reply to message"
-            iconName="registrations.undo"
-            accessibilityHint="Navigates to the reply screen"
-            accessibilityRole="link"
+            onPress={handleCopyPress}
+            title="Copy text"
+            iconName="services.fileCopy"
+            accessibilityHint="Copies text and links to clipboard"
           />
-        )}
-        <FormSheet.Action
-          onPress={handleCopyPress}
-          title="Copy text"
-          iconName="services.fileCopy"
-          accessibilityHint="Copies text and links to clipboard"
-        />
-        {showReportMessageAction && (
-          <FormSheet.Action
-            onPress={handleReportPress}
-            title="Report message"
-            iconName="chat.reportMessageO"
-            accessibilityHint="Opens a form to report this message"
-          />
-        )}
-        {message?.mine && (
-          <FormSheet.Action
-            onPress={() => handleEditPress()}
-            title="Edit message"
-            iconName="accounts.editor"
-            accessibilityHint="Opens existing text in the message form input."
-          />
-        )}
-        {message?.mine && (
-          <FormSheet.Action
-            onPress={() => handleViewReadReceiptsPress()}
-            title="View read receipts"
-            iconName="general.checkPerson"
-            accessibilityHint="Opens a modal with a list of people who read your message."
-          />
-        )}
-        {message?.mine && hasExpandedLink && (
-          <FormSheet.Action
-            onPress={() => handleRemoveLinkPreviewConfirm()}
-            title="Remove link preview"
-            iconName="general.brokenLink"
-            accessibilityHint="Removes an expanded link preview from the message."
-          />
-        )}
-        {(message?.mine || canDeleteNonAuthoredMessages) && (
-          <FormSheet.Action
-            onPress={() => handleDeleteConfirm()}
-            title="Delete message"
-            iconName="publishing.trash"
-            appearance="danger"
-            disabled={isPending}
-            accessibilityHint="Opens a confirmation alert to delete this message permanently."
-          />
-        )}
-      </View>
+          {showReportMessageAction && (
+            <FormSheet.Action
+              onPress={handleReportPress}
+              title="Report message"
+              iconName="chat.reportMessageO"
+              accessibilityHint="Opens a form to report this message"
+            />
+          )}
+          {message?.mine && (
+            <FormSheet.Action
+              onPress={() => handleEditPress()}
+              title="Edit message"
+              iconName="accounts.editor"
+              accessibilityHint="Opens existing text in the message form input."
+            />
+          )}
+          {message?.mine && (
+            <FormSheet.Action
+              onPress={() => handleViewReadReceiptsPress()}
+              title="View read receipts"
+              iconName="general.checkPerson"
+              accessibilityHint="Opens a modal with a list of people who read your message."
+            />
+          )}
+          {message?.mine && hasExpandedLink && (
+            <FormSheet.Action
+              onPress={() => handleRemoveLinkPreviewConfirm()}
+              title="Remove link preview"
+              iconName="general.brokenLink"
+              accessibilityHint="Removes an expanded link preview from the message."
+            />
+          )}
+          {(message?.mine || canDeleteNonAuthoredMessages) && (
+            <FormSheet.Action
+              onPress={() => handleDeleteConfirm()}
+              title="Delete message"
+              iconName="publishing.trash"
+              appearance="danger"
+              disabled={isPending}
+              accessibilityHint="Opens a confirmation alert to delete this message permanently."
+            />
+          )}
+        </View>
+      )}
     </FormSheet.Root>
   )
 }

package/src/screens/system_message_people_screen.tsx

@@ -0,0 +1,94 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import React, { memo } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Avatar, Text } from '../components'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useSuspenseGet } from '../hooks'
+import { MemberResource } from '../types'
+
+export const SystemMessagePeopleScreenOptions = getFormSheetScreenOptions({
+  sheetAllowedDetents: Platform.select({
+    android: [0.5, 0.94],
+    default: [0.5, 1],
+  }),
+  headerTitle: 'People',
+})
+
+export type SystemMessagePeopleScreenProps = StaticScreenProps<{
+  conversation_id: number
+  person_ids: number[]
+}>
+
+export function SystemMessagePeopleScreen({ route }: SystemMessagePeopleScreenProps) {
+  const { conversation_id, person_ids } = route.params
+  const styles = useStyles()
+
+  const { data: members } = useSuspenseGet<MemberResource[]>({
+    url: `/me/conversations/${conversation_id}/members`,
+    data: {
+      fields: {
+        Member: ['id', 'name', 'avatar'],
+      },
+      where: {
+        id: person_ids,
+      },
+      limit: person_ids.length,
+    },
+  })
+
+  const orderById = Object.fromEntries(person_ids.map((id, i) => [id, i]))
+  const sortedMembers = [...members].sort((a, b) => (orderById[a.id] ?? 0) - (orderById[b.id] ?? 0))
+
+  return (
+    <FormSheet.Root contentStyle={styles.formSheetContent}>
+      <FlatList
+        data={sortedMembers}
+        contentContainerStyle={styles.contentContainer}
+        keyExtractor={item => item.id.toString()}
+        renderItem={({ item }) => <Person person={item} />}
+      />
+    </FormSheet.Root>
+  )
+}
+
+type PersonProps = Pick<MemberResource, 'id' | 'name' | 'avatar'>
+
+const Person = memo(({ person }: { person: PersonProps }) => {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.personRow}>
+      <Avatar sourceUri={person.avatar} size="sm" />
+      <Text variant="tertiary" numberOfLines={2} style={styles.personName}>
+        {person.name}
+      </Text>
+    </View>
+  )
+})
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    formSheetContent: {
+      paddingTop: 16,
+    },
+    contentContainer: {
+      paddingTop: 8,
+      paddingBottom: bottom + 24,
+    },
+    personRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      flex: 1,
+    },
+    personName: {
+      flex: 1,
+    },
+  })
+}

package/src/types/jolt_events/message_events.ts

@@ -18,6 +18,9 @@ interface BaseMessageEventData extends Record<string, unknown> {
     idempotent_key?: string | null
     reply_count: number
     reply_root_id: string | null
+    message_type: string
+    system_event_person_ids: number[] | null
+    system_text_parts: { names: string[]; overflow_count: number; action: string } | null
   }
 }
 

package/src/types/resources/message.ts

@@ -17,6 +17,9 @@ export interface MessageResource {
   reactionCounts: ReactionCountResource[]
   replyCount: number
   replyRootId?: string | null
+  messageType: string
+  personIdsForSystemEvent?: number[] | null
+  systemTextParts?: { names: string[]; overflowCount: number; action: string } | null
 
   // Custom Local Properties we set for rendering
   renderAuthor?: boolean

package/src/utils/cache/optimistically_create_message.ts

@@ -34,6 +34,7 @@ export function optimisticallyCreateMessage({
   const optimisticMessage: MessageResource = {
     ...message,
     type: 'Message',
+    messageType: 'user',
     id,
     text,
     html: '', // Will be filled by server

package/src/utils/index.ts

@@ -10,3 +10,4 @@ export * from './reaction_constants'
 export * from './destructure_chat_group_graph_id'
 export * from './convert_attachments_for_create'
 export * from './assert_keys_are_numbers'
+export * from './system_messages'

package/src/utils/jolt/transform_message_event_data_to_message_resource.ts

@@ -29,5 +29,14 @@ export function transformMessageEventDataToMessageResource({
     reactionCounts: [],
     replyCount: data.reply_count || 0,
     replyRootId: data.reply_root_id || null,
+    messageType: data.message_type,
+    personIdsForSystemEvent: data.system_event_person_ids,
+    systemTextParts: data.system_text_parts
+      ? {
+          names: data.system_text_parts.names,
+          overflowCount: data.system_text_parts.overflow_count,
+          action: data.system_text_parts.action,
+        }
+      : null,
   }
 }

package/src/utils/request/messages_data_options.ts

@@ -10,6 +10,9 @@ export const getMessageFields = {
     'reaction_counts',
     'reply_count',
     'reply_root',
+    'message_type',
+    'person_ids_for_system_event',
+    'system_text_parts',
   ],
   Person: ['name', 'avatar'],
   ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],

package/src/utils/system_messages.ts

@@ -0,0 +1,16 @@
+import { MessageResource } from '../types'
+
+const SYSTEM_MESSAGE_TYPES = ['user_joined'] as const
+
+type SystemMessageType = (typeof SYSTEM_MESSAGE_TYPES)[number]
+
+export interface SystemMessageResource extends MessageResource {
+  messageType: SystemMessageType
+  systemTextParts: { names: string[]; overflowCount: number; action: string }
+  personIdsForSystemEvent: number[]
+}
+
+export const isSystemMessage = (message: MessageResource): message is SystemMessageResource =>
+  SYSTEM_MESSAGE_TYPES.includes(message.messageType as SystemMessageType) &&
+  message.systemTextParts != null &&
+  message.personIdsForSystemEvent != null