@planningcenter/chat-react-native 3.42.3-qa-staging.1 → 3.42.3-qa-staging.3

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

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

package/src/screens/message_report_screen.tsx

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

package/src/screens/notification_settings_screen.tsx

@@ -1,10 +1,9 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React, { useCallback, useEffect, type ReactNode } from 'react'
+import { 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'
@@ -51,25 +50,6 @@ 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 { useDirectMessagesEnabled, useTheme } from '../hooks'
+import { useDirectMessagesEligible, 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 directMessagesEnabled = useDirectMessagesEnabled()
+  const directMessagesEligible = useDirectMessagesEligible()
   const appName = useAppName()
   const navigation = useNavigation()
 
@@ -31,7 +31,7 @@ export function SettingsScreen({}: SettingsScreenProps) {
         <View style={styles.sectionHeader}>
           <Heading variant="h2">Messages</Heading>
         </View>
-        {directMessagesEnabled && (
+        {directMessagesEligible && (
           <View style={styles.settingRow}>
             <View style={styles.settingRowText}>
               <Text>Allow direct messages</Text>

package/src/types/resources/person.ts

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

package/src/utils/index.ts

@@ -6,6 +6,7 @@ export * from './client'
 export * from './convert_attachments_for_create'
 export * from './destructure_chat_group_graph_id'
 export * from './host_bridge'
+export * from './liquid_glass'
 export * from './native_adapters'
 export * from './pluralize'
 export * from './conversation_safety_constants'

package/src/utils/liquid_glass.ts

@@ -0,0 +1,12 @@
+import { Platform } from 'react-native'
+
+let hostLiquidGlassEnabled = false
+
+export const setLiquidGlassCapability = (enabled: boolean) => {
+  hostLiquidGlassEnabled = enabled
+}
+
+// The host flag is required because JS cannot detect a binary built with a
+// pre-iOS-26 SDK or opted out via UIDesignRequiresCompatibility.
+export const isLiquidGlassEnabled = () =>
+  hostLiquidGlassEnabled && Platform.OS === 'ios' && parseInt(String(Platform.Version), 10) >= 26

package/build/hooks/use_direct_messages_enabled.d.ts

@@ -1,2 +0,0 @@
-export declare function useDirectMessagesEnabled(): boolean;
-//# sourceMappingURL=use_direct_messages_enabled.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use_direct_messages_enabled.d.ts","sourceRoot":"","sources":["../../src/hooks/use_direct_messages_enabled.ts"],"names":[],"mappings":"AAOA,wBAAgB,wBAAwB,IAAI,OAAO,CAelD"}

package/build/hooks/use_direct_messages_enabled.js

@@ -1,16 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features';
-import { useApiClient } from './use_api_client';
-import { availableFeatures } from './use_features';
-export function useDirectMessagesEnabled() {
-    const apiClient = useApiClient();
-    const { data, isFetched } = useQuery({
-        queryKey: getFeaturesQueryKey(),
-        queryFn: () => apiClient.chat.get(getFeaturesRequestArgs()),
-        staleTime: 1000 * 60 * 5,
-    });
-    if (!isFetched)
-        return false;
-    return (data?.data.some(feature => feature.name === availableFeatures.direct_messages_eap && feature.enabled) ?? false);
-}
-//# sourceMappingURL=use_direct_messages_enabled.js.map

package/build/hooks/use_direct_messages_enabled.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_direct_messages_enabled.js","sourceRoot":"","sources":["../../src/hooks/use_direct_messages_enabled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,MAAM,UAAU,wBAAwB;IACtC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAiC;QACnE,QAAQ,EAAE,mBAAmB,EAAE;QAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAiC,sBAAsB,EAAE,CAAC;QAC3F,SAAS,EAAE,IAAI,GAAG,EAAE,GAAG,CAAC;KACzB,CAAC,CAAA;IAEF,IAAI,CAAC,SAAS;QAAE,OAAO,KAAK,CAAA;IAE5B,OAAO,CACL,IAAI,EAAE,IAAI,CAAC,IAAI,CACb,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,iBAAiB,CAAC,mBAAmB,IAAI,OAAO,CAAC,OAAO,CACrF,IAAI,KAAK,CACX,CAAA;AACH,CAAC","sourcesContent":["import { useQuery } from '@tanstack/react-query'\nimport { ApiCollection } from '../types'\nimport type { FeatureResource } from '../types/resources/feature_resource'\nimport { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'\nimport { useApiClient } from './use_api_client'\nimport { availableFeatures } from './use_features'\n\nexport function useDirectMessagesEnabled(): boolean {\n  const apiClient = useApiClient()\n  const { data, isFetched } = useQuery<ApiCollection<FeatureResource>>({\n    queryKey: getFeaturesQueryKey(),\n    queryFn: () => apiClient.chat.get<ApiCollection<FeatureResource>>(getFeaturesRequestArgs()),\n    staleTime: 1000 * 60 * 5,\n  })\n\n  if (!isFetched) return false\n\n  return (\n    data?.data.some(\n      feature => feature.name === availableFeatures.direct_messages_eap && feature.enabled\n    ) ?? false\n  )\n}\n"]}

package/src/hooks/use_direct_messages_enabled.ts

@@ -1,23 +0,0 @@
-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
-  )
-}