@planningcenter/chat-react-native 3.39.0-rc.7 → 3.39.0-rc.9

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/conversations/components/list_header_component.tsx

@@ -2,14 +2,18 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo } from 'react'
 import { Alert, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
-import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'
-import { useCanCreateConversations } from '../../../hooks'
+import {
+  useAtFontScaleBreakpoint,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEnabled,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
 import { useAppName } from '../../../hooks/use_app_name'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
-import { useDirectMessagesEnabled } from '../../../hooks/use_direct_messages_enabled'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
-import { useHasDirectMessages } from '../../../hooks/use_has_direct_messages'
-import { useNewConversationEntry } from '../../../hooks/use_new_conversation_entry'
 import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
 import { GraphId } from '../../../types/resources/group_resource'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
@@ -87,6 +91,10 @@ export const ListHeaderComponent = () => {
     }
   }, [navigation, route.params, entryMode, newConversationFromFilter])
 
+  const handleChatSettings = useCallback(() => {
+    navigation.navigate('ChatSettings', {})
+  }, [navigation])
+
   const handleMoreOptions = useCallback(() => {
     navigation.navigate('ConversationsMoreActions')
   }, [navigation])
@@ -95,8 +103,9 @@ export const ListHeaderComponent = () => {
     navigation.navigate('ConversationFilters', {
       chat_group_graph_id,
       group_source_app_name,
+      show_direct_messages,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name])
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
@@ -148,6 +157,14 @@ export const ListHeaderComponent = () => {
           </TextButton>
         </View>
         <View style={styles.actionsContainer}>
+          {directMessagesEnabled && (
+            <ListHeaderActionButton
+              name="general.cog"
+              onPress={handleChatSettings}
+              accessibilityLabel="Chat settings"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
           {canCreateConversations && (
             <ListHeaderActionButton
               name="churchCenter.signups"

package/src/screens/index.ts

@@ -1,3 +1,4 @@
+export * from './settings_screen'
 export * from './design_system_screen'
 export * from './conversation_details_screen'
 export * from './conversation_screen'

package/src/screens/settings_screen.tsx

@@ -0,0 +1,67 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Heading, Text } from '../components'
+import { Switch } from '../components/display/switch'
+import { useTheme } from '../hooks'
+import { usePersonSettings } from '../hooks/use_person_settings'
+
+export type SettingsScreenProps = StaticScreenProps<{}>
+
+export function SettingsScreen({}: SettingsScreenProps) {
+  const styles = useStyles()
+  const { directMessagesDisabled, setDirectMessagesDisabled, isMutating } = usePersonSettings()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.sectionOuter}>
+        <View style={styles.sectionHeader}>
+          <Heading variant="h2">Messages</Heading>
+        </View>
+        <View style={styles.settingRow}>
+          <View style={styles.settingRowText}>
+            <Text>Allow direct messages</Text>
+            <Text variant="tertiary">
+              When disabled, you won't be able to participate in direct messages.
+            </Text>
+          </View>
+          <Switch
+            value={!directMessagesDisabled}
+            onValueChange={enabled => setDirectMessagesDisabled(!enabled)}
+            disabled={isMutating}
+          />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    sectionOuter: {
+      paddingLeft: 16,
+    },
+    sectionHeader: {
+      paddingRight: 16,
+      paddingTop: 24,
+      paddingBottom: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+    },
+    settingRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      paddingRight: 16,
+      paddingVertical: 12,
+    },
+    settingRowText: {
+      flex: 1,
+      gap: 8,
+    },
+  })
+}

package/src/types/resources/person.ts

@@ -21,4 +21,5 @@ export interface CurrentPersonResource extends PersonResource {
   unreadCount: number
   pcoChatEnabled: boolean
   ageQualificationStatus?: AgeQualificationStatus
+  directMessagesDisabled: boolean
 }