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

package/src/hooks/use_conversations_cache.ts

@@ -18,6 +18,8 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
   const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs)
 
   const fetchConversation = async (id: number) => {
+    if (!id) return
+
     const { data: argsData } = conversationsRequestArgs
     const { data } = await apiClient.chat.get<ApiResource<ConversationResource>>({
       url: `/me/conversations/${id}`,
@@ -31,6 +33,8 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
   }
 
   const updateOrCreate = async (conversation: ConversationResource) => {
+    if (!conversation.id) return
+
     queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
       updateOrCreateRecordInPagesData({
         data: prev,
@@ -53,11 +57,14 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
 
   const fetchAndUpdateOrCreate = async ({ id }: { id: number }) => {
     const conversation: ConversationResource = await fetchConversation(id).catch(c => c)
+    if (!conversation.id) return
 
     updateOrCreate(conversation)
   }
 
   const handleConversationDestroy = ({ id }: { id: number }) => {
+    if (!id) return
+
     queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
       deleteRecordInPagesData({
         data: prev,

package/src/hooks/use_giphy.ts

@@ -19,8 +19,8 @@ interface GiphyGif {
 
 interface GiphyVariant {
   url: string
-  width: number
-  height: number
+  width: string
+  height: string
   size: string
   frames: string
 }

package/src/hooks/use_jolt.ts

@@ -8,10 +8,11 @@ import {
   JoltSubscription,
 } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
 import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
 import { Client, Uri } from '../utils'
+import { useAppState } from './use_app_state'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -118,23 +119,51 @@ export const useJoltClient = (): JoltClient | undefined => {
   return joltClient
 }
 
-export function useJoltChannel(channelName: string) {
-  const [joltChannel, setJoltChannel] = useState<JoltSubscription>()
+export function useJoltChannel(channelName: string): JoltSubscription | undefined | null {
   const jolt = useJoltClient()
+  const appState = useAppState()
+  const queryClient = useQueryClient()
 
-  useEffect(() => {
-    if (!jolt) return () => {}
-    setJoltChannel(jolt.subscribe(channelName))
-    return () => jolt.unsubscribe(channelName)
+  const handleSubscribe = useCallback(async () => {
+    if (!jolt) return null
+
+    // If the subscription already exists, we don't need to subscribe again
+    const alreadySubscribed = jolt.subscriptions.find(c => c.channel === channelName)
+    if (alreadySubscribed) return alreadySubscribed
+
+    return jolt.subscribe(channelName)
   }, [channelName, jolt])
 
-  return joltChannel
+  const { data: subscription } = useQuery<JoltSubscription | null>({
+    queryKey: ['jolt-subscription', channelName],
+    queryFn: handleSubscribe,
+    enabled: Boolean(jolt) && appState !== 'background',
+  })
+
+  const handleUnsubscribe = useCallback(() => {
+    queryClient.removeQueries({
+      queryKey: ['jolt-subscription', channelName],
+      exact: true,
+    })
+
+    jolt?.unsubscribe(channelName)
+  }, [queryClient, channelName, jolt])
+
+  useEffect(() => {
+    if (appState !== 'background') return handleUnsubscribe
+
+    handleUnsubscribe()
+
+    return () => null
+  }, [appState, handleUnsubscribe])
+
+  return subscription
 }
 
 type UserCallbackFn<T> = (_event: T) => void
 
 export function useJoltEvent<T extends CustomMessage>(
-  channel: JoltSubscription | undefined,
+  channel: JoltSubscription | undefined | null,
   eventName: string,
   callback: UserCallbackFn<T>
 ) {

package/src/hooks/use_report_bug_action.ts

@@ -0,0 +1,37 @@
+import { useMutation } from '@tanstack/react-query'
+import { useApiClient } from './use_api_client'
+import DeviceInfo from 'react-native-device-info'
+const brand = DeviceInfo.getBrand()
+const model = DeviceInfo.getModel()
+const systemName = DeviceInfo.getSystemName()
+const systemVersion = DeviceInfo.getSystemVersion()
+const readableVersion = DeviceInfo.getReadableVersion()
+const appName = DeviceInfo.getApplicationName()
+
+export const useReportBugAction = () => {
+  const apiClient = useApiClient()
+
+  return useMutation({
+    mutationFn: async ({
+      description,
+      attachmentIds,
+    }: {
+      description: string
+      attachmentIds: string[]
+    }) => {
+      return apiClient.chat.post({
+        url: `/me/report_bug`,
+        data: {
+          data: {
+            type: '',
+            attributes: {
+              description,
+              device_info: `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+              attachment_ids: attachmentIds,
+            },
+          },
+        },
+      })
+    },
+  })
+}

package/src/navigation/index.tsx

@@ -33,6 +33,7 @@ import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation
 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'
+import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
 
 export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
@@ -179,6 +180,10 @@ export const ChatStack = createNativeStackNavigator({
       screen: ReactionsScreen,
       options: ReactionsScreenOptions,
     },
+    BugReport: {
+      screen: BugReportScreen,
+      options: BugReportScreenOptions,
+    },
     NotFound: {
       screen: NotFound,
       options: {

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -1,30 +1,44 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { Linking } from 'react-native'
-import { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
 import ActionsFormSheet, {
   BaseActionsFormSheetOptions,
 } from '../../components/primitive/actions_form_sheet'
+import { useDeleteAttachment } from './hooks/useDeleteAttachment'
 
 export const AttachmentActionsScreenOptions = BaseActionsFormSheetOptions
 
 export type AttachmentActionsScreenProps = StaticScreenProps<{
-  attachment: DenormalizedAttachmentResource
+  attachmentId: string
+  attachmentContentType: string
+  attachmentUrl: string
+  conversation_id: number
+  canDeleteNonAuthoredMessages: boolean
+  myMessage: boolean
 }>
 
 export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps) {
   const navigation = useNavigation()
-  const { attachment } = route.params
+  const {
+    attachmentId,
+    attachmentContentType,
+    attachmentUrl,
+    conversation_id,
+    canDeleteNonAuthoredMessages,
+    myMessage,
+  } = route.params
 
-  const attachmentName = getAttachmentLabelName(attachment)
+  const attachmentName = getAttachmentLabelName(attachmentContentType)
+  const canDelete = myMessage || canDeleteNonAuthoredMessages
 
-  const handleSaveAttachment = () => {
-    if (attachment.type === 'giphy') {
-      Linking.openURL(attachment.titleLink)
-    } else {
-      Linking.openURL(attachment.attributes.url)
-    }
+  const { handleDeleteAttachment } = useDeleteAttachment({
+    conversation_id,
+    attachmentId,
+    attachmentName,
+  })
 
+  const handleOpenInBrowser = () => {
+    Linking.openURL(attachmentUrl)
     navigation.goBack()
   }
 
@@ -36,20 +50,25 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
         accessibilityRole="link"
         accessibilityLabel={`Open ${attachmentName} in browser`}
         accessibilityHint={`${attachmentName} can be downloaded and shared through the browser.`}
-        onPress={handleSaveAttachment}
+        onPress={handleOpenInBrowser}
       />
+      {canDelete && (
+        <ActionsFormSheet.Action
+          appearance="danger"
+          iconName="publishing.trash"
+          title={`Delete ${attachmentName}`}
+          onPress={handleDeleteAttachment}
+        />
+      )}
     </ActionsFormSheet.Root>
   )
 }
 
-function getAttachmentLabelName(attachment: DenormalizedAttachmentResource) {
-  if (attachment.type === 'giphy') return 'giphy'
-  if (attachment.type === 'ExpandedLink') return 'link'
-
-  const { contentType } = attachment.attributes
+function getAttachmentLabelName(contentType: string) {
   if (contentType.startsWith('image/')) return 'image'
   if (contentType.startsWith('video/')) return 'video'
   if (contentType.startsWith('audio/')) return 'audio'
+  if (contentType === 'application/pdf') return 'PDF'
   if (contentType.startsWith('application/')) return 'file'
 
   return ''

package/src/screens/attachment_actions/hooks/useDeleteAttachment.tsx

@@ -0,0 +1,46 @@
+import { Alert } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { useMutation } from '@tanstack/react-query'
+import { useApiClient } from '../../../hooks/use_api_client'
+import { useCallback } from 'react'
+import { useConversationMessages } from '../../../hooks/use_conversation_messages'
+
+type UseDeleteAttachmentProps = {
+  conversation_id: number
+  attachmentId: string | undefined
+  attachmentName: string
+}
+
+export function useDeleteAttachment({
+  conversation_id,
+  attachmentId,
+  attachmentName,
+}: UseDeleteAttachmentProps) {
+  const apiClient = useApiClient()
+  const navigation = useNavigation()
+  const { refetch } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
+
+  const deleteAttachment = useCallback(() => {
+    const url = `/me/conversations/${conversation_id}/message_attachments/${attachmentId}`
+
+    return apiClient.chat.delete({ url })
+  }, [apiClient, conversation_id, attachmentId])
+
+  const { mutate: handleDeleteAttachment } = useMutation({
+    mutationFn: deleteAttachment,
+    onSuccess: () => {
+      refetch()
+      navigation.goBack()
+    },
+    onError: () => {
+      Alert.alert(
+        'Oops',
+        `We were unable to delete this ${attachmentName} attachment. Please try again.`
+      )
+    },
+  })
+
+  return {
+    handleDeleteAttachment,
+  }
+}

package/src/screens/bug_report_screen.tsx

@@ -0,0 +1,334 @@
+import React, { useCallback, useLayoutEffect, useState } from 'react'
+import { View, StyleSheet, TextInput, Linking, ScrollView } from 'react-native'
+import type {
+  NativeStackNavigationOptions,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack'
+import { useNavigation } from '@react-navigation/native'
+import {
+  Button,
+  Spinner,
+  Text,
+  TextInlineButton,
+  ImageAttachmentPreview,
+  BlankState,
+} from '../components'
+import { useTheme } from '../hooks'
+import { useUploadClient } from '../hooks/use_upload_client'
+import { ImagePicker, ImagePickerResult, platformFontWeightBold } from '../utils'
+import { useReportBugAction } from '../hooks/use_report_bug_action'
+import {
+  HeaderCancelButton,
+  HeaderSubmitButton,
+} from '../components/display/platform_modal_header_buttons'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { DefaultLoading } from '../components/page/loading'
+import { startsWith } from 'lodash'
+import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
+
+const MAX_DESCRIPTION_LENGTH = 5000
+
+export const BugReportScreenOptions = ({
+  navigation,
+}: NativeStackScreenProps<any>): NativeStackNavigationOptions => ({
+  presentation: 'modal',
+  title: 'Report a bug',
+  headerLeft: () => <HeaderCancelButton title="Cancel" onPress={() => navigation.goBack()} />,
+})
+
+interface Attachment {
+  id: string
+  name: string
+  type: string
+}
+
+export function BugReportScreen() {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const [description, setDescription] = useState('')
+  const uploadApi = useUploadClient()
+  const [uploading, setUploading] = useState(false)
+  const [attachment, setAttachment] = useState<Attachment | null>(null)
+  const [uploadError, setUploadError] = useState<string | null>(null)
+  const mutation = useReportBugAction()
+  const { mutate, status } = mutation
+  const formValid = description.trim().length > 0 && status === 'idle' && !uploading
+  const [imagePreviewURI, setImagePreviewURI] = useState<string>('')
+
+  const nearMaxDescription = description.length >= MAX_DESCRIPTION_LENGTH - 100
+  const isImageAttachment = startsWith(attachment?.type, 'image/')
+
+  const handleSubmit = useCallback(() => {
+    mutate({
+      description,
+      attachmentIds: attachment ? [attachment.id] : [],
+    })
+  }, [attachment, description, mutate])
+
+  const handleRemoveAttachment = useCallback(() => {
+    setAttachment(null)
+    setImagePreviewURI('')
+  }, [])
+
+  function uploadImagePickerResult(result: ImagePickerResult) {
+    if (result.canceled || result.assets.length === 0) {
+      setUploading(false)
+      return
+    }
+
+    const asset = result.assets[0]
+
+    uploadApi
+      ?.uploadFile({
+        uri: asset.uri,
+        name: asset.fileName as string,
+        type: asset.mimeType as string,
+      })
+      .then(uploadedResource => {
+        setUploading(false)
+        setImagePreviewURI(asset.uri)
+        setAttachment({
+          id: uploadedResource.id,
+          name: asset.fileName || 'File',
+          type: asset.mimeType as string,
+        })
+      })
+      .catch(() => {
+        setUploading(false)
+        setUploadError(`Failed to upload attachment`)
+      })
+  }
+
+  function pickImage() {
+    setUploading(true)
+    return ImagePicker.openImageLibraryAsync().then(result => uploadImagePickerResult(result))
+  }
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      // eslint-disable-next-line react/no-unstable-nested-components
+      headerRight: () => (
+        <HeaderSubmitButton title="Submit" onPress={handleSubmit} disabled={!formValid} />
+      ),
+    })
+  }, [formValid, handleSubmit, navigation])
+
+  if (status === 'pending') {
+    return (
+      <View style={[styles.container, styles.fullHeight]}>
+        <DefaultLoading />
+      </View>
+    )
+  }
+
+  if (status === 'success') {
+    return (
+      <BlankState
+        iconName="general.checkCircle"
+        iconStyle={styles.successIcon}
+        title="Thank you!"
+        titleStyle={styles.successTitle}
+        subtitle="We appreciate you taking the time to help improve chat! We'll take a look at the issue you reported."
+        subtitleStyle={styles.successSubtitle}
+        buttonProps={{
+          title: 'Return to chat',
+          onPress: navigation.goBack,
+          size: 'lg',
+          variant: 'fill',
+        }}
+      />
+    )
+  }
+
+  if (status === 'error') {
+    return (
+      <View style={styles.container}>
+        <Text>
+          This is embarrassing, we can't submit your bug report right now. If you still need help or
+          would like to submit this bug report another way please{' '}
+          <TextInlineButton
+            accessibilityRole="link"
+            onPress={() =>
+              Linking.openURL('https://support.planningcenteronline.com/hc/en-us/requests/new')
+            }
+          >
+            contact our help center
+          </TextInlineButton>
+          .
+        </Text>
+        <Button title="Return to chat" onPress={navigation.goBack} variant="fill" size="lg" />
+      </View>
+    )
+  }
+
+  return (
+    <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.
+      </Text>
+      <View style={styles.textInputContainer}>
+        <TextInput
+          style={styles.textInput}
+          multiline
+          placeholder="Details about the problem"
+          value={description}
+          onChangeText={setDescription}
+          maxLength={MAX_DESCRIPTION_LENGTH}
+        />
+        {nearMaxDescription && (
+          <Text variant="footnote">
+            {description.length}/{MAX_DESCRIPTION_LENGTH}
+          </Text>
+        )}
+      </View>
+
+      <View style={styles.attachmentSection}>
+        <View style={styles.attachmentHeader}>
+          <Text style={styles.attachmentLabel}>
+            Attachment <Text style={styles.subLabel}>(optional)</Text>
+          </Text>
+          {uploading && <Spinner />}
+        </View>
+        {uploadError && <Text style={styles.attachmentErrorText}>{uploadError}</Text>}
+        {attachment ? (
+          <View style={styles.attachmentPreviewContainer}>
+            {isImageAttachment ? (
+              <ImageAttachmentPreview
+                uri={imagePreviewURI}
+                fileName={attachment.name}
+                onClosePress={handleRemoveAttachment}
+              />
+            ) : (
+              <VideoAttachmentPreview
+                name={attachment.name}
+                onClosePress={handleRemoveAttachment}
+              />
+            )}
+          </View>
+        ) : (
+          <Button
+            title="Attach a screenshot"
+            accessibilityHint="Opens your device's image gallery"
+            iconNameLeft="general.paperclip"
+            onPress={pickImage}
+            size="sm"
+            variant="outline"
+            style={styles.attachButton}
+            disabled={uploading || Boolean(attachment)}
+          />
+        )}
+      </View>
+
+      <View style={styles.footer}>
+        <Text variant="footnote">
+          We can’t respond to every submission, but we may reach out if we have additional
+          questions.
+        </Text>
+
+        <Text variant="footnote">
+          For details on how we process your data and ensure its security, please refer to our{' '}
+          <TextInlineButton
+            accessibilityRole="link"
+            variant="footnote"
+            onPress={() => Linking.openURL('https://www.planningcenter.com/privacy')}
+          >
+            Privacy Policy
+          </TextInlineButton>
+          .
+        </Text>
+      </View>
+    </ScrollView>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const { bottom } = useSafeAreaInsets()
+  return StyleSheet.create({
+    container: {
+      padding: 16,
+      paddingBottom: bottom + 16,
+      gap: 24,
+    },
+    fullHeight: {
+      flex: 1,
+    },
+    centeredText: {
+      textAlign: 'center',
+    },
+    description: {
+      color: colors.textColorDefaultSecondary,
+    },
+    textInputContainer: {
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderColor: colors.borderColorDefaultBase,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      marginHorizontal: -16,
+      gap: 8,
+    },
+    textInput: {
+      color: colors.textColorDefaultPrimary,
+      fontSize: 16,
+      textAlignVertical: 'top',
+      minHeight: 120,
+      maxHeight: 200,
+    },
+    attachmentSection: {
+      gap: 8,
+    },
+    attachmentHeader: {
+      flexDirection: 'row',
+      gap: 4,
+      alignItems: 'center',
+    },
+    attachmentLabel: { fontWeight: platformFontWeightBold },
+    subLabel: { fontWeight: 'normal', color: colors.textColorDefaultSecondary },
+    attachmentPreviewContainer: {
+      gap: 4,
+    },
+    attachmentErrorText: {
+      color: colors.statusErrorText,
+    },
+    attachButton: {
+      alignSelf: 'flex-start',
+    },
+    videoPreviewContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: 16,
+    },
+    videoPreviewTextContainer: {
+      flexDirection: 'row',
+      gap: 4,
+      alignItems: 'center',
+      flexShrink: 1,
+    },
+    videoPreviewText: {
+      flexShrink: 1,
+      color: colors.textColorDefaultSecondary,
+    },
+    videoPreviewFileIcon: {
+      color: colors.iconColorDefaultSecondary,
+    },
+    videoPreviewRemoveButtonIcon: {
+      color: colors.statusErrorIcon,
+    },
+    footer: { gap: 8 },
+    successIcon: {
+      color: colors.statusSuccessIcon,
+      fontSize: 48,
+    },
+    successTitle: {
+      fontSize: 24,
+      marginBottom: 4,
+    },
+    successSubtitle: {
+      fontSize: 16,
+      marginBottom: 4,
+    },
+  })
+}