@planningcenter/chat-react-native 3.2.0-rc.2 → 3.2.0-rc.21

package/src/screens/conversation_filter_recipients/hooks/use_service_types_with_teams.ts

@@ -0,0 +1,90 @@
+import { useCallback, useMemo } from 'react'
+import { useApiGet } from '../../../hooks/use_api'
+import { ResourceObject } from '../../../types'
+import { ServiceTypeWithTeams } from '../types'
+import { uniqBy } from 'lodash'
+
+export function useServiceTypesWithTeams() {
+  const response = useApiGet<ServicesChatResource>({
+    url: `/chat`,
+    data: {
+      fields: {
+        Chat: ['teams_i_lead'],
+      },
+    },
+    app: 'services',
+  })
+
+  const { data, isFetching, isError, error } = response
+
+  const teamsILead = data?.teamsILead || stableEmptyTeamResponseArray
+
+  const decoratedResponse = useMemo(() => {
+    return decorateTeamResponseItems(teamsILead)
+  }, [teamsILead])
+
+  const hasNoServicesAccess = useCallback(() => {
+    if (isError && error) {
+      const errorArray = error
+      const allErrors = errorArray.errors.map(e => e.detail)
+      if (allErrors.some(e => e.includes(NOT_IN_APPLICATION_CODE))) {
+        return true
+      }
+    }
+    return false
+  }, [isError, error])
+
+  return {
+    serviceTypes: decoratedResponse,
+    isFetching,
+    isError,
+    noServicesAccess: hasNoServicesAccess(),
+  }
+}
+
+function decorateTeamResponseItems(teamResponseItems: TeamResponseItem[]) {
+  return teamResponseItems
+    .map(({ value, serviceTypeName, teamName }) => ({
+      service_type: {
+        id: value.serviceTypeId,
+        name: serviceTypeName,
+      },
+      team: {
+        id: value.teamId,
+        name: teamName,
+      },
+    }))
+    .reduce((acc: ServiceTypeWithTeams[], { service_type, team }) => {
+      let serviceTypeEntry = acc.find(entry => entry.id === service_type.id)
+
+      if (!serviceTypeEntry) {
+        serviceTypeEntry = {
+          id: service_type.id,
+          name: service_type.name,
+          teams: [],
+        }
+        acc.push(serviceTypeEntry)
+      }
+      const initialTeams = serviceTypeEntry.teams
+      serviceTypeEntry.teams = uniqBy([...initialTeams, team], 'id')
+      return acc
+    }, [])
+}
+
+interface TeamResponseItem {
+  value: {
+    teamId: number
+    serviceTypeId: number
+  }
+  name: string
+  teamName: string
+  serviceTypeName: string
+  order: string[]
+}
+
+interface ServicesChatResource extends ResourceObject {
+  teamsILead: TeamResponseItem[]
+}
+
+const stableEmptyTeamResponseArray: TeamResponseItem[] = []
+const NOT_IN_APPLICATION_CODE = 'TRASH_PANDA'

package/src/screens/conversation_filter_recipients/types.tsx

@@ -0,0 +1,47 @@
+import { type ViewStyle } from 'react-native'
+import { AppName } from '../../types/resources/app_name'
+import { StaticScreenProps } from '@react-navigation/native'
+
+export interface ServiceTypeWithTeams {
+  id: number
+  name: string
+  teams: {
+    id: number
+    name: string
+  }[]
+}
+
+export enum SectionTypes {
+  header,
+  team,
+}
+
+export interface ServiceTypeProps {
+  serviceTypeName: string
+  serviceTypeId: number
+  teamIdsForServiceType: number[]
+}
+
+export interface TeamProps {
+  teamName: string
+  teamId: number
+  serviceTypeId: number
+}
+
+export type SectionListData = Array<
+  DataItem<ServiceTypeProps, SectionTypes.header> | DataItem<TeamProps, SectionTypes.team>
+>
+
+interface DataItem<T, TName extends SectionTypes> {
+  type: TName
+  data: T
+  sectionStyle?: ViewStyle
+}
+
+export type ConversationFilterRecipientsParams = {
+  source_app_name?: AppName
+  team_ids?: number[]
+}
+
+export type ConversationFilterRecipientsScreenProps =
+  StaticScreenProps<ConversationFilterRecipientsParams>

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,163 @@
+import { StackActions, useNavigation } from '@react-navigation/native'
+import React, { useCallback, 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 } from '../../../hooks'
+import { GroupsGroupResource, MemberResource } from '../../../types'
+import { Divider, FormList } from './form_list'
+import { pluralize } from '../../../utils'
+import { KeyboardView } from '../../../components/display/keyboard_view'
+import { useGroupMembersForNewConversation } from '../../../hooks/groups/use_group_members_for_new_conversation'
+import { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'
+
+type GroupsFormProps = {
+  groupId: number
+}
+
+export const GroupsForm = ({ groupId }: GroupsFormProps) => {
+  const navigation = useNavigation()
+  const [title, setTitle] = useState<string>()
+  const { data: group } = useSuspenseGet<GroupsGroupResource>({
+    url: `/me/groups/${groupId}`,
+    data: {
+      fields: {
+        Group: [],
+      },
+    },
+    app: 'groups',
+  })
+
+  const redirectToConversation = useCallback(
+    (conversationId: number) => {
+      // exit from the create stack
+      navigation.getParent()?.goBack()
+      // navigate to the conversation screen
+      navigation.dispatch(
+        StackActions.push('Conversation', {
+          conversation_id: conversationId,
+        })
+      )
+    },
+    [navigation]
+  )
+
+  const groupMemberships = useGroupMembersForNewConversation({ id: groupId })
+
+  const { mutate: handleSave } = useGroupsConversationCreate({
+    groupId,
+    title,
+    onSuccess: redirectToConversation,
+  })
+
+  return (
+    <KeyboardView>
+      <FormList
+        memberData={groupMemberships.adultMembers}
+        FormContent={
+          <FormContent
+            group={group}
+            title={title}
+            setTitle={setTitle}
+            isMemberError={groupMemberships.isError}
+            childMembers={groupMemberships.childMembers}
+          />
+        }
+      />
+      <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
+  isMemberError: boolean
+  childMembers: MemberResource[]
+}
+
+function FormContent({ group, title, setTitle, isMemberError, childMembers }: FormContentProps) {
+  const styles = useStyles()
+  const { name, membershipsCount } = group
+  const memberHeader = pluralize(membershipsCount, 'member')
+  const hasChildren = childMembers.length > 0
+
+  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>
+        {hasChildren && <ChildNotice childMembers={childMembers} style={styles.banner} />}
+        {isMemberError && (
+          <Banner
+            appearance="error"
+            description="There was an issue loading group members, please refresh and try again."
+            style={styles.banner}
+          />
+        )}
+      </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,
+    },
+    banner: {
+      marginTop: 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?: number[]
+  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,29 @@
+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'
+import { GraphId } from '../../types/resources/group_resource'
+
+type ConversationNewScreenProps = StaticScreenProps<{
+  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
+
+  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 />
+  }
+}

package/src/screens/conversation_screen.tsx

@@ -18,6 +18,7 @@ import { useConversationMessages } from '../hooks/use_conversation_messages'
 type ConversationRouteProps = {
   conversation_id: number
   chat_group_graph_id?: string
+  clear_input?: boolean
 }
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
@@ -57,7 +58,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
         />
         <MessageForm.Root conversation={conversation}>
           {/* <MessageForm.AttachmentPicker /> */}
-          {/* <MessageForm.Commands /> */}
+          <MessageForm.Commands />
           <MessageForm.TextInput />
           <MessageForm.SubmitButton />
         </MessageForm.Root>

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