@planningcenter/chat-react-native 3.10.0 → 3.10.1-qa-291.0

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

@@ -0,0 +1,258 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  StyleSheet,
+  Modal,
+  useWindowDimensions,
+  SafeAreaView,
+  View,
+  Linking,
+  ImageStyle,
+} from 'react-native'
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  type PanGesture,
+} from 'react-native-gesture-handler'
+import {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  type AnimatedStyle,
+} from 'react-native-reanimated'
+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'
+import { useTheme } from '../../../hooks'
+
+const PAN_THRESHOLD_PX = 300
+
+export type MetaProps = {
+  authorName: string
+  createdAt: string
+}
+
+export function ImageAttachmentLegacy({
+  attachment,
+  metaProps,
+  onMessageAttachmentLongPress,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+  metaProps: MetaProps
+  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+}) {
+  const { attributes } = attachment
+  const { url, urlMedium, filename, metadata = {} } = attributes
+  const { colors } = useTheme()
+
+  const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })
+  const [visible, setVisible] = useState(false)
+
+  // shared values run on the native UI thread and prevents clogging up the JS thread
+  const dismissY = useSharedValue(0)
+  const opacity = useSharedValue(1)
+
+  const resetAnimations = useCallback(() => {
+    dismissY.value = withTiming(0)
+    opacity.value = withTiming(1)
+  }, [dismissY, opacity])
+
+  const handleCloseModal = useCallback(() => {
+    setVisible(false)
+    resetAnimations()
+  }, [setVisible, resetAnimations])
+
+  const panGesture = Gesture.Pan()
+    .onUpdate(e => {
+      dismissY.value = e.translationY
+      opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX
+    })
+    .onEnd(() => {
+      runOnJS(handleCloseModal)() // Ensures we can call a JS function
+    })
+
+  const animatedImageStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: dismissY.value }],
+    opacity: opacity.value,
+  }))
+
+  return (
+    <>
+      <PlatformPressable
+        style={styles.container}
+        onPress={() => setVisible(true)}
+        onLongPress={() => onMessageAttachmentLongPress(attachment)}
+        android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
+        accessibilityHint="Long press for more options"
+      >
+        <Image
+          source={{ uri: urlMedium || url }}
+          style={styles.image}
+          wrapperStyle={styles.imageWrapper}
+          alt={filename}
+        />
+      </PlatformPressable>
+      <LightboxModal
+        visible={visible}
+        handleCloseModal={handleCloseModal}
+        uri={urlMedium || url}
+        metaProps={metaProps}
+        panGesture={panGesture}
+        animatedImageStyle={animatedImageStyle}
+      />
+    </>
+  )
+}
+
+interface LightboxModalProps {
+  visible: boolean
+  handleCloseModal: () => void
+  uri: string
+  metaProps: MetaProps
+  panGesture: PanGesture
+  animatedImageStyle: AnimatedStyle<ImageStyle>
+}
+
+const LightboxModal = ({
+  uri,
+  visible,
+  handleCloseModal,
+  metaProps,
+  panGesture,
+  animatedImageStyle,
+}: LightboxModalProps) => {
+  const styles = useStyles()
+
+  const { authorName, createdAt } = metaProps
+
+  const handleOpenInBrowser = () => {
+    Linking.openURL(uri)
+  }
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={handleCloseModal}>
+      <SafeAreaView style={styles.modal}>
+        <GestureHandlerRootView>
+          <GestureDetector gesture={panGesture}>
+            <Image
+              source={{ uri }}
+              loadingBackgroundStyles={styles.lightboxImageLoading}
+              style={styles.lightboxImage}
+              animatedImageStyle={animatedImageStyle}
+              resizeMode="contain"
+              animated={true}
+              alt=""
+            />
+          </GestureDetector>
+          <View style={styles.actionToolbar} accessibilityRole="toolbar">
+            <View style={styles.actionToolbarTextMeta}>
+              <Heading variant="h3" style={styles.actionToolbarTitle} numberOfLines={1}>
+                {authorName}
+              </Heading>
+              <Text variant="tertiary" style={styles.actionToolbarSubtitle}>
+                {formatDatePreview(createdAt)}
+              </Text>
+            </View>
+            <IconButton
+              onPress={handleOpenInBrowser}
+              name="general.newWindow"
+              accessibilityRole="link"
+              accessibilityLabel="Open image in browser"
+              accessibilityHint="Image can be downloaded and shared through the browser."
+              style={styles.actionButton}
+              iconStyle={styles.actionButtonIcon}
+              size="lg"
+            />
+            <IconButton
+              onPress={handleCloseModal}
+              name="general.x"
+              accessibilityLabel="Close image"
+              style={styles.actionButton}
+              iconStyle={styles.actionButtonIcon}
+            />
+          </View>
+        </GestureHandlerRootView>
+      </SafeAreaView>
+    </Modal>
+  )
+}
+
+interface UseStylesProps {
+  imageWidth?: number
+  imageHeight?: number
+}
+
+const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {
+  const { width: windowWidth } = useWindowDimensions()
+  const backgroundColor = tokens.colorNeutral7
+  const transparentBackgroundColor = useMemo(
+    () => colorFunction(backgroundColor).alpha(0.8).toString(),
+    [backgroundColor]
+  )
+
+  return StyleSheet.create({
+    container: {
+      maxWidth: '100%',
+    },
+    imageWrapper: {
+      width: '100%',
+      minWidth: 200,
+      aspectRatio: imageWidth / imageHeight,
+    },
+    image: {
+      borderRadius: 8,
+    },
+    modal: {
+      flex: 1,
+      backgroundColor,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    lightboxImage: {
+      height: '100%',
+      width: windowWidth,
+      backgroundColor,
+    },
+    lightboxImageLoading: {
+      backgroundColor,
+    },
+    actionToolbar: {
+      width: '100%',
+      position: 'absolute',
+      top: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 20,
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 8,
+      backgroundColor: transparentBackgroundColor,
+    },
+    actionToolbarTextMeta: {
+      flex: 1,
+    },
+    actionToolbarTitle: {
+      marginRight: 'auto',
+      flexShrink: 1,
+      color: tokens.colorNeutral88,
+    },
+    actionToolbarSubtitle: {
+      color: tokens.colorNeutral68,
+    },
+    actionButton: {
+      backgroundColor,
+      height: 40,
+      width: 40,
+      borderRadius: 50,
+      borderWidth: 1,
+      borderColor: tokens.colorNeutral24,
+    },
+    actionButtonIcon: {
+      color: tokens.colorNeutral88,
+    },
+  })
+}

package/src/components/conversation/message_attachments.tsx

@@ -9,7 +9,11 @@ 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, type MetaProps } from './attachments/image_attachment'
+import { ImageAttachmentLegacy, type MetaProps } from './attachments/image_attachment_legacy'
+import { ImageAttachment } from './attachments/image_attachment'
+
+// Temporarily controls whether image attachments can be opened in a gallery lightbox. (Will remove after QA approves project.)
+const ENABLE_MESSAGE_ATTACHMENT_IMAGE_GALLERY = false
 
 export function MessageAttachments(props: {
   attachments: DenormalizedAttachmentResource[]
@@ -20,14 +24,34 @@ export function MessageAttachments(props: {
   const styles = useStyles()
   const { attachments, metaProps, onMessageAttachmentLongPress, onMessageLongPress } = props
   if (!attachments || attachments.length === 0) return null
+
+  const imageAttachments = attachments.filter(
+    attachment =>
+      attachment.type === 'MessageAttachment' &&
+      attachment.attributes?.contentType?.startsWith('image/')
+  ) as DenormalizedMessageAttachmentResource[]
+
+  const showImageAttachmentGroup =
+    ENABLE_MESSAGE_ATTACHMENT_IMAGE_GALLERY && imageAttachments.length > 0
+
   return (
     <View style={styles.attachmentsContainer}>
-      {attachments.map(attachment => {
+      {showImageAttachmentGroup &&
+        imageAttachments.map((image, index) => (
+          <ImageAttachment
+            key={`${image.id}-${index}`}
+            attachment={image}
+            metaProps={metaProps}
+            onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+          />
+        ))}
+
+      {attachments.map((attachment, index) => {
         switch (attachment.type) {
           case 'MessageAttachment':
             return (
               <MessageAttachment
-                key={attachment.id}
+                key={`${attachment.id}-${index}`}
                 attachment={attachment}
                 metaProps={metaProps}
                 onMessageAttachmentLongPress={onMessageAttachmentLongPress}
@@ -36,7 +60,7 @@ export function MessageAttachments(props: {
           case 'giphy':
             return (
               <GiphyAttachment
-                key={attachment.id || attachment.titleLink}
+                key={`${attachment.id || attachment.titleLink}-${index}`}
                 attachment={attachment}
                 onMessageLongPress={onMessageLongPress}
               />
@@ -44,7 +68,7 @@ export function MessageAttachments(props: {
           case 'ExpandedLink':
             return (
               <ExpandedLink
-                key={attachment.id}
+                key={`${attachment.id}-${index}`}
                 attachment={attachment}
                 onMessageLongPress={onMessageLongPress}
               />
@@ -69,10 +93,15 @@ function MessageAttachment({
   const { attributes } = attachment
   const contentType = attributes?.contentType
   const basicType = contentType ? contentType.split('/')[0] : ''
+
+  if (basicType === 'image' && ENABLE_MESSAGE_ATTACHMENT_IMAGE_GALLERY) {
+    return null
+  }
+
   switch (basicType) {
     case 'image':
       return (
-        <ImageAttachment
+        <ImageAttachmentLegacy
           attachment={attachment}
           metaProps={metaProps}
           onMessageAttachmentLongPress={onMessageAttachmentLongPress}

package/src/hooks/services/use_find_or_create_services_conversation.ts

@@ -15,34 +15,40 @@ interface Props {
 }
 
 export function useFindOrCreateServicesConversation({ teamIds, planId, onSuccess }: Props) {
-  const teamAndPlanParams: TeamAndPlanParams = {
-    team_id: teamIds.join(','),
-    ...(planId ? { plan_id: planId } : {}),
-  }
-
   const apiClient = useApiClient()
   return useMutation({
     throwOnError: true,
     onSuccess: result => {
       onSuccess && onSuccess(result)
     },
-    mutationFn: async () => {
-      const foundConversations = await getGroupIdsFromServices(apiClient, teamAndPlanParams)
-        .then(res => res.data.groupIdentifiers)
-        .then(groupIdentifiers => findConversationWithExactTeams(apiClient, groupIdentifiers))
-        .catch(() => null)
-      const foundConversation = foundConversations?.data[0]
+    mutationFn: async () => findOrCreateServicesConversation(apiClient, teamIds, planId),
+  })
+}
 
-      if (foundConversation?.id) {
-        return foundConversation
-      }
+export const findOrCreateServicesConversation = async (
+  apiClient: ApiClient,
+  teamIds: number[],
+  planId?: number
+) => {
+  const teamAndPlanParams: TeamAndPlanParams = {
+    team_id: teamIds.join(','),
+    ...(planId ? { plan_id: planId } : {}),
+  }
 
-      return fetchServicesPayload(apiClient, teamAndPlanParams)
-        .then(res => res.data.payload)
-        .then(payload => createConversation(apiClient, payload))
-        .then(res => res.data)
-    },
-  })
+  const foundConversations = await getGroupIdsFromServices(apiClient, teamAndPlanParams)
+    .then(res => res.data.groupIdentifiers)
+    .then(groupIdentifiers => findConversationWithExactTeams(apiClient, groupIdentifiers))
+    .catch(() => null)
+  const foundConversation = foundConversations?.data[0]
+
+  if (foundConversation?.id) {
+    return foundConversation
+  }
+
+  return fetchServicesPayload(apiClient, teamAndPlanParams)
+    .then(res => res.data.payload)
+    .then(payload => createConversation(apiClient, payload))
+    .then(res => res.data)
 }
 
 interface TeamAndPlanParams {
@@ -79,7 +85,7 @@ function findConversationWithExactTeams(apiClient: ApiClient, groupIdentifiers:
     url: '/me/conversations',
     data: {
       fields: {
-        Conversation: ['stream_channel'],
+        Conversation: ['stream_channel', 'title'],
       },
       filter: 'with_exact_groups',
       gids: groupIdentifiers.join(','),

package/src/navigation/index.tsx

@@ -43,6 +43,8 @@ import {
 } from '../screens/conversation/message_read_receipts_screen'
 import { Platform } from 'react-native'
 import { HeaderSubmitButton } from '../components/display/platform_modal_header_buttons'
+import { TeamConversationScreen } from '../screens/team_conversation_screen'
+import { CardStyleInterpolators } from '@react-navigation/stack'
 
 const HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES = {
   marginLeft: Platform.select({ ios: -8, default: -3 }),
@@ -179,6 +181,14 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    TeamConversation: {
+      screen: TeamConversationScreen,
+      options: {
+        title: 'Finding conversation...',
+        animation: 'none',
+        cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
+      },
+    },
     ConversationDetails: {
       screen: ConversationDetailsScreen,
       options: ({ navigation }) => ({

package/src/screens/send_giphy_screen.tsx

@@ -1,7 +1,7 @@
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
-import { Button, IconButton, IconString, TextButton } from '../components'
+import { BlankState, Button, IconButton, IconString, TextButton } from '../components'
 import { DefaultLoading } from '../components/page/loading'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useTheme } from '../hooks'
@@ -33,7 +33,21 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
   const { width } = useWindowDimensions()
   const size = width - 24
 
-  if (!result) return null
+  if (!result)
+    return (
+      <FormSheet.Root contentStyle={styles.blankStateContainer}>
+        <BlankState
+          style={styles.blankState}
+          title="No Giphys found"
+          subtitle="Try a different search term."
+          iconName="general.bolt"
+          buttonProps={{
+            onPress: () => navigation.goBack(),
+            title: 'Close',
+          }}
+        />
+      </FormSheet.Root>
+    )
 
   const gif = result.giphy.fixed_width
   const { url } = gif
@@ -158,6 +172,13 @@ const useStyles = () => {
       paddingHorizontal: 16,
       gap: 8,
     },
+    blankStateContainer: {
+      paddingVertical: 64,
+    },
+    blankState: {
+      flex: 0,
+      flexGrow: 1,
+    },
     poweredByGiphyContainer: {
       alignSelf: 'flex-start',
       padding: 4,

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 />
+}