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

package/src/screens/avatar_picker/avatar_picker_screen.tsx

@@ -0,0 +1,312 @@
+import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useCallback, useReducer } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import { ConversationAvatar } from '../../components/display/conversation_avatar'
+import { Tabs } from '../../components/display/tabs'
+import { Text } from '../../components/display/text'
+import { coerceColorKey } from '../../components/display/utils/avatar_gradient_colors'
+import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
+import { useTheme } from '../../hooks'
+import { useConversation } from '../../hooks/use_conversation'
+import {
+  useConversationAvatarUpdate,
+  type AvatarUpdatePayload,
+} from '../../hooks/use_conversation_avatar_update'
+import { useFontScale } from '../../hooks/use_font_scale'
+import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'
+import {
+  avatarPickerReducer,
+  initAvatarPickerState,
+  initAvatarPickerStateFromPayload,
+  initEmptyAvatarPickerState,
+  type AvatarPickerAction,
+  type AvatarPickerState,
+  type AvatarTab,
+} from './avatar_picker_state'
+import { AvatarPreview } from './avatar_preview'
+import { ColorPicker } from './color_picker'
+import { EmojiTab } from './emoji_tab'
+import { IconGrid } from './icon_grid'
+import { UploadTab } from './upload_tab'
+
+export const AvatarPickerScreenOptions = getFormSheetScreenOptions({
+  headerTitle: 'Update avatar',
+  sheetAllowedDetents: Platform.select({
+    android: [0.94],
+    default: [1],
+  }),
+})
+
+export const AvatarPickerCreateScreenOptions = getFormSheetScreenOptions({
+  headerTitle: 'Choose avatar',
+  sheetAllowedDetents: Platform.select({
+    android: [0.94],
+    default: [1],
+  }),
+})
+
+export type AvatarPickerScreenProps = StaticScreenProps<{
+  conversation_id?: number
+  source_params?: Record<string, unknown>
+  avatar_selection?: AvatarUpdatePayload
+}>
+
+const TABS: AvatarTab[] = ['icon', 'emoji', 'upload']
+
+const TAB_LABELS: Record<AvatarTab, string> = {
+  icon: 'Icon',
+  emoji: 'Emoji',
+  upload: 'Upload',
+}
+
+export function AvatarPickerScreen({ route }: AvatarPickerScreenProps) {
+  const { conversation_id, source_params, avatar_selection } = route.params
+  if (conversation_id) {
+    return <EditModeContent conversationId={conversation_id} />
+  }
+  return <CreateModeContent sourceParams={source_params} existingSelection={avatar_selection} />
+}
+
+function EditModeContent({ conversationId }: { conversationId: number }) {
+  const navigation = useNavigation()
+  const { data: conversation } = useConversation({ conversation_id: conversationId })
+  const mutation = useConversationAvatarUpdate({ conversationId })
+
+  const [state, dispatch] = useReducer(avatarPickerReducer, conversation, initAvatarPickerState)
+
+  const hasAvatar = state.selectedType !== null
+
+  const handleDone = useCallback(() => {
+    if (!state.isDirty) {
+      navigation.goBack()
+      return
+    }
+
+    const payload = buildPayload(state)
+    if (payload) {
+      mutation.mutate(payload)
+    }
+    navigation.goBack()
+  }, [state, mutation, navigation])
+
+  const handleRemove = useCallback(() => {
+    mutation.mutate({ kind: 'clear' }, { onSuccess: () => dispatch({ type: 'CLEAR' }) })
+  }, [mutation, dispatch])
+
+  return (
+    <AvatarPickerFormSheet
+      state={state}
+      dispatch={dispatch}
+      headerTitle="Update avatar"
+      headerActions={
+        <>
+          {hasAvatar && (
+            <FormSheet.HeaderTextButton onPress={handleRemove} appearance="danger">
+              Remove
+            </FormSheet.HeaderTextButton>
+          )}
+          <FormSheet.HeaderTextButton onPress={handleDone} disabled={mutation.isPending}>
+            Done
+          </FormSheet.HeaderTextButton>
+        </>
+      }
+      fallbackPreview={<ConversationAvatar conversation={conversation} size="2xl" />}
+    />
+  )
+}
+
+interface CreateModeContentProps {
+  sourceParams?: Record<string, unknown>
+  existingSelection?: AvatarUpdatePayload
+}
+
+function CreateModeContent({ sourceParams, existingSelection }: CreateModeContentProps) {
+  const navigation = useNavigation()
+
+  const [state, dispatch] = useReducer(avatarPickerReducer, existingSelection, selection =>
+    selection ? initAvatarPickerStateFromPayload(selection) : initEmptyAvatarPickerState()
+  )
+
+  const handleDone = useCallback(() => {
+    if (!state.isDirty) {
+      navigation.goBack()
+      return
+    }
+
+    const payload = buildPayload(state)
+    if (payload) {
+      navigation.dispatch(
+        StackActions.popTo('ConversationNew', { ...sourceParams, avatar_selection: payload })
+      )
+    } else {
+      navigation.goBack()
+    }
+  }, [state, navigation, sourceParams])
+
+  return (
+    <AvatarPickerFormSheet
+      state={state}
+      dispatch={dispatch}
+      headerTitle="Choose avatar"
+      headerActions={
+        <FormSheet.HeaderTextButton onPress={handleDone}>Done</FormSheet.HeaderTextButton>
+      }
+      fallbackPreview={<EmptyAvatarPlaceholder />}
+    />
+  )
+}
+
+interface AvatarPickerFormSheetProps {
+  state: AvatarPickerState
+  dispatch: React.Dispatch<AvatarPickerAction>
+  headerTitle: string
+  headerActions: React.ReactNode
+  fallbackPreview: React.ReactNode
+}
+
+function AvatarPickerFormSheet({
+  state,
+  dispatch,
+  headerTitle,
+  headerActions,
+  fallbackPreview,
+}: AvatarPickerFormSheetProps) {
+  const styles = useStyles()
+
+  return (
+    <FormSheet.Root style={styles.formSheetRoot} contentStyle={styles.formSheetContent}>
+      <FormSheet.Header>
+        <FormSheet.HeaderTitle>{headerTitle}</FormSheet.HeaderTitle>
+        <FormSheet.HeaderActions>{headerActions}</FormSheet.HeaderActions>
+      </FormSheet.Header>
+
+      <AvatarPreview state={state} fallback={fallbackPreview} />
+
+      <Tabs
+        data={TABS}
+        activeTab={state.activeTab}
+        onTabPress={tab => dispatch({ type: 'SELECT_TAB', payload: tab })}
+        renderItem={({ item }) => (
+          <Text style={[styles.tabLabel, item === state.activeTab && styles.tabLabelActive]}>
+            {TAB_LABELS[item]}
+          </Text>
+        )}
+        style={styles.tabs}
+      />
+
+      <View style={styles.body}>
+        {state.activeTab === 'icon' && (
+          <IconGrid
+            selectedIconKey={state.selectedType === 'icon' ? state.selectedKey : null}
+            onIconSelect={iconKey => dispatch({ type: 'SELECT_ICON', payload: iconKey })}
+          />
+        )}
+        {state.activeTab === 'emoji' && (
+          <EmojiTab onEmojiSelect={emoji => dispatch({ type: 'SELECT_EMOJI', payload: emoji })} />
+        )}
+        {state.activeTab === 'upload' && (
+          <UploadTab
+            imagePreviewUri={state.imagePreviewUri}
+            onImageSelect={asset => dispatch({ type: 'SET_IMAGE', payload: asset })}
+          />
+        )}
+      </View>
+
+      {state.activeTab !== 'upload' && (
+        <View style={styles.colorPickerWrapper}>
+          <ColorPicker
+            selectedColor={state.selectedColor}
+            onColorSelect={color => dispatch({ type: 'SELECT_COLOR', payload: color })}
+          />
+        </View>
+      )}
+    </FormSheet.Root>
+  )
+}
+
+function EmptyAvatarPlaceholder() {
+  const styles = useStyles()
+  return <View style={styles.emptyAvatarPlaceholder} />
+}
+
+type ValidAvatarPickerState = AvatarPickerState &
+  (
+    | { selectedType: 'icon' | 'emoji'; selectedKey: string }
+    | { selectedType: 'image'; imageAsset: ImagePickerAsset }
+  )
+
+function hasValidSelection(state: AvatarPickerState): state is ValidAvatarPickerState {
+  switch (state.selectedType) {
+    case 'icon':
+    case 'emoji':
+      return state.selectedKey !== null
+    case 'image':
+      return state.imageAsset !== null
+    case null:
+      return false
+  }
+}
+
+function buildPayload(state: AvatarPickerState): AvatarUpdatePayload | null {
+  if (!hasValidSelection(state)) return null
+
+  const color = coerceColorKey(state.selectedColor)
+
+  switch (state.selectedType) {
+    case 'icon':
+      return { kind: 'icon', key: state.selectedKey, color }
+    case 'emoji':
+      return { kind: 'emoji', key: state.selectedKey, color }
+    case 'image':
+      return { kind: 'image', imageAsset: state.imageAsset, color }
+  }
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
+  const uncappedFontScale = useFontScale()
+  const emptyAvatarDiameter = 80 * uncappedFontScale
+
+  return StyleSheet.create({
+    formSheetRoot: {
+      flex: 1,
+    },
+    formSheetContent: {
+      flex: 1,
+    },
+    tabs: {
+      minHeight: 52 * fontScale,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+      backgroundColor: colors.fillColorNeutral100Inverted,
+      zIndex: 1,
+    },
+    tabLabel: {
+      fontSize: 14,
+      color: colors.textColorDefaultSecondary,
+      paddingVertical: 14 * fontScale,
+      minWidth: 56 * fontScale,
+      textAlign: 'center',
+    },
+    tabLabelActive: {
+      color: colors.textColorDefaultPrimary,
+    },
+    body: {
+      flex: 1,
+      overflow: 'hidden',
+    },
+    colorPickerWrapper: {
+      borderTopWidth: 1,
+      borderTopColor: colors.borderColorDefaultBase,
+    },
+    emptyAvatarPlaceholder: {
+      width: emptyAvatarDiameter,
+      height: emptyAvatarDiameter,
+      borderRadius: emptyAvatarDiameter / 2,
+      borderWidth: 2,
+      borderStyle: 'dashed',
+      borderColor: colors.borderColorDefaultBase,
+    },
+  })
+}

package/src/screens/avatar_picker/avatar_picker_state.ts

@@ -0,0 +1,141 @@
+import {
+  CustomAvatarColorKey,
+  DEFAULT_AVATAR_COLOR_KEY,
+} from '../../components/display/utils/avatar_gradient_colors'
+import type { AvatarType, AvatarUpdatePayload } from '../../hooks/use_conversation_avatar_update'
+import type { ConversationResource } from '../../types'
+import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'
+
+export type { AvatarType }
+export type AvatarTab = 'icon' | 'emoji' | 'upload'
+
+export interface AvatarPickerState {
+  activeTab: AvatarTab
+  selectedType: AvatarType | null
+  selectedKey: string | null
+  selectedColor: string
+  imagePreviewUri: string | null
+  imageAsset: ImagePickerAsset | null
+  isDirty: boolean
+}
+
+export type AvatarPickerAction =
+  | { type: 'SELECT_TAB'; payload: AvatarTab }
+  | { type: 'SELECT_ICON'; payload: string }
+  | { type: 'SELECT_EMOJI'; payload: string }
+  | { type: 'SELECT_COLOR'; payload: CustomAvatarColorKey }
+  | { type: 'SET_IMAGE'; payload: ImagePickerAsset }
+  | { type: 'CLEAR' }
+
+export function avatarPickerReducer(
+  state: AvatarPickerState,
+  action: AvatarPickerAction
+): AvatarPickerState {
+  switch (action.type) {
+    case 'SELECT_TAB':
+      return { ...state, activeTab: action.payload }
+    case 'SELECT_ICON':
+      return {
+        ...state,
+        selectedType: 'icon',
+        selectedKey: action.payload,
+        isDirty: true,
+      }
+    case 'SELECT_EMOJI':
+      return {
+        ...state,
+        selectedType: 'emoji',
+        selectedKey: action.payload,
+        isDirty: true,
+      }
+    case 'SELECT_COLOR':
+      return {
+        ...state,
+        selectedColor: action.payload,
+        isDirty: true,
+      }
+    case 'SET_IMAGE':
+      return {
+        ...state,
+        selectedType: 'image',
+        selectedKey: null,
+        imagePreviewUri: action.payload.uri,
+        imageAsset: action.payload,
+        isDirty: true,
+      }
+    case 'CLEAR':
+      return {
+        ...state,
+        selectedType: null,
+        selectedKey: null,
+        selectedColor: DEFAULT_AVATAR_COLOR_KEY,
+        imagePreviewUri: null,
+        imageAsset: null,
+        isDirty: true,
+      }
+  }
+}
+
+export function initEmptyAvatarPickerState(): AvatarPickerState {
+  return {
+    activeTab: 'icon',
+    selectedType: null,
+    selectedKey: null,
+    selectedColor: DEFAULT_AVATAR_COLOR_KEY,
+    imagePreviewUri: null,
+    imageAsset: null,
+    isDirty: false,
+  }
+}
+
+export function initAvatarPickerState(
+  conversation: Pick<
+    ConversationResource,
+    'customAvatarType' | 'customAvatarKey' | 'customAvatarColor' | 'customAvatarImageUrl'
+  >
+): AvatarPickerState {
+  const tabFromType: Record<AvatarType, AvatarTab> = {
+    icon: 'icon',
+    emoji: 'emoji',
+    image: 'upload',
+  }
+
+  return {
+    activeTab:
+      (conversation.customAvatarType && tabFromType[conversation.customAvatarType]) ?? 'icon',
+    selectedType: conversation.customAvatarType ?? null,
+    selectedKey: conversation.customAvatarKey ?? null,
+    selectedColor: conversation.customAvatarColor || DEFAULT_AVATAR_COLOR_KEY,
+    imagePreviewUri: conversation.customAvatarImageUrl ?? null,
+    imageAsset: null,
+    isDirty: false,
+  }
+}
+
+export function initAvatarPickerStateFromPayload(payload: AvatarUpdatePayload): AvatarPickerState {
+  switch (payload.kind) {
+    case 'icon':
+    case 'emoji':
+      return {
+        activeTab: payload.kind,
+        selectedType: payload.kind,
+        selectedKey: payload.key,
+        selectedColor: payload.color || DEFAULT_AVATAR_COLOR_KEY,
+        imagePreviewUri: null,
+        imageAsset: null,
+        isDirty: false,
+      }
+    case 'image':
+      return {
+        activeTab: 'upload',
+        selectedType: 'image',
+        selectedKey: null,
+        selectedColor: payload.color || DEFAULT_AVATAR_COLOR_KEY,
+        imagePreviewUri: payload.imageAsset.uri,
+        imageAsset: payload.imageAsset,
+        isDirty: false,
+      }
+    default:
+      return initEmptyAvatarPickerState()
+  }
+}

package/src/screens/avatar_picker/avatar_preview.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { EmojiAvatar } from '../../components/display/emoji_avatar'
+import { IconAvatar } from '../../components/display/icon_avatar'
+import AvatarPrimitive from '../../components/primitive/avatar_primitive'
+import type { AvatarPickerState } from './avatar_picker_state'
+
+interface AvatarPreviewProps {
+  state: AvatarPickerState
+  fallback: React.ReactNode
+}
+
+function getPreviewNode(state: AvatarPickerState): React.ReactNode {
+  switch (state.selectedType) {
+    case 'icon':
+      if (!state.selectedKey) return null
+      return <IconAvatar iconKey={state.selectedKey} color={state.selectedColor} size="2xl" />
+    case 'emoji':
+      if (!state.selectedKey) return null
+      return <EmojiAvatar emoji={state.selectedKey} color={state.selectedColor} size="2xl" />
+    case 'image':
+      if (!state.imagePreviewUri) return null
+      return (
+        <AvatarPrimitive.Root size="2xl">
+          <AvatarPrimitive.Mask>
+            <AvatarPrimitive.Image sourceUri={state.imagePreviewUri} />
+          </AvatarPrimitive.Mask>
+        </AvatarPrimitive.Root>
+      )
+    default:
+      return null
+  }
+}
+
+export function AvatarPreview({ state, fallback }: AvatarPreviewProps) {
+  const preview = getPreviewNode(state)
+  return <View style={styles.container}>{preview ?? fallback}</View>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingTop: 24,
+    paddingBottom: 16,
+  },
+})

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