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

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,
+    })
+  })
+})

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,
+  },
+})