@planningcenter/chat-react-native 3.31.0-rc.2 → 3.31.0-rc.4

package/src/components/display/conversation_avatar.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import type { ViewStyle } from 'react-native'
+import type { ConversationResource } from '../../types'
+import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+import { AvatarGroup } from './avatar_group'
+import { EmojiAvatar } from './emoji_avatar'
+import { type IconString } from './icon'
+import { IconAvatar } from './icon_avatar'
+
+type ConversationAvatarData = Pick<
+  ConversationResource,
+  | 'customAvatarType'
+  | 'customAvatarKey'
+  | 'customAvatarColor'
+  | 'customAvatarImageUrl'
+  | 'previewAvatarUrls'
+>
+
+type ResolvedAvatar =
+  | { kind: 'image'; url: string }
+  | { kind: 'icon'; iconKey: string; color: string | null }
+  | { kind: 'emoji'; emoji: string; color: string | null }
+  | { kind: 'group'; sources: string[] | undefined }
+
+function resolveAvatar(conversation: ConversationAvatarData): ResolvedAvatar {
+  if (conversation.customAvatarType === 'image' && conversation.customAvatarImageUrl) {
+    return { kind: 'image', url: conversation.customAvatarImageUrl }
+  }
+
+  if (conversation.customAvatarType === 'icon' && conversation.customAvatarKey) {
+    return {
+      kind: 'icon',
+      iconKey: conversation.customAvatarKey,
+      color: conversation.customAvatarColor ?? null,
+    }
+  }
+
+  if (conversation.customAvatarType === 'emoji' && conversation.customAvatarKey) {
+    return {
+      kind: 'emoji',
+      emoji: conversation.customAvatarKey,
+      color: conversation.customAvatarColor ?? null,
+    }
+  }
+
+  return { kind: 'group', sources: conversation.previewAvatarUrls }
+}
+
+interface ConversationAvatarProps {
+  conversation: ConversationAvatarData
+  size?: AvatarRootProps['size']
+  showFallback?: boolean
+  fallbackIconName?: IconString
+  style?: ViewStyle
+}
+
+export function ConversationAvatar({
+  conversation,
+  size = 'lg',
+  showFallback = false,
+  fallbackIconName = 'general.person',
+  style,
+}: ConversationAvatarProps) {
+  const avatar = resolveAvatar(conversation)
+
+  switch (avatar.kind) {
+    case 'image':
+      return (
+        <AvatarPrimitive.Root size={size} style={style}>
+          <AvatarPrimitive.Mask>
+            <AvatarPrimitive.Image sourceUri={avatar.url} />
+          </AvatarPrimitive.Mask>
+        </AvatarPrimitive.Root>
+      )
+    case 'icon':
+      return <IconAvatar iconKey={avatar.iconKey} color={avatar.color} size={size} />
+    case 'emoji':
+      return <EmojiAvatar emoji={avatar.emoji} color={avatar.color} size={size} />
+    case 'group':
+      return (
+        <AvatarGroup
+          sourceUris={avatar.sources || []}
+          size={size}
+          showFallback={showFallback || !avatar.sources || avatar.sources.length === 0}
+          fallbackIconName={fallbackIconName}
+          style={style}
+        />
+      )
+  }
+}

package/src/components/display/emoji_avatar.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+import { getAvatarGradientProps } from './utils/avatar_gradient_colors'
+
+const EMOJI_SIZE: Record<string, number> = {
+  xs: 8,
+  sm: 10,
+  md: 14,
+  lg: 20,
+}
+
+interface EmojiAvatarProps {
+  emoji: string
+  color?: string | null
+  size?: AvatarRootProps['size']
+}
+
+export function EmojiAvatar({ emoji, color, size = 'lg' }: EmojiAvatarProps) {
+  const gradientProps = getAvatarGradientProps(color)
+
+  return (
+    <AvatarPrimitive.Root size={size}>
+      <AvatarPrimitive.Mask>
+        <LinearGradient {...gradientProps} style={styles.gradientFill}>
+          <View style={styles.contentContainer}>
+            <Text allowFontScaling={false} style={{ fontSize: EMOJI_SIZE[size] }}>
+              {emoji}
+            </Text>
+          </View>
+        </LinearGradient>
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>
+  )
+}
+
+const styles = StyleSheet.create({
+  gradientFill: {
+    width: '100%',
+    height: '100%',
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/display/icon_avatar.tsx

@@ -0,0 +1,52 @@
+import type { IconName } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+import { getAvatarGradientProps } from './utils/avatar_gradient_colors'
+
+const ICON_SIZE: Record<string, number> = {
+  xs: 10,
+  sm: 12,
+  md: 16,
+  lg: 20,
+}
+
+interface IconAvatarProps {
+  iconKey: string
+  color?: string | null
+  size?: AvatarRootProps['size']
+}
+
+export function IconAvatar({ iconKey, color, size = 'lg' }: IconAvatarProps) {
+  const gradientProps = getAvatarGradientProps(color)
+
+  return (
+    <AvatarPrimitive.Root size={size}>
+      <AvatarPrimitive.Mask>
+        <LinearGradient {...gradientProps} style={styles.gradientFill}>
+          <View style={styles.contentContainer}>
+            <FontAwesomeIcon
+              icon={['fas', iconKey as IconName]}
+              size={ICON_SIZE[size]}
+              color="white"
+            />
+          </View>
+        </LinearGradient>
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>
+  )
+}
+
+const styles = StyleSheet.create({
+  gradientFill: {
+    width: '100%',
+    height: '100%',
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/display/index.ts

@@ -1,6 +1,9 @@
 export * from './avatar_group'
 export * from './avatar'
 export * from './badge'
+export * from './conversation_avatar'
+export * from './emoji_avatar'
+export * from './icon_avatar'
 export * from './banner_collapsible'
 export * from './banner'
 export * from './button'

package/src/components/display/utils/avatar_gradient_colors.ts

@@ -0,0 +1,87 @@
+// Gradient color map for custom conversation avatars.
+// Values ported from chat web constants and @planningcenter/tapestry tokens.
+
+interface Point {
+  x: number
+  y: number
+}
+
+interface AvatarGradientProps {
+  colors: string[]
+  start: Point
+  end: Point
+}
+
+export type CustomAvatarColorKey =
+  | 'warm-sunset'
+  | 'peach'
+  | 'rose-gold'
+  | 'purple-gold'
+  | 'gold'
+  | 'garden'
+  | 'gold-blue'
+  | 'green-blue'
+  | 'iris'
+  | 'cosmic'
+  | 'navy-purple'
+  | 'twilight'
+  | 'steel'
+  | 'mauve'
+  | 'rose-teal'
+  | 'teal-purple'
+  | 'amethyst'
+  | 'rainbow'
+
+export const DEFAULT_AVATAR_COLOR_KEY: CustomAvatarColorKey = 'warm-sunset'
+
+// CSS angle → RN coordinate mapping:
+// 90°  → start: {x:0, y:0.5}, end: {x:1, y:0.5}
+// 120° → start: {x:0, y:0},   end: {x:0.5, y:1}
+// 135° → start: {x:0, y:0},   end: {x:1, y:1}
+// 160° → start: {x:0, y:0},   end: {x:0.35, y:1}
+
+const ANGLE_135: Pick<AvatarGradientProps, 'start' | 'end'> = {
+  start: { x: 0, y: 0 },
+  end: { x: 1, y: 1 },
+}
+
+const ANGLE_90: Pick<AvatarGradientProps, 'start' | 'end'> = {
+  start: { x: 0, y: 0.5 },
+  end: { x: 1, y: 0.5 },
+}
+
+const ANGLE_120: Pick<AvatarGradientProps, 'start' | 'end'> = {
+  start: { x: 0, y: 0 },
+  end: { x: 0.5, y: 1 },
+}
+
+const ANGLE_160: Pick<AvatarGradientProps, 'start' | 'end'> = {
+  start: { x: 0, y: 0 },
+  end: { x: 0.35, y: 1 },
+}
+
+const AVATAR_GRADIENT_MAP: Record<CustomAvatarColorKey, AvatarGradientProps> = {
+  'warm-sunset': { colors: ['#F6D06F', '#FB7946', '#B13825'], ...ANGLE_135 },
+  peach: { colors: ['#FCD983', '#FC9369'], ...ANGLE_90 },
+  'rose-gold': { colors: ['#ED78BE', '#E19084', '#EDB32C'], ...ANGLE_135 },
+  'purple-gold': { colors: ['#8B52D0', '#F8C73F'], ...ANGLE_135 },
+  gold: { colors: ['#F4C652', '#CCA32C'], ...ANGLE_90 },
+  garden: { colors: ['#FCD983', '#8DB95B', '#2A837C'], ...ANGLE_135 },
+  'gold-blue': { colors: ['#F4C652', '#3980C6'], ...ANGLE_90 },
+  'green-blue': { colors: ['#3FA05A', '#2466F5'], ...ANGLE_135 },
+  iris: { colors: ['#9773A5', '#2466F5', '#73BFBA'], ...ANGLE_120 },
+  cosmic: { colors: ['#2466F5', '#784E88', '#CD4932'], ...ANGLE_160 },
+  'navy-purple': { colors: ['#2E58BB', '#8B52D0'], ...ANGLE_160 },
+  twilight: { colors: ['#7FA1EB', '#865F95', '#3B404A'], ...ANGLE_135 },
+  steel: { colors: ['#8F95A3', '#585F6F'], ...ANGLE_135 },
+  mauve: { colors: ['#AD8FB7', '#585F6F'], ...ANGLE_135 },
+  'rose-teal': { colors: ['#E8638A', '#73BFBA'], ...ANGLE_135 },
+  'teal-purple': { colors: ['#6ADCC7', '#713FB0'], ...ANGLE_135 },
+  amethyst: { colors: ['#C69CE8', '#CB691F'], ...ANGLE_135 },
+  rainbow: { colors: ['#E76958', '#CCA32C', '#3FA05A', '#8B52D0'], ...ANGLE_135 },
+}
+
+export function getAvatarGradientProps(colorKey?: string | null): AvatarGradientProps {
+  const key = (colorKey as CustomAvatarColorKey) || DEFAULT_AVATAR_COLOR_KEY
+  return AVATAR_GRADIENT_MAP[key] || AVATAR_GRADIENT_MAP[DEFAULT_AVATAR_COLOR_KEY]
+}

package/src/hooks/use_conversation.ts

@@ -24,6 +24,10 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'last_message_text_preview',
         'latest_read_message_sort_key',
         'preview_avatar_urls',
+        'custom_avatar_type',
+        'custom_avatar_key',
+        'custom_avatar_color',
+        'custom_avatar_image_url',
         'member_ability',
         'muted',
         'replies_disabled',

package/src/hooks/use_new_conversation_from_filter.ts

@@ -0,0 +1,65 @@
+import { useMemo } from 'react'
+import { GroupResource, GraphId } from '../types/resources/group_resource'
+import { GroupsGroupResource } from '../types/resources/groups/groups_group_resource'
+import { destructureChatGroupGraphId } from '../utils'
+import { useApiGet } from './use_api'
+import { useNewConversationEntry } from './use_new_conversation_entry'
+
+export type NewConversationFromFilter =
+  | {
+      name: string
+      sourceAppName: 'groups'
+      groupId: number
+    }
+  | {
+      name: string
+      sourceAppName: 'services'
+      teamIds: number[]
+    }
+
+export function useNewConversationFromFilter(
+  chatGroupGraphId?: GraphId
+): NewConversationFromFilter | undefined {
+  const { sourceAppName, sourceType, sourceId } = destructureChatGroupGraphId(chatGroupGraphId)
+  const entryMode = useNewConversationEntry()
+  const isGroupsGroup = sourceAppName === 'Groups' && sourceType === 'Group'
+  const isServicesTeam = sourceAppName === 'Services' && sourceType === 'Team'
+
+  const { data: group } = useApiGet<GroupResource>({
+    url: `/me/groups/${chatGroupGraphId}`,
+    data: { fields: { Group: ['name'] } },
+    enabled: !!chatGroupGraphId,
+    app: 'chat',
+  })
+
+  const { data: groupsGroup } = useApiGet<GroupsGroupResource>({
+    url: `/me/groups/${sourceId}`,
+    data: { fields: { Group: ['can_create_conversation'] } },
+    enabled: isGroupsGroup && !!sourceId,
+    app: 'groups',
+  })
+
+  return useMemo(() => {
+    if (isGroupsGroup && group?.name && sourceId) {
+      const canCreate = entryMode === 'select_type' || entryMode === 'groups'
+      if (!canCreate) return undefined
+      if (!groupsGroup?.canCreateConversation) return undefined
+      return { name: group.name, sourceAppName: 'groups', groupId: sourceId }
+    }
+
+    if (isServicesTeam && group?.name && sourceId) {
+      const canCreate = entryMode === 'select_type' || entryMode === 'teams'
+      if (!canCreate) return undefined
+      return { name: group.name, sourceAppName: 'services', teamIds: [sourceId] }
+    }
+
+    return undefined
+  }, [
+    group?.name,
+    sourceId,
+    entryMode,
+    isGroupsGroup,
+    isServicesTeam,
+    groupsGroup?.canCreateConversation,
+  ])
+}

package/src/screens/conversation_select_type_screen.tsx

@@ -1,6 +1,8 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useNewConversationEntry } from '../hooks/use_new_conversation_entry'
+import type { NewConversationFromFilter } from '../hooks/use_new_conversation_from_filter'
 import { AppName } from '../types/resources/app_name'
 import { GraphId } from '../types/resources/group_resource'
 import { Haptic } from '../utils/native_adapters'
@@ -12,10 +14,46 @@ export const ConversationSelectTypeScreenOptions = getFormSheetScreenOptions({
 export type ConversationSelectTypeScreenProps = StaticScreenProps<{
   chat_group_graph_id?: GraphId
   group_source_app_name?: AppName
+  newConversationFromFilter?: NewConversationFromFilter
 }>
 
 export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeScreenProps) {
   const navigation = useNavigation()
+  const entryMode = useNewConversationEntry()
+  const { newConversationFromFilter, chat_group_graph_id, group_source_app_name } =
+    route.params || {}
+
+  const filterParams = { chat_group_graph_id, group_source_app_name }
+  const canCreateGroups = entryMode === 'select_type' || entryMode === 'groups'
+  const canCreateTeams = entryMode === 'select_type' || entryMode === 'teams'
+
+  const handleFilterPress = () => {
+    if (!newConversationFromFilter) return
+
+    Haptic.impactLight()
+    navigation.goBack()
+    requestAnimationFrame(() => {
+      if (newConversationFromFilter.sourceAppName === 'groups') {
+        navigation.navigate('New', {
+          screen: 'ConversationNew',
+          params: {
+            ...filterParams,
+            source_app_name: 'Groups' as AppName,
+            group_id: newConversationFromFilter.groupId,
+          },
+        })
+      } else {
+        navigation.navigate('New', {
+          screen: 'ConversationNew',
+          params: {
+            ...filterParams,
+            source_app_name: 'Services' as AppName,
+            team_ids: newConversationFromFilter.teamIds,
+          },
+        })
+      }
+    })
+  }
 
   const handleGroupPress = () => {
     Haptic.impactLight()
@@ -23,7 +61,7 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
     requestAnimationFrame(() => {
       navigation.navigate('New', {
         screen: 'ConversationSelectGroupRecipients',
-        params: { ...route.params },
+        params: filterParams,
       })
     })
   }
@@ -34,7 +72,7 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
     requestAnimationFrame(() => {
       navigation.navigate('New', {
         screen: 'ConversationSelectTeamsILeadRecipients',
-        params: { ...route.params },
+        params: filterParams,
       })
     })
   }
@@ -44,16 +82,27 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
       <FormSheet.Header>
         <FormSheet.HeaderTitle>Start a conversation by</FormSheet.HeaderTitle>
       </FormSheet.Header>
-      <FormSheet.Action
-        title="Group"
-        onPress={handleGroupPress}
-        accessibilityHint="Opens group selection screen"
-      />
-      <FormSheet.Action
-        title="Team"
-        onPress={handleTeamPress}
-        accessibilityHint="Opens team selection screen"
-      />
+      {newConversationFromFilter && (
+        <FormSheet.Action
+          title={`New conversation in ${newConversationFromFilter.name}`}
+          onPress={handleFilterPress}
+          accessibilityHint="Creates a conversation pre-scoped to the current filter"
+        />
+      )}
+      {canCreateGroups && (
+        <FormSheet.Action
+          title="Group"
+          onPress={handleGroupPress}
+          accessibilityHint="Opens group selection screen"
+        />
+      )}
+      {canCreateTeams && (
+        <FormSheet.Action
+          title="Team"
+          onPress={handleTeamPress}
+          accessibilityHint="Opens team selection screen"
+        />
+      )}
     </FormSheet.Root>
   )
 }

package/src/screens/conversations/components/list_header_component.tsx

@@ -8,6 +8,8 @@ import { useAppName } from '../../../hooks/use_app_name'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { useNewConversationEntry } from '../../../hooks/use_new_conversation_entry'
+import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
+import { GraphId } from '../../../types/resources/group_resource'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
 import { Haptic } from '../../../utils/native_adapters'
 import { ConversationsScreenProps } from '../conversations_screen'
@@ -33,6 +35,9 @@ export const ListHeaderComponent = () => {
   const { markAllRead, isPending } = useMarkAllRead()
   const canCreateConversations = useCanCreateConversations()
   const entryMode = useNewConversationEntry()
+  const newConversationFromFilter = useNewConversationFromFilter(
+    chat_group_graph_id as GraphId | undefined
+  )
   const appName = useAppName()
 
   const active: FilterTypes = useMemo(() => {
@@ -48,8 +53,11 @@ export const ListHeaderComponent = () => {
   }, [chat_group_graph_id, group_source_app_name])
 
   const handleNewConversationNavigation = useCallback(() => {
-    if (entryMode === 'select_type') {
-      return navigation.navigate('ConversationSelectType', { ...route.params })
+    if (newConversationFromFilter || entryMode === 'select_type') {
+      return navigation.navigate('ConversationSelectType', {
+        ...route.params,
+        newConversationFromFilter,
+      })
     }
 
     if (entryMode === 'groups') {
@@ -65,7 +73,7 @@ export const ListHeaderComponent = () => {
         params: { ...route.params },
       })
     }
-  }, [navigation, route.params, entryMode])
+  }, [navigation, route.params, entryMode, newConversationFromFilter])
 
   const handleMoreOptions = useCallback(() => {
     navigation.navigate('ConversationsMoreActions')

package/src/screens/design_system_screen.tsx

@@ -10,6 +10,9 @@ import {
   Banner,
   BannerCollapsible,
   Button,
+  ConversationAvatar,
+  EmojiAvatar,
+  IconAvatar,
   ToggleButton,
   Heading,
   Icon,
@@ -811,6 +814,69 @@ function ImageIconsSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="IconAvatar"
+        description="Renders a FontAwesome icon centered on a gradient background. Used by ConversationAvatar for icon-type custom avatars, and reusable in the avatar picker UI."
+      >
+        <Row>
+          <IconAvatar iconKey="church" color="warm-sunset" size="lg" />
+          <IconAvatar iconKey="guitar" color="cosmic" size="lg" />
+          <IconAvatar iconKey="music" color="iris" size="md" />
+          <IconAvatar iconKey="dove" color="rose-teal" size="sm" />
+          <IconAvatar iconKey="cross" color="gold" size="xs" />
+        </Row>
+        <Row>
+          <IconAvatar iconKey="church" color="garden" size="lg" />
+          <IconAvatar iconKey="church" color="twilight" size="lg" />
+          <IconAvatar iconKey="church" color="amethyst" size="lg" />
+          <IconAvatar iconKey="church" color="rainbow" size="lg" />
+        </Row>
+      </Group>
+      <Group
+        title="EmojiAvatar"
+        description="Renders an emoji centered on a gradient background. Used by ConversationAvatar for emoji-type custom avatars."
+      >
+        <Row>
+          <EmojiAvatar emoji="🎉" color="warm-sunset" size="lg" />
+          <EmojiAvatar emoji="🔥" color="cosmic" size="lg" />
+          <EmojiAvatar emoji="💬" color="iris" size="md" />
+          <EmojiAvatar emoji="⭐" color="gold" size="sm" />
+          <EmojiAvatar emoji="🎵" color="navy-purple" size="xs" />
+        </Row>
+      </Group>
+      <Group
+        title="ConversationAvatar"
+        description="Smart avatar that resolves a conversation's custom avatar (image, icon, or emoji) or falls back to the member AvatarGroup. Takes a conversation object and delegates to IconAvatar, EmojiAvatar, or AvatarGroup."
+      >
+        <Row>
+          <ConversationAvatar
+            conversation={{
+              customAvatarType: 'icon',
+              customAvatarKey: 'church',
+              customAvatarColor: 'warm-sunset',
+            }}
+          />
+          <ConversationAvatar
+            conversation={{
+              customAvatarType: 'emoji',
+              customAvatarKey: '🎉',
+              customAvatarColor: 'cosmic',
+            }}
+          />
+          <ConversationAvatar
+            conversation={{
+              customAvatarType: 'image',
+              customAvatarImageUrl: URL.avatar,
+            }}
+          />
+          <ConversationAvatar
+            conversation={{
+              previewAvatarUrls: URL.two_avatars,
+            }}
+          />
+          <ConversationAvatar conversation={{}} fallbackIconName="people.noTextMessage" />
+        </Row>
+      </Group>
       <Group
         title="Icon"
         description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size."

package/src/types/resources/conversation.ts

@@ -15,6 +15,10 @@ export interface ConversationResource {
   genderOption?: string | null
   groups?: GroupResource[]
   previewAvatarUrls?: string[]
+  customAvatarType?: 'image' | 'icon' | 'emoji' | null
+  customAvatarKey?: string | null
+  customAvatarColor?: string | null
+  customAvatarImageUrl?: string | null
   lastMessageAuthorId?: string
   lastMessageAuthorName?: string
   lastMessageCreatedAt?: string

package/src/utils/request/conversation.ts

@@ -37,6 +37,10 @@ export const getConversationsRequestArgs = ({
           'last_message_created_at',
           'last_message_text_preview',
           'preview_avatar_urls',
+          'custom_avatar_type',
+          'custom_avatar_key',
+          'custom_avatar_color',
+          'custom_avatar_image_url',
           'member_ability',
           'muted',
           'replies_disabled',