@planningcenter/chat-react-native 3.5.0-rc.1 → 3.5.0

package/src/components/display/icon.tsx

@@ -23,6 +23,8 @@ import * as logomark from '@planningcenter/icons/paths/logomark'
 import * as people from '@planningcenter/icons/paths/people'
 // @ts-ignore
 import * as services from '@planningcenter/icons/paths/services'
+// @ts-ignore
+import * as publishing from '@planningcenter/icons/paths/publishing'
 
 // =================================
 // ====== Constants ================
@@ -40,9 +42,10 @@ const ICONS = {
   logomark,
   people,
   services,
+  publishing,
 } as const
 
-type IconStyle = ViewStyle & {
+export type IconStyle = ViewStyle & {
   fontSize?: number
   color?: string
 }

package/src/components/display/icon_button.tsx

@@ -14,6 +14,10 @@ import type { IconButtonAppearanceUnion } from './utils/button_colors'
 // =================================
 
 const SIZES = {
+  xxxs: 'xxxs',
+  xxs: 'xxs',
+  xs: 'xs',
+  sm: 'sm',
   md: 'md',
   lg: 'lg',
   xl: 'xl',
@@ -98,6 +102,18 @@ export function IconButton({
   const androidRippleColor = useCreateAndroidRippleColor({ color: color })
 
   const androidRadiusSizeMap: AndroidRadiusSize = {
+    [SIZES.xxxs]: {
+      radius: 8,
+    },
+    [SIZES.xxs]: {
+      radius: 10,
+    },
+    [SIZES.xs]: {
+      radius: 12,
+    },
+    [SIZES.sm]: {
+      radius: 14,
+    },
     [SIZES.md]: {
       radius: 16,
     },
@@ -163,6 +179,22 @@ const useStyles = ({
   const colorKey = getColorKey({ disabled, loading, appearance })
 
   const sizeStyleMap: SizeStyle = {
+    [SIZES.xxxs]: {
+      fontSize: 8,
+      height: 8 * fontScale,
+    },
+    [SIZES.xxs]: {
+      fontSize: 10,
+      height: 10 * fontScale,
+    },
+    [SIZES.xs]: {
+      fontSize: 12,
+      height: 12 * fontScale,
+    },
+    [SIZES.sm]: {
+      fontSize: 14,
+      height: 14 * fontScale,
+    },
     [SIZES.md]: {
       fontSize: 16,
       height: 16 * fontScale,

package/src/components/display/image_attachment_preview.tsx

@@ -0,0 +1,74 @@
+import { View, StyleSheet } from 'react-native'
+import { Image } from './image'
+import { IconButton } from './icon_button'
+import { useTheme } from '../../hooks'
+
+const SIZES = {
+  sm: 'sm',
+  md: 'md',
+} as const
+type ImageSizeUnion = (typeof SIZES)[keyof typeof SIZES]
+
+interface ImageAttachmentPreviewProps {
+  fileName: string
+  uri: string
+  size?: ImageSizeUnion
+  onClosePress: () => void
+}
+
+export const ImageAttachmentPreview = ({
+  uri,
+  fileName,
+  size = 'md',
+  onClosePress,
+}: ImageAttachmentPreviewProps) => {
+  const styles = useStyles({ size })
+
+  return (
+    <View style={styles.container}>
+      <IconButton
+        name="general.x"
+        onPress={onClosePress}
+        size="xxs"
+        appearance="neutral"
+        style={styles.closeButton}
+        accessibilityLabel="Remove image attachment"
+      />
+      <Image
+        source={{ uri }}
+        style={styles.image}
+        alt={`Attached ${fileName}`}
+        resizeMode="cover"
+      />
+    </View>
+  )
+}
+
+const useStyles = ({ size = 'md' }: { size: ImageSizeUnion }) => {
+  const { colors } = useTheme()
+
+  const imageSizeMap = {
+    sm: 60,
+    md: 80,
+  }
+
+  return StyleSheet.create({
+    container: {
+      width: imageSizeMap[size],
+      height: imageSizeMap[size],
+    },
+    image: {
+      borderRadius: 8,
+    },
+    closeButton: {
+      position: 'absolute',
+      top: 4,
+      right: 4,
+      zIndex: 2,
+      backgroundColor: colors.fillColorNeutral050Base,
+      borderRadius: 16,
+      height: 20,
+      width: 20,
+    },
+  })
+}

package/src/components/display/index.ts

@@ -3,12 +3,14 @@ export * from './avatar'
 export * from './badge'
 export * from './banner_collapsible'
 export * from './banner'
+export * from './blank_state'
 export * from './button'
 export * from './child_notice'
 export * from './heading'
 export * from './icon_button'
 export * from './icon'
 export * from './image'
+export * from './image_attachment_preview'
 export * from './person'
 export * from './spinner'
 export * from './switch'

package/src/components/display/keyboard_view.tsx

@@ -1,41 +1,40 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
+  Dimensions,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
-  useWindowDimensions,
   View,
   ViewProps,
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useChatContext } from '../../contexts/chat_context'
 
-export function KeyboardView({ children }: ViewProps) {
+export function KeyboardView({ children }: Pick<ViewProps, 'children'>) {
   const styles = useStyles()
   const isKeyboardOpen = useKeyboardOpen()
-  const { height } = useWindowDimensions()
-  const insets = useSafeAreaInsets()
+  const screenHeight = Dimensions.get('screen').height
   const [pageSheetGap, setPageSheetGap] = useState<number>(0)
-  const keyboardVerticalOffset = useMemo(
-    () =>
-      Platform.select({
-        ios: pageSheetGap - insets.bottom,
-        android: pageSheetGap + insets.bottom,
-      }),
-    [pageSheetGap, insets.bottom]
-  )
+  const { bottom } = useSafeAreaInsets()
+  const { edgeToEdge } = useChatContext()
+
+  const behavior: 'padding' | 'height' | 'position' | undefined = Platform.select({
+    android: edgeToEdge ? 'padding' : undefined,
+    ios: 'padding',
+  })
 
   return (
     <View
       style={styles.pageGapView}
       onLayout={event => {
         const { height: viewHeight } = event.nativeEvent.layout
-        setPageSheetGap(height - viewHeight)
+        setPageSheetGap(screenHeight - viewHeight)
       }}
     >
       <KeyboardAvoidingView
-        keyboardVerticalOffset={keyboardVerticalOffset}
-        behavior={'padding'}
+        keyboardVerticalOffset={pageSheetGap - bottom}
+        behavior={behavior}
         style={styles.keyboardView}
         enabled={Platform.select({ android: isKeyboardOpen, ios: true })}
       >
@@ -45,7 +44,7 @@ export function KeyboardView({ children }: ViewProps) {
   )
 }
 
-const useKeyboardOpen = () => {
+export const useKeyboardOpen = () => {
   const [open, setOpen] = useState(false)
 
   useEffect(() => {

package/src/components/display/person.tsx

@@ -23,7 +23,9 @@ export function Person({ person, style }: PersonProps) {
     <View style={[styles.wrapper, style]}>
       <Avatar sourceUri={person.avatar} />
       <View style={styles.content}>
-        <Text style={styles.name}>{person.name}</Text>
+        <Text style={styles.name} numberOfLines={2}>
+          {person.name}
+        </Text>
         <View style={styles.badges}>
           {person.badges?.map((badge, index) => <Badge key={index} label={badge.title} />)}
         </View>
@@ -45,6 +47,7 @@ const useStyles = () => {
     },
     content: {
       gap: space(0.25),
+      flexShrink: 1,
     },
     name: {
       fontWeight: platformFontWeightMedium,

package/src/components/display/platform_modal_header_buttons.tsx

@@ -0,0 +1,83 @@
+import { ColorValue, Platform, StyleSheet, PlatformColor } from 'react-native'
+import { TextButton } from './text_button'
+import { HeaderButton } from '@react-navigation/elements'
+import { Icon } from './icon'
+import { useTheme } from '../../hooks'
+
+interface HeaderSubmitButtonProps {
+  onPress: () => void
+  title?: string
+  disabled?: boolean
+}
+
+export const HeaderSubmitButton = ({
+  onPress,
+  title = 'Submit',
+  ...props
+}: HeaderSubmitButtonProps) => {
+  const styles = useStyles()
+
+  return (
+    <TextButton
+      onPress={onPress}
+      textStyle={[styles.interactionColor, props.disabled && styles.disabledColor]}
+      {...props}
+    >
+      {title}
+    </TextButton>
+  )
+}
+
+interface HeaderCancelButtonProps {
+  onPress: () => void
+  title?: string
+  tintColor?: ColorValue
+}
+
+export const HeaderCancelButton = ({
+  onPress,
+  title = 'Cancel',
+  tintColor,
+  ...props
+}: HeaderCancelButtonProps) => {
+  const styles = useStyles()
+
+  return Platform.select({
+    ios: (
+      <TextButton
+        onPress={onPress}
+        textStyle={[styles.interactionColor, styles.iosCancelButton]}
+        {...props}
+      >
+        {title}
+      </TextButton>
+    ),
+    default: (
+      <HeaderButton onPress={onPress} style={[styles.androidCancelButton]} {...props}>
+        <Icon name="general.x" size={16} color={tintColor} />
+      </HeaderButton>
+    ),
+  })
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    interactionColor: {
+      color: Platform.select({
+        ios: PlatformColor('link'),
+        android: colors.fillColorInteractionDefault as ColorValue,
+      }),
+    },
+    androidCancelButton: {
+      marginRight: 16,
+    },
+    iosCancelButton: {
+      fontWeight: 'normal',
+    },
+    disabledColor: {
+      color: colors.textColorDefaultDisabled,
+    },
+  })
+}

package/src/components/display/video_attachment_preview.tsx

@@ -0,0 +1,105 @@
+import { View, StyleSheet } from 'react-native'
+import { IconButton } from './icon_button'
+import { useTheme } from '../../hooks'
+import { Icon } from './icon'
+import { Text } from './text'
+import { platformFontWeightMedium } from '../../utils'
+
+interface VideoAttachmentPreviewProps {
+  name: string
+  duration?: string
+  onClosePress: () => void
+}
+
+export const VideoAttachmentPreview = ({
+  name,
+  duration,
+  onClosePress,
+}: VideoAttachmentPreviewProps) => {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Icon name="general.outlinedVideoFile" size={18} style={styles.fileIcon} />
+        <View style={styles.textContainer}>
+          <Text
+            variant="tertiary"
+            numberOfLines={1}
+            style={styles.nameText}
+            accessibilityLabel={`Video attachment: ${name}`}
+          >
+            {name}
+          </Text>
+          {duration && (
+            <Text
+              variant="tertiary"
+              numberOfLines={1}
+              style={styles.durationText}
+              accessibilityLabel={`Duration: ${duration}`}
+            >
+              {duration}
+            </Text>
+          )}
+        </View>
+      </View>
+      <IconButton
+        name="general.x"
+        onPress={onClosePress}
+        size="xxs"
+        appearance="neutral"
+        style={styles.closeButton}
+        accessibilityLabel="Remove video attachment"
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      height: 60,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: 8,
+      backgroundColor: colors.fillColorNeutral070,
+      borderColor: colors.borderColorDefaultBase,
+      borderWidth: 1,
+      borderRadius: 8,
+      padding: 4,
+    },
+    contentContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+      flexShrink: 1,
+      paddingVertical: 4,
+      paddingLeft: 8,
+    },
+    textContainer: {
+      flexShrink: 1,
+      flexDirection: 'column',
+    },
+    fileIcon: {
+      color: colors.iconColorDefaultPrimary,
+    },
+    nameText: {
+      color: colors.textColorDefaultPrimary,
+      fontWeight: platformFontWeightMedium,
+      flexShrink: 1,
+    },
+    durationText: {
+      color: colors.textColorDefaultPrimary,
+    },
+    closeButton: {
+      backgroundColor: colors.fillColorNeutral050Base,
+      borderRadius: 16,
+      height: 20,
+      width: 20,
+      alignSelf: 'flex-start',
+    },
+  })
+}

package/src/components/group_conversation_list.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
-import { useConversations } from '../hooks/use_conversations'
 import { ConversationPreview } from './conversations/conversation_preview'
 import { ConversationRequestArgs } from '../utils/request/conversation'
 import { useTheme } from '../hooks'
 import { Icon, Text } from './display'
+import {
+  ConversationsContextProvider,
+  useConversationsContext,
+} from '../contexts/conversations_context'
 
 interface GroupConversationsProps extends Partial<ConversationRequestArgs> {
   limit?: number
@@ -24,19 +27,23 @@ interface GroupConversationsProps extends Partial<ConversationRequestArgs> {
  *
  * Originally designed for use in CCA.
  */
-export const GroupConversations = ({
+export const GroupConversations = ({ chat_group_graph_id, ...rest }: GroupConversationsProps) => {
+  return (
+    <ConversationsContextProvider args={{ chat_group_graph_id, group_source_app_name: undefined }}>
+      <GroupConversationList {...rest} />
+    </ConversationsContextProvider>
+  )
+}
+
+const GroupConversationList = ({
   limit,
   onConversationPress,
   style,
   ListHeaderComponent,
   ListOverflowFooterComponent,
-  chat_group_graph_id,
 }: GroupConversationsProps) => {
   const styles = useStyles()
-  const { conversations = [] } = useConversations({
-    chat_group_graph_id,
-    group_source_app_name: undefined,
-  })
+  const { conversations = [] } = useConversationsContext()
 
   return (
     <View style={style}>

package/src/components/page/error_boundary.tsx

@@ -3,7 +3,7 @@ import { useQueryErrorResetBoundary } from '@tanstack/react-query'
 import React, { PropsWithChildren, useEffect, useMemo } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Button, Heading, Icon, Text } from '../display'
+import { Button, Heading, Icon, Text, TextButton } from '../display'
 import { useTheme } from '../../hooks'
 import { ResponseError } from '../../utils/response_error'
 
@@ -98,6 +98,9 @@ function ErrorContent({ heading, body }: { heading: string; body: string }) {
         </Heading>
         <Text style={styles.body}>{body}</Text>
       </View>
+      <TextButton variant="tertiary" onPress={() => navigation.navigate('BugReport')}>
+        Report a bug
+      </TextButton>
       <Button variant="outline" onPress={navigation.goBack} title="Go back" size="md" />
     </View>
   )

package/src/components/primitive/avatar_primitive.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { StyleSheet, View, ViewProps } from 'react-native'
 import { useTheme } from '../../hooks'
+import { Icon, IconString } from '../display/icon'
 import { Image, ImageProps } from '../display/image'
 import { Spinner } from '../display/spinner'
 
@@ -11,6 +12,7 @@ import { Spinner } from '../display/spinner'
 const Avatar = {
   Root: AvatarRoot,
   Image: AvatarImage,
+  ImageFallback: AvatarImageFallback,
   Presence: AvatarPresence,
   Group: AvatarGroup,
   GroupLoader: AvatarGroupLoader,
@@ -20,6 +22,7 @@ const Avatar = {
 type AvatarComponents = {
   Root: React.FC<AvatarRootProps>
   Image: React.FC<AvatarImageProps>
+  ImageFallback: React.FC<AvatarImageFallbackProps>
   Presence: React.FC<AvatarPresenceProps>
   Group: React.FC<AvatarGroupProps>
   GroupLoader: React.FC<Record<string, never>>
@@ -29,6 +32,7 @@ type AvatarComponents = {
 export default Avatar as AvatarComponents
 export type {
   AvatarImageProps,
+  AvatarImageFallbackProps,
   AvatarPresenceProps,
   AvatarGroupProps,
   AvatarMaskProps,
@@ -66,6 +70,12 @@ const AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {
   [AVATAR_SIZES.lg]: 14,
 }
 
+const AVATAR_FALLBACK_ICON_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.sm]: 12,
+  [AVATAR_SIZES.md]: 16,
+  [AVATAR_SIZES.lg]: 20,
+}
+
 // =================================
 // ====== Context ==================
 // =================================
@@ -160,6 +170,28 @@ function AvatarGroupImage({ sourceUri, style, onLoad }: AvatarGroupImageProps) {
   )
 }
 
+interface AvatarImageFallbackProps {
+  name?: IconString
+}
+
+function AvatarImageFallback({ name = 'general.person' }: AvatarImageFallbackProps) {
+  const { size } = useAvatarContext()
+  const styles = useStyles()
+
+  return (
+    <View style={styles.fallbackContainer}>
+      <Icon
+        name={name}
+        size={AVATAR_FALLBACK_ICON_PX[size]}
+        style={styles.fallbackIcon}
+        accessibilityElementsHidden={true}
+      />
+    </View>
+  )
+}
+
+AvatarImageFallback.displayName = 'Avatar.ImageFallback'
+
 // =================================
 // ====== AvatarGroup   ============
 // =================================
@@ -169,6 +201,7 @@ interface AvatarGroupProps {
 }
 
 type AvatarIndex = 0 | 1 | 2 | 3
+
 function AvatarGroup({ sourceUris }: AvatarGroupProps) {
   const styles = useStyles()
   const { setAllImagesLoaded } = useAvatarContext()
@@ -196,10 +229,6 @@ function AvatarGroup({ sourceUris }: AvatarGroupProps) {
     setAllImagesLoaded(allImagesLoaded)
   }, [displayUris, hasDisplayUris, loadingStatus, setAllImagesLoaded])
 
-  if (!hasDisplayUris) {
-    return null
-  }
-
   if (displayUris.length === 1) {
     return <AvatarGroupImage sourceUri={displayUris[0]} onLoad={() => handleImageLoaded(0)} />
   }
@@ -381,5 +410,14 @@ const useStyles = ({ size = 'md', presence = 'offline' }: Styles = {}) => {
       width: '100%',
       height: '50%',
     },
+    fallbackContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.fillColorNeutral070,
+    },
+    fallbackIcon: {
+      color: colors.iconColorDefaultDim,
+    },
   })
 }

package/src/contexts/chat_context.tsx

@@ -12,6 +12,7 @@ export interface ChatProviderProps {
   token?: PartialToken
   tokenType?: OauthType
   theme: CreateChatThemeProps
+  edgeToEdge?: boolean
 }
 
 export interface ChatContextValue extends Omit<ChatProviderProps, 'theme'> {
@@ -26,10 +27,11 @@ export const ChatContext = createContext<ChatContextValue>({
   session: new Session(),
   theme: defaultTheme('light'),
   token: undefined,
+  edgeToEdge: true,
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {
-  const { env, token, onUnauthorizedResponse, giphyApiKey, tokenType } = value
+  const { env, token, onUnauthorizedResponse, giphyApiKey, tokenType, edgeToEdge = true } = value
   const theme = useCreateChatTheme(value.theme || {})
   const session = useMemo(
     () => new Session({ token, env, type: tokenType }),
@@ -37,12 +39,13 @@ export function ChatProvider({ children, value }: { children: any; value: ChatPr
   )
 
   const contextValue: ChatContextValue = {
+    edgeToEdge,
     env,
-    token,
+    giphyApiKey,
     onUnauthorizedResponse,
     session,
     theme,
-    giphyApiKey,
+    token,
   }
 
   return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>

package/src/hooks/groups/use_group_members_for_new_conversation.ts

@@ -1,12 +1,14 @@
 import { MemberBadge, MemberResource, ResourceObject } from '../../types'
 import { GroupsGroupMemberResource } from '../../types/resources/groups/groups_member_resource_with_person'
-import { useApiPaginator } from '../use_api'
 import { useCurrentPerson } from '../use_current_person'
+import { useSuspensePaginator } from '../use_suspense_api'
 
-type UseApiPaginatorResult<T extends ResourceObject> = ReturnType<typeof useApiPaginator<T>>
+type UseSuspensePaginatorResult<T extends ResourceObject> = ReturnType<
+  typeof useSuspensePaginator<T>
+>
 
 export type GroupMembersForNewConversationResult = Omit<
-  UseApiPaginatorResult<GroupsGroupMemberResource>, // We are passing our own "members" data shape
+  UseSuspensePaginatorResult<GroupsGroupMemberResource>, // We are passing our own "members" data shape
   'data'
 > & {
   data: MemberResource[]
@@ -20,7 +22,7 @@ export type GroupMembersForNewConversationResult = Omit<
  */
 export function useGroupMembersForNewConversation({ id }: { id: number }) {
   const currentPerson = useCurrentPerson()
-  const response = useApiPaginator<GroupsGroupMemberResource>({
+  const response = useSuspensePaginator<GroupsGroupMemberResource>({
     url: `/me/groups/${id}/memberships`,
     data: {
       perPage: 100,

package/src/hooks/use_conversation.ts

@@ -26,7 +26,13 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'unread_count',
         'updated_at',
       ],
-      MemberAbility: ['can_update', 'can_delete', 'leader', 'can_reply'],
+      MemberAbility: [
+        'can_update',
+        'can_delete',
+        'leader',
+        'can_reply',
+        'can_delete_non_authored_messages',
+      ],
       ConversationBadge: ['app_name', 'pco_resource_type', 'text'],
       Group: ['type', 'id', 'links', 'name', 'source_app_name', 'source_type'],
     },