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

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

@@ -3,13 +3,12 @@ import React from 'react'
 import { ListHeaderComponent } from '../list_header_component'
 
 const mockSetParams = jest.fn()
+let mockParams: Record<string, unknown> = {}
 
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ setParams: mockSetParams, navigate: jest.fn() }),
-  useRoute: () => ({
-    params: { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' },
-  }),
+  useRoute: () => ({ params: mockParams }),
 }))
 
 jest.mock('../../../../hooks/use_groups', () => ({
@@ -45,10 +44,14 @@ const clearedFilter = {
   chat_group_graph_id: undefined,
   group_source_app_name: undefined,
   show_direct_messages: undefined,
+  show_archived: undefined,
 }
 
 describe('ListHeaderComponent filter toggles', () => {
-  beforeEach(() => mockSetParams.mockClear())
+  beforeEach(() => {
+    mockSetParams.mockClear()
+    mockParams = { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' }
+  })
 
   it.each([
     ['Show all conversations', clearedFilter],
@@ -64,3 +67,17 @@ describe('ListHeaderComponent filter toggles', () => {
     expect(mockSetParams.mock.calls[0][0]).toStrictEqual(expected)
   })
 })
+
+describe('ListHeaderComponent mark all read', () => {
+  it('shows Mark all read on the active list', () => {
+    mockParams = {}
+
+    expect(render(<ListHeaderComponent />).queryByText('Mark all read')).not.toBeNull()
+  })
+
+  it('hides Mark all read on the archived list', () => {
+    mockParams = { show_archived: true }
+
+    expect(render(<ListHeaderComponent />).queryByText('Mark all read')).toBeNull()
+  })
+})

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

@@ -0,0 +1,286 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
+import { FilterDropdown, FilterDropdownOption, TextButton } from '../../../components'
+import {
+  useAtFontScaleBreakpoint,
+  useCanBrowseArchivedConversations,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEligible,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
+import { useApiGet } from '../../../hooks/use_api'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
+import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
+import { useSearchEnabled } from '../../../hooks/use_search_enabled'
+import { GraphId, GroupResource } from '../../../types/resources/group_resource'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
+import { Haptic } from '../../../utils/native_adapters'
+import { ConversationFiltersParams } from '../../conversation_filters/screen_props'
+import { ConversationsScreenProps } from '../conversations_screen'
+import { ListHeaderActionButton } from './list_header_action_button'
+
+const ROW_PADDING_HORIZONTAL = 16
+const ALL_CONVERSATIONS_LABEL = 'All conversations'
+const ARCHIVED_LABEL = 'Archived'
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  DMs = 'DMs',
+  More = 'More',
+}
+
+const FILTER_PARAMS: Record<Exclude<FilterTypes, FilterTypes.More>, ConversationFiltersParams> = {
+  [FilterTypes.All]: {},
+  [FilterTypes.Groups]: { group_source_app_name: 'Groups' },
+  [FilterTypes.Teams]: { group_source_app_name: 'Services' },
+  [FilterTypes.DMs]: { show_direct_messages: true },
+}
+
+export const FilterDropdownListHeaderComponent = () => {
+  const navigation = useNavigation()
+  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
+  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
+  const directMessagesEligible = useDirectMessagesEligible()
+  const hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const canBrowseArchived = useCanBrowseArchivedConversations()
+  const searchEnabled = useSearchEnabled()
+  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
+  const {
+    title,
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+    show_archived,
+  } = route.params || {}
+  const currentPersonCache = useCurrentPersonCache()
+  const { markAllRead, isPending } = useMarkAllRead()
+  const canCreateConversations = useCanCreateConversations()
+  const entryMode = useNewConversationEntry()
+  const newConversationFromFilter = useNewConversationFromFilter(
+    chat_group_graph_id as GraphId | undefined
+  )
+  const { data: group } = useApiGet<GroupResource>(
+    { url: `/me/groups/${chat_group_graph_id}`, data: { fields: { Group: [] } }, app: 'chat' },
+    { enabled: !!chat_group_graph_id }
+  )
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id || show_archived) {
+      return FilterTypes.More
+    } else if (/groups/i.test(group_source_app_name)) {
+      return FilterTypes.Groups
+    } else if (/services/i.test(group_source_app_name)) {
+      return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DMs
+    }
+
+    return FilterTypes.All
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
+
+  const options: FilterDropdownOption[] = useMemo(
+    () => [
+      { id: FilterTypes.All, label: FilterTypes.All },
+      ...(canFilterByGroups ? [{ id: FilterTypes.Groups, label: FilterTypes.Groups }] : []),
+      ...(canFilterByTeams ? [{ id: FilterTypes.Teams, label: FilterTypes.Teams }] : []),
+      ...(canFilterByDMs ? [{ id: FilterTypes.DMs, label: FilterTypes.DMs }] : []),
+    ],
+    [canFilterByGroups, canFilterByTeams, canFilterByDMs]
+  )
+
+  const triggerLabel = useMemo(() => {
+    if (chat_group_graph_id) return group?.name || title || ALL_CONVERSATIONS_LABEL
+    if (show_archived) return ARCHIVED_LABEL
+    if (active === FilterTypes.All) return ALL_CONVERSATIONS_LABEL
+
+    return active
+  }, [chat_group_graph_id, group?.name, title, show_archived, active])
+
+  const handleNewConversationNavigation = useCallback(() => {
+    if (newConversationFromFilter || entryMode === 'select_type') {
+      return navigation.navigate('ConversationSelectType', {
+        ...route.params,
+        newConversationFromFilter,
+      })
+    }
+
+    if (entryMode === 'groups') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectGroupRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'teams') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectTeamsILeadRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'direct_message') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectDirectMessageRecipients',
+        params: { ...route.params },
+      })
+    }
+  }, [navigation, route.params, entryMode, newConversationFromFilter])
+
+  const handleSetFilter = useCallback(
+    (params: ConversationFiltersParams) => {
+      navigation.setParams({
+        title: undefined,
+        chat_group_graph_id: undefined,
+        group_source_app_name: undefined,
+        show_direct_messages: undefined,
+        show_archived: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
+  const handleSelectFilter = useCallback(
+    (id: string) => {
+      const params = FILTER_PARAMS[id as keyof typeof FILTER_PARAMS]
+      if (params) handleSetFilter(params)
+    },
+    [handleSetFilter]
+  )
+
+  const handleSearch = useCallback(() => {
+    navigation.navigate('Search')
+  }, [navigation])
+
+  const handleChatSettings = useCallback(() => {
+    navigation.navigate('ChatSettings', {})
+  }, [navigation])
+
+  const handleOpenConversationFilters = useCallback(() => {
+    navigation.navigate('ConversationFilters', {
+      chat_group_graph_id,
+      group_source_app_name,
+      show_direct_messages,
+      show_archived,
+    })
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
+
+  const handleMarkAllRead = useCallback(() => {
+    currentPersonCache.update({ unreadCount: 0 })
+    Haptic.notificationSuccess()
+    markAllRead()
+  }, [currentPersonCache, markAllRead])
+
+  const alertMarkAllRead = useCallback(() => {
+    if (active === FilterTypes.All) return handleMarkAllRead()
+
+    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [
+      { text: 'Cancel' },
+      { text: 'OK', onPress: () => handleMarkAllRead() },
+    ])
+  }, [active, handleMarkAllRead])
+
+  const showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived
+
+  const styles = useStyles()
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <FilterDropdown
+            options={options}
+            selectedId={active}
+            onSelect={handleSelectFilter}
+            onMoreFilters={handleOpenConversationFilters}
+            showMoreFilters={showMoreFilters}
+            triggerLabel={triggerLabel}
+          />
+        </View>
+        <View style={styles.actionsContainer}>
+          <ListHeaderActionButton
+            name="general.cog"
+            onPress={handleChatSettings}
+            accessibilityLabel="Chat settings"
+            testID="conversations-chat-settings-button"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          />
+          {canCreateConversations && (
+            <ListHeaderActionButton
+              name="churchCenter.signups"
+              onPress={handleNewConversationNavigation}
+              accessibilityLabel="New conversation"
+              testID="conversations-new-conversation-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+          {searchEnabled && (
+            <ListHeaderActionButton
+              name="general.search"
+              onPress={handleSearch}
+              accessibilityLabel="Search"
+              testID="conversations-search-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+        </View>
+      </View>
+      {!show_archived && (
+        <View style={styles.markAllReadRow}>
+          <TextButton
+            onPress={alertMarkAllRead}
+            disabled={isPending}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Mark all read"
+          >
+            Mark all read
+          </TextButton>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
+  return StyleSheet.create({
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingBottom: 16,
+      gap: 8,
+    },
+    headingRow: {
+      gap: 12,
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      justifyContent: 'space-between',
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+    titleContainer: {
+      flexShrink: 1,
+      minWidth: 0,
+    },
+    actionsContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    markAllReadRow: {
+      alignItems: 'flex-start',
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+  })
+}

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

@@ -44,6 +44,7 @@ export const ListHeaderComponent = () => {
     chat_group_graph_id,
     group_source_app_name = '',
     show_direct_messages,
+    show_archived,
   } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
@@ -54,7 +55,7 @@ export const ListHeaderComponent = () => {
   )
 
   const active: FilterTypes = useMemo(() => {
-    if (chat_group_graph_id) {
+    if (chat_group_graph_id || show_archived) {
       return FilterTypes.More
     } else if (/groups/i.test(group_source_app_name)) {
       return FilterTypes.Groups
@@ -65,7 +66,7 @@ export const ListHeaderComponent = () => {
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleNewConversationNavigation = useCallback(() => {
     if (newConversationFromFilter || entryMode === 'select_type') {
@@ -104,6 +105,7 @@ export const ListHeaderComponent = () => {
         chat_group_graph_id: undefined,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
+        show_archived: undefined,
         ...params,
       })
     },
@@ -119,8 +121,9 @@ export const ListHeaderComponent = () => {
       chat_group_graph_id,
       group_source_app_name,
       show_direct_messages,
+      show_archived,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
@@ -161,15 +164,17 @@ export const ListHeaderComponent = () => {
           <Heading numberOfLines={1} variant="h2">
             Conversations
           </Heading>
-          <TextButton
-            onPress={alertMarkAllRead}
-            disabled={isPending}
-            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
-            accessibilityShowsLargeContentViewer
-            accessibilityLargeContentTitle="Mark all read"
-          >
-            Mark all read
-          </TextButton>
+          {!show_archived && (
+            <TextButton
+              onPress={alertMarkAllRead}
+              disabled={isPending}
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+              accessibilityShowsLargeContentViewer
+              accessibilityLargeContentTitle="Mark all read"
+            >
+              Mark all read
+            </TextButton>
+          )}
         </View>
         <View style={styles.actionsContainer}>
           <ListHeaderActionButton

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

@@ -44,6 +44,7 @@ export const SearchListHeaderComponent = () => {
     chat_group_graph_id,
     group_source_app_name = '',
     show_direct_messages,
+    show_archived,
   } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
@@ -54,7 +55,7 @@ export const SearchListHeaderComponent = () => {
   )
 
   const active: FilterTypes = useMemo(() => {
-    if (chat_group_graph_id) {
+    if (chat_group_graph_id || show_archived) {
       return FilterTypes.More
     } else if (/groups/i.test(group_source_app_name)) {
       return FilterTypes.Groups
@@ -65,7 +66,7 @@ export const SearchListHeaderComponent = () => {
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleNewConversationNavigation = useCallback(() => {
     if (newConversationFromFilter || entryMode === 'select_type') {
@@ -104,6 +105,7 @@ export const SearchListHeaderComponent = () => {
         chat_group_graph_id: undefined,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
+        show_archived: undefined,
         ...params,
       })
     },
@@ -123,8 +125,9 @@ export const SearchListHeaderComponent = () => {
       chat_group_graph_id,
       group_source_app_name,
       show_direct_messages,
+      show_archived,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
@@ -165,15 +168,17 @@ export const SearchListHeaderComponent = () => {
           <Heading numberOfLines={1} variant="h2">
             Conversations
           </Heading>
-          <TextButton
-            onPress={alertMarkAllRead}
-            disabled={isPending}
-            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
-            accessibilityShowsLargeContentViewer
-            accessibilityLargeContentTitle="Mark all read"
-          >
-            Mark all read
-          </TextButton>
+          {!show_archived && (
+            <TextButton
+              onPress={alertMarkAllRead}
+              disabled={isPending}
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+              accessibilityShowsLargeContentViewer
+              accessibilityLargeContentTitle="Mark all read"
+            >
+              Mark all read
+            </TextButton>
+          )}
         </View>
         <View style={styles.actionsContainer}>
           <ListHeaderActionButton

package/src/screens/conversations/conversations_screen.tsx

@@ -3,10 +3,13 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations } from '../../components'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
+import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
 import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/use_product_analytics'
 import { useSearchEnabled } from '../../hooks/use_search_enabled'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
+import { Menu } from '../../utils/native_adapters'
+import { FilterDropdownListHeaderComponent } from './components/filter_dropdown_list_header_component'
 import { ListHeaderComponent } from './components/list_header_component'
 import { SearchListHeaderComponent } from './components/search_list_header_component'
 
@@ -15,12 +18,12 @@ export type ConversationsScreenProps = StaticScreenProps<{
   chat_group_graph_id?: GraphId
   group_source_app_name?: AppName
   show_direct_messages?: boolean
+  show_archived?: boolean
 }>
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
   const styles = useStyles()
-  const searchEnabled = useSearchEnabled()
-  const Header = searchEnabled ? SearchListHeaderComponent : ListHeaderComponent
+  const Header = useListHeaderComponent()
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)
 
@@ -33,6 +36,16 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
   )
 }
 
+const useListHeaderComponent = () => {
+  const filterDropdownEnabled = useFilterDropdownEnabled()
+  const searchEnabled = useSearchEnabled()
+
+  if (filterDropdownEnabled && Menu.isConfigured) return FilterDropdownListHeaderComponent
+  if (searchEnabled) return SearchListHeaderComponent
+
+  return ListHeaderComponent
+}
+
 const useStyles = () => {
   return StyleSheet.create({
     container: {

package/src/screens/design_system_screen.tsx

@@ -12,6 +12,7 @@ import {
   Button,
   ConversationAvatar,
   EmojiAvatar,
+  FilterDropdown,
   IconAvatar,
   ToggleButton,
   Heading,
@@ -82,6 +83,14 @@ const personChild = {
 
 const buttonPress = () => Alert.alert('Button clicked')
 
+const filterDropdownOptions = [
+  { id: 'all', label: 'All conversations' },
+  { id: 'groups', label: 'Groups' },
+  { id: 'teams', label: 'Teams' },
+  { id: 'dms', label: 'DMs' },
+  { id: 'unread', label: 'Unread' },
+]
+
 // =================================
 // ====== Component ================
 // =================================
@@ -213,6 +222,7 @@ function HeadingTextSection({ isLast }: SectionProps) {
 function PressablesSection({ isLast }: SectionProps) {
   const styles = useStyles()
   const [filterSelected, setFilterSelected] = useState('Groups')
+  const [dropdownSelected, setDropdownSelected] = useState('all')
 
   return (
     <CollapsableSection title="Pressables" isLast={isLast}>
@@ -388,6 +398,22 @@ function PressablesSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="FilterDropdown"
+        description="Trigger that opens the host's native menu of filter options plus a More filters action. Needs a menu adapter."
+      >
+        <Row style={styles.alignRowLeft}>
+          <FilterDropdown
+            options={filterDropdownOptions}
+            selectedId={dropdownSelected}
+            onSelect={setDropdownSelected}
+            onMoreFilters={() => Alert.alert('More filters')}
+            triggerLabel={
+              filterDropdownOptions.find(option => option.id === dropdownSelected)?.label ?? ''
+            }
+          />
+        </Row>
+      </Group>
       <Group
         title="IconButton"
         description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers."