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

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

@@ -1,24 +1,75 @@
-import { useMemo } from 'react'
-import { TeamResponseItem } from '../../../types'
-import { ServiceTypeWithTeams } from '../types'
 import { uniqBy } from 'lodash'
-import { useTeamsILead } from '../../../hooks/services/use_teams_i_lead'
+import { useMemo } from 'react'
+import { useApiGet } from '../../../hooks/use_api'
+import { ServicesChatResource, TeamResponseItem } from '../../../types'
+import { ServiceTypeWithTeams, TeamFilterTypes } from '../types'
 
-export function useServiceTypesWithTeams() {
-  const { teamsILead, ...data } = useTeamsILead()
+export function useServiceTypesWithTeams({
+  filterType = TeamFilterTypes.TeamsIlead,
+  searchQuery,
+}: {
+  filterType?: TeamFilterTypes
+  searchQuery?: string
+} = {}) {
+  const { data, ...rest } = useTeams({ filterType })
 
   const decoratedResponse = useMemo(() => {
-    return decorateTeamResponseItems(teamsILead)
-  }, [teamsILead])
+    return decorateTeamResponseItems(data as TeamResponseItem[], searchQuery)
+  }, [data, searchQuery])
 
   return {
     serviceTypes: decoratedResponse,
-    ...data,
+    ...rest,
   }
 }
 
-function decorateTeamResponseItems(teamResponseItems: TeamResponseItem[]) {
+const useTeams = ({ filterType }: { filterType: TeamFilterTypes }) => {
+  const requestField = useMemo(() => {
+    switch (filterType) {
+      case TeamFilterTypes.All:
+        return 'teams'
+      case TeamFilterTypes.MyTeams:
+        return 'my_teams'
+      default:
+        return 'teams_i_lead'
+    }
+  }, [filterType])
+
+  const { data, ...rest } = useApiGet<ServicesChatResource>({
+    url: '/chat',
+    data: {
+      fields: {
+        Chat: [requestField],
+      },
+    },
+    app: 'services',
+  })
+
+  const result: TeamResponseItem[] = useMemo(() => {
+    switch (filterType) {
+      case TeamFilterTypes.All:
+        return data?.teams || []
+      case TeamFilterTypes.MyTeams:
+        return data?.myTeams || []
+      default:
+        return data?.teamsILead || []
+    }
+  }, [data, filterType])
+
+  return { data: result || [], ...rest }
+}
+
+function decorateTeamResponseItems(teamResponseItems: TeamResponseItem[], searchQuery?: string) {
   return teamResponseItems
+    .filter(item => {
+      if (!searchQuery) return true
+
+      const evalMatch = (str: string) => str.toLowerCase().includes(searchQuery.toLowerCase())
+      const teamNameMatch = evalMatch(item.name)
+      const serviceTypeNamesMatch = evalMatch(item.serviceTypeNames?.join(',') || '')
+
+      return teamNameMatch || serviceTypeNamesMatch
+    })
     .map(({ value, serviceTypeName, teamName }) => ({
       service_type: {
         id: value.serviceTypeId,

package/src/screens/conversation_filter_recipients/types.tsx

@@ -38,9 +38,17 @@ interface DataItem<T, TName extends SectionTypes> {
   sectionStyle?: ViewStyle
 }
 
+export enum TeamFilterTypes {
+  All = 'All teams',
+  MyTeams = 'My teams',
+  TeamsIlead = 'Teams I lead',
+}
+
 export type ConversationFilterRecipientsParams = {
   source_app_name?: AppName
   team_ids?: number[]
+  team_filter_type?: TeamFilterTypes
+  search_query?: string
 }
 
 export type ConversationFilterRecipientsScreenProps =

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

@@ -4,7 +4,7 @@ import React, { PropsWithChildren, useContext } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { Heading, Icon, Image, Text, TextButton } from '../../../components'
 import { useTheme } from '../../../hooks'
-import { useServicesTeamsMap } from '../../../hooks/use_services_team'
+import { useServicesTeamsMap } from '../../../hooks/services/use_services_team'
 import { GroupResource } from '../../../types/resources/group_resource'
 import { FilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'

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

@@ -48,7 +48,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
     [chat_group_graph_id, navigation]
   )
 
-  const { mutate: handleSave } = useGroupsConversationCreate({
+  const { mutate: handleSave, isPending } = useGroupsConversationCreate({
     groupId,
     title,
     onSuccess: redirectToConversation,
@@ -70,7 +70,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
         }
       />
       <ActionButton
-        disabled={!title}
+        disabled={!title || isPending}
         title="Start Conversation"
         onPress={() => handleSave()}
         infoText="Conversation will be automatically updated if any members are added or removed from this group."

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

@@ -12,13 +12,19 @@ import { useTeamMembersForNewConversation } from '../../../hooks/services/use_te
 import { useFindOrCreateServicesConversation } from '../../../hooks/services/use_find_or_create_services_conversation'
 import { ConversationResource, MemberResource } from '../../../types'
 import { tokens } from '../../../vendor/tapestry/tokens'
+import { TeamFilterTypes } from '../../conversation_filter_recipients/types'
 
 type ServicesFormProps = {
   initialTeamIds?: number[]
   initialPlanId?: number
+  teamFilterType?: TeamFilterTypes
 }
 
-export const ServicesForm = ({ initialTeamIds, initialPlanId }: ServicesFormProps) => {
+export const ServicesForm = ({
+  initialTeamIds,
+  initialPlanId,
+  teamFilterType,
+}: ServicesFormProps) => {
   const styles = useStyles()
   const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)
   const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.
@@ -39,7 +45,11 @@ export const ServicesForm = ({ initialTeamIds, initialPlanId }: ServicesFormProp
 
   const [filerByPlan, setFilterByPlan] = useState(false)
 
-  const { members, isError: isMemberError } = useTeamMembersForNewConversation({
+  const {
+    members,
+    isPending,
+    isError: isMemberError,
+  } = useTeamMembersForNewConversation({
     teamIds: selectedTeamIds,
     planId: selectedPlanId,
   })
@@ -75,11 +85,12 @@ export const ServicesForm = ({ initialTeamIds, initialPlanId }: ServicesFormProp
             setFilterByPlan={setFilterByPlan}
             members={members}
             isMemberError={isMemberError}
+            teamFilterType={teamFilterType}
           />
         }
       />
       <ActionButton
-        disabled={!selectedTeamIds.length}
+        disabled={!selectedTeamIds.length || isPending}
         title="Start Conversation"
         onPress={createConversation}
         infoText="Conversation will be automatically updated if any members are added or removed from included teams."
@@ -97,6 +108,7 @@ interface FormContentProps {
   setFilterByPlan: (value: boolean) => void
   members: MemberResource[]
   isMemberError: boolean
+  teamFilterType?: TeamFilterTypes
 }
 
 function FormContent({
@@ -108,6 +120,7 @@ function FormContent({
   setFilterByPlan,
   members,
   isMemberError,
+  teamFilterType,
 }: FormContentProps) {
   const { teamsILead } = useTeamsILead()
   const selectedTeamsILead = useMemo(() => {
@@ -144,6 +157,7 @@ function FormContent({
                 params: {
                   source_app_name: 'Services',
                   team_ids: selectedTeamIds,
+                  team_filter_type: teamFilterType,
                 },
               })
             }

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -5,10 +5,12 @@ import { ServicesForm } from './components/services_form'
 import { SourceAppErrorCard } from './components/source_app_error_card'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
+import { TeamFilterTypes } from '../conversation_filter_recipients/types'
 
 type ConversationNewScreenProps = StaticScreenProps<{
   group_id?: number
   team_ids?: number[]
+  team_filter_type?: TeamFilterTypes
   plan_id?: number
   source_app_name: AppName
   chat_group_graph_id?: GraphId
@@ -16,7 +18,8 @@ type ConversationNewScreenProps = StaticScreenProps<{
 }>
 
 export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {
-  const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id } = route.params
+  const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id, team_filter_type } =
+    route.params
 
   switch (source_app_name) {
     case 'Groups':
@@ -26,7 +29,13 @@ export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) =>
         <SourceAppErrorCard />
       )
     case 'Services':
-      return <ServicesForm initialTeamIds={team_ids} initialPlanId={plan_id} />
+      return (
+        <ServicesForm
+          initialTeamIds={team_ids}
+          initialPlanId={plan_id}
+          teamFilterType={team_filter_type}
+        />
+      )
     default:
       return <SourceAppErrorCard />
   }

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -12,6 +12,8 @@ import { useServiceTypesWithTeams } from '../conversation_filter_recipients/hook
 import { ServiceTypeWithTeams } from '../conversation_filter_recipients/types'
 import { TeamRecipientRow } from './components/team_recipient_row'
 import { GroupsRecipientRow } from './components/groups_recipient_row'
+import { DefaultLoading } from '../../components/page/loading'
+import { useAppGrants } from '../../hooks'
 
 const MAX_VISIBLE_RECIPIENTS = 5
 
@@ -20,7 +22,13 @@ export const ConversationSelectRecipientsScreen = ({
 }: ConversationSelectRecipientsScreenProps) => {
   const styles = useStyles()
   const navigation = useNavigation()
-
+  const appGrants = useAppGrants()
+  const canCreateGroupsConversations = appGrants.data?.some(
+    g => g.createConversations && g.appName === 'Groups'
+  )
+  const canCreateServicesConversations = appGrants.data?.some(
+    g => g.createConversations && g.appName === 'Services'
+  )
   const { data: groups = [], isFetching: isGroupsFetching } = useGroupsGroups()
   const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
   const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_RECIPIENTS)
@@ -77,83 +85,91 @@ export const ConversationSelectRecipientsScreen = ({
 
   return (
     <ScrollView contentContainerStyle={styles.contentContainer}>
-      <View style={styles.section}>
-        <View style={styles.sectionHeader}>
-          <Heading variant="h3">My groups</Heading>
-        </View>
-        <View>
-          {isGroupsFetching ? null : groupsWithCreatePermission.length === 0 ? (
-            <BlankState
-              subtitle="Join a group with chat enabled and permissions to start a new conversation."
-              style={styles.blankState}
-            />
-          ) : (
-            <>
-              {visibleGroups.map(group => {
-                return (
-                  <GroupsRecipientRow
-                    key={group.id}
-                    group={group}
-                    onPress={handleGroupsNavigateToConversationNew}
+      {canCreateGroupsConversations && (
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Heading variant="h3">My groups</Heading>
+          </View>
+          <View>
+            {isGroupsFetching ? (
+              <DefaultLoading />
+            ) : groupsWithCreatePermission.length === 0 ? (
+              <BlankState
+                subtitle="Join a group with chat enabled and permissions to start a new conversation."
+                style={styles.blankState}
+              />
+            ) : (
+              <>
+                {visibleGroups.map(group => {
+                  return (
+                    <GroupsRecipientRow
+                      key={group.id}
+                      group={group}
+                      onPress={handleGroupsNavigateToConversationNew}
+                    />
+                  )
+                })}
+                {hasMoreGroups && (
+                  <ViewMoreLinkRow
+                    onPress={handleGroupsViewMore}
+                    accessibilityHint="Navigate to a full list of your groups."
                   />
-                )
-              })}
-              {hasMoreGroups && (
-                <ViewMoreLinkRow
-                  onPress={handleGroupsViewMore}
-                  accessibilityHint="Navigate to a full list of your groups."
-                />
-              )}
-              {showGroupsDisclaimer && <GroupsWithoutChatDisclaimerRow />}
-            </>
-          )}
-        </View>
-      </View>
-      <View style={styles.section}>
-        <View style={styles.sectionHeader}>
-          <Heading variant="h3">Teams I lead</Heading>
-          {hasServiceTypes && (
-            <Button
-              style={styles.selectTeamsButton}
-              onPress={() =>
-                navigation.navigate('New', {
-                  screen: 'ConversationFilterRecipients',
-                  params: {
-                    source_app_name: 'Services',
-                  },
-                })
-              }
-              title="Select teams"
-              variant="outline"
-              iconNameLeft="general.search"
-              size="sm"
-            />
-          )}
+                )}
+                {showGroupsDisclaimer && <GroupsWithoutChatDisclaimerRow />}
+              </>
+            )}
+          </View>
         </View>
-        <View>
-          {isServiceTypesFetching ? null : hasServiceTypes ? (
-            <>
-              {visibleServiceTypes.map(serviceType => {
-                return (
-                  <TeamRecipientRow
-                    key={serviceType.id}
-                    serviceType={serviceType}
-                    onPress={handleTeamsNavigateToConversationNew}
+      )}
+      {canCreateServicesConversations && (
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Heading variant="h3">Teams I lead</Heading>
+            {hasServiceTypes && (
+              <Button
+                style={styles.selectTeamsButton}
+                onPress={() =>
+                  navigation.navigate('New', {
+                    screen: 'ConversationFilterRecipients',
+                    params: {
+                      source_app_name: 'Services',
+                    },
+                  })
+                }
+                title="Select teams"
+                variant="outline"
+                iconNameLeft="general.search"
+                size="sm"
+              />
+            )}
+          </View>
+          <View>
+            {isServiceTypesFetching ? (
+              <DefaultLoading />
+            ) : hasServiceTypes ? (
+              <>
+                {visibleServiceTypes.map(serviceType => {
+                  return (
+                    <TeamRecipientRow
+                      key={serviceType.id}
+                      serviceType={serviceType}
+                      onPress={handleTeamsNavigateToConversationNew}
+                    />
+                  )
+                })}
+                {hasMoreServiceTypes && (
+                  <ViewMoreLinkRow
+                    onPress={handleServiceTypesViewMore}
+                    accessibilityHint="Navigate to a full list of teams you lead."
                   />
-                )
-              })}
-              {hasMoreServiceTypes && (
-                <ViewMoreLinkRow
-                  onPress={handleServiceTypesViewMore}
-                  accessibilityHint="Navigate to a full list of teams you lead."
-                />
-              )}
-            </>
-          ) : (
-            <BlankState subtitle="You don't lead any teams." style={styles.blankState} />
-          )}
+                )}
+              </>
+            ) : (
+              <BlankState subtitle="You don't lead any teams." style={styles.blankState} />
+            )}
+          </View>
         </View>
-      </View>
+      )}
     </ScrollView>
   )
 }

package/src/screens/team_conversation_screen.tsx

@@ -0,0 +1,46 @@
+import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { useApiClient } from '../hooks'
+import { findOrCreateServicesConversation } from '../hooks/services/use_find_or_create_services_conversation'
+import { DefaultLoading } from '../components/page/loading'
+
+export type TeamConversationRouteProps = {
+  plan_id?: number
+  team_ids?: number[]
+}
+
+export type TeamConversationScreenProps = StaticScreenProps<TeamConversationRouteProps>
+
+export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) => {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+  const navigation = useNavigation()
+
+  const { data: conversation } = useQuery({
+    queryKey: ['team-conversation', route.params.team_ids, route.params.plan_id],
+    queryFn: () =>
+      findOrCreateServicesConversation(
+        apiClient,
+        route.params.team_ids || [2317674, 5223552],
+        route.params.plan_id
+      ),
+  })
+
+  useEffect(() => {
+    if (!conversation?.id) return
+
+    navigation.dispatch(
+      StackActions.replace('Conversation', {
+        conversation_id: conversation.id,
+        title: conversation.title,
+      })
+    )
+
+    return () => {
+      queryClient.removeQueries({ queryKey: ['team-conversation'] })
+    }
+  }, [conversation?.id, conversation?.title, navigation, queryClient])
+
+  return <DefaultLoading />
+}

package/src/types/resources/denormalized_attachment_resource.ts

@@ -8,12 +8,7 @@ export type DenormalizedAttachmentResource =
   | DenormalizedGiphyAttachmentResource
   | DenormalizedExpandedLinkAttachmentResource
 
-export type DenormalizedAttachmentResourceForCreate =
-  | DenormalizedMessageAttachmentResourceForCreate
-  | DenormalizedGiphyAttachmentResourceForCreate
-  | DenormalizedExpandedLinkAttachmentResource
-
-interface GenericAttachmentResource {
+export interface GenericAttachmentResource {
   type: string
   id?: string
   [key: string]: unknown
@@ -39,11 +34,6 @@ export interface DenormalizedMessageAttachmentResource extends GenericAttachment
   }
 }
 
-export interface DenormalizedMessageAttachmentResourceForCreate extends GenericAttachmentResource {
-  type: 'MessageAttachment'
-  id: string
-}
-
 export interface DenormalizedGiphyAttachmentResource extends GenericAttachmentResource {
   type: 'giphy'
   id: string
@@ -52,35 +42,17 @@ export interface DenormalizedGiphyAttachmentResource extends GenericAttachmentRe
   titleLink: string
   thumbUrl: string
   giphy: {
-    original: GiphyVariant
-    fixedHeight: GiphyVariant
-    fixedHeightStill: GiphyVariant
-    fixedHeightDownsampled: GiphyVariant
-    fixedWidth: GiphyVariant
-    fixedWidthStill: GiphyVariant
-    fixedWidthDownsampled: GiphyVariant
-  }
-}
-
-export interface DenormalizedGiphyAttachmentResourceForCreate extends GenericAttachmentResource {
-  type: 'giphy'
-  id: string
-  title: string
-  original_giphy_title: string
-  title_link: string
-  thumb_url: string
-  giphy: {
-    original: GiphyVariant
-    fixed_height: GiphyVariant
-    fixed_height_still: GiphyVariant
-    fixed_height_downsampled: GiphyVariant
-    fixed_width: GiphyVariant
-    fixed_width_still: GiphyVariant
-    fixed_width_downsampled: GiphyVariant
+    original: GiphyAttachmentVariant
+    fixedHeight: GiphyAttachmentVariant
+    fixedHeightStill: GiphyAttachmentVariant
+    fixedHeightDownsampled: GiphyAttachmentVariant
+    fixedWidth: GiphyAttachmentVariant
+    fixedWidthStill: GiphyAttachmentVariant
+    fixedWidthDownsampled: GiphyAttachmentVariant
   }
 }
 
-interface GiphyVariant {
+export interface GiphyAttachmentVariant {
   url: string
   width: string
   height: string

package/src/types/resources/denormalized_attachment_resource_for_create.ts

@@ -0,0 +1,65 @@
+import {
+  DenormalizedExpandedLinkAttachmentResource,
+  GenericAttachmentResource,
+  GiphyAttachmentVariant,
+} from './denormalized_attachment_resource'
+
+export type DenormalizedAttachmentResourceForCreate =
+  | DenormalizedMessageAttachmentResourceForCreate
+  | DenormalizedGiphyAttachmentResourceForCreate
+  | DenormalizedExpandedLinkAttachmentResource
+
+export interface DenormalizedMessageAttachmentResourceForCreate extends GenericAttachmentResource {
+  type: 'MessageAttachment'
+  id: string
+
+  // Not needed for upload, but is used to preview image during pending send state
+  file: NativeAttachmentFile
+}
+
+export interface DenormalizedGiphyAttachmentResourceForCreate extends GenericAttachmentResource {
+  type: 'giphy'
+  id: string
+  title: string
+  original_giphy_title: string
+  title_link: string
+  thumb_url: string
+  giphy: {
+    original: GiphyAttachmentVariant
+    fixed_height: GiphyAttachmentVariant
+    fixed_height_still: GiphyAttachmentVariant
+    fixed_height_downsampled: GiphyAttachmentVariant
+    fixed_width: GiphyAttachmentVariant
+    fixed_width_still: GiphyAttachmentVariant
+    fixed_width_downsampled: GiphyAttachmentVariant
+  }
+}
+
+type AttachmentStatus = 'uploading' | 'success' | 'error'
+
+export interface NativeAttachmentFile {
+  uri: string
+  name: string
+  type: string // Should be a MIME type
+  size: number
+  width?: number
+  height?: number
+}
+
+export interface FileAttachment {
+  id?: string
+  file: NativeAttachmentFile
+  status: AttachmentStatus
+}
+
+export interface FileUploadState {
+  [fileName: string]: {
+    status: AttachmentStatus
+    id?: string
+  }
+}
+
+export interface FileUploadError {
+  file_type?: string[]
+  file_size?: boolean
+}

package/src/types/resources/message.ts

@@ -1,4 +1,5 @@
 import { DenormalizedAttachmentResource } from './denormalized_attachment_resource'
+import { DenormalizedAttachmentResourceForCreate } from './denormalized_attachment_resource_for_create'
 import type { PersonResource } from './person'
 import type { ReactionCountResource } from './reaction'
 
@@ -20,4 +21,9 @@ export interface MessageResource {
   renderTime?: boolean
   myLatestInConversation?: boolean
   lastInGroup?: boolean
+
+  // Properties for mutation state
+  pending?: boolean // Indicates if the message is optimistically created and pending server response
+  error?: string // Error message if the message failed to send
+  attachmentsForCreate?: DenormalizedAttachmentResourceForCreate[]
 }