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

package/src/components/conversation/attachments/generic_file_attachment.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
 import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
 import { Icon } from '../../display'
 import { DownloadAttachmentButton } from './download_attachment_button'
 import { useTheme } from '../../../hooks'
+import { PlatformPressable } from '@react-navigation/elements'
 
 export function GenericFileAttachment({
   attachment,
+  onAttachmentLongPress,
 }: {
   attachment: DenormalizedMessageAttachmentResource
+  onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
 }) {
   const styles = useStyles()
   const { url, filename, contentType } = attachment.attributes
@@ -17,7 +20,10 @@ export function GenericFileAttachment({
   const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file'
 
   return (
-    <Pressable>
+    <PlatformPressable
+      onLongPress={() => onAttachmentLongPress(attachment)}
+      accessibilityHint="Long press for more options"
+    >
       <AttachmentCard>
         <View style={styles.container}>
           <View style={styles.stack}>
@@ -31,7 +37,7 @@ export function GenericFileAttachment({
           />
         </View>
       </AttachmentCard>
-    </Pressable>
+    </PlatformPressable>
   )
 }
 

package/src/components/conversation/attachments/giphy_attachment.tsx

@@ -6,8 +6,10 @@ import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/de
 
 export function GiphyAttachment({
   attachment,
+  onAttachmentLongPress,
 }: {
   attachment: DenormalizedGiphyAttachmentResource
+  onAttachmentLongPress: (attachment: DenormalizedGiphyAttachmentResource) => void
 }) {
   const styles = useStyles()
   const { title, titleLink, giphy } = attachment
@@ -21,7 +23,12 @@ export function GiphyAttachment({
   }
 
   return (
-    <Pressable onPress={handlePress} style={styles.container}>
+    <Pressable
+      onPress={handlePress}
+      style={styles.container}
+      onLongPress={() => onAttachmentLongPress(attachment)}
+      accessibilityHint="Long press for more options"
+    >
       <Image
         source={{ uri: url }}
         style={[styles.image, { width, height }]}

package/src/components/conversation/attachments/image_attachment.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useState } from 'react'
 import {
   StyleSheet,
   Modal,
-  Pressable,
   useWindowDimensions,
   SafeAreaView,
   View,
@@ -26,6 +25,8 @@ import { tokens } from '../../../vendor/tapestry/tokens'
 import { IconButton, Image, Heading, Text } from '../../display'
 import colorFunction from 'color'
 import { formatDatePreview } from '../../../utils/date'
+import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+import { PlatformPressable } from '@react-navigation/elements'
 
 const PAN_THRESHOLD_PX = 300
 
@@ -37,9 +38,11 @@ export type MetaProps = {
 export function ImageAttachment({
   attachment,
   metaProps,
+  onAttachmentLongPress,
 }: {
-  attachment: any
+  attachment: DenormalizedMessageAttachmentResource
   metaProps: MetaProps
+  onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
 }) {
   const { attributes } = attachment
   const { url, urlMedium, filename, metadata = {} } = attributes
@@ -77,14 +80,19 @@ export function ImageAttachment({
 
   return (
     <>
-      <Pressable style={styles.container} onPress={() => setVisible(true)}>
+      <PlatformPressable
+        style={styles.container}
+        onPress={() => setVisible(true)}
+        onLongPress={() => onAttachmentLongPress(attachment)}
+        accessibilityHint="Long press for more options"
+      >
         <Image
           source={{ uri: urlMedium || url }}
           style={{ borderRadius: 8 }}
           wrapperStyle={styles.imageWrapper}
           alt={filename}
         />
-      </Pressable>
+      </PlatformPressable>
       <LightboxModal
         visible={visible}
         handleCloseModal={handleCloseModal}

package/src/components/conversation/attachments/video_attachment.tsx

@@ -1,14 +1,17 @@
 import React, { useRef, useState } from 'react'
-import { View, StyleSheet, Pressable } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
 import { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'
 import { IconButton } from '../../display'
 import { Video, VideoPlayerHandle } from '../../../utils/native_adapters'
+import { PlatformPressable } from '@react-navigation/elements'
 
 export function VideoAttachment({
   attachment,
+  onAttachmentLongPress,
 }: {
   attachment: DenormalizedMessageAttachmentResource
+  onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
 }) {
   const { attributes } = attachment
   const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } =
@@ -35,7 +38,10 @@ export function VideoAttachment({
 
   return (
     <View style={styles.container} ref={viewRef}>
-      <Pressable onPress={openVideo}>
+      <PlatformPressable
+        onLongPress={() => onAttachmentLongPress(attachment)}
+        accessibilityHint="Long press for more options"
+      >
         <Video.Player
           ref={videoRef}
           source={{ uri: url }}
@@ -54,7 +60,7 @@ export function VideoAttachment({
             />
           </View>
         )}
-      </Pressable>
+      </PlatformPressable>
     </View>
   )
 }

package/src/components/conversation/message.tsx

@@ -11,6 +11,7 @@ import { ReactionCountResource } from '../../types/resources/reaction'
 import { MessageAttachments } from './message_attachments'
 import ErrorBoundary from '../page/error_boundary'
 import { MessageMarkdown } from './message_markdown'
+import { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -33,6 +34,12 @@ export function Message(props: MessageResource & { conversation_id: number }) {
     })
   }
 
+  const handleAttachmentLongPress = (attachment: DenormalizedAttachmentResource) => {
+    navigation.navigate('AttachmentActions', {
+      attachment,
+    })
+  }
+
   const metaProps = {
     authorName: props.author.name,
     createdAt: props.createdAt,
@@ -49,7 +56,11 @@ export function Message(props: MessageResource & { conversation_id: number }) {
         {!props.mine && <Text variant="tertiary">{props.author.name}</Text>}
         <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>
           <ErrorBoundary>
-            <MessageAttachments attachments={props.attachments} metaProps={metaProps} />
+            <MessageAttachments
+              attachments={props.attachments}
+              metaProps={metaProps}
+              onAttachmentLongPress={handleAttachmentLongPress}
+            />
           </ErrorBoundary>
           {text && (
             <View style={styles.messageText}>

package/src/components/conversation/message_attachments.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
+import {
+  DenormalizedAttachmentResource,
+  DenormalizedMessageAttachmentResource,
+} from '../../types/resources/denormalized_attachment_resource'
 import { AudioAttachment } from './attachments/audio_attachment'
 import { VideoAttachment } from './attachments/video_attachment'
 import { GiphyAttachment } from './attachments/giphy_attachment'
@@ -11,9 +14,10 @@ import { ImageAttachment, type MetaProps } from './attachments/image_attachment'
 export function MessageAttachments(props: {
   attachments: DenormalizedAttachmentResource[]
   metaProps: MetaProps
+  onAttachmentLongPress: (attachment: DenormalizedAttachmentResource) => void
 }) {
   const styles = useStyles()
-  const { attachments, metaProps } = props
+  const { attachments, metaProps, onAttachmentLongPress } = props
   if (!attachments || attachments.length === 0) return null
   return (
     <View style={styles.attachmentsContainer}>
@@ -25,6 +29,7 @@ export function MessageAttachments(props: {
                 key={attachment.id}
                 attachment={attachment}
                 metaProps={metaProps}
+                onAttachmentLongPress={onAttachmentLongPress}
               />
             )
           case 'giphy':
@@ -32,10 +37,17 @@ export function MessageAttachments(props: {
               <GiphyAttachment
                 key={attachment.id || attachment.titleLink}
                 attachment={attachment}
+                onAttachmentLongPress={onAttachmentLongPress}
               />
             )
           case 'ExpandedLink':
-            return <ExpandedLink key={attachment.id} attachment={attachment} />
+            return (
+              <ExpandedLink
+                key={attachment.id}
+                attachment={attachment}
+                onAttachmentLongPress={onAttachmentLongPress}
+              />
+            )
           default:
             return null
         }
@@ -44,19 +56,42 @@ export function MessageAttachments(props: {
   )
 }
 
-function MessageAttachment({ attachment, metaProps }: { attachment: any; metaProps: MetaProps }) {
+function MessageAttachment({
+  attachment,
+  metaProps,
+  onAttachmentLongPress,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+  metaProps: MetaProps
+  onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+}) {
   const { attributes } = attachment
   const contentType = attributes?.contentType
   const basicType = contentType ? contentType.split('/')[0] : ''
   switch (basicType) {
     case 'image':
-      return <ImageAttachment attachment={attachment} metaProps={metaProps} />
+      return (
+        <ImageAttachment
+          attachment={attachment}
+          metaProps={metaProps}
+          onAttachmentLongPress={onAttachmentLongPress}
+        />
+      )
     case 'video':
-      return <VideoAttachment attachment={attachment} />
+      return (
+        <VideoAttachment attachment={attachment} onAttachmentLongPress={onAttachmentLongPress} />
+      )
     case 'audio':
-      return <AudioAttachment attachment={attachment} />
+      return (
+        <AudioAttachment attachment={attachment} onAttachmentLongPress={onAttachmentLongPress} />
+      )
     default:
-      return <GenericFileAttachment attachment={attachment} />
+      return (
+        <GenericFileAttachment
+          attachment={attachment}
+          onAttachmentLongPress={onAttachmentLongPress}
+        />
+      )
   }
 }
 

package/src/components/page/error_boundary.tsx

@@ -5,6 +5,7 @@ import { StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Button, Heading, Icon, Text } from '../display'
 import { useTheme } from '../../hooks'
+import { ResponseError } from '../../utils/response_error'
 
 type ErrorBoundaryState = {
   error: Response | Error | null
@@ -50,14 +51,14 @@ function ErrorView({ error, onReset }: { error: Error | Response; onReset: () =>
     }
   }, [reset, onReset])
 
-  if (error instanceof Response) {
-    return <ResponseErrorView error={error} onReset={onReset} />
+  if (error instanceof ResponseError) {
+    return <ResponseErrorView response={error.response} onReset={onReset} />
   }
 
   return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />
 }
 
-function ResponseErrorView({ error: response }: { error: Response; onReset: () => void }) {
+function ResponseErrorView({ response }: { response: Response; onReset: () => void }) {
   const { status } = response
   const heading = useMemo(() => {
     switch (status) {

package/src/components/primitive/actions_form_sheet.tsx

@@ -0,0 +1,159 @@
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import React, { ReactNode } from 'react'
+import { AccessibilityRole, StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../hooks'
+import { PLATFORM_SHEET_ALLOWED_DETENTS_FIT_TO_CONTENTS } from '../../utils/navigation_constants'
+import { PlatformPressable } from '@react-navigation/elements'
+import { Icon, IconString, Text } from '../display'
+
+// =================================
+// ====== Exports ==================
+// =================================
+
+export const BaseActionsFormSheetOptions: NativeStackNavigationOptions = {
+  presentation: 'formSheet',
+  headerShown: false,
+  sheetAllowedDetents: PLATFORM_SHEET_ALLOWED_DETENTS_FIT_TO_CONTENTS,
+}
+
+const ActionsFormSheet = {
+  Root: ActionsFormSheetRoot,
+  Action: ActionsFormSheetAction,
+} as const
+
+type ActionFormSheetComponents = {
+  Root: React.FC<ActionsFormSheetRootProps>
+  Action: React.FC<ActionsFormSheetActionProps>
+}
+
+export default ActionsFormSheet as ActionFormSheetComponents
+export type { ActionsFormSheetRootProps, ActionsFormSheetActionProps }
+
+// ====================================
+// ====== ActionsFormSheetRoot ========
+// ====================================
+
+interface ActionsFormSheetRootProps {
+  children: ReactNode
+}
+
+export function ActionsFormSheetRoot({ children }: ActionsFormSheetRootProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.gestureBar} />
+      <View style={styles.actions}>{children}</View>
+    </View>
+  )
+}
+
+ActionsFormSheetRoot.displayName = 'ActionsFormSheet.Root'
+
+// ====================================
+// ====== ActionsFormSheetAction ======
+// ====================================
+
+const ACTION_FORM_SHEET_ACTION_APPEARANCES = {
+  neutral: 'neutral',
+  danger: 'danger',
+} as const
+
+type ActionsFormSheetActionAppearanceUnion =
+  (typeof ACTION_FORM_SHEET_ACTION_APPEARANCES)[keyof typeof ACTION_FORM_SHEET_ACTION_APPEARANCES]
+
+interface ActionsFormSheetActionProps {
+  title: string
+  iconName: IconString
+  onPress: () => void
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  accessibilityRole?: AccessibilityRole
+  appearance?: ActionsFormSheetActionAppearanceUnion
+}
+
+function ActionsFormSheetAction({
+  title,
+  iconName,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = 'button',
+  appearance = 'neutral',
+}: ActionsFormSheetActionProps) {
+  const styles = useStyles({ appearance })
+
+  return (
+    <PlatformPressable
+      onPress={onPress}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      style={styles.actionPressable}
+    >
+      <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />
+      <Text style={styles.actionTitle}>{title}</Text>
+    </PlatformPressable>
+  )
+}
+
+ActionsFormSheetAction.displayName = 'ActionsFormSheet.Action'
+
+// ==================================
+// ====== Styles ====================
+// ==================================
+
+interface Styles {
+  appearance?: ActionsFormSheetActionAppearanceUnion
+}
+
+const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
+  const { colors } = useTheme()
+  const { bottom } = useSafeAreaInsets()
+
+  const appearanceColorsMap = {
+    neutral: {
+      iconColor: colors.iconColorDefaultPrimary,
+      textColor: colors.textColorDefaultPrimary,
+    },
+    danger: {
+      iconColor: colors.fillColorStatusErrorMedium,
+      textColor: colors.fillColorStatusErrorMedium,
+    },
+  }
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'flex-start',
+      paddingTop: 12,
+      paddingBottom: bottom,
+      width: '100%',
+      backgroundColor: colors.fillColorNeutral100Inverted,
+    },
+    gestureBar: {
+      width: 32,
+      height: 4,
+      backgroundColor: colors.fillColorNeutral050Base,
+      borderRadius: 100,
+      alignSelf: 'center',
+    },
+    actions: {
+      paddingTop: 20,
+    },
+    actionPressable: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      gap: 8,
+    },
+    actionIcon: {
+      color: appearanceColorsMap[appearance].iconColor,
+    },
+    actionTitle: {
+      color: appearanceColorsMap[appearance].textColor,
+    },
+  })
+}

package/src/contexts/chat_context.tsx

@@ -2,20 +2,21 @@ import { merge } from 'lodash'
 import React, { createContext, useMemo } from 'react'
 import { ColorSchemeName, useColorScheme } from 'react-native'
 import { DeepPartial } from '../types'
-import { ENV, PartialToken, ResponseError, Session } from '../utils'
+import { ENV, OauthType, PartialToken, ResponseError, Session } from '../utils'
 import { ChatTheme, defaultTheme, DefaultTheme } from '../utils/theme'
 
-export type ChatContextValue = {
+export interface ChatProviderProps {
   env?: ENV
   giphyApiKey?: string
   onUnauthorizedResponse: (_response: ResponseError) => void
-  session: Session
-  theme: ChatTheme
   token?: PartialToken
+  tokenType?: OauthType
+  theme: CreateChatThemeProps
 }
 
-export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'theme' | 'session'> {
-  theme: CreateChatThemeProps
+export interface ChatContextValue extends Omit<ChatProviderProps, 'theme'> {
+  session: Session
+  theme: ChatTheme
 }
 
 export const ChatContext = createContext<ChatContextValue>({
@@ -28,9 +29,12 @@ export const ChatContext = createContext<ChatContextValue>({
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {
-  const { env, token, onUnauthorizedResponse, giphyApiKey } = value
+  const { env, token, onUnauthorizedResponse, giphyApiKey, tokenType } = value
   const theme = useCreateChatTheme(value.theme || {})
-  const session = useMemo(() => new Session({ token, env }), [env, token])
+  const session = useMemo(
+    () => new Session({ token, env, type: tokenType }),
+    [env, token, tokenType]
+  )
 
   const contextValue: ChatContextValue = {
     env,

package/src/hooks/use_suspense_api.ts

@@ -7,6 +7,9 @@ import {
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
 import { App, useApiClient } from './use_api_client'
+import { Log } from '../utils'
+import { ApiError } from '../types/api_primitives'
+import { ResponseError } from '../utils/response_error'
 
 interface SuspenseGetOptions extends GetRequest {
   app?: App
@@ -18,12 +21,13 @@ export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(
   type Resource = ApiResource<T>
   const apiClient = useApiClient()
 
-  const { data, ...query } = useSuspenseQuery<Resource, Response>({
+  const { data, ...query } = useSuspenseQuery<Resource, ApiError>({
     queryKey: getRequestQueryKey(args),
     queryFn: ({ queryKey }) => {
       const [url, d, headers, app = 'chat'] = queryKey as RequestQueryKey
-
-      return apiClient[app].get({ url, data: d, headers }) as Promise<Resource>
+      return apiClient[app]
+        .get({ url, data: d, headers })
+        .catch(throwResponseError) as Promise<Resource>
     },
   })
 
@@ -54,6 +58,8 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   >({
     queryKey: getRequestQueryKey(args),
     queryFn: ({ pageParam }) => {
+      Log.info('useSuspenseGet', { pageParam })
+
       const pageParmWhere = pageParam?.where || {}
       const argsWhere = args.data.where || {}
       const where = { ...argsWhere, ...pageParmWhere }
@@ -61,10 +67,12 @@ export const useSuspensePaginator = <T extends ResourceObject>(
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return apiClient[app].get({
-        url: args.url,
-        data,
-      })
+      return apiClient[app]
+        .get<ApiCollection<T>>({
+          url: args.url,
+          data,
+        })
+        .catch(throwResponseError)
     },
     initialPageParam: {} as Partial<RequestData>,
     getNextPageParam: lastPage => {
@@ -84,6 +92,14 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   return { ...query, data }
 }
 
+const throwResponseError = (error: unknown) => {
+  if (error instanceof Response) {
+    throw new ResponseError(error as ApiError)
+  }
+
+  return Promise.reject(error)
+}
+
 export type RequestQueryKey = [
   SuspenseGetOptions['url'],
   SuspenseGetOptions['data'],

package/src/index.tsx

@@ -1,16 +1,10 @@
-export * from './contexts/chat_context'
+export { GroupConversations } from './components'
 export { ApiProvider, chatQueryClient } from './contexts/api_provider'
-export { DesignSystemScreen } from './screens'
+export * from './contexts/chat_context'
 export * from './navigation'
+export { ScreenLayout } from './navigation/screenLayout'
+export { DesignSystemScreen } from './screens'
 export * from './types'
+export { platformFontWeightBold, Session, TemporaryDefaultColorsType, Uri } from './utils'
 export * from './utils/client'
-export { GroupConversations } from './components'
-
-export {
-  TemporaryDefaultColorsType,
-  ChatAdapters,
-  ClipboardAdapter,
-  Session,
-  Uri,
-  platformFontWeightBold,
-} from './utils'
+export * from './utils/native_adapters'

package/src/navigation/index.tsx

@@ -31,6 +31,8 @@ import {
 import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
 import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
 import { ConversationSelectTeamsILeadRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
+import { AttachmentActionsScreenOptions } from '../screens/attachment_actions/attachment_actions_screen'
+import { AttachmentActionsScreen } from '../screens/attachment_actions/attachment_actions_screen'
 
 export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
@@ -169,6 +171,10 @@ export const ChatStack = createNativeStackNavigator({
       // Something about sheetAllowedDetents declared inline breaks TS
       options: MessageActionsScreenOptions,
     },
+    AttachmentActions: {
+      screen: AttachmentActionsScreen,
+      options: AttachmentActionsScreenOptions,
+    },
     Reactions: {
       screen: ReactionsScreen,
       options: ReactionsScreenOptions,