@planningcenter/chat-react-native 3.30.0 → 3.30.1-qa-618.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/hooks/index.ts

@@ -1,24 +1,23 @@
-export * from './use_async_storage'
 export * from './use_animated_message_background_color'
-export * from './use_theme'
-export * from './use_suspense_api'
+export * from './use_api_client'
+export * from './use_api'
+export * from './use_async_storage'
+export * from './use_at_font_scale_breakpoint'
+export * from './use_chat_permissions'
+export * from './use_create_android_ripple_color'
 export * from './use_current_person'
 export * from './use_deleting_ids'
 export * from './use_font_scale'
-export * from './use_create_android_ripple_color'
-export * from './use_chat_permissions'
-export * from './use_api_client'
 export * from './use_groups_groups'
 export * from './use_groups'
-export * from './use_api'
-export * from './use_api_client'
-export * from './use_message_reaction_toggle'
 export * from './use_interaction_ghost_color'
-export * from './use_at_font_scale_breakpoint'
+export * from './use_message_reaction_toggle'
+export * from './use_new_conversation_entry'
+export * from './use_organization'
+export * from './use_people_person'
+export * from './use_product_analytics'
 export * from './use_qualified_by_age'
 export * from './use_scalable_number_of_lines'
 export * from './use_submit_age_check'
-export * from './use_organization'
-export * from './use_product_analytics'
-export * from './use_people_person'
-export * from './use_new_conversation_entry'
+export * from './use_suspense_api'
+export * from './use_theme'

package/src/hooks/services/use_find_or_create_services_conversation.ts

@@ -114,7 +114,7 @@ export const findConversationWithExactTeams = (
     url: '/me/conversations',
     data: {
       fields: {
-        Conversation: ['stream_channel', 'title'],
+        Conversation: ['title'],
       },
       filter: 'with_exact_groups',
       gids: groupIdentifiers.join(','),
@@ -136,7 +136,7 @@ export const findExactTeamConversation = (apiClient: ApiClient, groupIdentifiers
     url: '/me/conversations',
     data: {
       fields: {
-        Conversation: ['stream_channel', 'title'],
+        Conversation: ['title'],
       },
       filter: 'with_exact_groups',
       gids: groupIdentifiers.join(','),

package/src/hooks/use_teams.ts

@@ -18,9 +18,3 @@ export const useTeams = () => {
     app: 'chat',
   })
 }
-
-export const useCanDisplayTeams = () => {
-  const { data: teams = [] } = useTeams()
-
-  return teams?.length > 0
-}

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

@@ -89,8 +89,6 @@ export function DesignSystemScreen() {
   return (
     <ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
       <ThemeSection />
-      {/* TODO: Enable & update when we install @planningcenter/tapestry */}
-      {/* <TokensSection /> */}
       <IndicatorsSection />
       <HeadingTextSection />
       <PressablesSection />
@@ -166,56 +164,6 @@ function ThemeSection({ isLast }: SectionProps) {
   )
 }
 
-// function TokensSection({ isLast }: SectionProps) {
-//   return (
-//     <CollapsableSection title="Tokens" isLast={isLast}>
-//       <TextGroup>
-//         <TextRow>
-//           <Heading variant="h3">What are they?</Heading>
-//           <Text>
-//             Tokens are UX approved CSS values that we can use to style our UI in a consistent way.
-//             (e.g. colors, spacing amounts, and font weights.)
-//           </Text>
-//         </TextRow>
-//         <TextRow>
-//           <Heading variant="h3">Where do they come from?</Heading>
-//           <Text>
-//             Tokens primarily come from our internal `@planningcenter/tapestry` package. However, at
-//             this time the package only support light mode colors, so Chat uses a workaround.
-//           </Text>
-//           <Text>Color-based tokens are infused into our theming system with two local files…</Text>
-//           <TextListItem label="1. `src/vendor/tapestry/tokens`:">
-//             Primitive color values are stored* here. Primitives capture light or dark mode values,
-//             but don't take into account the devices's colors scheme.
-//           </TextListItem>
-//           <TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
-//             Alias tokens reference the primitive color values token file* in light and dark mode
-//             specfic objects. Our theming system then selects the right color to use based on the
-//             device's color scheme.
-//           </TextListItem>
-//           <Text variant="footnote">
-//             *If available, reference the color from the Tapestry package instead.
-//           </Text>
-//         </TextRow>
-//         <TextRow>
-//           <Heading variant="h3">How do we use them?</Heading>
-//           <Text>There are two places to reference tokens at this time…</Text>
-//           <TextListItem label="• Color tokens:">
-//             Reference them from our internal `useTheme` hook to ensure the correct light or dark
-//             mode color token is used.
-//           </TextListItem>
-//           <TextListItem label="• All other tokens:">
-//             Use the `computedToken` function from `@planningcenter/tapestry` by passing it a string
-//             with the token's name. This function provides Typescript support and maps to the token's
-//             raw CSS value. There is another function called `token`, but it maps to CSS custom
-//             properties which React Native doesn't support.
-//           </TextListItem>
-//         </TextRow>
-//       </TextGroup>
-//     </CollapsableSection>
-//   )
-// }
-
 function IndicatorsSection({ isLast }: SectionProps) {
   return (
     <CollapsableSection title="Indicators" isLast={isLast}>

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