@planningcenter/chat-react-native 3.2.0-rc.8 → 3.2.0

package/src/screens/conversation_new/components/groups_form.tsx

@@ -1,32 +1,28 @@
 import { StackActions, useNavigation } from '@react-navigation/native'
-import React, { useCallback, useState } from 'react'
-import { StyleSheet, TextInput, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Text } from '../../../components'
+import React, { useCallback, useMemo, useState } from 'react'
+import { Platform, StyleSheet, TextInput, View } from 'react-native'
+import { Banner, ChildNotice, Heading, Text } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
-import { useSuspenseGet, useTheme } from '../../../hooks'
-import { useApiClient } from '../../../hooks/use_api_client'
-import { useMutation } from '@tanstack/react-query'
+import { KeyboardView } from '../../../components/display/keyboard_view'
+import { useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
 import {
-  ApiResource,
-  ConversationResource,
-  GroupsGroupResource,
-  ResourceObject,
-} from '../../../types'
+  GroupMembersForNewConversationResult,
+  useGroupMembersForNewConversation,
+} from '../../../hooks/groups/use_group_members_for_new_conversation'
+import { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'
+import { GroupsGroupResource } from '../../../types'
+import { GraphId } from '../../../types/resources/group_resource'
+import { pluralize } from '../../../utils'
+import { Divider, FormList } from './form_list'
 
 type GroupsFormProps = {
-  groupId?: string
+  groupId: number
+  chat_group_graph_id?: GraphId
 }
 
-interface ChatConversationPayload extends ResourceObject {
-  value: string
-}
-
-export const GroupsForm = ({ groupId }: GroupsFormProps) => {
-  const styles = useStyles()
+export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) => {
   const navigation = useNavigation()
   const [title, setTitle] = useState<string>()
-  const apiClient = useApiClient()
   const { data: group } = useSuspenseGet<GroupsGroupResource>({
     url: `/me/groups/${groupId}`,
     data: {
@@ -36,120 +32,150 @@ export const GroupsForm = ({ groupId }: GroupsFormProps) => {
     },
     app: 'groups',
   })
-  const { mutate: handleSave } = useMutation({
-    throwOnError: true,
-    onSuccess: result => {
-      handleRedirectToConversation({ conversation_id: result.data.id })
-    },
-    mutationFn: () =>
-      apiClient.groups
-        .post<ApiResource<ChatConversationPayload>>({
-          url: `/me/groups/${groupId}/chat_conversation_payload`,
-          data: {
-            data: {
-              type: '',
-              attributes: {
-                title,
-              },
-            },
-          },
-        })
-        .then(res => res.data.value)
-        .then(payload =>
-          apiClient.chat.post<ApiResource<ConversationResource>>({
-            url: '/me/conversations',
-            data: {
-              data: {
-                type: 'Conversation',
-                attributes: {
-                  payload,
-                },
-              },
-            },
-          })
-        ),
-  })
 
-  const handleRedirectToConversation = useCallback(
-    ({ conversation_id }: { conversation_id: number }) => {
-      // exit from the create stack
-      navigation.getParent()?.goBack()
+  const groupMemberships = useGroupMembersForNewConversation({ id: groupId })
+
+  const redirectToConversation = useCallback(
+    (conversationId: number) => {
       // navigate to the conversation screen
       navigation.dispatch(
-        StackActions.push('Conversation', {
-          conversation_id,
+        StackActions.popTo('Conversation', {
+          conversation_id: conversationId,
+          chat_group_graph_id,
         })
       )
     },
-    [navigation]
+    [chat_group_graph_id, navigation]
   )
 
+  const { mutate: handleSave } = useGroupsConversationCreate({
+    groupId,
+    title,
+    onSuccess: redirectToConversation,
+  })
+
   return (
-    <View style={styles.container}>
-      <View style={styles.section}>
-        <View style={styles.to}>
-          <Text>To:</Text>
-          <View>
-            <Text>{group.name}</Text>
-            <Text>{group.membershipsCount} members</Text>
-          </View>
-        </View>
-        <View style={styles.titleContainer}>
-          <Text style={styles.titleLabel}>Title</Text>
-          <TextInput
-            placeholder="Topic of conversation (required)"
-            value={title}
-            onChangeText={setTitle}
-            style={styles.titleInput}
+    <KeyboardView>
+      <FormList
+        memberData={groupMemberships.adultMembers}
+        FormContent={
+          <FormContent
+            group={group}
+            title={title}
+            setTitle={setTitle}
+            groupMemberships={groupMemberships}
           />
-        </View>
+        }
+      />
+      <ActionButton
+        disabled={!title}
+        title="Start Conversation"
+        onPress={() => handleSave()}
+        infoText="Conversation will be automatically updated if any members are added or removed from this group."
+      />
+    </KeyboardView>
+  )
+}
+
+interface FormContentProps {
+  group: GroupsGroupResource
+  title?: string
+  setTitle: (title: string) => void
+  groupMemberships: GroupMembersForNewConversationResult
+}
+
+function FormContent({ group, title, setTitle, groupMemberships }: FormContentProps) {
+  const styles = useStyles()
+  const currentPerson = useCurrentPerson()
+  const { name, membershipsCount } = group
+
+  const myGroupsMembership = useMemo(
+    () => groupMemberships.data.find(m => m.id === currentPerson.id),
+    [groupMemberships.data, currentPerson.id]
+  )
+  const isLeader = myGroupsMembership?.role === 'leader'
+
+  const childMembers = groupMemberships.childMembers
+  const hasChildren = childMembers.length > 0
+  const adultCount = groupMemberships.adultMembers.length
+  const memberCount = isLeader ? membershipsCount : adultCount
+  const memberHeaderLabel = `${pluralize(memberCount, 'member')} selected`
+
+  const showMemberError = groupMemberships.isError
+  const showChildNotice = hasChildren && isLeader
+
+  return (
+    <View style={styles.formContent}>
+      <View style={styles.toSection}>
+        <Heading variant="h3">To:</Heading>
+        <Text style={styles.groupName}>{name}</Text>
+      </View>
+      <Divider />
+      <View style={styles.titleSection}>
+        <Heading variant="h3">Title</Heading>
+        <TextInput
+          placeholder="Topic of conversation (required)"
+          value={title}
+          onChangeText={setTitle}
+          style={styles.titleInput}
+          autoFocus={true}
+        />
+      </View>
+      <Divider />
+      <View style={styles.memberSection}>
+        <Heading variant="h3">{memberHeaderLabel}</Heading>
+        {showChildNotice && <ChildNotice childMembers={childMembers} style={styles.banner} />}
+        {showMemberError && (
+          <Banner
+            appearance="error"
+            description="There was an issue loading group members, please refresh and try again."
+            style={styles.banner}
+          />
+        )}
       </View>
-      <ActionButton title="Start Conversation" onPress={() => handleSave()} />
     </View>
   )
 }
 
 const useStyles = () => {
-  const { bottom } = useSafeAreaInsets()
-  const theme = useTheme()
+  const { colors } = useTheme()
+  const sectionPadding = 16
+  const inputPadding = 8
 
   return StyleSheet.create({
-    container: {
-      flex: 1,
-      gap: 8,
-    },
-    section: {
-      padding: 16,
+    formContent: {
+      paddingVertical: sectionPadding,
       flex: 1,
     },
-    sectionHeader: {
+    toSection: {
+      padding: sectionPadding,
       flexDirection: 'row',
-      justifyContent: 'space-between',
+      gap: 8,
     },
-    selectTeamsButton: {},
-    routeDebug: {
-      alignContent: 'center',
-      padding: 16,
-      paddingBottom: bottom,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.fillColorNeutral050Base,
+    groupName: {
+      fontSize: 18,
     },
-    titleContainer: {
-      paddingVertical: 12,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.fillColorNeutral050Base,
-      gap: 8,
+    titleSection: {
+      padding: sectionPadding,
+      paddingBottom: Platform.select({
+        ios: sectionPadding,
+        android: sectionPadding - inputPadding,
+      }),
+      gap: Platform.select({
+        ios: 8,
+        android: 0,
+      }),
     },
     titleInput: {
       fontSize: 18,
+      color: colors.textColorDefaultPrimary,
     },
-    titleLabel: {},
-    to: {
-      flexDirection: 'row',
-      gap: 8,
-      paddingVertical: 12,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.fillColorNeutral050Base,
+    memberSection: {
+      padding: sectionPadding,
+      paddingBottom: 0,
+    },
+    banner: {
+      marginTop: 16,
     },
   })
 }

package/src/screens/conversation_new/components/team_form.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Text } from '../../../components'
 
 type TeamFormProps = {
-  initialTeamIds?: string[]
+  initialTeamIds?: number[]
   initialPlanId?: number
 }
 

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -4,20 +4,27 @@ import { GroupsForm } from './components/groups_form'
 import { TeamsForm } from './components/team_form'
 import { SourceAppErrorCard } from './components/source_app_error_card'
 import { AppName } from '../../types/resources/app_name'
+import { GraphId } from '../../types/resources/group_resource'
 
 type ConversationNewScreenProps = StaticScreenProps<{
-  group_id?: string
-  team_ids?: string[]
+  group_id?: number
+  team_ids?: number[]
   plan_id?: number
   source_app_name: AppName
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: AppName
 }>
 
 export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {
-  const { group_id, team_ids, source_app_name, plan_id } = route.params
+  const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id } = route.params
 
   switch (source_app_name) {
     case 'Groups':
-      return <GroupsForm groupId={group_id} />
+      return group_id ? (
+        <GroupsForm groupId={group_id} chat_group_graph_id={chat_group_graph_id} />
+      ) : (
+        <SourceAppErrorCard />
+      )
     case 'Services':
       return <TeamsForm initialTeamIds={team_ids} initialPlanId={plan_id} />
     default:

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