@planningcenter/chat-react-native 4.4.1-qa-staging.15 → 4.4.1-qa-staging.17

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -8,6 +8,7 @@ import {
   useHasDirectMessages,
   useTheme,
 } from '../../../hooks'
+import { useFilterDropdownEnabled } from '../../../hooks/use_filter_dropdown_enabled'
 import { FilterContext, useFilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'
 import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
@@ -59,6 +60,7 @@ export const ConversationFilters = () => {
   const { setScrollOffset, params } = useContext(FilterContext)
   const { chat_group_graph_id, group_source_app_name = '', show_direct_messages } = params
 
+  const filterDropdownEnabled = useFilterDropdownEnabled()
   const directMessagesEligible = useDirectMessagesEligible()
   const hasDirectMessages = useHasDirectMessages()
   const canFilterByDMs = directMessagesEligible && hasDirectMessages
@@ -101,8 +103,9 @@ export const ConversationFilters = () => {
   const groupItemData = selectActiveWithFirst(5)(groupItems)
   const teamItemData = selectActiveWithFirst(5)(teamItems)
 
-  const hideAppFilters = groupItems.length < 1 || teamItems.length < 1
-  const showGeneralFilters = !hideAppFilters || canFilterByDMs
+  const showAppFilters = !filterDropdownEnabled && groupItems.length > 0 && teamItems.length > 0
+  const showDMFilter = !filterDropdownEnabled && canFilterByDMs
+  const showGeneralFilters = showAppFilters || showDMFilter
 
   const listData: SectionListData = [
     {
@@ -114,7 +117,7 @@ export const ConversationFilters = () => {
       data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showAppFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.Groups,
         group_source_app_name: 'groups',
@@ -122,7 +125,7 @@ export const ConversationFilters = () => {
       },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showAppFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.Teams,
         group_source_app_name: 'services',
@@ -130,7 +133,7 @@ export const ConversationFilters = () => {
       },
     },
     {
-      type: canFilterByDMs ? SectionTypes.filter : SectionTypes.hidden,
+      type: showDMFilter ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.DirectMessages,
         show_direct_messages: true,

package/src/screens/conversation_filters_screen.tsx

@@ -6,6 +6,7 @@ import React, { useCallback } from 'react'
 import { LayoutChangeEvent, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useFilterDropdownEnabled } from '../hooks/use_filter_dropdown_enabled'
 import { ConversationFilters } from './conversation_filters/components/conversation_filters'
 import {
   FilterProvider,
@@ -96,6 +97,7 @@ export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps
 const FormSheetHeaderWithContext = () => {
   const { resetFilter, applyFilters, setFormSheetHeaderHeight } = useFilterContext()
   const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
+  const filterDropdownEnabled = useFilterDropdownEnabled()
   const styles = useStyles()
 
   const handleFormSheetHeaderLayout = useCallback(
@@ -108,7 +110,9 @@ const FormSheetHeaderWithContext = () => {
   return (
     <View onLayout={handleFormSheetHeaderLayout}>
       <FormSheet.Header style={styles.header}>
-        <FormSheet.HeaderTitle>Filters</FormSheet.HeaderTitle>
+        <FormSheet.HeaderTitle>
+          {filterDropdownEnabled ? 'More filters' : 'Filters'}
+        </FormSheet.HeaderTitle>
         <FormSheet.HeaderActions>
           <FormSheet.HeaderTextButton onPress={resetFilter}>Reset</FormSheet.HeaderTextButton>
           <FormSheet.HeaderButton title="Apply" onPress={() => applyFilters(route.params)} />