@planningcenter/chat-react-native 3.39.0-rc.0 → 3.39.0-rc.10

package/src/contexts/api_provider.tsx

@@ -95,7 +95,10 @@ function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): bool
   const isInitialLogin = !prevToken && !!newToken
   if (isInitialLogin) return false
 
-  return Boolean(prevToken && newToken !== prevToken) || Boolean(prevEnv && newEnv !== prevEnv)
+  const tokenChanged = Boolean(
+    prevToken?.access_token && newToken?.access_token !== prevToken?.access_token
+  )
+  return tokenChanged || Boolean(prevEnv && newEnv !== prevEnv)
 }
 
 function usePrevious<T>(value: T): T {

package/src/contexts/conversations_context.tsx

@@ -39,9 +39,13 @@ export const ConversationsContextProvider = ({
   args = {},
 }: PropsWithChildren<{ args: ConversationFiltersParams }>) => {
   const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
-  const { chat_group_graph_id, group_source_app_name } = args
+  const { chat_group_graph_id, group_source_app_name, show_direct_messages } = args
 
-  const query = useConversations({ chat_group_graph_id, group_source_app_name })
+  const query = useConversations({
+    chat_group_graph_id,
+    group_source_app_name,
+    show_direct_messages,
+  })
 
   const value = useMemo(
     () => ({

package/src/hooks/direct_messages/use_direct_message_affiliations.ts

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { ApiResource } from '../../types'
+import { DirectMessageAffiliationsResource } from '../../types/resources/direct_message_affiliations'
+import { useApiClient } from '../use_api_client'
+
+export function useDirectMessageAffiliations() {
+  const apiClient = useApiClient()
+
+  const { data } = useQuery({
+    queryKey: ['chat', '/me/direct_message_affiliations'],
+    queryFn: () =>
+      apiClient.chat.get({
+        url: '/me/direct_message_affiliations',
+        data: {
+          fields: { DirectMessageAffiliations: ['groups', 'teams'] },
+        },
+      }) as Promise<ApiResource<DirectMessageAffiliationsResource>>,
+    staleTime: 5 * 60 * 1000,
+  })
+
+  const groups = useMemo(
+    () =>
+      new Map<number, string>(
+        Object.entries(data?.data?.groups ?? {}).map(([id, name]) => [+id, name])
+      ),
+    [data]
+  )
+
+  const teams = useMemo(
+    () =>
+      new Map<number, string>(
+        Object.entries(data?.data?.teams ?? {}).map(([id, name]) => [+id, name])
+      ),
+    [data]
+  )
+
+  return { groups, teams }
+}

package/src/hooks/direct_messages/use_direct_message_candidates.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiCollection } from '../../types'
+import { DirectMessageCandidateResource } from '../../types/resources/direct_message_candidate'
+import { useApiClient } from '../use_api_client'
+
+export function useDirectMessageCandidates(term: string) {
+  const apiClient = useApiClient()
+  return useQuery({
+    queryKey: ['chat', '/me/direct_message_candidates', term],
+    queryFn: () =>
+      apiClient.chat.get({
+        url: '/me/direct_message_candidates',
+        data: {
+          q: term,
+          fields: {
+            DirectMessageCandidate: [
+              'name',
+              'avatar',
+              'groups',
+              'teams',
+              'under_18',
+              'direct_messages_disabled',
+            ],
+          },
+        },
+      }) as Promise<ApiCollection<DirectMessageCandidateResource>>,
+    enabled: term.length >= 1,
+    staleTime: 1000 * 60,
+    throwOnError: true,
+  })
+}

package/src/hooks/direct_messages/use_direct_message_conversation_validate.ts

@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiResource, ConversationValidateResource, ConversationWarning } from '../../types'
+import { useApiClient } from '../use_api_client'
+
+interface Props {
+  recipientIds: string[]
+  enabled?: boolean
+}
+
+export function useDirectMessageConversationValidate({ recipientIds, enabled = true }: Props) {
+  const apiClient = useApiClient()
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['chat', '/me/conversation_validate', { recipient_ids: recipientIds }],
+    queryFn: () =>
+      apiClient.chat.post<ApiResource<ConversationValidateResource>>({
+        url: '/me/conversation_validate',
+        data: {
+          data: {
+            type: 'ConversationValidate',
+            attributes: { recipient_ids: recipientIds },
+          },
+        },
+      }),
+    enabled: enabled && recipientIds.length > 0,
+    retry: false,
+  })
+
+  const warnings: ConversationWarning[] = data?.data.warnings ?? []
+
+  return {
+    warnings,
+    validationPending: enabled && recipientIds.length > 0 && isLoading,
+  }
+}

package/src/hooks/direct_messages/use_find_or_create_direct_message_conversation.ts

@@ -0,0 +1,66 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState, useCallback } from 'react'
+import { ApiCollection, ApiResource, ConversationResource } from '../../types'
+import { ApiClient, useApiClient } from '../use_api_client'
+
+const findDirectMessageConversation = (apiClient: ApiClient, participantIds: string[]) =>
+  apiClient.chat.get({
+    url: '/me/conversations',
+    data: {
+      fields: { Conversation: ['title'] },
+      filter: 'with_exact_direct_message_participants',
+      participant_ids: participantIds.join(','),
+    },
+  }) as Promise<ApiCollection<ConversationResource>>
+
+const createDirectMessageConversation = (apiClient: ApiClient, ids: string[]) =>
+  apiClient.chat.post({
+    url: '/me/direct_messages',
+    data: {
+      data: {
+        type: 'DirectMessage',
+        attributes: { recipients: ids },
+      },
+    },
+  }) as Promise<ApiResource<ConversationResource>>
+
+interface Props {
+  recipientIds: string[]
+  onSuccess: (conversationId: ConversationResource['id']) => void
+}
+
+export function useFindOrCreateDirectMessageConversation({ recipientIds, onSuccess }: Props) {
+  const apiClient = useApiClient()
+  const [isFinding, setIsFinding] = useState(false)
+  const [isError, setIsError] = useState(false)
+
+  const { data } = useQuery({
+    queryKey: ['chat', '/me/conversations', 'with_exact_direct_message_participants', recipientIds],
+    queryFn: () => findDirectMessageConversation(apiClient, recipientIds),
+    enabled: recipientIds.length > 0,
+  })
+
+  const directMessageExists = (data?.data.length ?? 0) > 0
+
+  const findOrCreateConversation = useCallback(
+    async (participantIds: string[]) => {
+      setIsFinding(true)
+      setIsError(false)
+      try {
+        const findResponse = await findDirectMessageConversation(apiClient, participantIds)
+        if (findResponse.data.length > 0) {
+          onSuccess(findResponse.data[0].id)
+        } else {
+          const createResponse = await createDirectMessageConversation(apiClient, participantIds)
+          onSuccess(createResponse.data.id)
+        }
+      } catch {
+        setIsError(true)
+        setIsFinding(false)
+      }
+    },
+    [apiClient, onSuccess]
+  )
+
+  return { findOrCreateConversation, directMessageExists, isFinding, isError }
+}

package/src/hooks/groups/use_group_chat_conversation_payload.ts

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
 import { ApiResource, ResourceObject } from '../../types'
+import { toMs } from '../../utils/time'
 import { useApiClient } from '../use_api_client'
 
-const STALE_TIME_MS = 25 * 60 * 1000 // under Groups' 30-min server-side expiry
+const STALE_TIME_MS = toMs(25, 'minutes') // under Groups' 30-min server-side expiry
 
 interface Props {
   groupId: number

package/src/hooks/index.ts

@@ -10,6 +10,7 @@ export * from './use_current_person'
 export * from './use_deleting_ids'
 export * from './use_direct_messages_enabled'
 export * from './use_font_scale'
+export * from './use_has_direct_messages'
 export * from './use_groups_groups'
 export * from './use_groups'
 export * from './use_interaction_ghost_color'

package/src/hooks/services/use_services_chat_conversation_payload.ts

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
+import { toMs } from '../../utils/time'
 import { useApiClient } from '../use_api_client'
 import { getServicesChatConversationPayload } from './use_find_or_create_services_conversation'
 
-const STALE_TIME_MS = 55 * 60 * 1000 // under Services' 1-hour server-side expiry
+const STALE_TIME_MS = toMs(55, 'minutes') // under Services' 1-hour server-side expiry
 
 interface Props {
   teamIds: number[]

package/src/hooks/use_api.ts

@@ -17,7 +17,15 @@ interface ApiGetOptions extends GetRequest {
   enabled?: boolean
 }
 
-export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: ApiGetOptions) => {
+type UseApiGetOptions = {
+  staleTime?: number
+  gcTime?: number
+}
+
+export const useApiGet = <T extends ResourceObject | ResourceObject[]>(
+  args: ApiGetOptions,
+  opts?: UseApiGetOptions
+) => {
   type Resource = ApiResource<T>
   const { session } = useContext(ChatContext)
   const apiClient = useApiClient()
@@ -32,6 +40,7 @@ export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: Api
       return apiClient[app].get({ url, data: d, headers }) as Promise<Resource>
     },
     enabled,
+    ...opts,
   })
 
   return { ...data, ...query }

package/src/hooks/use_chat_configuration.ts

@@ -5,6 +5,7 @@ import {
   getChatConfigurationRequestArgs,
   getChatConfigurationQueryKey,
 } from '../utils/request/get_chat_configuration'
+import { ONE_HOUR } from '../utils/time'
 import {
   FALLBACK_ALLOWED_FILE_EXTENSIONS,
   FALLBACK_ALLOWED_MIME_TYPES,
@@ -28,7 +29,7 @@ export function useChatConfiguration() {
         .get<ApiResource<ChatConfigurationResource>>(requestArgs)
         .catch(() => stableFallbackConfiguration)
     },
-    staleTime: 1000 * 60 * 60, // 1 hour — this rarely changes
+    staleTime: ONE_HOUR,
   })
 
   const attrs = data.data

package/src/hooks/use_chat_permissions.ts

@@ -1,4 +1,5 @@
 import { AppGrantsResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiGet } from './use_api'
 import { App } from './use_api_client'
 
@@ -13,7 +14,9 @@ export const appGrantsRequestArgs = {
 }
 
 export function useAppGrants() {
-  return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs)
+  return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs, {
+    staleTime: FIVE_MINUTES,
+  })
 }
 
 export function useCanCreateConversations(): boolean {

package/src/hooks/use_conversation.ts

@@ -29,6 +29,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'custom_avatar_color',
         'custom_avatar_image_url',
         'disabled',
+        'disabled_reason',
         'member_ability',
         'muted',
         'replies_disabled',

package/src/hooks/use_conversation_jolt_events.ts

@@ -26,7 +26,8 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
   const handleUpdatedConversation = useCallback(
     (e: JoltConversationEvent) => {
-      const { last_message_idempotent_key, last_message_author_id, disabled } = e.data.data
+      const { last_message_idempotent_key, last_message_author_id, disabled, disabled_reason } =
+        e.data.data
 
       if (last_message_idempotent_key && last_message_author_id === currentPersonId) {
         completeMessageCreationConversationTracking({
@@ -37,7 +38,7 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
       queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
         if (!prev?.data) return prev
-        return { ...prev, data: { ...prev.data, disabled } }
+        return { ...prev, data: { ...prev.data, disabled, disabledReason: disabled_reason } }
       })
 
       queryClient.invalidateQueries({ queryKey })

package/src/hooks/use_current_person.ts

@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { CurrentPersonResource } from '../types'
 import { ApiResource } from '../types/api_primitives'
+import { FIVE_MINUTES, THIRTY_MINUTES } from '../utils/time'
 import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
 
 export const currentPersonRequestArgs = {
@@ -15,6 +16,7 @@ export const currentPersonRequestArgs = {
         'unread_count',
         'pco_chat_enabled',
         'age_qualification_status',
+        'direct_messages_disabled',
       ],
     },
   },
@@ -24,8 +26,8 @@ export const currentPersonQueryKey = getRequestQueryKey(currentPersonRequestArgs
 
 export const useCurrentPerson = () => {
   const { data: person } = useSuspenseGet<CurrentPersonResource>(currentPersonRequestArgs, {
-    staleTime: 5 * 60 * 1000, // 5 minutes - data stays fresh for 5 minutes
-    gcTime: 30 * 60 * 1000, // 30 minutes - data stays in cache for 30 minutes when not in use
+    staleTime: FIVE_MINUTES,
+    gcTime: THIRTY_MINUTES,
   })
 
   return person

package/src/hooks/use_features.ts

@@ -3,6 +3,7 @@ import { useCallback } from 'react'
 import { ApiCollection } from '../types'
 import type { FeatureResource } from '../types/resources/feature_resource'
 import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiClient } from './use_api_client'
 
 type FeatureName = (typeof availableFeatures)[keyof typeof availableFeatures]
@@ -18,7 +19,7 @@ export function useFeatures() {
         .get<ApiCollection<FeatureResource>>(requestArgs)
         .catch(() => stableEmptyFeatures)
     },
-    staleTime: 1000 * 60 * 5, // 5 minutes
+    staleTime: FIVE_MINUTES,
   })
 
   const features = data.data

package/src/hooks/use_groups.ts

@@ -1,5 +1,6 @@
 import { AppName } from '../types/resources/app_name'
 import { GroupResource, SourceType } from '../types/resources/group_resource'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiPaginator } from './use_api'
 
 type UseGroupsProps = {
@@ -8,20 +9,23 @@ type UseGroupsProps = {
 }
 
 export const useGroups = ({ source_app_name, source_type }: UseGroupsProps) => {
-  return useApiPaginator<GroupResource>({
-    url: '/me/groups',
-    data: {
-      fields: {
-        Group: [],
+  return useApiPaginator<GroupResource>(
+    {
+      url: '/me/groups',
+      data: {
+        fields: {
+          Group: [],
+        },
+        where: {
+          source_app_name,
+          source_type,
+        },
+        perPage: 100,
       },
-      where: {
-        source_app_name,
-        source_type,
-      },
-      perPage: 100,
+      app: 'chat',
     },
-    app: 'chat',
-  })
+    { staleTime: FIVE_MINUTES }
+  )
 }
 
 export const useCanDisplayGroups = (props: UseGroupsProps) => {

package/src/hooks/use_groups_groups.ts

@@ -1,24 +1,28 @@
 import { GroupsGroupResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiPaginator } from './use_api'
 
 export const useGroupsGroups = () => {
-  return useApiPaginator<GroupsGroupResource>({
-    url: '/me/groups',
-    data: {
-      perPage: 100,
-      fields: {
-        Group: [
-          'can_create_conversation',
-          'can_create_conversation_reason_code',
-          'name',
-          'header_image',
-          'memberships_count',
-        ],
+  return useApiPaginator<GroupsGroupResource>(
+    {
+      url: '/me/groups',
+      data: {
+        perPage: 100,
+        fields: {
+          Group: [
+            'can_create_conversation',
+            'can_create_conversation_reason_code',
+            'name',
+            'header_image',
+            'memberships_count',
+          ],
+        },
+        order: 'name',
       },
-      order: 'name',
+      app: 'groups',
     },
-    app: 'groups',
-  })
+    { staleTime: FIVE_MINUTES }
+  )
 }
 
 export const useCanDisplayGroupsGroups = () => {

package/src/hooks/use_has_direct_messages.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiCollection, ConversationResource } from '../types'
+import { useApiClient } from './use_api_client'
+
+export function useHasDirectMessages(): boolean {
+  const apiClient = useApiClient()
+
+  const { data, isFetched } = useQuery<ApiCollection<ConversationResource>>({
+    queryKey: ['chat', '/me/conversations', 'direct_message', 'has_any'],
+    queryFn: () =>
+      apiClient.chat.get({
+        url: '/me/conversations',
+        data: { filter: 'direct_message', perPage: 1, fields: { Conversation: ['id'] } },
+      }),
+    staleTime: 1000 * 60 * 5,
+  })
+
+  if (!isFetched) return false
+
+  return (data?.data.length ?? 0) > 0
+}

package/src/hooks/use_jolt.ts

@@ -13,6 +13,7 @@ import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
 import type { JoltSubscriptionPattern } from '../types/jolt_events'
 import { Client, Uri } from '../utils'
+import { FIVE_SECONDS } from '../utils/time'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -49,7 +50,7 @@ export const useJoltClient = (): JoltClient | undefined => {
           },
         })
       },
-      staleTime: 5000, // 5 seconds
+      staleTime: FIVE_SECONDS,
     })
   }
 

package/src/hooks/use_organization.ts

@@ -1,4 +1,5 @@
 import { OrganizationResource } from '../types'
+import { ONE_HOUR } from '../utils/time'
 import { App } from './use_api_client'
 import { useSuspenseGet } from './use_suspense_api'
 
@@ -13,5 +14,7 @@ export const organizationRequestArgs = {
 }
 
 export function useOrganization() {
-  return useSuspenseGet<OrganizationResource>(organizationRequestArgs)
+  return useSuspenseGet<OrganizationResource>(organizationRequestArgs, {
+    staleTime: ONE_HOUR,
+  })
 }

package/src/hooks/use_person_settings.ts

@@ -0,0 +1,29 @@
+import { useMutation } from '@tanstack/react-query'
+import { throwResponseError } from '../utils/response_error'
+import { useApiClient } from './use_api_client'
+import { useCurrentPerson, useCurrentPersonCache } from './use_current_person'
+
+export function usePersonSettings() {
+  const apiClient = useApiClient()
+  const person = useCurrentPerson()
+  const { update, invalidate } = useCurrentPersonCache()
+
+  const directMessagesDisabled = person?.directMessagesDisabled ?? false
+
+  const { mutate: setDirectMessagesDisabled, isPending: isMutating } = useMutation({
+    mutationFn: (disabled: boolean) => {
+      const action = disabled ? 'disable_direct_messages' : 'enable_direct_messages'
+      return apiClient.chat
+        .post({ url: `/me/${action}`, data: { data: { type: 'Person', attributes: {} } } })
+        .catch(throwResponseError)
+    },
+    onMutate: disabled => {
+      update({ directMessagesDisabled: disabled })
+    },
+    onError: () => {
+      invalidate()
+    },
+  })
+
+  return { directMessagesDisabled, setDirectMessagesDisabled, isMutating }
+}

package/src/navigation/index.tsx

@@ -77,6 +77,7 @@ import { NotificationSettingsScreen } from '../screens/notification_settings_scr
 import { PreferredAppSelectionScreen } from '../screens/preferred_app_selection_screen'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
+import { SettingsScreen } from '../screens/settings_screen'
 import {
   SystemMessagePeopleScreen,
   SystemMessagePeopleScreenOptions,
@@ -280,6 +281,16 @@ export const ChatStack = createNativeStackNavigator({
       screen: AvatarPickerScreen,
       options: AvatarPickerScreenOptions,
     },
+    ChatSettings: {
+      screen: SettingsScreen,
+      options: ({ navigation }) => ({
+        title: 'Chat settings',
+        headerBackVisible: false,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+        ),
+      }),
+    },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
       options: ({ navigation }) => ({

package/src/screens/conversation_details_screen.tsx

@@ -122,6 +122,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const canDelete = conversation.memberAbility?.canDelete || false
   const isLeader = conversation.memberAbility?.leader || false
   const isDisabled = conversation.disabled ?? false
+  const showAdultRequirementNotice = isDisabled && conversation.disabledReason === 'safety_check'
 
   const {
     data: members,
@@ -350,7 +351,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       sectionInnerStyle: styles.sectionInnerGenderNotice,
     },
     {
-      type: isDisabled ? SectionTypes.view : SectionTypes.hidden,
+      type: showAdultRequirementNotice ? SectionTypes.view : SectionTypes.hidden,
       data: {
         children: <AdultRequirementNotice />,
       },

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

@@ -2,7 +2,12 @@ import React, { useContext, useMemo } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import { Heading } from '../../../components'
-import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'
+import {
+  useAtFontScaleBreakpoint,
+  useDirectMessagesEnabled,
+  useHasDirectMessages,
+  useTheme,
+} from '../../../hooks'
 import { FilterContext, useFilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'
 import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
@@ -52,7 +57,11 @@ interface DataItem<T, TName extends SectionTypes> {
 export const ConversationFilters = () => {
   const styles = useStyles()
   const { setScrollOffset, params } = useContext(FilterContext)
-  const { chat_group_graph_id, group_source_app_name = '' } = params
+  const { chat_group_graph_id, group_source_app_name = '', show_direct_messages } = params
+
+  const directMessagesEnabled = useDirectMessagesEnabled()
+  const hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEnabled && hasDirectMessages
 
   const activeFilter: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {
@@ -61,10 +70,12 @@ export const ConversationFilters = () => {
       return FilterTypes.Groups
     } else if (/services/i.test(group_source_app_name)) {
       return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DirectMessages
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
 
   const { groups = [] } = useGroupsToFilter()
   const { teams = [] } = useTeamsToFilter()
@@ -91,14 +102,15 @@ export const ConversationFilters = () => {
   const teamItemData = selectActiveWithFirst(5)(teamItems)
 
   const hideAppFilters = groupItems.length < 1 || teamItems.length < 1
+  const showGeneralFilters = !hideAppFilters || canFilterByDMs
 
   const listData: SectionListData = [
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.header,
+      type: showGeneralFilters ? SectionTypes.header : SectionTypes.hidden,
       data: { title: 'General Filters' },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showGeneralFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },
     },
     {
@@ -117,6 +129,14 @@ export const ConversationFilters = () => {
         isActive: activeFilter === FilterTypes.Teams,
       },
     },
+    {
+      type: canFilterByDMs ? SectionTypes.filter : SectionTypes.hidden,
+      data: {
+        filter: FilterTypes.DirectMessages,
+        show_direct_messages: true,
+        isActive: activeFilter === FilterTypes.DirectMessages,
+      },
+    },
     {
       type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,
       data: { title: 'Groups', style: styles.extraHeaderScalableSpace },