@planningcenter/chat-react-native 3.2.0-rc.1 → 3.2.0-rc.10

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'
@@ -27,8 +28,9 @@ import {
   ConversationFiltersScreen,
   ConversationFiltersScreenOptions,
 } from '../screens/conversation_filters_screen'
+import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
 
-export const CreateConversationStack = createNativeStackNavigator({
+export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
   screenOptions: {
     headerBackButtonDisplayMode: 'minimal',
@@ -50,8 +52,8 @@ export const CreateConversationStack = createNativeStackNavigator({
       screen: ConversationFilterRecipientsScreen,
       options: ConversationFilterReceipientsScreenOptions,
     },
-    ConversationCreate: {
-      screen: ConversationCreateScreen,
+    ConversationNew: {
+      screen: ConversationNewScreen,
       options: {
         title: 'New conversation',
         headerLeft: () => null,
@@ -85,6 +87,23 @@ export const ChatStack = createNativeStackNavigator({
     },
     Conversation: {
       screen: ConversationScreen,
+      options: ({ route, navigation }) => ({
+        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
+        headerLeft: props => (
+          <HeaderBackButton
+            displayMode="minimal"
+            onPress={() => {
+              if ((route.params as ConversationFiltersParams)?.chat_group_graph_id) {
+                // Ensure that conversations with a graph id pass them back to the conversation list
+                navigation.popTo('Conversations', route.params)
+              } else {
+                navigation.goBack()
+              }
+            }}
+            {...props}
+          />
+        ),
+      }),
     },
     ConversationDetails: {
       screen: ConversationDetailsScreen,
@@ -98,13 +117,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_filters/components/conversation_filters.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react'
-import { FlatList, RefreshControl, StyleSheet, View, ViewStyle } from 'react-native'
+import { FlatList, StyleSheet, View, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Heading } from '../../../components'
 import { useTheme } from '../../../hooks'

package/src/screens/conversation_filters/components/rows.tsx

@@ -14,13 +14,22 @@ import { ConversationFilterStackParamList } from '../screen_props'
 export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
 
 export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
-  const styles = useRowStyles()
+  const styles = useRowStyles({ isActive })
   const { setAppFilter } = useContext(FilterContext)
 
   return (
-    <PressableRow style={styles.row} onPress={() => setAppFilter({ group_source_app_name })}>
+    <PressableRow
+      style={styles.row}
+      onPress={() => setAppFilter({ group_source_app_name })}
+      isActive={isActive}
+    >
       <Text>{filter}</Text>
-      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+      <Icon
+        name="general.check"
+        size={16}
+        style={styles.rowIconRight}
+        accessibilityElementsHidden
+      />
     </PressableRow>
   )
 }
@@ -31,7 +40,7 @@ export type GroupRowProps = {
 }
 
 export const GroupRow = ({ group, isActive }: GroupRowProps) => {
-  const styles = useRowStyles()
+  const styles = useRowStyles({ isActive })
   const { setGroupFilter } = useContext(FilterContext)
 
   const handleFilterByGroup = () => {
@@ -41,7 +50,7 @@ export const GroupRow = ({ group, isActive }: GroupRowProps) => {
   const { headerImage, membershipsCount } = group
 
   return (
-    <PressableRow style={styles.row} onPress={handleFilterByGroup}>
+    <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
       {headerImage?.thumbnail && (
         <Image
           source={{ uri: headerImage?.thumbnail }}
@@ -50,13 +59,18 @@ export const GroupRow = ({ group, isActive }: GroupRowProps) => {
           alt={`Image for ${group.name}`}
         />
       )}
-      <View>
+      <View style={styles.rowContent}>
         <Heading variant="h3" style={styles.rowTitle}>
           {group.name}
         </Heading>
         {membershipsCount && <Text>{group.membershipsCount} members</Text>}
       </View>
-      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+      <Icon
+        name="general.check"
+        size={16}
+        style={styles.rowIconRight}
+        accessibilityElementsHidden
+      />
     </PressableRow>
   )
 }
@@ -67,12 +81,12 @@ export type TeamRowProps = {
 }
 
 export const TeamRow = ({ team }: TeamRowProps) => {
-  const styles = useRowStyles()
   const { setGroupFilter } = useContext(FilterContext)
   const servicesTeams = useServicesTeamsMap()
   const { params } = useContext(FilterContext)
   const { chat_group_graph_id } = params
   const isActive = chat_group_graph_id === team.id.toString()
+  const styles = useRowStyles({ isActive })
 
   const handleFilterByGroup = () => {
     setGroupFilter({ chat_group_graph_id: team.id })
@@ -82,14 +96,19 @@ export const TeamRow = ({ team }: TeamRowProps) => {
   const serviceTypeName = servicesTeam?.serviceTypeName || servicesTeam?.group
 
   return (
-    <PressableRow style={styles.row} onPress={handleFilterByGroup}>
-      <View>
+    <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
+      <View style={styles.rowContent}>
         <Heading variant="h3" style={styles.rowTitle}>
           {team.name}
         </Heading>
         <Text>{serviceTypeName}</Text>
       </View>
-      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+      <Icon
+        name="general.check"
+        size={16}
+        style={styles.rowIconRight}
+        accessibilityElementsHidden
+      />
     </PressableRow>
   )
 }
@@ -109,12 +128,18 @@ export const ViewMore = ({ routeName }: ViewMoreRowProps) => {
 
 export const PressableRow = ({
   children,
+  isActive,
   onPress,
   style,
-}: PropsWithChildren<{ onPress: () => void; style?: ViewStyle }>) => {
+}: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {
   const styles = useRowStyles()
   return (
-    <PlatformPressable style={styles.container} onPress={onPress}>
+    <PlatformPressable
+      style={styles.container}
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isActive }}
+    >
       <View style={[styles.innerContainer, style]}>{children}</View>
     </PlatformPressable>
   )
@@ -124,7 +149,7 @@ const ASPECT_RATIO = 16 / 9
 const THUMBNAIL_WIDTH = 80
 const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
 
-const useRowStyles = () => {
+const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
   const theme = useTheme()
   return StyleSheet.create({
     container: {
@@ -153,12 +178,17 @@ const useRowStyles = () => {
       height: THUMBNAIL_HEIGHT,
       borderRadius: 4,
     },
+    rowContent: {
+      flexShrink: 1,
+    },
     rowIconRight: {
       marginLeft: 'auto',
       color: theme.colors.statusSuccessIcon,
+      opacity: isActive ? 1 : 0,
     },
     rowTitle: {
       fontSize: 16,
+      flexShrink: 1,
     },
   })
 }

package/src/screens/conversation_filters/hooks/filters.ts

@@ -46,7 +46,7 @@ export const useGroupsToFilter = () => {
     () =>
       groups
         .map(group => {
-          const groupsGroup = groupsData.find(g => group.id.includes(g.id))
+          const groupsGroup = groupsData.find(g => group.id === `Groups-Group-${g.id}`)
           const { membershipsCount, headerImage } = groupsGroup || {}
 
           return {

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

@@ -0,0 +1,67 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { FlashList, type FlashListProps } from '@shopify/flash-list'
+import { MemberResource } from '../../../types'
+import { Person, Text } from '../../../components/display'
+import { useTheme } from '../../../hooks'
+
+interface FormListProps {
+  memberData: MemberResource[]
+  FormContent?: FlashListProps<MemberResource>['ListHeaderComponent']
+  listEmptyText?: string
+}
+
+export const FormList = ({ memberData, FormContent, listEmptyText }: FormListProps) => {
+  const styles = useStyles()
+
+  return (
+    <FlashList
+      data={memberData}
+      ListHeaderComponent={FormContent}
+      renderItem={({ item }) => <Person person={item} style={styles.person} />}
+      keyExtractor={item => item.id.toString()}
+      estimatedItemSize={45}
+      ListEmptyComponent={<ListEmptyText text={listEmptyText || 'No members found'} />}
+    />
+  )
+}
+
+const ListEmptyText = ({ text }: { text: string }) => {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.emptyTextContainer}>
+      <Text style={styles.emptyText}>{text}</Text>
+    </View>
+  )
+}
+
+export const Divider = () => {
+  const styles = useStyles()
+
+  return <View style={styles.divider} />
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    person: {
+      paddingHorizontal: 16,
+      paddingBottom: 12,
+    },
+    emptyTextContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 32,
+    },
+    emptyText: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+    divider: {
+      borderBottomWidth: 1,
+      borderBottomColor: colors.fillColorNeutral050Base,
+    },
+  })
+}

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

@@ -0,0 +1,191 @@
+import { StackActions, useNavigation } from '@react-navigation/native'
+import React, { useCallback, useState } from 'react'
+import { Platform, StyleSheet, TextInput, View } from 'react-native'
+import { Heading, Text } from '../../../components'
+import { ActionButton } from '../../../components/display/action_button'
+import { useSuspenseGet } from '../../../hooks'
+import { useApiClient } from '../../../hooks/use_api_client'
+import { useMutation } from '@tanstack/react-query'
+import {
+  ApiResource,
+  ConversationResource,
+  GroupsGroupResource,
+  ResourceObject,
+} from '../../../types'
+import { Divider, FormList } from './form_list'
+import { pluralize } from '../../../utils'
+import { KeyboardView } from '../../../components/display/keyboard_view'
+import { MemberErrorCard } from './member_error_card'
+import { useGroupMembersForNewConversation } from '../../../hooks/groups/use_group_members_for_new_conversation'
+
+type GroupsFormProps = {
+  groupId: number
+}
+
+interface ChatConversationPayload extends ResourceObject {
+  value: string
+}
+
+export const GroupsForm = ({ groupId }: GroupsFormProps) => {
+  const navigation = useNavigation()
+  const [title, setTitle] = useState<string>()
+  const apiClient = useApiClient()
+  const { data: group } = useSuspenseGet<GroupsGroupResource>({
+    url: `/me/groups/${groupId}`,
+    data: {
+      fields: {
+        Group: [],
+      },
+    },
+    app: 'groups',
+  })
+
+  const groupMemberships = useGroupMembersForNewConversation({ id: groupId })
+
+  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()
+      // navigate to the conversation screen
+      navigation.dispatch(
+        StackActions.push('Conversation', {
+          conversation_id,
+        })
+      )
+    },
+    [navigation]
+  )
+
+  return (
+    <KeyboardView>
+      <FormList
+        memberData={groupMemberships.data}
+        FormContent={
+          <FormContent
+            group={group}
+            title={title}
+            setTitle={setTitle}
+            isMemberError={groupMemberships.isError}
+          />
+        }
+      />
+      <ActionButton
+        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
+  isMemberError: boolean
+}
+
+function FormContent({ group, title, setTitle, isMemberError }: FormContentProps) {
+  const styles = useStyles()
+  const { name, membershipsCount } = group
+  const memberHeader = pluralize(membershipsCount, 'member')
+
+  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">{memberHeader} selected</Heading>
+        {isMemberError && (
+          <MemberErrorCard description="There was an issue loading group members, please refresh and try again." />
+        )}
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const sectionPadding = 16
+  const inputPadding = 8
+
+  return StyleSheet.create({
+    formContent: {
+      paddingVertical: sectionPadding,
+      flex: 1,
+    },
+    toSection: {
+      padding: sectionPadding,
+      flexDirection: 'row',
+      gap: 8,
+    },
+    groupName: {
+      fontSize: 18,
+    },
+    titleSection: {
+      padding: sectionPadding,
+      paddingBottom: Platform.select({
+        ios: sectionPadding,
+        android: sectionPadding - inputPadding,
+      }),
+      gap: Platform.select({
+        ios: 8,
+        android: 0,
+      }),
+    },
+    titleInput: {
+      fontSize: 18,
+    },
+    memberSection: {
+      padding: sectionPadding,
+      paddingBottom: 0,
+    },
+  })
+}

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { Banner } from '../../../components'
+
+export const MemberErrorCard = ({ description }: { description: string }) => {
+  const styles = useStyles()
+  return (
+    <View style={styles.memberErrorBanner}>
+      <Banner appearance="error" description={description} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    memberErrorBanner: {
+      paddingTop: 16,
+    },
+  })
+}

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

@@ -0,0 +1,24 @@
+import { StyleSheet, View } from 'react-native'
+import { Banner } from '../../../components'
+
+export const SourceAppErrorCard = () => {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.container}>
+      <Banner
+        appearance="error"
+        heading="Invalid Source App"
+        description="Something went wrong, try going back and selecting the recipient again."
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    container: {
+      padding: 16,
+    },
+  })
+}

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Text } from '../../../components'
+
+type TeamFormProps = {
+  initialTeamIds?: string[]
+  initialPlanId?: number
+}
+
+export const TeamsForm = ({ initialTeamIds, initialPlanId }: TeamFormProps) => {
+  console.log('initialTeamIds', initialTeamIds)
+  console.log('initialPlanId', initialPlanId)
+  return (
+    <View>
+      <Text>Services team form coming soon</Text>
+    </View>
+  )
+}

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -0,0 +1,26 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import React from 'react'
+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'
+
+type ConversationNewScreenProps = StaticScreenProps<{
+  group_id?: number
+  team_ids?: string[]
+  plan_id?: number
+  source_app_name: AppName
+}>
+
+export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {
+  const { group_id, team_ids, source_app_name, plan_id } = route.params
+
+  switch (source_app_name) {
+    case 'Groups':
+      return group_id ? <GroupsForm groupId={group_id} /> : <SourceAppErrorCard />
+    case 'Services':
+      return <TeamsForm initialTeamIds={team_ids} initialPlanId={plan_id} />
+    default:
+      return <SourceAppErrorCard />
+  }
+}