@planningcenter/chat-react-native 3.16.0-rc.1 → 3.16.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.16.0-rc.1",
+  "version": "3.16.0-rc.3",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "47e50810584fa31ba56562462c46916de42d51ec"
+  "gitHead": "41458eebf252d441367b1c30a6b35e5422486bf2"
 }

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

@@ -5,6 +5,7 @@ import { useTheme } from '../../../hooks'
 import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
 import { PlatformPressable } from '@react-navigation/elements'
 import { Image } from '../../display'
+import { assertKeysAreNumbers } from '../../../utils'
 
 export function GiphyAttachment({
   attachment,
@@ -46,20 +47,6 @@ export function GiphyAttachment({
   )
 }
 
-const assertKeysAreNumbers = (obj: Object): Record<any, number> => {
-  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, assertNumber(value)]))
-}
-
-const assertNumber = (value: string): number => {
-  if (typeof value === 'number') return value
-
-  if (typeof value === 'string' && !isNaN(Number(value))) {
-    return Number(value)
-  }
-
-  return 0
-}
-
 const useStyles = ({ imageWidth, imageHeight }: { imageWidth: number; imageHeight: number }) => {
   const { colors } = useTheme()
   return StyleSheet.create({

package/src/components/conversation/message.tsx

@@ -1,9 +1,13 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
-import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { MessageReaction } from '../../components/conversation/message_reaction'
 import { Avatar, Icon, Spinner, Text, TextInlineButton } from '../../components/display'
-import { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'
+import {
+  useAnimatedMessageBackgroundColor,
+  useInteractionGhostBackgroundColor,
+  useTheme,
+} from '../../hooks'
 import { MessageResource } from '../../types'
 import { ReactionCountResource } from '../../types/resources/reaction'
 import { MessageAttachments } from './message_attachments'
@@ -15,13 +19,7 @@ import {
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
   platformFontWeightMedium,
 } from '../../utils/styles'
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  interpolateColor,
-  Easing,
-} from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
 import { MessageReadReceipts } from './message_read_receipts'
 import { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
@@ -56,6 +54,8 @@ export function Message({
   const isPersisted = !isNewMessage(message)
   const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
+  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
+    useAnimatedMessageBackgroundColor()
 
   useEffect(() => {
     if (pending) {
@@ -81,30 +81,6 @@ export function Message({
     }
   }
 
-  const bgFadeProgress = useSharedValue(0)
-  const pressedColor = Platform.select({
-    ios: colors.fillColorNeutral050Base,
-    default: 'transparent',
-  })
-  const animatedBackgroundColor = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      bgFadeProgress.value,
-      [0, 1],
-      ['transparent', pressedColor]
-    )
-    return {
-      backgroundColor,
-    }
-  })
-
-  const handlePressIn = () => {
-    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
-  }
-
-  const handlePressOut = () => {
-    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
-  }
-
   const handleMessageLongPress = () => {
     if (!isPersisted) return
 
@@ -149,8 +125,8 @@ export function Message({
     <Pressable
       onLongPress={handleMessageLongPress}
       onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={handleMessagePressIn}
+      onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral }}
       accessibilityHint="Long press to view message actions like reacting and copying."
     >

package/src/components/conversation/shadow_message.tsx

@@ -0,0 +1,266 @@
+import React from 'react'
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Avatar, Icon, IconProps, Image, Text } from '../display'
+import {
+  useAnimatedMessageBackgroundColor,
+  useFontScale,
+  useScalableNumberOfLines,
+  useTheme,
+} from '../../hooks'
+import { MessageResource } from '../../types'
+import {
+  DenormalizedAttachmentResource,
+  DenormalizedGiphyAttachmentResource,
+  DenormalizedExpandedLinkAttachmentResource,
+  DenormalizedMessageAttachmentResource,
+} from '../../types/resources/denormalized_attachment_resource'
+import {
+  CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+  MAX_FONT_SIZE_MULTIPLIER,
+  MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+  platformFontWeightMedium,
+} from '../../utils/styles'
+import Animated from 'react-native-reanimated'
+import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
+import { assertKeysAreNumbers } from '../../utils'
+
+interface ShadowMessageProps extends MessageResource {}
+
+export function ShadowMessage({ ...message }: ShadowMessageProps) {
+  const { text } = message
+  const styles = useStyles(message)
+  const { colors } = useTheme()
+  const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
+  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
+    useAnimatedMessageBackgroundColor()
+  const scalableNumberOfLines = useScalableNumberOfLines(2)
+
+  const replyCount = 0 // TODO: Get reply count from message object
+
+  const handleNavigateToReplies = () => {
+    console.log('Navigate to replies') // TODO: Implement navigate to a reply screen
+  }
+
+  return (
+    <Pressable
+      android_ripple={{ color: colors.androidRippleNeutral }}
+      onPress={handleNavigateToReplies}
+      onPressIn={handleMessagePressIn}
+      onPressOut={handleMessagePressOut}
+      accessibilityHint="Navigate to all replies for this message."
+    >
+      <Animated.View style={[styles.message, animatedBackgroundColor]}>
+        {!message.mine && (
+          <View>
+            <View style={styles.avatarWrapper}>
+              <Avatar
+                size="xs"
+                sourceUri={message.author.avatar}
+                style={styles.avatar}
+                maxFontSizeMultiplier={1}
+              />
+            </View>
+            <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+          </View>
+        )}
+        <View style={styles.messageContent}>
+          <View
+            style={styles.messageBubble}
+            onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
+          >
+            <MessageAttachmentImagery attachments={message.attachments} />
+            {text && (
+              <Text
+                variant="footnote"
+                style={styles.messageText}
+                numberOfLines={scalableNumberOfLines}
+              >
+                {text}
+              </Text>
+            )}
+          </View>
+          <View style={styles.messageMeta}>
+            <Text variant="footnote" style={styles.replyCountText}>
+              {replyCount} replies
+            </Text>
+          </View>
+        </View>
+        {message.mine && (
+          <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+        )}
+      </Animated.View>
+    </Pressable>
+  )
+}
+
+function MessageAttachmentImagery({
+  attachments,
+}: {
+  attachments: DenormalizedAttachmentResource[]
+}) {
+  if (!attachments || attachments.length === 0) return null
+
+  const attachment = attachments[0]
+
+  if (attachment.type === 'giphy') {
+    return <GiphyImage attachment={attachment} />
+  }
+  if (attachment.type === 'ExpandedLink') {
+    return <ExpandedLinkImage attachment={attachment} />
+  }
+  if (attachment.type === 'MessageAttachment') {
+    const contentType = attachment.attributes?.contentType
+    const basicType = contentType?.split('/')[0]
+
+    switch (basicType) {
+      case 'image':
+        return <MessageAttachmentImage attachment={attachment} />
+      case 'video':
+        return <MessageAttachmentIcon iconName="general.outlinedVideoFile" />
+      case 'audio':
+        return <MessageAttachmentIcon iconName="general.outlinedMusicFile" />
+      case 'application':
+        return <MessageAttachmentIcon iconName="general.outlinedGenericFile" />
+      default:
+        return null
+    }
+  }
+
+  return null
+}
+
+function GiphyImage({ attachment }: { attachment: DenormalizedGiphyAttachmentResource }) {
+  const { title, giphy } = attachment
+  const { url } = giphy.fixedWidth
+  const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)
+  const styles = useStyles({ imageWidth: width, imageHeight: height })
+
+  return (
+    <Image
+      source={{ uri: url }}
+      wrapperStyle={styles.imageWrapper}
+      style={styles.image}
+      alt={title}
+      loaderSize={16}
+    />
+  )
+}
+
+function ExpandedLinkImage({
+  attachment,
+}: {
+  attachment: DenormalizedExpandedLinkAttachmentResource
+}) {
+  const { title = '', imageUrl, imageHeight, imageWidth } = attachment.attributes
+  const styles = useStyles({ imageWidth, imageHeight })
+
+  return (
+    <Image
+      source={{ uri: imageUrl }}
+      wrapperStyle={styles.imageWrapper}
+      style={styles.image}
+      alt={title}
+      loaderSize={16}
+    />
+  )
+}
+
+function MessageAttachmentImage({
+  attachment,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+}) {
+  const { url, urlMedium, filename, metadata = {} } = attachment.attributes
+  const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })
+
+  return (
+    <Image
+      source={{ uri: urlMedium || url }}
+      style={styles.image}
+      wrapperStyle={styles.imageWrapper}
+      alt={filename}
+      loaderSize={16}
+    />
+  )
+}
+
+function MessageAttachmentIcon({ iconName }: { iconName: IconProps['name'] }) {
+  const styles = useStyles()
+  return (
+    <Icon
+      name={iconName}
+      style={styles.attachmentIcon}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+    />
+  )
+}
+
+interface StylesProps {
+  imageWidth?: number
+  imageHeight?: number
+  mine?: boolean
+}
+
+const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}) => {
+  const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const { width } = useWindowDimensions()
+  const tabletWidth = width >= 744 // Smallest iPad Mini's width
+
+  return StyleSheet.create({
+    message: {
+      gap: 8,
+      flexDirection: mine ? 'row-reverse' : 'row',
+      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+    },
+    messageContent: {
+      flex: 1,
+      gap: 4,
+      marginBottom: 12,
+    },
+    avatarWrapper: {
+      width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+      alignItems: 'center',
+    },
+    avatar: {
+      marginBottom: 8,
+      opacity: 0.5,
+    },
+    messageBubble: {
+      flexDirection: 'row',
+      alignSelf: mine ? 'flex-end' : 'flex-start',
+      alignItems: 'center',
+      gap: 8,
+      borderColor: colors.borderColorDefaultBase,
+      borderWidth: 1,
+      borderRadius: 8,
+      maxWidth: tabletWidth ? 360 : '80%',
+      paddingVertical: 6,
+      paddingHorizontal: 8,
+    },
+    messageText: {
+      color: colors.textColorDefaultPlaceholder,
+      flexShrink: 1,
+    },
+    messageMeta: {
+      flexDirection: 'row',
+      justifyContent: mine ? 'flex-end' : 'flex-start',
+    },
+    replyCountText: {
+      color: colors.interaction,
+      fontWeight: platformFontWeightMedium,
+    },
+    imageWrapper: {
+      width: 32 * fontScale,
+      aspectRatio: imageWidth / imageHeight,
+      opacity: 0.5,
+    },
+    image: {
+      borderRadius: 4,
+    },
+    attachmentIcon: {
+      color: colors.iconColorDefaultDim,
+      fontSize: 16,
+    },
+  })
+}

package/src/components/primitive/avatar_primitive.tsx

@@ -45,6 +45,7 @@ export type {
 // =================================
 
 const AVATAR_SIZES = {
+  xs: 'xs',
   sm: 'sm',
   md: 'md',
   lg: 'lg',
@@ -60,18 +61,21 @@ type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES]
 type AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRESENCE_TYPES]
 
 const AVATAR_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 20,
   [AVATAR_SIZES.sm]: 24,
   [AVATAR_SIZES.md]: 32,
   [AVATAR_SIZES.lg]: 40,
 }
 
 const AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 8,
   [AVATAR_SIZES.sm]: 10,
   [AVATAR_SIZES.md]: 12,
   [AVATAR_SIZES.lg]: 14,
 }
 
 const AVATAR_FALLBACK_ICON_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 10,
   [AVATAR_SIZES.sm]: 12,
   [AVATAR_SIZES.md]: 16,
   [AVATAR_SIZES.lg]: 20,

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './use_async_storage'
+export * from './use_animated_message_background_color'
 export * from './use_theme'
 export * from './use_suspense_api'
 export * from './use_current_person'

package/src/hooks/use_animated_message_background_color.ts

@@ -0,0 +1,44 @@
+import { Platform } from 'react-native'
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolateColor,
+  Easing,
+} from 'react-native-reanimated'
+import { useTheme } from '../hooks'
+
+export function useAnimatedMessageBackgroundColor() {
+  const { colors } = useTheme()
+  const bgFadeProgress = useSharedValue(0)
+
+  const pressedColor = Platform.select({
+    ios: colors.fillColorNeutral050Base,
+    default: 'transparent',
+  })
+
+  const animatedBackgroundColor = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      bgFadeProgress.value,
+      [0, 1],
+      ['transparent', pressedColor]
+    )
+    return {
+      backgroundColor,
+    }
+  })
+
+  const handleMessagePressIn = () => {
+    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
+  }
+
+  const handleMessagePressOut = () => {
+    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
+  }
+
+  return {
+    animatedBackgroundColor,
+    handleMessagePressIn,
+    handleMessagePressOut,
+  }
+}

package/src/hooks/use_app_name.ts

@@ -5,7 +5,7 @@ export type AppName = 'chat' | 'churchcenter' | 'services'
 export const useAppName = (): AppName => {
   const applicationName = DeviceInfo.getApplicationName()
 
-  if (/churchcenter/i.test(applicationName)) {
+  if (/church\s?center/i.test(applicationName)) {
     return 'churchcenter'
   }
 

package/src/navigation/index.tsx

@@ -238,8 +238,9 @@ export const ChatStack = createNativeStackNavigator({
       screen: GetHelpScreen,
       options: ({ navigation }) => ({
         headerTitle: 'Get help',
+        headerBackVisible: false,
         presentation: 'modal',
-        headerLeft: props => (
+        headerRight: props => (
           <HeaderTextButton {...props} onPress={navigation.goBack} title="Close" />
         ),
       }),

package/src/screens/bug_report_screen.tsx

@@ -73,6 +73,12 @@ enum QualifiedMobileAppName {
   services = 'Services Mobile',
 }
 
+enum DisplayableAppName {
+  chat = 'Chat',
+  churchcenter = 'Church Center',
+  services = 'Services',
+}
+
 export function BugReportScreen() {
   const styles = useStyles()
   const navigation = useNavigation()
@@ -174,8 +180,8 @@ export function BugReportScreen() {
         <BlankState.Content>
           <BlankState.Heading style={styles.successTitle}>Thank you!</BlankState.Heading>
           <BlankState.Text style={styles.successSubtitle}>
-            We appreciate you taking the time to help improve chat! We'll take a look at the issue
-            you reported.
+            We appreciate you taking the time to help improve {DisplayableAppName[name]}! We'll take
+            a look at the issue you reported.
           </BlankState.Text>
         </BlankState.Content>
         <BlankState.Button
@@ -213,8 +219,9 @@ export function BugReportScreen() {
     <KeyboardView>
       <ScrollView contentContainerStyle={styles.container}>
         <Text style={styles.description}>
-          Thanks for helping us improve chat. Please provide details about the issue you've
-          encountered. We read every submission and your feedback helps us improve the experience.
+          Thanks for helping us improve {DisplayableAppName[name]}. We won't be able to respond to
+          your submission, but your feedback helps us improve the experience helps us improve the
+          experience.
         </Text>
 
         <View style={styles.textInputContainer}>
@@ -373,7 +380,7 @@ export function BugReportScreen() {
 }
 
 const VIDEO_RECORDING_HELP_URL = Platform.select({
-  android: 'https://support.google.com/android/answer/6241341?hl=en',
+  android: 'https://support.google.com/android/answer/9075928?hl=en',
   default: 'https://support.apple.com/en-us/HT208721',
 })
 

package/src/screens/get_help_screen.tsx

@@ -1,10 +1,11 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { useCallback, useMemo } from 'react'
-import { Linking, StyleSheet, View } from 'react-native'
+import { Alert, Linking, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
 import { ResourceObject } from '../types'
+import { Clipboard } from '../utils'
 
 type GetHelpScreenRouteProps = {
   type?: 'chat' | 'general'
@@ -121,13 +122,18 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
 }
 
 const ContactRow = ({ email, phone }: { email?: string; phone?: string }) => {
-  if (!email && !phone) return null
-
   const contact = email || phone
+  if (!contact) return null
 
   return (
     <PressableRow
-      onPress={() => {}}
+      onPress={() => {
+        if (email) {
+          sendEmail(contact)
+        } else {
+          placePhoneCall(contact)
+        }
+      }}
       text={contact || ''}
       isActive={true}
       iconPath={email ? 'services.email' : 'general.phone'}
@@ -135,6 +141,32 @@ const ContactRow = ({ email, phone }: { email?: string; phone?: string }) => {
   )
 }
 
+export function sendEmail(email: string) {
+  if (!email) return
+
+  const url = encodeURI(`mailto:${email}`)
+
+  Linking.openURL(url).catch(() => {
+    Alert.alert('Oops', `Unable to open: ${email}`, [
+      { text: 'Copy to clipboard', onPress: () => Clipboard.setStringAsync(email) },
+      { text: 'OK' },
+    ])
+  })
+}
+
+export function placePhoneCall(phoneNumber: string) {
+  if (!phoneNumber) return
+
+  const url = encodeURI(`tel:${phoneNumber}`)
+
+  Linking.openURL(url).catch(() => {
+    Alert.alert('Oops', `Unable to open: ${phoneNumber}`, [
+      { text: 'Copy to clipboard', onPress: () => Clipboard.setStringAsync(phoneNumber) },
+      { text: 'OK' },
+    ])
+  })
+}
+
 const useStyles = () => {
   const { colors } = useTheme()
 

package/src/utils/assert_keys_are_numbers.ts

@@ -0,0 +1,13 @@
+export const assertKeysAreNumbers = (obj: Object): Record<any, number> => {
+  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, assertNumber(value)]))
+}
+
+const assertNumber = (value: string): number => {
+  if (typeof value === 'number') return value
+
+  if (typeof value === 'string' && !isNaN(Number(value))) {
+    return Number(value)
+  }
+
+  return 0
+}

package/src/utils/index.ts

@@ -8,3 +8,4 @@ export * from './native_adapters'
 export * from './pluralize'
 export * from './destructure_chat_group_graph_id'
 export * from './convert_attachments_for_create'
+export * from './assert_keys_are_numbers'