@planningcenter/chat-react-native 4.4.0-rc.6 → 4.4.0

package/src/components/conversations/conversation_actions.tsx

@@ -18,7 +18,7 @@ import {
   useConversationsMute,
 } from '../../hooks/use_conversations_actions'
 import { ConversationResource } from '../../types'
-import { platformPressedOpacityStyle } from '../../utils'
+import { isArchivedConversation, platformPressedOpacityStyle } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { SwipeableToggleButton } from './swipeable_toggle_button'
 
@@ -53,6 +53,7 @@ export function ConversationActions({
   })
 
   const isConversationEmpty = conversation.lastMessageCreatedAt === null
+  const canMute = !isArchivedConversation(conversation)
 
   const handleSwipeableClose = useCallback(() => {
     setDisabled(false)
@@ -88,13 +89,16 @@ export function ConversationActions({
       ]
     : []
 
-  const accessibilityActions = [
-    {
-      name: muted ? 'unmute' : 'mute',
-      label: muted ? 'Enable' : 'Silence',
-    },
-    ...readAccessibilityAction,
-  ]
+  const muteAccessibilityAction = canMute
+    ? [
+        {
+          name: muted ? 'unmute' : 'mute',
+          label: muted ? 'Enable' : 'Silence',
+        },
+      ]
+    : []
+
+  const accessibilityActions = [...muteAccessibilityAction, ...readAccessibilityAction]
 
   const handleAccessibilityAction = useCallback(
     (event: AccessibilityActionEvent) => {
@@ -136,6 +140,7 @@ export function ConversationActions({
       renderLeftActions={() => (
         <LeftActions
           isConversationEmpty={isConversationEmpty}
+          canMute={canMute}
           handleMute={handleMute}
           handleLatestMessageUnread={handleLatestMessageUnread}
           muted={muted}
@@ -163,6 +168,7 @@ export function ConversationActions({
 
 interface LeftActionsProps {
   isConversationEmpty: boolean
+  canMute: boolean
   handleMute: () => void
   handleLatestMessageUnread: () => void
   muted: boolean
@@ -173,6 +179,7 @@ interface LeftActionsProps {
 
 function LeftActions({
   isConversationEmpty,
+  canMute,
   handleMute,
   handleLatestMessageUnread,
   muted,
@@ -180,7 +187,7 @@ function LeftActions({
   isMutedPending,
   isMarkReadPending,
 }: LeftActionsProps) {
-  const styles = useStyles()
+  const styles = useStyles({ actionButtonCount: canMute ? 2 : 1 })
 
   const muteToggleContent = {
     true: { iconName: 'general.bell', label: 'Enable' },
@@ -202,21 +209,22 @@ function LeftActions({
         toggleContent={latestMessageUnreadToggleContent}
         backgroundColor={tokens.fillColorInteractionSwipeDefault}
       />
-      <SwipeableToggleButton
-        loading={isMutedPending}
-        toggled={muted}
-        onPress={handleMute}
-        toggleContent={muteToggleContent}
-        backgroundColor={tokens.fillColorInteractionSwipeSecondary}
-      />
+      {canMute && (
+        <SwipeableToggleButton
+          loading={isMutedPending}
+          toggled={muted}
+          onPress={handleMute}
+          toggleContent={muteToggleContent}
+          backgroundColor={tokens.fillColorInteractionSwipeSecondary}
+        />
+      )}
     </View>
   )
 }
 
 const ACTION_BUTTON_WIDTH = 120
-const ACTION_BUTTON_COUNT = 2
 
-const useStyles = () => {
+const useStyles = ({ actionButtonCount = 2 }: { actionButtonCount?: number } = {}) => {
   const { colors } = useTheme()
   return StyleSheet.create({
     swipeableChildContainer: {
@@ -225,7 +233,7 @@ const useStyles = () => {
     actionButtonContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,
+      width: ACTION_BUTTON_WIDTH * actionButtonCount,
       alignContent: 'stretch',
     },
     swipeableContainer: {

package/src/components/conversations/conversation_preview.tsx

@@ -7,10 +7,19 @@ import {
   useScalableNumberOfLines,
 } from '../../hooks'
 import { ConversationPreviewData, ConversationResource } from '../../types'
-import { REACTION_EMOJIS, platformFontWeightBold } from '../../utils'
+import { REACTION_EMOJIS, isArchivedConversation, platformFontWeightBold } from '../../utils'
 import { formatDatePreview } from '../../utils/date'
+import { faBoxArchive } from '../../vendor/font_awesome_pro_solid_icons'
 import { tokens } from '../../vendor/tapestry/tokens'
-import { AvatarGroup, ConversationAvatar, Heading, Text, Badge, type BadgeProps } from '../display'
+import {
+  AvatarGroup,
+  ConversationAvatar,
+  Heading,
+  IconTile,
+  Text,
+  Badge,
+  type BadgeProps,
+} from '../display'
 import { ConversationActions } from './conversation_actions'
 import { MuteIndicator } from './mute_indicator'
 import { UnreadCountBadge } from './unread_count_badge'
@@ -42,6 +51,7 @@ export const ConversationPreview = ({
     unreadReaction,
   } = conversation
 
+  const archived = isArchivedConversation(conversation)
   const emptyConversation = !lastMessageCreatedAt
   const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'
   const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted
@@ -57,25 +67,35 @@ export const ConversationPreview = ({
   const conversationAccessibilityLabel = getConversationAccessibilityLabel({
     conversation,
     showBadges,
+    archived,
   })
 
   return (
     <ConversationActions
       conversation={conversation}
-      style={[styles.previewRow, disabled && styles.disabled, style]}
+      style={[styles.previewRow, disabled && !archived && styles.disabled, style]}
       onPress={onPress}
       accessibilityLabel={conversationAccessibilityLabel}
     >
-      <ConversationAvatar
-        conversation={conversation}
-        size="lg"
-        fallbackIconName={fallbackIconName}
-      />
+      {archived ? (
+        <IconTile
+          icon={faBoxArchive}
+          shape="circle"
+          size="lg"
+          testID="conversation-archived-icon"
+        />
+      ) : (
+        <ConversationAvatar
+          conversation={conversation}
+          size="lg"
+          fallbackIconName={fallbackIconName}
+        />
+      )}
       <View style={styles.conversationBody}>
         <Heading
           numberOfLines={numberOfLinesScaledTitle}
           variant="h3"
-          style={[styles.title, isUnread && styles.unreadTitle]}
+          style={[styles.title, archived && styles.archivedTitle, isUnread && styles.unreadTitle]}
         >
           {title}
         </Heading>
@@ -168,6 +188,8 @@ function reactionEmoji(value: ConversationPreviewData['value']): string | null {
 }
 
 function formatConversationPreviewText(preview: ConversationPreviewData) {
+  if (preview.kind === 'system') return preview.text
+
   if (preview.kind === 'reaction') {
     const emoji = reactionEmoji(preview.value)
     return `${preview.authorName}${emoji ? ` ${emoji}` : ' reacted'} to: "${preview.text}"`
@@ -179,6 +201,8 @@ function formatConversationPreviewText(preview: ConversationPreviewData) {
 function formatConversationPreviewAccessibilityLabel(preview: ConversationPreviewData) {
   const date = formatDatePreview(preview.createdAt)
 
+  if (preview.kind === 'system') return `Latest activity: ${preview.text} at ${date}`
+
   if (preview.kind === 'reaction') {
     return `${preview.authorName} reacted to your message sent ${date} and says ${preview.text}`
   }
@@ -189,10 +213,12 @@ function formatConversationPreviewAccessibilityLabel(preview: ConversationPrevie
 interface GetConversationAccessibilityLabelProps {
   conversation: ConversationResource
   showBadges: boolean
+  archived: boolean
 }
 const getConversationAccessibilityLabel = ({
   conversation,
   showBadges,
+  archived,
 }: GetConversationAccessibilityLabelProps) => {
   const { badges, title, conversationPreview, muted, disabled, unreadCount, unreadReaction } =
     conversation
@@ -203,7 +229,7 @@ const getConversationAccessibilityLabel = ({
   const label = {
     title,
     badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text || ''}` : '',
-    disabled: disabled ? 'Disabled' : '',
+    disabled: archived ? 'Archived' : disabled ? 'Disabled' : '',
     muted: muted ? 'Muted' : '',
     readStatus: hasUnreadMessages
       ? `${unreadCount} unread messages`
@@ -251,6 +277,9 @@ const useStyles = () => {
       fontSize: 16,
       color: colors.textColorDefaultPrimary,
     },
+    archivedTitle: {
+      color: colors.textColorDefaultSecondary,
+    },
     unreadTitle: {
       fontWeight: tokens.fontWeightBold,
     },

package/src/components/conversations/conversations.tsx

@@ -4,10 +4,14 @@ import { FlatList, StyleSheet, View } from 'react-native'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
 import { useCanCreateConversations } from '../../hooks/use_chat_permissions'
+import { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
 import { useConversationsJoltEvents } from '../../hooks/use_conversations_jolt_events'
+import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
 import { ConversationResource } from '../../types'
+import { ArchivedResultsFooter } from './archived_results_footer'
 import { ConversationPreview, ConversationPreviewSkeleton } from './conversation_preview'
 import { ConversationsBlankState } from './conversations_blank_state'
+import { FilteredResultsFooter } from './filtered_results_footer'
 
 interface ConversationsProps {
   ListHeaderComponent?:
@@ -26,11 +30,23 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     refetch,
     isRefetching,
     isFetched,
-    args: { chat_group_graph_id, group_source_app_name },
+    hasNextPage,
+    args: { chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived },
   } = useConversationsContext()
   const navigation = useNavigation()
   const canCreateConversations = useCanCreateConversations()
-  const isFilterApplied = !!chat_group_graph_id || !!group_source_app_name
+  const clearFilters = useClearConversationFilters()
+  const filterDropdownEnabled = useFilterDropdownEnabled()
+  const isFilterApplied =
+    !!chat_group_graph_id || !!group_source_app_name || !!show_direct_messages || !!show_archived
+  const showArchivedResultsFooter = !!show_archived && !isLoading && !hasNextPage
+  const showFilteredResultsFooter =
+    filterDropdownEnabled &&
+    isFilterApplied &&
+    !show_archived &&
+    !hasNextPage &&
+    !isLoading &&
+    conversations.length > 0
 
   const showBadges = !chat_group_graph_id
 
@@ -62,6 +78,13 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
             canCreateConversations={canCreateConversations}
           />
         }
+        ListFooterComponent={
+          showArchivedResultsFooter ? (
+            <ArchivedResultsFooter onViewActiveConversations={clearFilters} />
+          ) : showFilteredResultsFooter ? (
+            <FilteredResultsFooter />
+          ) : null
+        }
         renderItem={({ item }) => {
           if (item.type === 'loading') {
             return <ConversationPreviewSkeleton />
@@ -72,7 +95,7 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
                 onPress={() =>
                   navigation.navigate('Conversation', {
                     conversation_id: item.resource.id,
-                    title: item.resource.title,
+                    title: item.resource.title ?? undefined,
                     badge: item.resource.badges?.[0],
                     deleted: item.resource.deleted,
                     muted: item.resource.muted,

package/src/components/conversations/conversations_blank_state.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
+import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
 import BlankState from '../primitive/blank_state_primitive'
 
 interface ConversationsBlankStateProps {
@@ -11,6 +13,25 @@ export function ConversationsBlankState({
   isFilterApplied,
   canCreateConversations,
 }: ConversationsBlankStateProps) {
+  const filterDropdownEnabled = useFilterDropdownEnabled()
+  const clearFilters = useClearConversationFilters()
+
+  if (filterDropdownEnabled && isFilterApplied) {
+    return (
+      <View style={styles.container}>
+        <BlankState.Root>
+          <BlankState.Imagery name="general.outlinedTextMessage" />
+          <BlankState.Content>
+            <BlankState.Heading>No matches</BlankState.Heading>
+          </BlankState.Content>
+          <BlankState.TextButton onPress={clearFilters}>
+            View all conversations
+          </BlankState.TextButton>
+        </BlankState.Root>
+      </View>
+    )
+  }
+
   return (
     <View style={styles.container}>
       <BlankState.Root>

package/src/components/conversations/filtered_results_footer.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
+import { Text, TextButton } from '../display'
+
+export function FilteredResultsFooter() {
+  const styles = useStyles()
+  const clearFilters = useClearConversationFilters()
+
+  return (
+    <View style={styles.container}>
+      <Text variant="tertiary" style={styles.text}>
+        You&rsquo;re viewing filtered results
+      </Text>
+      <TextButton variant="tertiary" onPress={clearFilters}>
+        View all conversations
+      </TextButton>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      gap: 8,
+      paddingHorizontal: 16,
+      paddingVertical: 24,
+    },
+    text: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+  })
+}

package/src/components/display/__tests__/filter_dropdown.test.tsx

@@ -0,0 +1,114 @@
+import { fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Pressable, Text } from 'react-native'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  ImagePickerAdapter,
+  MenuAction,
+  MenuAdapter,
+  MenuViewProps,
+  VideoAdapter,
+} from '../../../utils/native_adapters'
+import { FilterDropdown } from '../filter_dropdown'
+
+// Stands in for the host's native menu: every action, inline sections
+// included, becomes a pressable menu item.
+const FakeMenuView = ({ actions, onPressAction, children }: MenuViewProps) => {
+  const flatten = (items: MenuAction[]): MenuAction[] =>
+    items.flatMap(item => (item.displayInline && item.subactions ? item.subactions : [item]))
+
+  return (
+    <>
+      {children}
+      {flatten(actions).map(action => (
+        <Pressable
+          key={action.id}
+          accessibilityRole="menuitem"
+          accessibilityState={{ selected: action.state === 'on' }}
+          onPress={() => onPressAction?.({ nativeEvent: { event: action.id ?? action.title } })}
+        >
+          <Text>{action.title}</Text>
+        </Pressable>
+      ))}
+    </>
+  )
+}
+
+beforeAll(() => {
+  ChatAdapters.configure({
+    clipboard: new ClipboardAdapter({
+      getStringAsync: async () => '',
+      setStringAsync: async () => {},
+    }),
+    audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+    video: new VideoAdapter({ Player: (() => null) as any }),
+    imagePicker: new ImagePickerAdapter({
+      openCameraAsync: async () => ({ canceled: true, assets: null }),
+      openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+    }),
+    menu: new MenuAdapter({ View: FakeMenuView }),
+  })
+})
+
+const options = [
+  { id: 'all', label: 'All' },
+  { id: 'groups', label: 'Groups' },
+  { id: 'teams', label: 'Teams' },
+]
+
+const renderFilterDropdown = ({ showMoreFilters }: { showMoreFilters?: boolean } = {}) => {
+  const onSelect = jest.fn()
+  const onMoreFilters = jest.fn()
+
+  render(
+    <FilterDropdown
+      options={options}
+      selectedId="groups"
+      onSelect={onSelect}
+      onMoreFilters={onMoreFilters}
+      triggerLabel="Groups"
+      showMoreFilters={showMoreFilters}
+    />
+  )
+
+  return { onSelect, onMoreFilters }
+}
+
+describe('FilterDropdown', () => {
+  it('hands the menu every option, the selected one checked, then More filters', () => {
+    renderFilterDropdown()
+
+    expect(screen.getByRole('button', { name: 'Groups' })).toBeTruthy()
+    expect(
+      screen.getAllByRole('menuitem').map(item => [item.props.accessibilityState.selected])
+    ).toEqual([[false], [true], [false], [false]])
+    expect(screen.getByRole('menuitem', { name: 'More filters' })).toBeTruthy()
+  })
+
+  it('calls onSelect with the id of the pressed option', () => {
+    const { onSelect, onMoreFilters } = renderFilterDropdown()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Teams' }))
+
+    expect(onSelect).toHaveBeenCalledWith('teams')
+    expect(onMoreFilters).not.toHaveBeenCalled()
+  })
+
+  it('leaves More filters out when showMoreFilters is false', () => {
+    renderFilterDropdown({ showMoreFilters: false })
+
+    expect(screen.queryByRole('menuitem', { name: 'More filters' })).toBeNull()
+    expect(screen.getAllByRole('menuitem')).toHaveLength(options.length)
+  })
+
+  it('calls onMoreFilters for the More filters action', () => {
+    const { onSelect, onMoreFilters } = renderFilterDropdown()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(onMoreFilters).toHaveBeenCalledTimes(1)
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+})

package/src/components/display/__tests__/icon_tile.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { faBoxArchive } from '../../../vendor/font_awesome_pro_solid_icons'
+import { IconTile } from '../icon_tile'
+
+describe('IconTile', () => {
+  it('rounds the corners of a square tile instead of masking it to a circle', () => {
+    const view = render(
+      <IconTile icon={faBoxArchive} shape="square" maxFontSizeMultiplier={1} testID="tile" />
+    )
+
+    expect(view.getByTestId('tile', { includeHiddenElements: true })).toHaveStyle({
+      borderRadius: 4,
+    })
+  })
+})

package/src/components/display/action_button.tsx

@@ -7,7 +7,7 @@ import Animated, {
   ReduceMotion,
 } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { useTheme } from '../../hooks'
+import { useReduceMotion, useTheme } from '../../hooks'
 import { ConversationWarning } from '../../types'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import { Banner } from './banner'
@@ -37,13 +37,14 @@ export const ActionButton = ({
   warnings?: ConversationWarning[]
 }) => {
   const styles = useStyles()
+  const reduceMotion = useReduceMotion() ? ReduceMotion.Always : ReduceMotion.Never
 
   return (
     <LayoutAnimationConfig skipEntering>
       {visible && (
         <Animated.View
-          entering={FadeIn.duration(300).reduceMotion(ReduceMotion.System)}
-          exiting={FadeOut.duration(300).reduceMotion(ReduceMotion.System)}
+          entering={FadeIn.duration(300).reduceMotion(reduceMotion)}
+          exiting={FadeOut.duration(300).reduceMotion(reduceMotion)}
           style={styles.container}
         >
           {warnings.length > 0 && (

package/src/components/display/filter_dropdown.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import {
+  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
+  Menu,
+  MenuAction,
+  MenuActionEvent,
+  platformFontWeightBold,
+} from '../../utils'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon } from './icon'
+import { Text } from './text'
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const MORE_FILTERS_ID = 'more_filters'
+const MORE_FILTERS_LABEL = 'More filters'
+
+// =================================
+// ====== Component ================
+// =================================
+
+export interface FilterDropdownOption {
+  id: string
+  label: string
+}
+
+export interface FilterDropdownProps {
+  options: FilterDropdownOption[]
+  selectedId: string
+  onSelect: (id: string) => void
+  onMoreFilters: () => void
+  triggerLabel: string
+  showMoreFilters?: boolean
+}
+
+export function FilterDropdown({
+  options,
+  selectedId,
+  onSelect,
+  onMoreFilters,
+  triggerLabel,
+  showMoreFilters = true,
+}: FilterDropdownProps) {
+  const styles = useStyles()
+
+  const optionActions: MenuAction[] = options.map(option => ({
+    id: option.id,
+    title: option.label,
+    state: option.id === selectedId ? ('on' as const) : ('off' as const),
+  }))
+  const moreFiltersAction: MenuAction = {
+    id: MORE_FILTERS_ID,
+    title: '',
+    displayInline: true,
+    subactions: [{ id: MORE_FILTERS_ID, title: MORE_FILTERS_LABEL }],
+  }
+  const actions = showMoreFilters ? [...optionActions, moreFiltersAction] : optionActions
+
+  const handlePressAction = ({ nativeEvent }: MenuActionEvent) => {
+    if (nativeEvent.event === MORE_FILTERS_ID) {
+      onMoreFilters()
+    } else {
+      onSelect(nativeEvent.event)
+    }
+  }
+
+  return (
+    <Menu.View actions={actions} onPressAction={handlePressAction} style={styles.container}>
+      <View
+        style={styles.trigger}
+        accessible
+        accessibilityRole="button"
+        accessibilityHint="Opens filter options"
+      >
+        <Text
+          style={styles.triggerLabel}
+          numberOfLines={1}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+        >
+          {triggerLabel}
+        </Text>
+        <Icon
+          name="general.downChevron"
+          style={styles.triggerIcon}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          accessibilityElementsHidden
+        />
+      </View>
+    </Menu.View>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      alignSelf: 'flex-start',
+    },
+    trigger: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      paddingVertical: 4,
+    },
+    triggerLabel: {
+      flexShrink: 1,
+      fontWeight: platformFontWeightBold,
+      color: colors.textColorDefaultPrimary,
+    },
+    triggerIcon: {
+      fontSize: tokens.fontSizeSm,
+      color: colors.iconColorDefaultPrimary,
+    },
+  })
+}