@planningcenter/chat-react-native 3.32.1-rc.0 → 3.33.0-rc.0

package/src/hooks/services/use_find_or_create_services_conversation.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { omitBy, isNil } from 'lodash'
+import { isNil, omitBy } from 'lodash'
 import { useMemo } from 'react'
 import {
   ApiCollection,
@@ -14,7 +14,7 @@ import { ApiClient, useApiClient } from '../use_api_client'
 interface Props {
   teamIds?: number[]
   planId?: number
-  onSuccess?: (conversation: ConversationResource) => void
+  onSuccess?: (conversation: ConversationResource, meta: { created: boolean }) => void
 }
 
 interface TeamAndPlanParams {
@@ -46,8 +46,8 @@ export const useFindOrCreateServicesConversation = ({ teamIds, planId, onSuccess
 
   const mutation = useMutation({
     throwOnError: true,
-    onSuccess: result => {
-      onSuccess && onSuccess(result)
+    onSuccess: ({ conversation, created }) => {
+      onSuccess?.(conversation, { created })
     },
     mutationFn: async () => findOrCreateServicesConversation(apiClient, teamAndPlanParams),
   })
@@ -58,7 +58,7 @@ export const useFindOrCreateServicesConversation = ({ teamIds, planId, onSuccess
 export const findOrCreateServicesConversation = async (
   apiClient: ApiClient,
   teamAndPlanParams: TeamAndPlanParams
-) => {
+): Promise<{ conversation: ConversationResource; created: boolean }> => {
   const foundConversations = await getGroupIdsFromServices(apiClient, teamAndPlanParams)
     .then(res => res.data.groupIdentifiers)
     .then(groupIdentifiers => findConversationWithExactTeams(apiClient, groupIdentifiers))
@@ -66,13 +66,13 @@ export const findOrCreateServicesConversation = async (
   const foundConversation = foundConversations?.data[0]
 
   if (foundConversation?.id) {
-    return foundConversation
+    return { conversation: foundConversation, created: false }
   }
 
   return fetchServicesPayload(apiClient, teamAndPlanParams)
     .then(res => res.data.payload)
     .then(payload => createConversation(apiClient, payload))
-    .then(res => res.data)
+    .then(res => ({ conversation: res.data, created: true }))
     .catch(throwResponseError)
 }
 

package/src/hooks/use_attachment_uploader.ts

@@ -5,8 +5,8 @@ import {
   FileUploadState,
   NativeAttachmentFile,
 } from '../types/resources/denormalized_attachment_resource_for_create'
-import { SUPPORTED_EXTENSIONS } from './attachments/supported_extensions'
 import { useApiClient } from './use_api_client'
+import { useChatConfiguration } from './use_chat_configuration'
 import { useUploadClient } from './use_upload_client'
 
 export interface FileError {
@@ -14,10 +14,6 @@ export interface FileError {
   file_size?: boolean
 }
 
-const MAX_FILE_SIZE_IN_MB = 50
-const MAX_FILE_SIZE_IN_BYTES = MAX_FILE_SIZE_IN_MB * 1024 * 1024
-const MAX_NUMBER_OF_ATTACHMENTS = 10
-
 export function useAttachmentUploader({
   conversationId,
   draftAttachments,
@@ -27,6 +23,9 @@ export function useAttachmentUploader({
 }) {
   const apiClient = useApiClient()
   const uploadApi = useUploadClient()
+  const { allowedFileExtensions, maxFileSizeInBytes, maxAttachmentsPerMessage } =
+    useChatConfiguration()
+  const maxFileSizeInMb = Number((maxFileSizeInBytes / (1024 * 1024)).toFixed(1))
   const [attachments, setAttachments] = useState<FileAttachment[]>(() => draftAttachments || [])
   const uploadState = useRef<FileUploadState>({})
   const [lastUploadId, setLastUploadId] = useState<string>()
@@ -38,9 +37,9 @@ export function useAttachmentUploader({
       const fileErrors = {} as FileError
 
       const validFiles = files.filter(file => {
-        const extension = file.name.split('.').pop() as string
-        const isValidExtension = SUPPORTED_EXTENSIONS.includes(`.${extension}`)
-        const isValidFileSize = file.size <= MAX_FILE_SIZE_IN_BYTES
+        const extension = file.name.toLowerCase().split('.').pop() as string
+        const isValidExtension = allowedFileExtensions.includes(`.${extension}`)
+        const isValidFileSize = file.size <= maxFileSizeInBytes
 
         if (!isValidExtension) {
           fileErrors.file_type ||= []
@@ -60,10 +59,10 @@ export function useAttachmentUploader({
         )
       }
       if (fileErrors.file_size) {
-        errorMessages.push(`File size exceeds ${MAX_FILE_SIZE_IN_MB} MB`)
+        errorMessages.push(`File size exceeds ${maxFileSizeInMb} MB`)
       }
-      if (numberOfAttachments + validFiles.length > MAX_NUMBER_OF_ATTACHMENTS) {
-        errorMessages.push(`You can't attach more than ${MAX_NUMBER_OF_ATTACHMENTS} files at once.`)
+      if (numberOfAttachments + validFiles.length > maxAttachmentsPerMessage) {
+        errorMessages.push(`You can't attach more than ${maxAttachmentsPerMessage} files at once.`)
       }
       if (errorMessages.length > 0) {
         setErrorMessage(errorMessages.join('\n'))
@@ -100,21 +99,34 @@ export function useAttachmentUploader({
               }
               setLastUploadId(messageAttachmentId)
             })
-            .catch(err => {
+            .catch(async err => {
               const isFlagged = err?.code === 'image_flagged'
               uploadState.current[attachment.file.name] = {
                 status: 'error',
                 flagged: isFlagged,
               }
               if (!isFlagged) {
-                setErrorMessage('This file could not be uploaded.')
+                // Dev builds surface the raw server detail to shorten the
+                // feedback loop on backend errors (e.g. AWS SSO re-auth).
+                // Production users always see the generic message.
+                const serverDetail = __DEV__ ? await extractDevOnlyServerErrorDetail(err) : null
+                setErrorMessage(serverDetail ?? 'This file could not be uploaded.')
               }
               setLastUploadId(attachment.file.name)
             })
         })
       }
     },
-    [numberOfAttachments, uploadApi, apiClient.chat, conversationId]
+    [
+      numberOfAttachments,
+      uploadApi,
+      apiClient.chat,
+      conversationId,
+      allowedFileExtensions,
+      maxFileSizeInBytes,
+      maxFileSizeInMb,
+      maxAttachmentsPerMessage,
+    ]
   )
 
   useEffect(() => {
@@ -168,7 +180,19 @@ export function useAttachmentUploader({
     pendingUploads,
     errorMessage,
     flaggedAttachmentCount,
-    remainingAttachable: MAX_NUMBER_OF_ATTACHMENTS - numberOfAttachments,
+    remainingAttachable: Math.max(0, maxAttachmentsPerMessage - numberOfAttachments),
+  }
+}
+
+async function extractDevOnlyServerErrorDetail(err: unknown): Promise<string | null> {
+  const response = err as Response | null
+  if (!response?.clone) return null
+  try {
+    const body = await response.clone().json()
+    const detail = body?.errors?.[0]?.detail ?? body?.detail
+    return typeof detail === 'string' ? detail : null
+  } catch {
+    return null
   }
 }
 

package/src/hooks/use_chat_configuration.ts

@@ -0,0 +1,54 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { ApiResource } from '../types'
+import type { ChatConfigurationResource } from '../types/resources/chat_configuration_resource'
+import {
+  getChatConfigurationRequestArgs,
+  getChatConfigurationQueryKey,
+} from '../utils/request/get_chat_configuration'
+import {
+  FALLBACK_ALLOWED_FILE_EXTENSIONS,
+  FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
+  FALLBACK_MAX_FILE_SIZE_IN_BYTES,
+} from './attachments/fallback_chat_configuration'
+import { useApiClient } from './use_api_client'
+
+// Client-side mirror of ChatConfiguration (server is source of truth).
+// Returns fallback values if the API request fails so that the attachment
+// UX keeps working during transient server issues. The server still
+// enforces its own limits — this hook only drives pre-upload UX.
+export function useChatConfiguration() {
+  const apiClient = useApiClient()
+  const requestArgs = getChatConfigurationRequestArgs()
+
+  const { data } = useSuspenseQuery({
+    queryKey: getChatConfigurationQueryKey(),
+    queryFn: () => {
+      return apiClient.chat
+        .get<ApiResource<ChatConfigurationResource>>(requestArgs)
+        .catch(() => stableFallbackConfiguration)
+    },
+    staleTime: 1000 * 60 * 60, // 1 hour — this rarely changes
+  })
+
+  const attrs = data.data
+
+  return {
+    allowedFileExtensions: attrs.allowedFileExtensions,
+    maxFileSizeInBytes: attrs.maxFileSizeInBytes,
+    maxAttachmentsPerMessage: attrs.maxAttachmentsPerMessage,
+  }
+}
+
+// Shape matches what consumers see after transform_response flattens
+// attributes and camelCases keys.
+const stableFallbackConfiguration: ApiResource<ChatConfigurationResource> = {
+  data: {
+    type: 'ChatConfiguration',
+    id: 'current',
+    allowedFileExtensions: FALLBACK_ALLOWED_FILE_EXTENSIONS,
+    maxFileSizeInBytes: FALLBACK_MAX_FILE_SIZE_IN_BYTES,
+    maxAttachmentsPerMessage: FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
+  },
+  links: {},
+  meta: {},
+}

package/src/hooks/use_conversation_avatar_update.ts

@@ -0,0 +1,163 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Alert } from 'react-native'
+import type { ConversationResource } from '../types'
+import type { ApiResource } from '../types'
+import { transformGetToPost } from '../utils/client/request_helpers'
+import type { ImagePickerAsset } from '../utils/native_adapters/image_picker'
+import { ApiClient, useApiClient } from './use_api_client'
+import { getConversationRequestArgs } from './use_conversation'
+import { getRequestQueryKey } from './use_suspense_api'
+import { useUploadClient } from './use_upload_client'
+
+export type AvatarType = 'icon' | 'emoji' | 'image'
+
+export type AvatarUpdatePayload =
+  | { kind: Extract<AvatarType, 'icon' | 'emoji'>; key: string; color: string }
+  | { kind: Extract<AvatarType, 'image'>; imageAsset: ImagePickerAsset; color: string }
+  | { kind: 'clear' }
+
+export const useConversationAvatarUpdate = ({ conversationId }: { conversationId: number }) => {
+  const apiClient = useApiClient()
+  const uploadClient = useUploadClient()
+  const queryClient = useQueryClient()
+  const requestArgs = getConversationRequestArgs({ conversation_id: conversationId })
+  const queryKey = getRequestQueryKey(requestArgs)
+
+  return useMutation({
+    mutationKey: ['updateConversationAvatar', conversationId],
+    mutationFn: async (payload: AvatarUpdatePayload) => {
+      const postArgs = transformGetToPost(requestArgs).data
+      const attributes = await buildAttributes(payload, uploadClient)
+
+      return apiClient.chat.patch<ApiResource<ConversationResource>>({
+        url: `/me/conversations/${conversationId}/`,
+        data: { data: { type: '', attributes }, ...postArgs },
+      })
+    },
+    onMutate: async (payload: AvatarUpdatePayload) => {
+      await queryClient.cancelQueries({ queryKey })
+
+      const previous = queryClient.getQueryData<ApiResource<ConversationResource>>(queryKey)
+
+      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
+        if (!prev?.data) return prev
+        return { ...prev, data: buildOptimisticData(prev.data, payload) }
+      })
+
+      return { previous }
+    },
+    onSuccess: (response, _payload, _context) => {
+      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, () => response)
+      queryClient.invalidateQueries({ queryKey: ['/me/conversations'] })
+    },
+    onError: (_error, _payload, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(queryKey, context.previous)
+      }
+
+      Alert.alert('Error', 'Failed to update conversation avatar. Please try again.')
+    },
+  })
+}
+
+export async function patchConversationAvatar(
+  apiClient: ApiClient,
+  uploadClient: ReturnType<typeof useUploadClient>,
+  conversationId: number,
+  payload: Exclude<AvatarUpdatePayload, { kind: 'clear' }>
+) {
+  const requestArgs = getConversationRequestArgs({ conversation_id: conversationId })
+  const postArgs = transformGetToPost(requestArgs).data
+
+  try {
+    const attributes = await buildAttributes(payload, uploadClient)
+    await apiClient.chat.patch({
+      url: `/me/conversations/${conversationId}/`,
+      data: { data: { type: '', attributes }, ...postArgs },
+    })
+  } catch {
+    Alert.alert(
+      'Avatar not saved',
+      'The conversation was created, but the avatar could not be saved. You can update it from the conversation details.'
+    )
+  }
+}
+
+function buildOptimisticData(
+  data: ConversationResource,
+  payload: AvatarUpdatePayload
+): ConversationResource {
+  switch (payload.kind) {
+    case 'icon':
+      return {
+        ...data,
+        customAvatarType: 'icon',
+        customAvatarKey: payload.key,
+        customAvatarColor: payload.color,
+        customAvatarImageUrl: null,
+      }
+    case 'emoji':
+      return {
+        ...data,
+        customAvatarType: 'emoji',
+        customAvatarKey: payload.key,
+        customAvatarColor: payload.color,
+        customAvatarImageUrl: null,
+      }
+    case 'image':
+      return {
+        ...data,
+        customAvatarType: 'image',
+        customAvatarKey: null,
+        customAvatarColor: payload.color,
+        customAvatarImageUrl: payload.imageAsset.uri,
+      }
+    case 'clear':
+      return {
+        ...data,
+        customAvatarType: null,
+        customAvatarKey: null,
+        customAvatarColor: null,
+        customAvatarImageUrl: null,
+      }
+  }
+}
+
+async function buildAttributes(
+  payload: AvatarUpdatePayload,
+  uploadClient: ReturnType<typeof useUploadClient>
+) {
+  switch (payload.kind) {
+    case 'icon':
+      return {
+        custom_avatar_type: 'icon',
+        custom_avatar_key: payload.key,
+        custom_avatar_color: payload.color,
+      }
+    case 'emoji':
+      return {
+        custom_avatar_type: 'emoji',
+        custom_avatar_key: payload.key,
+        custom_avatar_color: payload.color,
+      }
+    case 'image': {
+      const uploaded = await uploadClient.uploadFile({
+        uri: payload.imageAsset.uri,
+        name: payload.imageAsset.fileName || 'avatar.jpg',
+        type: payload.imageAsset.mimeType || 'image/jpeg',
+      })
+
+      return {
+        custom_avatar_type: 'image',
+        custom_avatar_color: payload.color,
+        avatar_uploaded_file_id: uploaded.id,
+      }
+    }
+    case 'clear':
+      return {
+        custom_avatar_type: null,
+        custom_avatar_key: null,
+        custom_avatar_color: null,
+      }
+  }
+}

package/src/hooks/use_features.ts

@@ -37,6 +37,7 @@ export const availableFeatures = {
   gender_specific_conversations: 'ROLLOUT_gender_specific_conversations',
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
   granular_notifications_ui: 'ROLLOUT_granular_notification_preferences_ui',
+  custom_conversation_avatars: 'ROLLOUT_custom_conversation_avatars',
 }
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/navigation/index.tsx

@@ -17,6 +17,11 @@ import {
   AttachmentActionsScreen,
   AttachmentActionsScreenOptions,
 } from '../screens/attachment_actions/attachment_actions_screen'
+import {
+  AvatarPickerScreen,
+  AvatarPickerScreenOptions,
+  AvatarPickerCreateScreenOptions,
+} from '../screens/avatar_picker/avatar_picker_screen'
 import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
 import {
   MessageReadReceiptsScreen,
@@ -148,6 +153,10 @@ export const NewConversationStack = createNativeStackNavigator({
         ),
       }),
     },
+    AvatarPicker: {
+      screen: AvatarPickerScreen,
+      options: AvatarPickerCreateScreenOptions,
+    },
   },
 })
 
@@ -252,6 +261,10 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    AvatarPicker: {
+      screen: AvatarPickerScreen,
+      options: AvatarPickerScreenOptions,
+    },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
       options: ({ navigation }) => ({

package/src/screens/avatar_picker/__tests__/avatar_picker_state.test.ts

@@ -0,0 +1,157 @@
+import { DEFAULT_AVATAR_COLOR_KEY } from '../../../components/display/utils/avatar_gradient_colors'
+import type { AvatarUpdatePayload } from '../../../hooks/use_conversation_avatar_update'
+import type { ConversationResource } from '../../../types'
+import {
+  avatarPickerReducer,
+  initAvatarPickerState,
+  initAvatarPickerStateFromPayload,
+  initEmptyAvatarPickerState,
+} from '../avatar_picker_state'
+
+const emptyState = initEmptyAvatarPickerState()
+
+describe('initEmptyAvatarPickerState', () => {
+  it('starts clean', () => {
+    expect(emptyState).toMatchObject({
+      activeTab: 'icon',
+      selectedType: null,
+      selectedKey: null,
+      selectedColor: DEFAULT_AVATAR_COLOR_KEY,
+      imagePreviewUri: null,
+      imageAsset: null,
+      isDirty: false,
+    })
+  })
+})
+
+describe('initAvatarPickerState', () => {
+  it('seeds from icon avatar', () => {
+    const conversation = {
+      customAvatarType: 'icon' as const,
+      customAvatarKey: 'guitar',
+      customAvatarColor: 'cosmic',
+      customAvatarImageUrl: null,
+    } as Pick<
+      ConversationResource,
+      'customAvatarType' | 'customAvatarKey' | 'customAvatarColor' | 'customAvatarImageUrl'
+    >
+
+    const state = initAvatarPickerState(conversation)
+    expect(state).toMatchObject({
+      activeTab: 'icon',
+      selectedType: 'icon',
+      selectedKey: 'guitar',
+      selectedColor: 'cosmic',
+      isDirty: false,
+    })
+  })
+
+  it('seeds from image avatar — active tab is upload', () => {
+    const conversation = {
+      customAvatarType: 'image' as const,
+      customAvatarKey: null,
+      customAvatarColor: 'rose-gold',
+      customAvatarImageUrl: 'https://example.com/avatar.jpg',
+    } as Pick<
+      ConversationResource,
+      'customAvatarType' | 'customAvatarKey' | 'customAvatarColor' | 'customAvatarImageUrl'
+    >
+
+    const state = initAvatarPickerState(conversation)
+    expect(state).toMatchObject({
+      activeTab: 'upload',
+      selectedType: 'image',
+      imagePreviewUri: 'https://example.com/avatar.jpg',
+      imageAsset: null,
+      isDirty: false,
+    })
+  })
+
+  it('falls back to icon tab and default color when no avatar', () => {
+    const conversation = {
+      customAvatarType: null,
+      customAvatarKey: null,
+      customAvatarColor: null,
+      customAvatarImageUrl: null,
+    } as Pick<
+      ConversationResource,
+      'customAvatarType' | 'customAvatarKey' | 'customAvatarColor' | 'customAvatarImageUrl'
+    >
+
+    const state = initAvatarPickerState(conversation)
+    expect(state).toMatchObject({
+      activeTab: 'icon',
+      selectedType: null,
+      selectedColor: DEFAULT_AVATAR_COLOR_KEY,
+      isDirty: false,
+    })
+  })
+})
+
+describe('initAvatarPickerStateFromPayload', () => {
+  it('restores icon payload', () => {
+    const payload: AvatarUpdatePayload = { kind: 'icon', key: 'dove', color: 'twilight' }
+    const state = initAvatarPickerStateFromPayload(payload)
+    expect(state).toMatchObject({
+      activeTab: 'icon',
+      selectedType: 'icon',
+      selectedKey: 'dove',
+      selectedColor: 'twilight',
+      isDirty: false,
+    })
+  })
+
+  it('restores emoji payload', () => {
+    const payload: AvatarUpdatePayload = { kind: 'emoji', key: '🎸', color: 'garden' }
+    const state = initAvatarPickerStateFromPayload(payload)
+    expect(state).toMatchObject({
+      activeTab: 'emoji',
+      selectedType: 'emoji',
+      selectedKey: '🎸',
+      isDirty: false,
+    })
+  })
+
+  it('falls back to empty state for clear payload', () => {
+    const payload: AvatarUpdatePayload = { kind: 'clear' }
+    const state = initAvatarPickerStateFromPayload(payload)
+    expect(state).toMatchObject(emptyState)
+  })
+})
+
+describe('avatarPickerReducer', () => {
+  it('SELECT_ICON sets type, key, isDirty', () => {
+    const state = avatarPickerReducer(emptyState, { type: 'SELECT_ICON', payload: 'guitar' })
+    expect(state).toMatchObject({ selectedType: 'icon', selectedKey: 'guitar', isDirty: true })
+  })
+
+  it('SELECT_EMOJI sets type, key, isDirty', () => {
+    const state = avatarPickerReducer(emptyState, { type: 'SELECT_EMOJI', payload: '🎵' })
+    expect(state).toMatchObject({ selectedType: 'emoji', selectedKey: '🎵', isDirty: true })
+  })
+
+  it('SELECT_COLOR updates color and sets isDirty', () => {
+    const state = avatarPickerReducer(emptyState, { type: 'SELECT_COLOR', payload: 'cosmic' })
+    expect(state).toMatchObject({ selectedColor: 'cosmic', isDirty: true })
+  })
+
+  it('SELECT_TAB switches tab without setting isDirty', () => {
+    const state = avatarPickerReducer(emptyState, { type: 'SELECT_TAB', payload: 'emoji' })
+    expect(state.activeTab).toBe('emoji')
+    expect(state.isDirty).toBe(false)
+  })
+
+  it('CLEAR resets selection, color, and sets isDirty', () => {
+    const withIcon = avatarPickerReducer(emptyState, { type: 'SELECT_ICON', payload: 'dove' })
+    const withColor = avatarPickerReducer(withIcon, { type: 'SELECT_COLOR', payload: 'cosmic' })
+    const cleared = avatarPickerReducer(withColor, { type: 'CLEAR' })
+    expect(cleared).toMatchObject({
+      selectedType: null,
+      selectedKey: null,
+      selectedColor: DEFAULT_AVATAR_COLOR_KEY,
+      imagePreviewUri: null,
+      imageAsset: null,
+      isDirty: true,
+    })
+  })
+})