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

package/src/screens/conversation_new/components/groups_form.tsx

@@ -4,30 +4,42 @@ import { Platform, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Banner, ChildNotice, Heading, Text } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
 import { KeyboardView } from '../../../components/display/keyboard_view'
-import { useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
+import { useApiClient, useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
 import {
   GroupMembersForNewConversationResult,
   useGroupMembersForNewConversation,
 } from '../../../hooks/groups/use_group_members_for_new_conversation'
 import { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'
+import {
+  type AvatarUpdatePayload,
+  patchConversationAvatar,
+} from '../../../hooks/use_conversation_avatar_update'
+import { availableFeatures, useFeatures } from '../../../hooks/use_features'
 import { useMyGender } from '../../../hooks/use_my_gender'
+import { useUploadClient } from '../../../hooks/use_upload_client'
 import { GroupsGroupResource } from '../../../types'
 import { GraphId } from '../../../types/resources/group_resource'
 import { pluralize } from '../../../utils'
 import { genderDisplayLabel } from '../../../utils/gender_display_label'
 import { Haptic } from '../../../utils/native_adapters'
+import { AvatarSelectionRow } from './avatar_selection_row'
 import { Divider, FormList } from './form_list'
 import { GenderFilterToggle } from './gender_filter_toggle'
 
 type GroupsFormProps = {
   groupId: number
   chat_group_graph_id?: GraphId
+  avatarSelection?: AvatarUpdatePayload
 }
 
-export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) => {
+export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: GroupsFormProps) => {
   const navigation = useNavigation()
+  const apiClient = useApiClient()
+  const uploadClient = useUploadClient()
   const [title, setTitle] = useState('')
   const [genderFilterEnabled, setGenderFilterEnabled] = useState(false)
+  const { featureEnabled } = useFeatures()
+  const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const {
     isFeatureEnabled: genderFilterAvailable,
     genderId,
@@ -67,9 +79,8 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
     }
   }
 
-  const redirectToConversation = useCallback(
+  const handleCreateSuccess = useCallback(
     (conversationId: number) => {
-      // navigate to the conversation screen
       navigation.dispatch(
         StackActions.popTo('Conversation', {
           conversation_id: conversationId,
@@ -77,15 +88,19 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
         })
       )
       Haptic.notificationSuccess()
+
+      if (avatarSelection && avatarSelection.kind !== 'clear') {
+        patchConversationAvatar(apiClient, uploadClient, conversationId, avatarSelection)
+      }
     },
-    [chat_group_graph_id, navigation]
+    [apiClient, avatarSelection, chat_group_graph_id, navigation, uploadClient]
   )
 
   const { mutate: handleSave, isPending } = useGroupsConversationCreate({
     groupId,
     title,
     genderId: activeGenderId,
-    onSuccess: redirectToConversation,
+    onSuccess: handleCreateSuccess,
   })
 
   return (
@@ -106,6 +121,8 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
             onGenderToggle={handleGenderToggle}
             groupMemberships={groupMemberships}
             filteredMemberCount={groupMemberships.adultMembers.length}
+            avatarSelection={avatarSelection}
+            customAvatarsEnabled={customAvatarsEnabled}
           />
         }
       />
@@ -130,6 +147,8 @@ interface FormContentProps {
   onGenderToggle: (enabled: boolean) => void
   groupMemberships: GroupMembersForNewConversationResult
   filteredMemberCount: number
+  avatarSelection?: AvatarUpdatePayload
+  customAvatarsEnabled: boolean
 }
 
 function FormContent({
@@ -143,6 +162,8 @@ function FormContent({
   onGenderToggle,
   groupMemberships,
   filteredMemberCount,
+  avatarSelection,
+  customAvatarsEnabled,
 }: FormContentProps) {
   const styles = useStyles()
   const inputRef = useRef<TextInput>(null)
@@ -185,6 +206,12 @@ function FormContent({
         />
       </Pressable>
       <Divider />
+      {customAvatarsEnabled && (
+        <>
+          <AvatarSelectionRow avatarSelection={avatarSelection} />
+          <Divider />
+        </>
+      )}
       {genderFilterAvailable && (
         <>
           <GenderFilterToggle

package/src/screens/conversation_new/components/services_form.tsx

@@ -4,14 +4,22 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Badge, Banner, ChildNotice, Heading, Switch, TextButton } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
+import { useApiClient } from '../../../hooks'
 import { useFindOrCreateServicesConversation } from '../../../hooks/services/use_find_or_create_services_conversation'
 import { useServicesTeams } from '../../../hooks/services/use_services_team'
 import { useTeamMembersForNewConversation } from '../../../hooks/services/use_team_members_for_new_conversation'
-import { ConversationResource, MemberResource } from '../../../types'
+import {
+  type AvatarUpdatePayload,
+  patchConversationAvatar,
+} from '../../../hooks/use_conversation_avatar_update'
+import { availableFeatures, useFeatures } from '../../../hooks/use_features'
+import { useUploadClient } from '../../../hooks/use_upload_client'
+import { MemberResource } from '../../../types'
 import { pluralize } from '../../../utils'
 import { Haptic } from '../../../utils/native_adapters'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { TeamFilterTypes } from '../../conversation_filter_recipients/types'
+import { AvatarSelectionRow } from './avatar_selection_row'
 import { FilterByPlan } from './filter_by_plan'
 import { Divider, FormList } from './form_list'
 
@@ -19,14 +27,20 @@ type ServicesFormProps = {
   initialTeamIds?: number[]
   initialPlanId?: number
   teamFilterType?: TeamFilterTypes
+  avatarSelection?: AvatarUpdatePayload
 }
 
 export const ServicesForm = ({
   initialTeamIds,
   initialPlanId,
   teamFilterType,
+  avatarSelection,
 }: ServicesFormProps) => {
   const styles = useStyles()
+  const apiClient = useApiClient()
+  const uploadClient = useUploadClient()
+  const { featureEnabled } = useFeatures()
+  const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)
   const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.
   const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)
@@ -61,17 +75,19 @@ export const ServicesForm = ({
   } = useFindOrCreateServicesConversation({
     teamIds: selectedTeamIds,
     planId: filerByPlan ? selectedPlanId : undefined,
-    onSuccess: (conversation: ConversationResource) => {
-      // exit from the create stack
+    onSuccess: (conversation, { created }) => {
       navigation.getParent()?.goBack()
-      // navigate to the conversation screen
       navigation.dispatch(
         StackActions.push('Conversation', {
           conversation_id: conversation.id,
         })
       )
-      // Only trigger success haptic if creating a new conversation
-      if (!selectionHasConversation) Haptic.notificationSuccess()
+      if (created) {
+        Haptic.notificationSuccess()
+        if (avatarSelection && avatarSelection.kind !== 'clear') {
+          patchConversationAvatar(apiClient, uploadClient, conversation.id, avatarSelection)
+        }
+      }
     },
   })
 
@@ -90,6 +106,9 @@ export const ServicesForm = ({
             members={members}
             isMemberError={isMemberError}
             teamFilterType={teamFilterType}
+            avatarSelection={avatarSelection}
+            selectionHasConversation={selectionHasConversation}
+            customAvatarsEnabled={customAvatarsEnabled}
           />
         }
       />
@@ -114,6 +133,9 @@ interface FormContentProps {
   members: MemberResource[]
   isMemberError: boolean
   teamFilterType?: TeamFilterTypes
+  avatarSelection?: AvatarUpdatePayload
+  selectionHasConversation: boolean
+  customAvatarsEnabled: boolean
 }
 
 function FormContent({
@@ -126,6 +148,9 @@ function FormContent({
   members,
   isMemberError,
   teamFilterType,
+  avatarSelection,
+  selectionHasConversation,
+  customAvatarsEnabled,
 }: FormContentProps) {
   const navigation = useNavigation()
   const servicesTeams = useServicesTeams()
@@ -205,6 +230,12 @@ function FormContent({
         )}
       </View>
       <Divider />
+      {!selectionHasConversation && customAvatarsEnabled && (
+        <>
+          <AvatarSelectionRow avatarSelection={avatarSelection} />
+          <Divider />
+        </>
+      )}
       <View style={styles.memberSection}>
         <Heading variant="h3">{pluralize(memberCount, 'member')} selected</Heading>
         {hasChildren && (

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -1,5 +1,6 @@
 import { StaticScreenProps } from '@react-navigation/native'
 import React from 'react'
+import type { AvatarUpdatePayload } from '../../hooks/use_conversation_avatar_update'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
 import { TeamFilterTypes } from '../conversation_filter_recipients/types'
@@ -15,16 +16,28 @@ type ConversationNewScreenProps = StaticScreenProps<{
   source_app_name: AppName
   chat_group_graph_id?: GraphId
   group_source_app_name?: AppName
+  avatar_selection?: AvatarUpdatePayload
 }>
 
 export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {
-  const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id, team_filter_type } =
-    route.params
+  const {
+    group_id,
+    team_ids,
+    source_app_name,
+    plan_id,
+    chat_group_graph_id,
+    team_filter_type,
+    avatar_selection,
+  } = route.params
 
   switch (source_app_name) {
     case 'Groups':
       return group_id ? (
-        <GroupsForm groupId={group_id} chat_group_graph_id={chat_group_graph_id} />
+        <GroupsForm
+          groupId={group_id}
+          chat_group_graph_id={chat_group_graph_id}
+          avatarSelection={avatar_selection}
+        />
       ) : (
         <SourceAppErrorCard />
       )
@@ -34,6 +47,7 @@ export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) =>
           initialTeamIds={team_ids}
           initialPlanId={plan_id}
           teamFilterType={team_filter_type}
+          avatarSelection={avatar_selection}
         />
       )
     default:

package/src/screens/team_conversation_screen.tsx

@@ -22,7 +22,8 @@ export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) =
   const teamAndPlanParams = buildTeamAndPlanParams(route.params.team_ids, route.params.plan_id)
   const { data: conversation } = useQuery({
     queryKey: ['team-conversation', route.params.team_ids, route.params.plan_id],
-    queryFn: () => findOrCreateServicesConversation(apiClient, teamAndPlanParams),
+    queryFn: () =>
+      findOrCreateServicesConversation(apiClient, teamAndPlanParams).then(r => r.conversation),
   })
 
   useEffect(() => {

package/src/types/resources/chat_configuration_resource.ts

@@ -0,0 +1,11 @@
+// Shape after transform_response flattens attributes and camelCases keys.
+// The wire format uses snake_case nested under attributes (see the Rails
+// ChatConfigurationVertex); the JS client transforms it before consumers
+// see it.
+export interface ChatConfigurationResource {
+  type: 'ChatConfiguration'
+  id: string
+  allowedFileExtensions: string[]
+  maxFileSizeInBytes: number
+  maxAttachmentsPerMessage: number
+}

package/src/utils/native_adapters/configuration.ts

@@ -2,6 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import { Linking as RNLinking } from 'react-native'
 import { AudioAdapter } from './audio'
 import { ClipboardAdapter } from './clipboard'
+import { DocumentPickerAdapter } from './document_picker'
 import { HapticAdapter } from './haptic'
 import { ImagePickerAdapter } from './image_picker'
 import { LinkingAdapter } from './linking'
@@ -14,6 +15,7 @@ type ChatConfigurations = {
   audio: AudioAdapter
   video: VideoAdapter
   imagePicker: ImagePickerAdapter
+  documentPicker: DocumentPickerAdapter
   log?: LogAdapter
   linking?: LinkingAdapter
   haptic?: HapticAdapter
@@ -25,6 +27,7 @@ export class ChatAdapters {
     Audio = configurations.audio
     Video = configurations.video
     ImagePicker = configurations.imagePicker
+    DocumentPicker = configurations.documentPicker
     Log = configurations.log || new LogAdapter()
     Linking = configurations.linking || new LinkingAdapter(RNLinking)
     Haptic = configurations.haptic || new HapticAdapter()
@@ -71,6 +74,13 @@ export let ImagePicker: ImagePickerAdapter = new ImagePickerAdapter({
   },
 })
 
+export let DocumentPicker: DocumentPickerAdapter = new DocumentPickerAdapter({
+  openAsync: async () => {
+    methodMissing()
+    return { canceled: true, assets: null }
+  },
+})
+
 export let Log: LogAdapter = new LogAdapter()
 
 export let Linking: LinkingAdapter = new LinkingAdapter(RNLinking)

package/src/utils/native_adapters/document_picker.ts

@@ -0,0 +1,26 @@
+export type DocumentPickerAsset = {
+  uri: string
+  name: string
+  size?: number
+  mimeType?: string
+}
+
+type DocumentPickerSuccessResult = {
+  canceled: false
+  assets: DocumentPickerAsset[]
+}
+
+type DocumentPickerCanceledResult = {
+  canceled: true
+  assets: null
+}
+
+export type DocumentPickerResult = DocumentPickerSuccessResult | DocumentPickerCanceledResult
+
+export class DocumentPickerAdapter {
+  openAsync: () => Promise<DocumentPickerResult>
+
+  constructor(methods: DocumentPickerAdapter) {
+    this.openAsync = methods.openAsync
+  }
+}

package/src/utils/native_adapters/image_picker.ts

@@ -20,9 +20,16 @@ type ImagePickerCanceledResult = {
 
 export type ImagePickerResult = ImagePickerSuccessResult | ImagePickerCanceledResult
 
+export interface ImagePickerOptions {
+  selectionLimit?: number
+  allowsEditing?: boolean
+  allowsMultipleSelection?: boolean
+  mediaTypes?: Array<'images' | 'videos' | 'livePhotos'>
+}
+
 export class ImagePickerAdapter {
   openCameraAsync: () => Promise<ImagePickerResult>
-  openImageLibraryAsync: () => Promise<ImagePickerResult>
+  openImageLibraryAsync: (options?: ImagePickerOptions) => Promise<ImagePickerResult>
 
   constructor(methods: ImagePickerAdapter) {
     this.openCameraAsync = methods.openCameraAsync

package/src/utils/native_adapters/index.ts

@@ -1,6 +1,7 @@
 export * from './audio'
 export * from './clipboard'
 export * from './configuration'
+export * from './document_picker'
 export * from './image_picker'
 export * from './linking'
 export * from './log'

package/src/utils/request/get_chat_configuration.ts

@@ -0,0 +1,23 @@
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+
+export const getChatConfigurationRequestArgs = () => {
+  const url = '/me/chat_configuration'
+
+  return {
+    url,
+    data: {
+      fields: {
+        ChatConfiguration: [
+          'allowed_file_extensions',
+          'max_file_size_in_bytes',
+          'max_attachments_per_message',
+        ],
+      },
+    },
+  }
+}
+
+export const getChatConfigurationQueryKey = () => {
+  const requestArgs = getChatConfigurationRequestArgs()
+  return getRequestQueryKey(requestArgs)
+}

package/build/hooks/attachments/supported_extensions.d.ts

@@ -1,2 +0,0 @@
-export declare const SUPPORTED_EXTENSIONS: string[];
-//# sourceMappingURL=supported_extensions.d.ts.map

package/build/hooks/attachments/supported_extensions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"supported_extensions.d.ts","sourceRoot":"","sources":["../../../src/hooks/attachments/supported_extensions.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,UA8ChC,CAAA"}

package/build/hooks/attachments/supported_extensions.js

@@ -1,48 +0,0 @@
-export const SUPPORTED_EXTENSIONS = [
-    '.3ga',
-    '.3gp',
-    '.aac',
-    '.amr',
-    '.avi',
-    '.bmp',
-    '.doc',
-    '.docx',
-    '.gif',
-    '.h263',
-    '.h264',
-    '.heic',
-    '.heif',
-    '.jpeg',
-    '.jpg',
-    '.key',
-    '.m4a',
-    '.m4b',
-    '.m4p',
-    '.m4r',
-    '.m4v',
-    '.mkv',
-    '.mov',
-    '.mp3',
-    '.mp4',
-    '.mp4-latm',
-    '.mpeg',
-    '.mpeg4',
-    '.mpg',
-    '.numbers',
-    '.ogg',
-    '.pages',
-    '.pdf',
-    '.png',
-    '.ppt',
-    '.pptx',
-    '.rtf',
-    '.txt',
-    '.vcf',
-    '.wav',
-    '.webm',
-    '.webp',
-    '.wmv',
-    '.xls',
-    '.xlsx',
-];
-//# sourceMappingURL=supported_extensions.js.map

package/build/hooks/attachments/supported_extensions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"supported_extensions.js","sourceRoot":"","sources":["../../../src/hooks/attachments/supported_extensions.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,WAAW;IACX,OAAO;IACP,QAAQ;IACR,MAAM;IACN,UAAU;IACV,MAAM;IACN,QAAQ;IACR,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,OAAO;IACP,MAAM;IACN,MAAM;IACN,OAAO;CACR,CAAA","sourcesContent":["export const SUPPORTED_EXTENSIONS = [\n  '.3ga',\n  '.3gp',\n  '.aac',\n  '.amr',\n  '.avi',\n  '.bmp',\n  '.doc',\n  '.docx',\n  '.gif',\n  '.h263',\n  '.h264',\n  '.heic',\n  '.heif',\n  '.jpeg',\n  '.jpg',\n  '.key',\n  '.m4a',\n  '.m4b',\n  '.m4p',\n  '.m4r',\n  '.m4v',\n  '.mkv',\n  '.mov',\n  '.mp3',\n  '.mp4',\n  '.mp4-latm',\n  '.mpeg',\n  '.mpeg4',\n  '.mpg',\n  '.numbers',\n  '.ogg',\n  '.pages',\n  '.pdf',\n  '.png',\n  '.ppt',\n  '.pptx',\n  '.rtf',\n  '.txt',\n  '.vcf',\n  '.wav',\n  '.webm',\n  '.webp',\n  '.wmv',\n  '.xls',\n  '.xlsx',\n]\n"]}

package/src/hooks/attachments/supported_extensions.ts

@@ -1,47 +0,0 @@
-export const SUPPORTED_EXTENSIONS = [
-  '.3ga',
-  '.3gp',
-  '.aac',
-  '.amr',
-  '.avi',
-  '.bmp',
-  '.doc',
-  '.docx',
-  '.gif',
-  '.h263',
-  '.h264',
-  '.heic',
-  '.heif',
-  '.jpeg',
-  '.jpg',
-  '.key',
-  '.m4a',
-  '.m4b',
-  '.m4p',
-  '.m4r',
-  '.m4v',
-  '.mkv',
-  '.mov',
-  '.mp3',
-  '.mp4',
-  '.mp4-latm',
-  '.mpeg',
-  '.mpeg4',
-  '.mpg',
-  '.numbers',
-  '.ogg',
-  '.pages',
-  '.pdf',
-  '.png',
-  '.ppt',
-  '.pptx',
-  '.rtf',
-  '.txt',
-  '.vcf',
-  '.wav',
-  '.webm',
-  '.webp',
-  '.wmv',
-  '.xls',
-  '.xlsx',
-]