@planningcenter/chat-react-native 3.42.3-qa-staging.6 → 3.43.0-rc.0

package/src/screens/conversation_select_type_screen.tsx

@@ -2,6 +2,7 @@ import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { useLayoutEffect } from 'react'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCurrentPerson } from '../hooks/use_current_person'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { useConversationTypeAccess } from '../hooks/use_new_conversation_entry'
 import type { NewConversationFromFilter } from '../hooks/use_new_conversation_from_filter'
 import { AppName } from '../types/resources/app_name'
@@ -27,15 +28,17 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
   const navigation = useNavigation()
   const { canCreateGroupsConversations, canCreateServicesConversations } =
     useConversationTypeAccess()
-  const { directMessagesDisabled, directMessagesEligible } = useCurrentPerson()
+  const { featureEnabled } = useFeatures()
+  const { directMessagesDisabled, under_18 } = useCurrentPerson()
   const { newConversationFromFilter, chat_group_graph_id, group_source_app_name } =
     route.params || {}
 
   const filterParams = { chat_group_graph_id, group_source_app_name }
-  const showDirectMessageOption = directMessagesEligible
+  const dmFeatureEnabled = featureEnabled(availableFeatures.direct_messages_eap)
+  const showDirectMessageOption = dmFeatureEnabled && !under_18
 
-  // sheetAllowedDetents depends on DM eligibility, which isn't known until render, so it's set
-  // here instead of in the static ConversationSelectTypeScreenOptions. useLayoutEffect applies
+  // sheetAllowedDetents depends on the DM feature flag, which isn't known until render, so it's
+  // set here instead of in the static ConversationSelectTypeScreenOptions. useLayoutEffect applies
   // it before paint so the sheet never visibly resizes after opening.
   useLayoutEffect(() => {
     navigation.setOptions({ sheetAllowedDetents: showDirectMessageOption ? [0.3] : [0.25] })

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

@@ -6,7 +6,7 @@ import {
   useAtFontScaleBreakpoint,
   useCanCreateConversations,
   useCurrentPersonCache,
-  useDirectMessagesEligible,
+  useDirectMessagesEnabled,
   useHasDirectMessages,
   useNewConversationEntry,
   useTheme,
@@ -35,9 +35,9 @@ export const ListHeaderComponent = () => {
   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 directMessagesEnabled = useDirectMessagesEnabled()
   const hasDirectMessages = useHasDirectMessages()
-  const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const canFilterByDMs = directMessagesEnabled && hasDirectMessages
   const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
   const {
     chat_group_graph_id,

package/src/screens/message_report_screen.tsx

@@ -8,9 +8,8 @@ import { View, StyleSheet, TextInput, ScrollView } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Spinner, Text, KeyboardView } from '../components'
 import {
-  composeOptions,
-  useHeaderRight,
-  withLeftClose,
+  HeaderDismissButton,
+  HeaderTextButton,
 } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { useTheme } from '../hooks'
@@ -35,10 +34,11 @@ export const MessageReportScreenOptions = ({
       })
     )
 
-  return composeOptions(
-    { presentation: 'modal', title: 'Report message' },
-    withLeftClose({ onPress: handleClose })
-  )
+  return {
+    presentation: 'modal',
+    title: 'Report message',
+    headerLeft: () => <HeaderDismissButton title="Cancel" onPress={handleClose} />,
+  }
 }
 
 export type MessageReportScreenProps = StaticScreenProps<{
@@ -103,22 +103,23 @@ function MessageReportScreenContent({
     navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }))
   }, [navigation, conversation_id])
 
-  const formVisible = status !== 'pending' && status !== 'success'
-
-  useHeaderRight({
-    icon: 'general.message',
-    accessibilityLabel: 'Submit',
-    variant: 'fill',
-    onPress: handleSubmit,
-    disabled: !isFormValid,
-    enabled: formVisible,
-  })
+  const HeaderRight = useCallback(
+    () => <HeaderTextButton title="Submit" onPress={handleSubmit} disabled={!isFormValid} />,
+    [handleSubmit, isFormValid]
+  )
 
   useLayoutEffect(() => {
-    if (formVisible) {
-      navigation.setOptions({ headerTitle: 'Report message' })
+    if (status === 'pending' || status === 'success') {
+      navigation.setOptions({
+        headerRight: () => null,
+      })
+    } else {
+      navigation.setOptions({
+        headerTitle: 'Report message',
+        headerRight: HeaderRight,
+      })
     }
-  }, [formVisible, navigation])
+  }, [HeaderRight, navigation, status])
 
   if (status === 'pending') {
     return (

package/src/screens/notification_settings_screen.tsx

@@ -1,9 +1,10 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import { type ReactNode } from 'react'
+import React, { useCallback, useEffect, type ReactNode } from 'react'
 import { FlatList, Platform, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Heading, Icon, Text } from '../components'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
 import { isDefined } from '../types'
 import { chatTypeLabel } from '../utils'
@@ -50,6 +51,25 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   const { data: chatTypes } = useChatTypes()
   const { data: groups } = useGroups()
 
+  // Header configuration
+  const HeaderRight = useCallback(() => {
+    return (
+      <HeaderTextButton
+        onPress={() => {
+          // Save settings logic would go here
+          navigation.goBack()
+        }}
+        title="Done"
+      />
+    )
+  }, [navigation])
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: HeaderRight,
+    })
+  }, [HeaderRight, navigation])
+
   // Build section data
   const listData = [
     {

package/src/screens/settings_screen.tsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { Switch } from '../components/display/switch'
-import { useDirectMessagesEligible, useTheme } from '../hooks'
+import { useDirectMessagesEnabled, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
 import { usePersonSettings } from '../hooks/use_person_settings'
 
@@ -13,7 +13,7 @@ export type SettingsScreenProps = StaticScreenProps<{}>
 export function SettingsScreen({}: SettingsScreenProps) {
   const styles = useStyles()
   const { directMessagesDisabled, setDirectMessagesDisabled, isMutating } = usePersonSettings()
-  const directMessagesEligible = useDirectMessagesEligible()
+  const directMessagesEnabled = useDirectMessagesEnabled()
   const appName = useAppName()
   const navigation = useNavigation()
 
@@ -31,7 +31,7 @@ export function SettingsScreen({}: SettingsScreenProps) {
         <View style={styles.sectionHeader}>
           <Heading variant="h2">Messages</Heading>
         </View>
-        {directMessagesEligible && (
+        {directMessagesEnabled && (
           <View style={styles.settingRow}>
             <View style={styles.settingRowText}>
               <Text>Allow direct messages</Text>

package/src/types/jolt_events/conversation_events.ts

@@ -1,4 +1,5 @@
 import type { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
+import type { ConversationDisabledReason } from '../resources/conversation'
 
 type DateString = string
 interface BaseConversationEventData extends Record<string, unknown> {
@@ -15,8 +16,7 @@ interface BaseConversationEventData extends Record<string, unknown> {
     latest_read_message_sort_key?: string
     organization_id: number
     disabled: boolean
-    disabled_reason: string | null
-    disabled_message: string | null
+    disabled_reason?: ConversationDisabledReason
     replies_disabled: boolean
     subtitle?: string
     title: string

package/src/types/resources/conversation.ts

@@ -5,6 +5,8 @@ import { GroupResource } from './group_resource'
 import { MemberAbilityResource } from './member_ability'
 import { ReactionCountResource } from './reaction'
 
+export type ConversationDisabledReason = 'safety_check' | 'direct_messages_disabled'
+
 export interface ConversationPreviewData {
   kind: 'reaction' | 'message'
   authorName: string
@@ -24,8 +26,7 @@ export interface ConversationResource {
   deleted?: boolean
   directMessage?: boolean
   disabled?: boolean
-  disabledReason?: string | null
-  disabledMessage?: string | null
+  disabledReason?: ConversationDisabledReason
   genderOption?: string | null
   groups?: GroupResource[]
   previewAvatarUrls?: string[]

package/src/types/resources/person.ts

@@ -22,6 +22,5 @@ export interface CurrentPersonResource extends PersonResource {
   pcoChatEnabled: boolean
   ageQualificationStatus?: AgeQualificationStatus
   directMessagesDisabled: boolean
-  directMessagesEligible: boolean
   under_18: boolean
 }

package/src/utils/conversation_safety_constants.ts

@@ -1,2 +1,2 @@
 export const ADULT_REQUIREMENT_BODY =
-  'Conversations with minors require at least two adults. This chat is paused until more adults are added.'
+  'Conversations with teens require at least 2 adults. This chat is paused until another adult is added.'

package/src/utils/request/conversation.ts

@@ -41,7 +41,6 @@ export const getConversationsRequestArgs = ({
           'conversation_preview',
           'disabled',
           'disabled_reason',
-          'disabled_message',
           'groups',
           'last_message_author_id',
           'last_message_author_name',

package/build/hooks/use_direct_messages_eligible.d.ts

@@ -1,2 +0,0 @@
-export declare const useDirectMessagesEligible: () => boolean;
-//# sourceMappingURL=use_direct_messages_eligible.d.ts.map

package/build/hooks/use_direct_messages_eligible.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_direct_messages_eligible.d.ts","sourceRoot":"","sources":["../../src/hooks/use_direct_messages_eligible.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,yBAAyB,QAAO,OAM5C,CAAA"}

package/build/hooks/use_direct_messages_eligible.js

@@ -1,9 +0,0 @@
-import { useApiGet } from './use_api';
-import { currentPersonRequestArgs } from './use_current_person';
-export const useDirectMessagesEligible = () => {
-    const { data: person, isFetched } = useApiGet(currentPersonRequestArgs);
-    if (!isFetched)
-        return false;
-    return person?.directMessagesEligible ?? false;
-};
-//# sourceMappingURL=use_direct_messages_eligible.js.map

package/build/hooks/use_direct_messages_eligible.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_direct_messages_eligible.js","sourceRoot":"","sources":["../../src/hooks/use_direct_messages_eligible.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA;AAE/D,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAY,EAAE;IACrD,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,CAAwB,wBAAwB,CAAC,CAAA;IAE9F,IAAI,CAAC,SAAS;QAAE,OAAO,KAAK,CAAA;IAE5B,OAAO,MAAM,EAAE,sBAAsB,IAAI,KAAK,CAAA;AAChD,CAAC,CAAA","sourcesContent":["import { CurrentPersonResource } from '../types'\nimport { useApiGet } from './use_api'\nimport { currentPersonRequestArgs } from './use_current_person'\n\nexport const useDirectMessagesEligible = (): boolean => {\n  const { data: person, isFetched } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs)\n\n  if (!isFetched) return false\n\n  return person?.directMessagesEligible ?? false\n}\n"]}

package/src/__tests__/hooks/use_direct_messages_eligible.test.tsx

@@ -1,77 +0,0 @@
-import { QueryClientProvider } from '@tanstack/react-query'
-import { act, renderHook, waitFor } from '@testing-library/react-native'
-import React from 'react'
-import { buildTestQueryClient } from '../../__utils__/query_client'
-import { ChatContext, ChatContextValue } from '../../contexts/chat_context'
-import { ApiClient, useApiClient } from '../../hooks/use_api_client'
-import { currentPersonQueryKey } from '../../hooks/use_current_person'
-import { useDirectMessagesEligible } from '../../hooks/use_direct_messages_eligible'
-import { Session } from '../../utils'
-
-jest.mock('../../hooks/use_api_client')
-
-const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
-
-let get: jest.Mock
-
-const session = new Session({ token: { access_token: 'a-real-token' } })
-
-const renderUseDirectMessagesEligible = (queryClient = buildTestQueryClient()) => {
-  const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      <ChatContext.Provider value={{ session } as unknown as ChatContextValue}>
-        {children}
-      </ChatContext.Provider>
-    </QueryClientProvider>
-  )
-
-  return { ...renderHook(() => useDirectMessagesEligible(), { wrapper }), queryClient }
-}
-
-const flushMicrotasks = () =>
-  act(async () => {
-    await new Promise(resolve => setTimeout(resolve, 0))
-  })
-
-beforeEach(() => {
-  get = jest.fn().mockResolvedValue({ data: { id: 1, directMessagesEligible: true } })
-  mockedUseApiClient.mockReturnValue({ chat: { get } } as unknown as ApiClient)
-})
-
-afterEach(() => {
-  jest.clearAllMocks()
-})
-
-describe('useDirectMessagesEligible', () => {
-  it('returns true once the person is fetched as eligible', async () => {
-    get.mockResolvedValue({
-      data: { id: 1, directMessagesEligible: true, directMessagesDisabled: true },
-    })
-
-    const { result } = renderUseDirectMessagesEligible()
-
-    await waitFor(() => expect(result.current).toBe(true))
-  })
-
-  it('returns false when the attribute is absent from the response', async () => {
-    get.mockResolvedValue({ data: { id: 1 } })
-
-    const { result } = renderUseDirectMessagesEligible()
-
-    await waitFor(() => expect(get).toHaveBeenCalled())
-    await flushMicrotasks()
-
-    expect(result.current).toBe(false)
-  })
-
-  it('reads the same /me cache entry as useCurrentPerson', () => {
-    const queryClient = buildTestQueryClient()
-    queryClient.setQueryData(currentPersonQueryKey, {
-      data: { id: 1, directMessagesEligible: true },
-    })
-
-    const { result } = renderUseDirectMessagesEligible(queryClient)
-
-    expect(result.current).toBe(true)
-  })
-})

package/src/hooks/use_direct_messages_eligible.ts

@@ -1,11 +0,0 @@
-import { CurrentPersonResource } from '../types'
-import { useApiGet } from './use_api'
-import { currentPersonRequestArgs } from './use_current_person'
-
-export const useDirectMessagesEligible = (): boolean => {
-  const { data: person, isFetched } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs)
-
-  if (!isFetched) return false
-
-  return person?.directMessagesEligible ?? false
-}