@planningcenter/chat-react-native 3.42.3-qa-staging.6 → 3.42.3-qa-staging.7

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/resources/person.ts

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

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
-}