@planningcenter/chat-react-native 3.39.0-rc.1 → 3.39.0-rc.11

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

@@ -2,12 +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 { useCanDisplayGroups } from '../../../hooks/use_groups'
-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'
@@ -22,6 +28,7 @@ enum FilterTypes {
   All = 'All',
   Groups = 'Groups',
   Teams = 'Teams',
+  DMs = 'DMs',
   More = 'More',
 }
 
@@ -29,8 +36,15 @@ 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 hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEnabled && hasDirectMessages
   const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
-  const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}
+  const {
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+  } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
   const canCreateConversations = useCanCreateConversations()
@@ -47,10 +61,12 @@ export const ListHeaderComponent = () => {
       return FilterTypes.Groups
     } else if (/services/i.test(group_source_app_name)) {
       return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DMs
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
 
   const handleNewConversationNavigation = useCallback(() => {
     if (newConversationFromFilter || entryMode === 'select_type') {
@@ -75,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])
@@ -83,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 })
@@ -103,8 +124,8 @@ export const ListHeaderComponent = () => {
 
   const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups
   const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups
-  const shouldShowHeaderFiltersButton =
-    hasSomeSourceFilterCapability && !hasMultiSourceFilterCapabilities
+  const showFilterRow = hasMultiSourceFilterCapabilities || canFilterByDMs
+  const shouldShowHeaderFiltersButton = hasSomeSourceFilterCapability && !showFilterRow
   const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton
     ? 'View filters'
     : 'View more filters'
@@ -136,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"
@@ -156,7 +185,7 @@ export const ListHeaderComponent = () => {
           {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
         </View>
       </View>
-      {hasMultiSourceFilterCapabilities && (
+      {showFilterRow && (
         <ScrollView
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -170,36 +199,57 @@ export const ListHeaderComponent = () => {
               navigation.setParams({
                 chat_group_graph_id: undefined,
                 group_source_app_name: undefined,
+                show_direct_messages: undefined,
               })
             }
             accessibilityLabel="Show all conversations"
             style={styles.filterButton}
           />
-          <ToggleButton
-            title={FilterTypes.Groups}
-            active={active === FilterTypes.Groups}
-            onPress={() =>
-              navigation.setParams({
-                chat_group_graph_id: undefined,
-                group_source_app_name: 'Groups',
-              })
-            }
-            accessibilityLabel="Filter to group conversations"
-            style={styles.filterButton}
-          />
-
-          <ToggleButton
-            title={FilterTypes.Teams}
-            active={active === FilterTypes.Teams}
-            onPress={() =>
-              navigation.setParams({
-                chat_group_graph_id: undefined,
-                group_source_app_name: 'Services',
-              })
-            }
-            accessibilityLabel="Filter to team conversations"
-            style={styles.filterButton}
-          />
+          {canFilterByGroups && (
+            <ToggleButton
+              title={FilterTypes.Groups}
+              active={active === FilterTypes.Groups}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: 'Groups',
+                  show_direct_messages: undefined,
+                })
+              }
+              accessibilityLabel="Filter to group conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByTeams && (
+            <ToggleButton
+              title={FilterTypes.Teams}
+              active={active === FilterTypes.Teams}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: 'Services',
+                  show_direct_messages: undefined,
+                })
+              }
+              accessibilityLabel="Filter to team conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByDMs && (
+            <ToggleButton
+              title={FilterTypes.DMs}
+              active={active === FilterTypes.DMs}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: undefined,
+                  show_direct_messages: true,
+                })
+              }
+              accessibilityLabel="Filter to direct message conversations"
+              style={styles.filterButton}
+            />
+          )}
           <ToggleButton {...moreFiltersButtonProps} />
         </ScrollView>
       )}

package/src/screens/conversations/conversations_screen.tsx

@@ -12,6 +12,7 @@ export type ConversationsScreenProps = StaticScreenProps<{
   title?: string
   chat_group_graph_id?: GraphId
   group_source_app_name?: AppName
+  show_direct_messages?: boolean
 }>
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {

package/src/screens/get_help_screen.tsx

@@ -4,6 +4,7 @@ import { Alert, Linking, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
+import { useOrganization } from '../hooks/use_organization'
 import { ResourceObject } from '../types'
 import { Clipboard } from '../utils'
 
@@ -13,34 +14,6 @@ type GetHelpScreenRouteProps = {
 
 type GetHelpScreenProps = StaticScreenProps<GetHelpScreenRouteProps>
 
-interface OrganizationResource extends ResourceObject {
-  id: number
-  name: string
-  contactEmail: string
-  contactPhoneNumber: string
-  churchCenterChatHelpUrl: string
-  servicesChatHelpUrl: string
-}
-
-const useOrganization = () => {
-  const { data: organization } = useApiGet<OrganizationResource>({
-    url: '/',
-    data: {
-      fields: {
-        Organization: [
-          'contact_phone_number',
-          'contact_email',
-          'name',
-          'church_center_chat_help_url',
-          'services_chat_help_url',
-        ],
-      },
-    },
-  })
-
-  return organization
-}
-
 interface HelpUrlResource extends ResourceObject {
   id: number
   link: string
@@ -67,7 +40,7 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
   const styles = useStyles()
   const appName = useAppName()
   const navigation = useNavigation()
-  const organization = useOrganization()
+  const { data: organization } = useOrganization()
   const contactPresent = organization?.contactEmail || organization?.contactPhoneNumber
   const helpUrls = useHelpUrls()
   const appSpecificHelpUrls = useMemo(

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/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,6 +16,7 @@ interface BaseConversationEventData extends Record<string, unknown> {
     latest_read_message_sort_key?: string
     organization_id: number
     disabled: boolean
+    disabled_reason?: ConversationDisabledReason
     replies_disabled: boolean
     subtitle?: string
     title: string

package/src/types/resources/conversation.ts

@@ -4,6 +4,8 @@ import { ConversationMembershipResource } from './conversation_membership'
 import { GroupResource } from './group_resource'
 import { MemberAbilityResource } from './member_ability'
 
+export type ConversationDisabledReason = 'safety_check' | 'direct_messages_disabled'
+
 export interface ConversationResource {
   type: 'Conversation'
   id: number
@@ -13,6 +15,7 @@ export interface ConversationResource {
   createdAt: string
   deleted?: boolean
   disabled?: boolean
+  disabledReason?: ConversationDisabledReason
   genderOption?: string | null
   groups?: GroupResource[]
   previewAvatarUrls?: string[]

package/src/types/resources/organization.ts

@@ -3,5 +3,6 @@ import { ResourceObject } from '../api_primitives'
 export interface OrganizationResource extends ResourceObject {
   type: 'Organization'
   contactEmail?: string
+  contactPhoneNumber?: string
   name?: string
 }

package/src/types/resources/person.ts

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

package/src/utils/__tests__/conversation.test.ts

@@ -0,0 +1,14 @@
+import { getConversationsRequestArgs } from '../request/conversation'
+
+const groupId = 'Groups-Group-1' as const
+
+describe('getConversationsRequestArgs', () => {
+  it.each([
+    ['no args', {}, 'mine_or_not_empty'],
+    ['group_source_app_name', { group_source_app_name: 'Groups' }, 'group_source_app_name'],
+    ['chat_group_graph_id', { chat_group_graph_id: groupId }, 'group'],
+    ['show_direct_messages', { show_direct_messages: true }, 'mine_or_not_empty,direct_message'],
+  ])('%s uses filter: %s', (_label, args, expectedFilter) => {
+    expect(getConversationsRequestArgs(args).data.filter).toBe(expectedFilter)
+  })
+})

package/src/utils/request/conversation.ts

@@ -5,18 +5,25 @@ export interface ConversationRequestArgs {
   gids: string
   chat_group_graph_id?: GraphId
   group_source_app_name?: string
+  show_direct_messages?: boolean
 }
 
 export const getConversationsRequestArgs = ({
   gids,
   chat_group_graph_id,
   group_source_app_name,
+  show_direct_messages,
 }: Partial<ConversationRequestArgs> = {}): GetRequest => {
-  const filter = chat_group_graph_id
-    ? 'group'
-    : group_source_app_name
-      ? 'group_source_app_name'
-      : 'mine_or_not_empty'
+  let filter: string
+  if (chat_group_graph_id) {
+    filter = 'group'
+  } else if (show_direct_messages) {
+    filter = 'mine_or_not_empty,direct_message'
+  } else if (group_source_app_name) {
+    filter = 'group_source_app_name'
+  } else {
+    filter = 'mine_or_not_empty'
+  }
 
   return {
     url: '/me/conversations',
@@ -32,6 +39,7 @@ export const getConversationsRequestArgs = ({
           'created_at',
           'badges',
           'disabled',
+          'disabled_reason',
           'groups',
           'last_message_author_id',
           'last_message_author_name',

package/src/utils/time.ts

@@ -0,0 +1,17 @@
+type TimeUnit = 'hours' | 'minutes' | 'seconds'
+
+export function toMs(value: number, unit: TimeUnit): number {
+  switch (unit) {
+    case 'hours':
+      return value * 60 * 60 * 1000
+    case 'minutes':
+      return value * 60 * 1000
+    case 'seconds':
+      return value * 1000
+  }
+}
+
+export const FIVE_SECONDS = toMs(5, 'seconds')
+export const FIVE_MINUTES = toMs(5, 'minutes')
+export const THIRTY_MINUTES = toMs(30, 'minutes')
+export const ONE_HOUR = toMs(1, 'hours')