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

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[]
 }

package/src/types/resources/services/chat_resource.ts

@@ -0,0 +1,66 @@
+// All of our calls out to services go out to /chat, which isn't a typical pco-api vertex.
+// They all have a shared type of 'Chat' which has the following array attributes:
+// group_identifiers, people, plans, teams and, teams_i_lead.
+// All of these have a type array, are only rendered on request, and are exclusively used for this form.
+// There is also a payload which is a string, and is used to create a conversation in chat.
+
+import { ResourceObject } from '../../api_primitives'
+
+export interface ServicesChatResource extends ResourceObject {
+  type: 'Chat'
+  teamsILead?: TeamResponseItem[] // on request
+  teams?: TeamResponseItem[] // on request
+  myTeams?: TeamResponseItem[] // on request
+}
+
+export interface TeamResponseItem {
+  name: string
+  value: {
+    teamId: number
+    serviceTypeId: number
+  }
+  serviceTypeName: string // deprecated
+  serviceTypeNames: string[]
+  serviceTypeAcronyms: string[]
+  teamName: string
+  order: [number, string, string] // [serviceTypeId, serviceTypeName, teamName]
+}
+
+export interface TeamOptionResource extends ServicesChatResource {
+  teams: TeamOptionResponseItem[]
+}
+
+export interface TeamOptionResponseItem extends TeamResponseItem {
+  group: TeamOptionResponseItemGroupName
+}
+
+export type TeamOptionResponseItemGroupName = 'teams_i_lead' | 'other_teams'
+
+export interface PlansResource extends ServicesChatResource {
+  plans: PlansResponseItem[]
+}
+
+export interface PlansResponseItem {
+  value: number
+  name: string
+}
+
+export interface TeamPeopleResource extends ServicesChatResource {
+  people: TeamPersonResponseItem[]
+}
+
+export interface TeamPersonResponseItem {
+  id: number
+  name: string
+  avatar: string
+  badges: { title: string }[]
+  child: boolean
+}
+
+export interface ServicesChatPayloadResource extends ServicesChatResource {
+  payload: string
+}
+
+export interface ServicesChatGroupIdentifiersResource extends ServicesChatResource {
+  groupIdentifiers: string[]
+}

package/src/types/resources/services/index.ts

@@ -1 +1,2 @@
+export * from './chat_resource'
 export * from './team_resource'

package/src/types/resources/services/team_resource.ts

@@ -1,64 +1,21 @@
-// All of our calls out to services go out to /chat, which isn't a typical pco-api vertex.
-// They all have a shared type of 'Chat' which has the following array attributes:
-// group_identifiers, people, plans, teams and, teams_i_lead.
-// All of these have a type array, are only rendered on request, and are exclusively used for this form.
-// There is also a payload which is a string, and is used to create a conversation in chat.
-
 import { ResourceObject } from '../../api_primitives'
 
-interface ServicesChatResource extends ResourceObject {
-  type: 'Chat'
-}
-
-export interface TeamResource extends ServicesChatResource {
-  teamsILead: TeamResponseItem[]
-}
-export interface TeamResponseItem {
+// Returned by /me/teams
+export interface Team extends ResourceObject {
+  id: number // equivalent to TeamResponseItem.value.teamId
   name: string
-  value: {
-    teamId: number
-    serviceTypeId: number
-  }
+  serviceType: ServiceType
+  serviceTypeId: number // equivalent to TeamResponseItem.value.serviceTypeId
   serviceTypeName: string
   teamName: string
   order: [number, string, string] // [serviceTypeId, serviceTypeName, teamName]
 }
 
-export interface TeamOptionResource extends ServicesChatResource {
-  teams: TeamOptionResponseItem[]
-}
-
-export interface TeamOptionResponseItem extends TeamResponseItem {
-  group: TeamOptionResponseItemGroupName
-}
-
-export type TeamOptionResponseItemGroupName = 'teams_i_lead' | 'other_teams'
-
-export interface PlansResource extends ServicesChatResource {
-  plans: PlansResponseItem[]
-}
-
-export interface PlansResponseItem {
-  value: number
-  name: string
-}
-
-export interface TeamPeopleResource extends ServicesChatResource {
-  people: TeamPersonResponseItem[]
-}
-
-export interface TeamPersonResponseItem {
+export interface ServiceType {
   id: number
+  type: 'ServiceType'
+  links: {
+    self: string
+  }
   name: string
-  avatar: string
-  badges: { title: string }[]
-  child: boolean
-}
-
-export interface ServicesChatPayloadResource extends ServicesChatResource {
-  payload: string
-}
-
-export interface ServicesChatGroupIdentifiersResource extends ServicesChatResource {
-  groupIdentifiers: string[]
 }