@planningcenter/chat-react-native 3.38.1-rc.2 → 3.38.2-qa-778.0

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,8 @@ export const currentPersonRequestArgs = {
         'unread_count',
         'pco_chat_enabled',
         'age_qualification_status',
+        'direct_messages_disabled',
+        'under_18',
       ],
     },
   },
@@ -24,8 +27,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_direct_messages_enabled.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiCollection } from '../types'
+import type { FeatureResource } from '../types/resources/feature_resource'
+import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
+import { useApiClient } from './use_api_client'
+import { availableFeatures } from './use_features'
+
+export function useDirectMessagesEnabled(): boolean {
+  const apiClient = useApiClient()
+  const { data, isFetched } = useQuery<ApiCollection<FeatureResource>>({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: () => apiClient.chat.get<ApiCollection<FeatureResource>>(getFeaturesRequestArgs()),
+    staleTime: 1000 * 60 * 5,
+  })
+
+  if (!isFetched) return false
+
+  return (
+    data?.data.some(
+      feature => feature.name === availableFeatures.direct_messages_eap && feature.enabled
+    ) ?? false
+  )
+}

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
@@ -42,6 +43,7 @@ export const availableFeatures = {
   custom_conversation_avatars: 'ROLLOUT_custom_conversation_avatars',
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
+  direct_messages_eap: 'ROLLOUT_direct_messages_eap',
 } as const satisfies Record<string, `ROLLOUT_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

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

@@ -12,7 +12,7 @@ import {
   HeaderDoneButton,
   HeaderTextButton,
 } from '../components/display/platform_modal_header_buttons'
-import { useQualifiedByAge } from '../hooks'
+import { useDirectMessagesEnabled, useQualifiedByAge } from '../hooks'
 import {
   AttachmentActionsScreen,
   AttachmentActionsScreenOptions,
@@ -48,6 +48,7 @@ import {
   ConversationScreenTitle,
 } from '../screens/conversation_screen'
 import { ConversationNewEntryScreen } from '../screens/conversation_select_recipients/conversation_new_entry_screen'
+import { ConversationSelectDirectMessageRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen'
 import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
 import { ConversationSelectTeamsILeadRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
 import { ConversationSelectRecipientsParams } from '../screens/conversation_select_recipients/types/screen_props'
@@ -76,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,
@@ -131,6 +133,20 @@ export const NewConversationStack = createNativeStackNavigator({
         ),
       }),
     },
+    ConversationSelectDirectMessageRecipients: {
+      screen: ConversationSelectDirectMessageRecipientsScreen,
+      if: useDirectMessagesEnabled,
+      options: ({ navigation, route }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton
+            {...props}
+            onPress={() => navigation.popTo('Conversations', route.params)}
+            title="Cancel"
+          />
+        ),
+      }),
+    },
     ConversationFilterRecipients: {
       screen: ConversationFilterRecipientsScreen,
       options: ConversationFilterReceipientsScreenOptions,
@@ -265,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 },

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

@@ -17,13 +17,26 @@ import { FilterTypes } from '../filter_types'
 import { FilteredGroup } from '../hooks/filters'
 import { ConversationFilterStackParamList } from '../screen_props'
 
-export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
+export type FilterProps = {
+  group_source_app_name?: string
+  show_direct_messages?: boolean
+  isActive: boolean
+  filter: FilterTypes
+}
 
-export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
+export const FilterRow = ({
+  group_source_app_name,
+  show_direct_messages,
+  isActive,
+  filter,
+}: FilterProps) => {
   const { setAppFilter } = useContext(FilterContext)
 
   return (
-    <PressableRow onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>
+    <PressableRow
+      onPress={() => setAppFilter({ group_source_app_name, show_direct_messages })}
+      isActive={isActive}
+    >
       <Text>{filter}</Text>
     </PressableRow>
   )

package/src/screens/conversation_filters/context/conversation_filter_context.tsx

@@ -21,6 +21,7 @@ export const FilterContext = createContext<{
   params: {
     chat_group_graph_id: undefined,
     group_source_app_name: undefined,
+    show_direct_messages: undefined,
   },
   scrollOffset: 0,
   setScrollOffset: () => {},
@@ -55,6 +56,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         StackActions.popTo('Conversations', {
           chat_group_graph_id: undefined,
           group_source_app_name: undefined,
+          show_direct_messages: undefined,
         })
       )
     },
@@ -62,12 +64,14 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
       navigation.setParams({
         chat_group_graph_id: params.chat_group_graph_id,
         group_source_app_name: undefined,
+        show_direct_messages: undefined,
       })
     },
     setAppFilter: (params: Omit<ConversationFiltersParams, 'chat_group_graph_id'>) => {
       navigation.setParams({
         chat_group_graph_id: undefined,
         group_source_app_name: params.group_source_app_name,
+        show_direct_messages: params.show_direct_messages,
       })
     },
     applyFilters: (params: ConversationFiltersParams) => {

package/src/screens/conversation_filters/filter_types.ts

@@ -1,5 +1,6 @@
 export enum FilterTypes {
   All = 'All conversations',
+  DirectMessages = 'Direct messages',
   Groups = 'All my groups',
   Teams = 'All my teams and plans',
   More = 'More',

package/src/screens/conversation_filters/screen_props.ts

@@ -4,6 +4,7 @@ import { GraphId } from '../../types/resources/group_resource'
 export type ConversationFiltersParams = {
   chat_group_graph_id?: GraphId
   group_source_app_name?: string
+  show_direct_messages?: boolean
 }
 
 export type ConversationFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>

package/src/screens/conversation_screen.tsx

@@ -239,7 +239,8 @@ function ConversationBottomBar({
   replyRootId,
   currentlyEditingMessage,
 }: ConversationBottomBarProps) {
-  if (conversation.disabled) return <ConversationDisabledBanner />
+  if (conversation.disabled)
+    return <ConversationDisabledBanner disabledReason={conversation.disabledReason} />
   if (!canReply) return <MemberMessagesDisabledBanner />
   return (
     <MessageForm.Root