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

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

@@ -59,9 +59,9 @@ export const GroupRow = ({ group, isActive }: GroupRowProps) => {
 
   return (
     <PressableRow onPress={handleFilterByGroup} isActive={isActive}>
-      {headerImage?.medium && (
+      {headerImage?.thumbnail && (
         <Image
-          source={{ uri: headerImage?.medium }}
+          source={{ uri: headerImage?.thumbnail }}
           resizeMode="cover"
           style={styles.rowImage}
           alt=""

package/src/screens/conversation_filters_screen.tsx

@@ -1,4 +1,5 @@
 import { useHeaderHeight } from '@react-navigation/elements'
+import * as ReactNavigationNative from '@react-navigation/native'
 import { RouteProp, useRoute } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React, { useCallback } from 'react'
@@ -58,7 +59,26 @@ const FilterNavigator = createNativeStackNavigator<ConversationFilterStackParamL
   },
 })
 
-const Filters = FilterNavigator.getComponent()
+// tree.getComponent() doesn't exist on every host's installed
+// react-navigation/core — hosts on an older version would throw here.
+// Where it does exist, it's the real implementation (the "deprecated"
+// createComponentForStaticNavigation is just a console.warn wrapper around
+// the same call on current versions), so prefer it and only reach for the
+// old function on cores where getComponent() genuinely isn't there yet.
+function createStaticNavigationComponent<P extends object>(
+  tree: { getComponent?: () => React.ComponentType<P> },
+  name: string
+): React.ComponentType<P> {
+  if (typeof tree.getComponent === 'function') return tree.getComponent()
+
+  const { createComponentForStaticNavigation } = ReactNavigationNative as {
+    createComponentForStaticNavigation: (tree: unknown, name: string) => React.ComponentType<P>
+  }
+
+  return createComponentForStaticNavigation(tree, name)
+}
+
+const Filters = createStaticNavigationComponent(FilterNavigator, 'Filters')
 
 export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps) => {
   const styles = useStyles()

package/src/screens/conversation_screen.tsx

@@ -9,7 +9,7 @@ import {
   useRoute,
 } from '@react-navigation/native'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
@@ -25,7 +25,6 @@ import { ReplyShadowMessage } from '../components/conversation/reply_shadow_mess
 import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
-import { useHeaderSlotReserve } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
@@ -46,7 +45,6 @@ import { ConversationBadgeResource } from '../types/resources/conversation_badge
 import { MessageResource } from '../types/resources/message'
 import { getRelativeDateStatus } from '../utils/date'
 import { groupMessages, type DateSeparator } from '../utils/group_messages'
-import { isLiquidGlassEnabled } from '../utils/liquid_glass'
 import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { isSystemMessage } from '../utils/system_messages'
 
@@ -259,7 +257,7 @@ function ConversationBottomBar({
   if (conversation.disabled)
     return (
       <ConversationDisabledBanner
-        message={conversation.disabledMessage ?? null}
+        disabledReason={conversation.disabledReason}
         messageLink={messageLink}
       />
     )
@@ -376,17 +374,11 @@ export const ConversationScreenTitle = ({
 }
 
 const usePressableHeaderStyle = () => {
-  const { width } = useWindowDimensions()
-  const slotReserve = useHeaderSlotReserve()
-  const headerContainerStyle = isLiquidGlassEnabled()
-    ? { maxWidth: width - slotReserve * 2 }
-    : { marginRight: Platform.select({ default: 20, android: 16 }) }
-
   return StyleSheet.create({
     container: {
       alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
+      marginRight: Platform.select({ ios: 20, default: 16 }),
       flex: 1,
-      ...headerContainerStyle,
     },
     titleWrapper: {
       alignItems: 'center',

package/src/screens/conversation_select_recipients/components/groups_recipient_row.tsx

@@ -12,7 +12,7 @@ export const GroupsRecipientRow = ({ group, onPress }: GroupsRecipientRowProps)
 
   return (
     <RecipientLinkRow
-      imageUri={group.headerImage?.medium}
+      imageUri={group.headerImage?.thumbnail}
       title={group.name}
       subtitle={`${group.membershipsCount} members`}
       onPress={() => onPress(group)}

package/src/screens/conversation_select_recipients/components/restricted_group_row.tsx

@@ -29,9 +29,9 @@ export const RestrictedGroupRow = ({ group }: RestrictedGroupRowProps) => {
       accessibilityLabel={`${group.name} — ${reasonText(group.canCreateConversationReasonCode)}`}
     >
       <View style={styles.innerContainer}>
-        {group.headerImage?.medium && (
+        {group.headerImage?.thumbnail && (
           <Image
-            source={{ uri: group.headerImage.medium }}
+            source={{ uri: group.headerImage.thumbnail }}
             resizeMode="cover"
             style={styles.image}
             alt=""

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

@@ -10,7 +10,7 @@ import { Spinner, Text, KeyboardView } from '../components'
 import {
   composeOptions,
   useHeaderRight,
-  withLeftClose,
+  withLeftText,
 } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { useTheme } from '../hooks'
@@ -37,7 +37,7 @@ export const MessageReportScreenOptions = ({
 
   return composeOptions(
     { presentation: 'modal', title: 'Report message' },
-    withLeftClose({ onPress: handleClose })
+    withLeftText({ text: 'Cancel', onPress: handleClose })
   )
 }
 
@@ -106,9 +106,7 @@ function MessageReportScreenContent({
   const formVisible = status !== 'pending' && status !== 'success'
 
   useHeaderRight({
-    icon: 'general.message',
-    accessibilityLabel: 'Submit',
-    variant: 'fill',
+    title: 'Submit',
     onPress: handleSubmit,
     disabled: !isFormValid,
     enabled: formVisible,

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, { 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 { useHeaderRight } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
 import { isDefined } from '../types'
 import { chatTypeLabel } from '../utils'
@@ -50,6 +51,8 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   const { data: chatTypes } = useChatTypes()
   const { data: groups } = useGroups()
 
+  useHeaderRight({ title: 'Done', onPress: navigation.goBack })
+
   // 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
-}