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

package/src/screens/avatar_picker/color_picker.tsx

@@ -0,0 +1,91 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import React, { useCallback } from 'react'
+import { FlatList, StyleSheet, useWindowDimensions } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {
+  COLOR_KEYS,
+  type CustomAvatarColorKey,
+  getAvatarGradientProps,
+} from '../../components/display/utils/avatar_gradient_colors'
+import { useTheme } from '../../hooks'
+import { GRID_COLUMNS } from './constants'
+
+interface ColorPickerProps {
+  selectedColor: string
+  onColorSelect: (color: CustomAvatarColorKey) => void
+}
+
+export function ColorPicker({ selectedColor, onColorSelect }: ColorPickerProps) {
+  const styles = useStyles()
+
+  const renderItem = useCallback(
+    ({ item }: { item: CustomAvatarColorKey }) => {
+      const gradientProps = getAvatarGradientProps(item)
+      const isSelected = item === selectedColor
+
+      return (
+        <PlatformPressable
+          onPress={() => onColorSelect(item)}
+          style={[styles.swatchOuter, isSelected && styles.swatchSelected]}
+          accessibilityRole="button"
+          accessibilityLabel={`${item.replace(/-/g, ' ')} color`}
+          accessibilityState={{ selected: isSelected }}
+        >
+          <LinearGradient {...gradientProps} style={styles.swatch} />
+        </PlatformPressable>
+      )
+    },
+    [selectedColor, onColorSelect, styles.swatch, styles.swatchOuter, styles.swatchSelected]
+  )
+
+  return (
+    <FlatList
+      data={COLOR_KEYS}
+      numColumns={GRID_COLUMNS}
+      keyExtractor={item => item}
+      renderItem={renderItem}
+      contentContainerStyle={styles.grid}
+      columnWrapperStyle={styles.row}
+      scrollEnabled={false}
+    />
+  )
+}
+
+const PADDING = 16
+const GAP = 8
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const { width: screenWidth } = useWindowDimensions()
+  const swatchSize = Math.floor(
+    (screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS
+  )
+  const innerSize = swatchSize - 6
+
+  return StyleSheet.create({
+    grid: {
+      paddingHorizontal: PADDING,
+      paddingVertical: 12,
+    },
+    row: {
+      gap: GAP,
+      marginBottom: GAP,
+    },
+    swatchOuter: {
+      width: swatchSize,
+      height: swatchSize,
+      borderRadius: swatchSize / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    swatchSelected: {
+      borderWidth: 3,
+      borderColor: colors.interaction,
+    },
+    swatch: {
+      width: innerSize,
+      height: innerSize,
+      borderRadius: innerSize / 2,
+    },
+  })
+}

package/src/screens/avatar_picker/constants.ts

@@ -0,0 +1,53 @@
+export const AVATAR_ICON_KEYS: string[] = [
+  // Church
+  'book-bible',
+  'church',
+  'cross',
+  'dove',
+  'hands-heart',
+  'person-rays',
+  'praying-hands',
+  'podium',
+  'droplet',
+  'person-drowning',
+  'lighthouse',
+  // Services
+  'guitar',
+  'guitar-electric',
+  'violin',
+  'calendar-heart',
+  'hand-heart',
+  'hand-wave',
+  'baby',
+  'children',
+  'mug-hot',
+  'video-camera',
+  'music',
+  'piano-keyboard',
+  'drum',
+  'user-graduate',
+  'comments-question',
+  'presentation',
+  'microphone-stand',
+  'id-badge',
+  'book-user',
+  'hand-holding-heart',
+  'guitars',
+  'amp-guitar',
+  'school-flag',
+  'shield-check',
+  'projector',
+  // Groups
+  'people',
+  'people-group',
+  'person-dress',
+  'person',
+  'seedling',
+  'comments-alt',
+  'globe',
+  'book-open-reader',
+  'running',
+  'leaf',
+]
+
+export const GRID_COLUMNS = 6

package/src/screens/avatar_picker/emoji_tab.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { EmojiKeyboard, type EmojiType } from 'rn-emoji-keyboard'
+import { useTheme } from '../../hooks'
+
+interface EmojiTabProps {
+  onEmojiSelect: (emoji: string) => void
+}
+
+export function EmojiTab({ onEmojiSelect }: EmojiTabProps) {
+  const styles = useStyles()
+  const { colors } = useTheme()
+
+  const handleEmojiSelected = useCallback(
+    (emojiObject: EmojiType) => {
+      onEmojiSelect(emojiObject.emoji)
+    },
+    [onEmojiSelect]
+  )
+
+  const emojiTheme = {
+    container: colors.fillColorNeutral100Inverted,
+    header: colors.textColorDefaultSecondary,
+    knob: colors.fillColorNeutral040,
+    skinTonesContainer: colors.fillColorNeutral060,
+    category: {
+      icon: colors.textColorDefaultSecondary,
+      iconActive: colors.interaction,
+      container: colors.fillColorNeutral100Inverted,
+      containerActive: colors.fillColorNeutral080,
+    },
+    search: {
+      background: colors.fillColorNeutral080,
+      text: colors.textColorDefaultPrimary,
+      placeholder: colors.textColorDefaultSecondary,
+      icon: colors.textColorDefaultSecondary,
+    },
+    emoji: {
+      selected: colors.fillColorNeutral080,
+    },
+  }
+
+  return (
+    <View style={styles.container}>
+      <EmojiKeyboard
+        categoryPosition="top"
+        onEmojiSelected={handleEmojiSelected}
+        enableSearchBar
+        enableRecentlyUsed
+        theme={emojiTheme}
+        styles={{
+          container: { borderRadius: 0 },
+          category: {
+            container: {
+              borderRadius: 0,
+              marginTop: -6,
+              borderBottomWidth: 1,
+              borderBottomColor: colors.borderColorDefaultDim,
+            },
+          },
+        }}
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.fillColorNeutral100Inverted,
+    },
+  })
+}

package/src/screens/avatar_picker/icon_grid.tsx

@@ -0,0 +1,81 @@
+import type { IconName } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import { PlatformPressable } from '@react-navigation/elements'
+import React, { useCallback } from 'react'
+import { FlatList, StyleSheet, useWindowDimensions } from 'react-native'
+import { useTheme } from '../../hooks'
+import { AVATAR_ICON_KEYS, GRID_COLUMNS } from './constants'
+
+interface IconGridProps {
+  selectedIconKey: string | null
+  onIconSelect: (iconKey: string) => void
+}
+
+export function IconGrid({ selectedIconKey, onIconSelect }: IconGridProps) {
+  const styles = useStyles()
+
+  const renderItem = useCallback(
+    ({ item }: { item: string }) => {
+      const isSelected = item === selectedIconKey
+
+      return (
+        <PlatformPressable
+          onPress={() => onIconSelect(item)}
+          style={[styles.cell, isSelected && styles.cellSelected]}
+          accessibilityRole="button"
+          accessibilityLabel={`${item.replace(/-/g, ' ')} icon`}
+          accessibilityState={{ selected: isSelected }}
+        >
+          <FontAwesomeIcon icon={['fas', item as IconName]} size={20} color="white" />
+        </PlatformPressable>
+      )
+    },
+    [selectedIconKey, onIconSelect, styles.cell, styles.cellSelected]
+  )
+
+  return (
+    <FlatList
+      data={AVATAR_ICON_KEYS}
+      numColumns={GRID_COLUMNS}
+      keyExtractor={item => item}
+      renderItem={renderItem}
+      contentContainerStyle={styles.grid}
+      columnWrapperStyle={styles.row}
+      style={styles.list}
+    />
+  )
+}
+
+const PADDING = 16
+const GAP = 8
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const { width: screenWidth } = useWindowDimensions()
+  const cellSize = Math.floor((screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS)
+
+  return StyleSheet.create({
+    list: {
+      flex: 1,
+    },
+    grid: {
+      padding: PADDING,
+    },
+    row: {
+      gap: GAP,
+      marginBottom: GAP,
+    },
+    cell: {
+      width: cellSize,
+      height: cellSize,
+      borderRadius: cellSize / 2,
+      backgroundColor: colors.fillColorNeutral040,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    cellSelected: {
+      borderWidth: 3,
+      borderColor: colors.interaction,
+    },
+  })
+}

package/src/screens/avatar_picker/upload_tab.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
+import { Button } from '../../components'
+import { useTheme } from '../../hooks'
+import { ImagePicker } from '../../utils/native_adapters'
+import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
+
+interface UploadTabProps {
+  imagePreviewUri: string | null
+  onImageSelect: (asset: ImagePickerAsset) => void
+}
+
+export function UploadTab({ imagePreviewUri, onImageSelect }: UploadTabProps) {
+  const styles = useStyles()
+
+  const pickImage = useCallback(async () => {
+    const result = await ImagePicker.openImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      allowsMultipleSelection: false,
+    })
+
+    if (result.canceled || !result.assets?.[0]) return
+
+    const asset = result.assets[0]
+
+    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+      Alert.alert('Image too large', 'Please choose an image under 10MB.')
+      return
+    }
+
+    onImageSelect(asset)
+  }, [onImageSelect])
+
+  return (
+    <View style={styles.container}>
+      <Button
+        title={imagePreviewUri ? 'Change photo' : 'Choose photo'}
+        iconNameLeft="general.image"
+        onPress={pickImage}
+        variant="outline"
+        appearance="interaction"
+        size="md"
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.fillColorNeutral100Inverted,
+    },
+  })
+}

package/src/screens/conversation_details_screen.tsx

@@ -26,6 +26,7 @@ import {
 } from 'react-native'
 import {
   Badge,
+  Button,
   ChildNotice,
   Heading,
   Icon,
@@ -35,6 +36,7 @@ import {
   TextButton,
   type TextStyle,
 } from '../components'
+import { ConversationAvatar } from '../components/display/conversation_avatar'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { useSuspensePaginator, useTheme } from '../hooks'
@@ -46,7 +48,7 @@ import {
   useConversationUpdate,
 } from '../hooks/use_conversation'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
-import { MemberResource, isDefined } from '../types'
+import { type ConversationResource, MemberResource, isDefined } from '../types'
 import { GroupResource } from '../types/resources/group_resource'
 import { genderDisplayLabel } from '../utils/gender_display_label'
 import { tokens } from '../vendor/tapestry/tokens'
@@ -102,6 +104,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { mutate: deleteConversation } = useConversationDelete(route.params)
   const { featureEnabled } = useFeatures()
   const granularNotificationsEnabled = featureEnabled(availableFeatures.granular_notifications_ui)
+  const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const showGenderFilter =
     featureEnabled(availableFeatures.gender_specific_conversations) && !!conversation.genderOption
   const genderLabel = conversation.genderOption ? genderDisplayLabel(conversation.genderOption) : ''
@@ -234,6 +237,25 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   }, [HeaderRight, HeaderTitle, navigation])
 
   const listData = [
+    {
+      type: canUpdate && customAvatarsEnabled ? SectionTypes.view : SectionTypes.hidden,
+      data: {
+        children: (
+          <AvatarCard
+            conversation={conversation}
+            onPress={() => navigation.navigate('AvatarPicker', { conversation_id })}
+          />
+        ),
+      },
+      sectionOuterStyle: styles.sectionOuterAvatarCard,
+      sectionInnerStyle: styles.sectionInnerAvatarCard,
+    },
+    {
+      type: SectionTypes.header,
+      data: { title: 'Basic info' },
+      showBottomBorder: true,
+      sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
+    },
     {
       type: SectionTypes.view,
       data: {
@@ -595,6 +617,30 @@ function NavigableSettingRow({ title, subtitle, onPress }: NavigableSettingRowPr
   )
 }
 
+function AvatarCard({
+  conversation,
+  onPress,
+}: {
+  conversation: ConversationResource
+  onPress: () => void
+}) {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.avatarCard}>
+      <ConversationAvatar conversation={conversation} size="2xl" />
+      <Button
+        title="Update avatar"
+        iconNameLeft="general.pencil"
+        onPress={onPress}
+        variant="outline"
+        appearance="interaction"
+        size="sm"
+      />
+    </View>
+  )
+}
+
 function TeamsGroup({ teams }: { teams: GroupResource[] }) {
   const styles = useStyles()
 
@@ -725,6 +771,19 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     navigableSettingChevron: {
       color: colors.iconColorDefaultDisabled,
     },
+    avatarCard: {
+      alignItems: 'center',
+      gap: 16,
+    },
+    sectionOuterAvatarCard: {
+      paddingLeft: 0,
+    },
+    sectionInnerAvatarCard: {
+      paddingTop: 24,
+      paddingBottom: 24,
+      paddingHorizontal: 16,
+      alignItems: 'center',
+    },
     teamGroup: {
       flexDirection: 'row',
       gap: 4,

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

@@ -0,0 +1,82 @@
+import { useNavigation, useRoute } from '@react-navigation/native'
+import React from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import { Icon, Text } from '../../../components'
+import { EmojiAvatar } from '../../../components/display/emoji_avatar'
+import { IconAvatar } from '../../../components/display/icon_avatar'
+import AvatarPrimitive from '../../../components/primitive/avatar_primitive'
+import { useTheme } from '../../../hooks'
+import type { AvatarUpdatePayload } from '../../../hooks/use_conversation_avatar_update'
+
+interface AvatarSelectionRowProps {
+  avatarSelection?: AvatarUpdatePayload
+}
+
+export function AvatarSelectionRow({ avatarSelection }: AvatarSelectionRowProps) {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const route = useRoute()
+
+  return (
+    <Pressable
+      style={styles.avatarSection}
+      onPress={() =>
+        navigation.navigate('AvatarPicker', {
+          source_params: route.params as Record<string, unknown>,
+          ...(avatarSelection && { avatar_selection: avatarSelection }),
+        })
+      }
+    >
+      <Text style={styles.avatarLabel}>Customize avatar</Text>
+      <View style={styles.avatarSectionTrailing}>
+        <AvatarSelectionPreview avatarSelection={avatarSelection} />
+        <Icon name="general.rightChevron" size={12} />
+      </View>
+    </Pressable>
+  )
+}
+
+interface AvatarSelectionPreviewProps {
+  avatarSelection?: AvatarUpdatePayload
+}
+
+export function AvatarSelectionPreview({ avatarSelection }: AvatarSelectionPreviewProps) {
+  if (!avatarSelection || avatarSelection.kind === 'clear') return null
+
+  switch (avatarSelection.kind) {
+    case 'icon':
+      return <IconAvatar iconKey={avatarSelection.key} color={avatarSelection.color} size="md" />
+    case 'emoji':
+      return <EmojiAvatar emoji={avatarSelection.key} color={avatarSelection.color} size="md" />
+    case 'image':
+      return (
+        <AvatarPrimitive.Root size="md">
+          <AvatarPrimitive.Mask>
+            <AvatarPrimitive.Image sourceUri={avatarSelection.imageAsset.uri} />
+          </AvatarPrimitive.Mask>
+        </AvatarPrimitive.Root>
+      )
+  }
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    avatarSection: {
+      padding: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    avatarSectionTrailing: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    avatarLabel: {
+      fontSize: 18,
+      color: colors.textColorDefaultPrimary,
+    },
+  })
+}

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ActivityIndicator, StyleSheet, View } from 'react-native'
-import { Heading, Switch, Text, TextInlineButton } from '../../../components'
+import { Heading, Switch, Text } from '../../../components'
 import { useTheme } from '../../../hooks'
 import { genderDisplayLabel } from '../../../utils/gender_display_label'
 
@@ -26,10 +26,7 @@ function FilterableGenderContent({ genderValue, enabled, onToggle }: FilterableG
         />
       </View>
       <Text style={{ color: colors.textColorDefaultSecondary }}>
-        Filter limited to your profile's set gender.{' '}
-        <TextInlineButton nativeID="gender-filter-learn-more" onPress={() => {}}>
-          Learn more.
-        </TextInlineButton>
+        Filter limited to your profile's set gender.
       </Text>
     </>
   )
@@ -45,10 +42,7 @@ function NoGenderContent({ isFetching }: { isFetching: boolean }) {
         <ActivityIndicator size="small" />
       ) : (
         <Text style={{ color: colors.textColorDefaultSecondary }}>
-          Set a gender in your Church Center profile to enable gender filtering.{' '}
-          <TextInlineButton nativeID="gender-filter-learn-more" onPress={() => {}}>
-            Learn more.
-          </TextInlineButton>
+          Set a gender in your Church Center profile to enable gender filtering.
         </Text>
       )}
     </>