@planningcenter/chat-react-native 3.1.0-rc.13 → 3.1.0-rc.14

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Text, Image, StyleSheet, Linking, Pressable } from 'react-native'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { useTheme } from '../../../hooks'
+import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+
+export function GiphyAttachment({
+  attachment,
+}: {
+  attachment: DenormalizedGiphyAttachmentResource
+}) {
+  const styles = useStyles()
+  const { title, titleLink, giphy } = attachment
+  const { url, width, height } = giphy.fixedWidth
+
+  function handlePress() {
+    if (titleLink) {
+      // Open Giphy link in the default web browser
+      Linking.openURL(titleLink)
+    }
+  }
+
+  return (
+    <Pressable onPress={handlePress} style={styles.container}>
+      <Image
+        source={{ uri: url }}
+        style={[styles.image, { width, height }]}
+        accessibilityLabel={title}
+      />
+      <Text style={styles.link}>
+        <Text style={styles.tag}>/giphy</Text> {title}
+      </Text>
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    container: {
+      gap: 4,
+    },
+    image: {
+      borderRadius: 8,
+    },
+    link: {
+      fontSize: tokens.fontSizeSm,
+      color: colors.fillColorInteractionDefault,
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+    },
+    tag: {
+      fontWeight: 'bold',
+    },
+  })
+}

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Image, StyleSheet } from 'react-native'
+
+export function ImageAttachment({ attachment }: { attachment: any }) {
+  const styles = useStyles()
+  const { attributes } = attachment
+  const { url, urlMedium, filename, metadata = {} } = attributes
+  const width = metadata.width || 100
+  const height = metadata.height || 100
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: urlMedium || url }}
+        style={[styles.image, { aspectRatio: width / height }]}
+        accessibilityLabel={filename}
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    container: {
+      maxWidth: '100%',
+    },
+    image: {
+      borderRadius: 8,
+      minWidth: 200,
+    },
+  })
+}

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

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react'
+import { View, StyleSheet, Pressable } 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'
+
+export function VideoAttachment({
+  attachment,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+}) {
+  const { attributes } = attachment
+  const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } =
+    attributes.metadata || {}
+  const { url } = attributes
+
+  const videoRef = useRef<VideoPlayerHandle>(null)
+  const [isOpen, setIsOpen] = useState(false)
+
+  function openVideo() {
+    if (!isOpen && videoRef.current) {
+      videoRef.current.presentFullscreenPlayer()
+      videoRef.current.play()
+      setIsOpen(true)
+    }
+  }
+
+  function onFullscreenPlayerWillDismiss() {
+    videoRef.current?.pause()
+    setIsOpen(false)
+  }
+
+  const viewRef = useRef<View>(null)
+
+  return (
+    <View style={styles.container} ref={viewRef}>
+      <Pressable onPress={openVideo}>
+        <Video.Player
+          ref={videoRef}
+          source={{ uri: url }}
+          aspectRatio={width / height}
+          style={styles.video}
+          onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}
+        />
+        {!isOpen && (
+          <View style={styles.playButtonWrapper}>
+            <IconButton
+              name="services.play"
+              size="md"
+              accessibilityLabel="Play Video"
+              onPress={openVideo}
+              style={styles.button}
+            />
+          </View>
+        )}
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    maxWidth: 320,
+    maxHeight: 320,
+  },
+  video: {
+    width: '100%',
+    height: 'auto',
+    backgroundColor: 'black',
+    borderRadius: 8,
+  },
+  playButtonWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    width: 42,
+    height: 42,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 25,
+    backgroundColor: '#eee',
+    borderColor: '#aaa',
+    borderWidth: 1,
+  },
+})

package/src/components/conversation/message.tsx

@@ -8,6 +8,8 @@ import { Avatar, Text } from '../../components/display'
 import { useTheme } from '../../hooks'
 import { MessageResource } from '../../types'
 import { ReactionCountResource } from '../../types/resources/reaction'
+import { MessageAttachments } from './message_attachments'
+import ErrorBoundary from '../page/error_boundary'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -29,7 +31,6 @@ export function Message(props: MessageResource & { conversation_id: number }) {
       reaction_value: reaction.value,
     })
   }
-  if (!text) return null
 
   return (
     <View style={styles.message}>
@@ -41,7 +42,10 @@ export function Message(props: MessageResource & { conversation_id: number }) {
       <View style={styles.messageContent}>
         {!props.mine && <Text variant="tertiary">{props.author.name}</Text>}
         <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>
-          <Text style={styles.messageText}>{text}</Text>
+          <ErrorBoundary>
+            <MessageAttachments attachments={props.attachments} />
+          </ErrorBoundary>
+          {text && <Text style={styles.messageText}>{text}</Text>}
         </PlatformPressable>
         <View style={styles.messageReactions}>
           {reactionCounts.map(reaction => (
@@ -76,12 +80,13 @@ const useMessageStyles = ({ mine }: MessageResource) => {
     },
     messageBubble: {
       backgroundColor: mine ? activeColor : colors.fillColorNeutral070,
-      borderRadius: 12,
-      paddingVertical: 6,
-      paddingHorizontal: 8,
+      borderRadius: 8,
+      maxWidth: 232,
     },
     messageText: {
       color: colors.textColorDefaultPrimary,
+      paddingVertical: 6,
+      paddingHorizontal: 8,
     },
     messageReactions: {
       flexDirection: 'row',

package/src/components/conversation/message_attachments.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
+import { AudioAttachment } from './attachments/audio_attachment'
+import { VideoAttachment } from './attachments/video_attachment'
+import { GiphyAttachment } from './attachments/giphy_attachment'
+import { GenericFileAttachment } from './attachments/generic_file_attachment'
+import { ExpandedLink } from './attachments/expanded_link'
+import { ImageAttachment } from './attachments/image_attachment'
+
+export function MessageAttachments(props: { attachments: DenormalizedAttachmentResource[] }) {
+  const styles = useStyles()
+  const { attachments } = props
+  if (!attachments || attachments.length === 0) return null
+  return (
+    <View style={styles.attachmentsContainer}>
+      {attachments.map(attachment => {
+        switch (attachment.type) {
+          case 'MessageAttachment':
+            return <MessageAttachment key={attachment.id} attachment={attachment} />
+          case 'giphy':
+            return (
+              <GiphyAttachment
+                key={attachment.id || attachment.titleLink}
+                attachment={attachment}
+              />
+            )
+          case 'ExpandedLink':
+            return <ExpandedLink key={attachment.id} attachment={attachment} />
+          default:
+            return null
+        }
+      })}
+    </View>
+  )
+}
+
+function MessageAttachment({ attachment }: { attachment: any }) {
+  const { attributes } = attachment
+  const contentType = attributes?.contentType
+  const basicType = contentType ? contentType.split('/')[0] : ''
+  switch (basicType) {
+    case 'image':
+      return <ImageAttachment attachment={attachment} />
+    case 'video':
+      return <VideoAttachment attachment={attachment} />
+    case 'audio':
+      return <AudioAttachment attachment={attachment} />
+    default:
+      return <GenericFileAttachment attachment={attachment} />
+  }
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    attachmentsContainer: {
+      gap: 4,
+      padding: 2,
+    },
+  })
+}

package/src/components/conversations.tsx

@@ -1,26 +1,37 @@
 import { useNavigation } from '@react-navigation/native'
 import { FlashList } from '@shopify/flash-list'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
 import { useTheme } from '../hooks'
 import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { useConversations } from '../hooks/use_conversations'
 import { formatDatePreview } from '../utils/date'
-import { AvatarGroup, Badge, Heading, Text, TextButton } from './display'
-import { ActionButton } from './display/action_button'
-import { useCanCreateConversations } from '../hooks/use_chat_permissions'
+import { AvatarGroup, Badge, Heading, Text } from './display'
+import { ConversationRequestArgs } from '../utils/request/conversation'
 
-export const Conversations = () => {
-  const styles = useStyles()
+interface ConversationsProps extends Partial<ConversationRequestArgs> {
+  ListHeaderComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+    | null
+    | undefined
+}
 
-  const { conversations, fetchNextPage, refetch, isRefetching } = useConversations()
-  const canCreateConversations = useCanCreateConversations()
+export const Conversations = ({
+  ListHeaderComponent,
+  filter,
+  group,
+  gids,
+  group_source_app_name,
+}: ConversationsProps) => {
+  const styles = useStyles()
 
-  // TODO: Filter using the API
-  const nonEmptyConversations = useMemo(
-    () => conversations.filter(c => c.lastMessageTextPreview) || [],
-    [conversations]
-  )
+  const { conversations, fetchNextPage, refetch, isRefetching, isFetched } = useConversations({
+    filter,
+    group,
+    gids,
+    group_source_app_name,
+  })
   const navigation = useNavigation()
 
   useConversationsJoltEvents()
@@ -28,20 +39,17 @@ export const Conversations = () => {
   return (
     <View style={styles.container}>
       <FlashList
-        data={nonEmptyConversations}
+        data={conversations}
         estimatedItemSize={97}
         contentContainerStyle={styles.contentContainer}
         onRefresh={refetch}
-        refreshing={isRefetching}
-        ListHeaderComponent={
-          <View style={styles.header}>
-            <Heading numberOfLines={1} variant="h2">
-              Conversations
-            </Heading>
-            <TextButton>Mark all read</TextButton>
+        refreshing={!isFetched && isRefetching}
+        ListHeaderComponent={ListHeaderComponent}
+        ListEmptyComponent={
+          <View style={styles.listEmpty}>
+            <Text variant="secondary">No conversations found</Text>
           </View>
         }
-        ListEmptyComponent={<Text>No conversations found</Text>}
         renderItem={({ item }) => (
           <Pressable
             style={styles.conversation}
@@ -75,11 +83,6 @@ export const Conversations = () => {
         )}
         onEndReached={() => fetchNextPage()}
       />
-      <ActionButton
-        visible={canCreateConversations}
-        title="New conversation"
-        onPress={() => navigation.navigate('Create')}
-      />
     </View>
   )
 }
@@ -101,13 +104,6 @@ const useStyles = () => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
-    header: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingTop: 8,
-      paddingBottom: 8,
-      paddingHorizontal: 16,
-    },
     container: { flex: 1 },
     contentContainer: { paddingVertical: 16 },
     listItem: { color: colors.fillColorNeutral020 },
@@ -116,7 +112,7 @@ const useStyles = () => {
       gap: 8,
       borderBottomWidth: 1,
       borderBottomColor: colors.fillColorNeutral060,
-      paddingTop: 4,
+      paddingTop: 12,
       paddingBottom: 12,
       paddingHorizontal: 16,
     },
@@ -140,5 +136,11 @@ const useStyles = () => {
       borderRadius: 24,
       color: 'white',
     },
+    listEmpty: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: 16,
+    },
   })
 }

package/src/components/display/badge.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import type { ViewStyle, TextStyle } from 'react-native'
-import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'
+import type { TextStyle, ViewProps, ViewStyle } from 'react-native'
+import { Pressable, StyleSheet, View } from 'react-native'
+import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
-import { Icon } from './icon'
-import { Text } from './text'
 import { platformFontWeightMedium, space } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon } from './icon'
+import { Text } from './text'
 import { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'
 
 // =================================
@@ -72,6 +72,10 @@ interface BadgeProps {
    * Shows an icon of the user choice to the left of the text.
    */
   iconName?: string
+  /**
+   * Shows an icon of the user choice to the right of the text.
+   */
+  iconNameRight?: string
   /**
    * Styles badge wrapper.
    */
@@ -80,6 +84,10 @@ interface BadgeProps {
    * Specifies the maximum size a font can reach when allowFontScaling is enabled.
    */
   maxFontSizeMultiplier?: number
+  /**
+   * Callback function when the badge is pressed.
+   */
+  onPress?: () => void
 }
 
 export function Badge({
@@ -87,40 +95,59 @@ export function Badge({
   metaLabel,
   style,
   iconName,
+  iconNameRight,
   label,
   productLogoName,
   variant = 'default',
   maxFontSizeMultiplier,
+  onPress,
 }: BadgeProps) {
   const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })
-  const { showBadgeLogo } = useTheme()
+  const { showBadgeProductLogo } = useTheme()
 
   const isMetaSubtle = variant === 'metaSubtle'
-  const isMeta = variant === 'meta'
   const hasMetaLabel = Boolean(metaLabel)
 
-  const showLogo = showBadgeLogo && productLogoName && isMeta
+  const showLogo = showBadgeProductLogo && productLogoName
   const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName?.toLowerCase()]
   const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label
 
   return (
-    <View style={[styles.badgeWrapper, style]}>
+    <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole="button">
       <View style={styles.badge}>
         {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}
         {iconName && <Icon name={iconName} style={styles.icon} />}
         <Text variant="footnote" style={styles.label}>
           {badgeLabel}
         </Text>
+        {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}
       </View>
       {hasMetaLabel && (
         <Text variant="footnote" style={styles.metaLabel} numberOfLines={1}>
           {metaLabel}
         </Text>
       )}
-    </View>
+    </BadgeWrapper>
   )
 }
 
+const BadgeWrapper = ({
+  children,
+  onPress,
+  accessibilityRole,
+  ...restProps
+}: ViewProps & Pick<BadgeProps, 'onPress'>) => {
+  if (onPress) {
+    return (
+      <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>
+        {children}
+      </Pressable>
+    )
+  }
+
+  return <View {...restProps}>{children}</View>
+}
+
 // =================================
 // ====== Styles ===================
 // =================================
@@ -199,6 +226,10 @@ const useStyles = ({
       color: statusColorMap[appearance].icon,
       fontSize: badgeFontSize,
     },
+    iconRight: {
+      color: statusColorMap[appearance].icon,
+      fontSize: badgeFontSize - 2,
+    },
     logo: {
       fontSize: badgeFontSize * fontScale,
     },

package/src/components/display/button.tsx

@@ -50,7 +50,7 @@ type VariantColors = Record<
 // ====== Component ================
 // =================================
 
-interface ButtonProps extends PressableProps {
+export interface ButtonProps extends PressableProps {
   /**
    * Specifies whether fonts should be scaled down automatically to fit given style constraints.
    */

package/src/components/display/child_notice.tsx

@@ -4,7 +4,7 @@ import { BannerCollapsible } from './banner_collapsible'
 import BannerPrimitive from '../primitive/banner_primitive'
 import { View, StyleSheet } from 'react-native'
 import { Avatar } from './avatar'
-import { platformFontWeightMedium } from '../../utils'
+import { platformFontWeightMedium, pluralize } from '../../utils'
 import { Text } from './text'
 
 // =================================
@@ -17,7 +17,7 @@ interface ChildNoticeProps {
 
 export function ChildNotice({ childMembers }: ChildNoticeProps) {
   const styles = useStyles()
-  const heading = `${childMembers.length} members under age 13`
+  const heading = `${pluralize(childMembers.length, 'member')} under age 13`
 
   return (
     <BannerCollapsible appearance="warning" iconName="general.shieldExclamation" heading={heading}>

package/src/components/display/icon.tsx

@@ -4,14 +4,15 @@ import type { ColorValue, StyleProp, ViewStyle } from 'react-native'
 import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
-import * as general from '@planningcenter/icons/paths/general'
-import * as groups from '@planningcenter/icons/paths/groups'
+import * as api from '@planningcenter/icons/paths/api'
+import * as brand from '@planningcenter/icons/paths/brand'
 import * as calendar from '@planningcenter/icons/paths/calendar'
-import * as people from '@planningcenter/icons/paths/people'
 import * as churchCenter from '@planningcenter/icons/paths/church-center'
+import * as general from '@planningcenter/icons/paths/general'
+import * as groups from '@planningcenter/icons/paths/groups'
 import * as logomark from '@planningcenter/icons/paths/logomark'
-import * as brand from '@planningcenter/icons/paths/brand'
-import * as api from '@planningcenter/icons/paths/api'
+import * as people from '@planningcenter/icons/paths/people'
+import * as services from '@planningcenter/icons/paths/services'
 
 // =================================
 // ====== Constants ================
@@ -21,13 +22,14 @@ const FALLBACK_SIZE = 12
 
 const ICONS = {
   api,
+  brand,
   calendar,
-  people,
   churchCenter,
-  groups,
   general,
+  groups,
   logomark,
-  brand,
+  people,
+  services,
 } as const
 
 type IconStyle = ViewStyle & {

package/src/hooks/use_api.ts

@@ -6,20 +6,20 @@ import {
 } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
-import { useApiClient } from './use_api_client'
+import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey } from './use_suspense_api'
 
-interface SuspenseGetOptions extends GetRequest {
-  app?: 'chat' | 'groups'
+interface ApiGetOptions extends GetRequest {
+  app?: App
+  enabled?: boolean
 }
 
-export const useApiGet = <T extends ResourceObject | ResourceObject[]>(
-  args: SuspenseGetOptions
-) => {
+export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: ApiGetOptions) => {
   type Resource = ApiResource<T>
 
   const { data, ...query } = useQuery<Resource, Response>({
     queryKey: getRequestQueryKey(args),
+    enabled: args.enabled,
   })
 
   return { ...data, ...query }
@@ -36,7 +36,7 @@ export type SuspensePaginatorOptions = Omit<
 >
 
 export const useApiPaginator = <T extends ResourceObject>(
-  args: SuspenseGetOptions,
+  args: ApiGetOptions,
   opts?: SuspensePaginatorOptions
 ) => {
   const apiClient = useApiClient()
@@ -52,11 +52,11 @@ export const useApiPaginator = <T extends ResourceObject>(
       const pageParmWhere = pageParam?.where || {}
       const argsWhere = args.data.where || {}
       const where = { ...argsWhere, ...pageParmWhere }
-
+      const app = args.app || 'chat'
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return apiClient.chat.get({
+      return apiClient[app].get({
         url: args.url,
         data,
       })
@@ -71,10 +71,11 @@ export const useApiPaginator = <T extends ResourceObject>(
 
       return undefined
     },
+    enabled: args.enabled,
     ...(opts || {}),
   })
 
-  const data: T[] = query.data?.pages.flatMap(page => page.data) || []
+  const data: T[] = query.data?.pages?.flatMap(page => page.data) || []
 
   return { ...query, data }
 }

package/src/hooks/use_api_client.ts

@@ -2,7 +2,7 @@ import { useContext, useMemo } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { Client } from '../utils/client'
 
-type App = 'chat' | 'groups' | 'services'
+export type App = 'chat' | 'groups' | 'services'
 const apps: App[] = ['chat', 'groups', 'services']
 
 export type ApiClient = { [_K in App]: Client }

package/src/hooks/use_conversation.ts

@@ -4,7 +4,7 @@ import { ApiResource, ConversationResource } from '../types'
 import { transformGetToPost } from '../utils/client/request_helpers'
 import { useApiClient } from './use_api_client'
 import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
-import { getConversationsRequestArgs } from './use_conversations'
+import { getConversationsRequestArgs } from '../utils/request/conversation'
 
 export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
   url: `/me/conversations/${conversation_id}`,