@planningcenter/chat-react-native 3.39.0-rc.8 → 3.39.0

package/src/components/primitive/form_sheet.tsx

@@ -242,6 +242,7 @@ interface FormSheetActionProps {
   accessibilityRole?: AccessibilityRole
   appearance?: FormSheetActionAppearanceUnion
   disabled?: boolean
+  disabledReason?: string
 }
 
 function FormSheetAction({
@@ -253,14 +254,17 @@ function FormSheetAction({
   accessibilityRole = 'button',
   appearance = 'neutral',
   disabled = false,
+  disabledReason,
 }: FormSheetActionProps) {
-  const styles = useStyles({ appearance })
+  const styles = useStyles({ appearance, disabled })
 
   return (
     <PlatformPressable
       onPress={onPress}
       accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
+      accessibilityHint={
+        accessibilityHint ?? (disabled && disabledReason ? disabledReason : undefined)
+      }
       accessibilityRole={accessibilityRole}
       style={styles.actionPressable}
       disabled={disabled}
@@ -268,7 +272,12 @@ function FormSheetAction({
       {iconName && (
         <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />
       )}
-      <Text style={styles.actionTitle}>{title}</Text>
+      <View style={styles.actionTextBlock}>
+        <Text style={styles.actionTitle}>{title}</Text>
+        {disabled && disabledReason && (
+          <Text style={styles.actionDisabledReason}>{disabledReason}</Text>
+        )}
+      </View>
     </PlatformPressable>
   )
 }
@@ -281,9 +290,10 @@ FormSheetAction.displayName = 'FormSheet.Action'
 
 interface Styles {
   appearance?: FormSheetActionAppearanceUnion
+  disabled?: boolean
 }
 
-const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
+const useStyles = ({ appearance = 'neutral', disabled = false }: Styles = {}) => {
   const { colors } = useTheme()
   const { height } = useWindowDimensions()
   const { bottom, top } = useSafeAreaInsets()
@@ -368,10 +378,17 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
       gap: 8,
     },
     actionIcon: {
-      color: appearanceColorsMap[appearance].iconColor,
+      color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].iconColor,
+    },
+    actionTextBlock: {
+      flex: 1,
     },
     actionTitle: {
-      color: appearanceColorsMap[appearance].textColor,
+      color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].textColor,
+    },
+    actionDisabledReason: {
+      color: colors.textColorDefaultDisabled,
+      fontSize: 12,
     },
   })
 }

package/src/hooks/use_conversation.ts

@@ -28,7 +28,9 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'custom_avatar_key',
         'custom_avatar_color',
         'custom_avatar_image_url',
+        'direct_message',
         'disabled',
+        'disabled_reason',
         'member_ability',
         'muted',
         'replies_disabled',

package/src/hooks/use_conversation_jolt_events.ts

@@ -26,7 +26,8 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
   const handleUpdatedConversation = useCallback(
     (e: JoltConversationEvent) => {
-      const { last_message_idempotent_key, last_message_author_id, disabled } = e.data.data
+      const { last_message_idempotent_key, last_message_author_id, disabled, disabled_reason } =
+        e.data.data
 
       if (last_message_idempotent_key && last_message_author_id === currentPersonId) {
         completeMessageCreationConversationTracking({
@@ -37,7 +38,7 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
       queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
         if (!prev?.data) return prev
-        return { ...prev, data: { ...prev.data, disabled } }
+        return { ...prev, data: { ...prev.data, disabled, disabledReason: disabled_reason } }
       })
 
       queryClient.invalidateQueries({ queryKey })

package/src/hooks/use_current_person.ts

@@ -16,6 +16,8 @@ export const currentPersonRequestArgs = {
         'unread_count',
         'pco_chat_enabled',
         'age_qualification_status',
+        'direct_messages_disabled',
+        'under_18',
       ],
     },
   },

package/src/hooks/use_person_settings.ts

@@ -0,0 +1,29 @@
+import { useMutation } from '@tanstack/react-query'
+import { throwResponseError } from '../utils/response_error'
+import { useApiClient } from './use_api_client'
+import { useCurrentPerson, useCurrentPersonCache } from './use_current_person'
+
+export function usePersonSettings() {
+  const apiClient = useApiClient()
+  const person = useCurrentPerson()
+  const { update, invalidate } = useCurrentPersonCache()
+
+  const directMessagesDisabled = person?.directMessagesDisabled ?? false
+
+  const { mutate: setDirectMessagesDisabled, isPending: isMutating } = useMutation({
+    mutationFn: (disabled: boolean) => {
+      const action = disabled ? 'disable_direct_messages' : 'enable_direct_messages'
+      return apiClient.chat
+        .post({ url: `/me/${action}`, data: { data: { type: 'Person', attributes: {} } } })
+        .catch(throwResponseError)
+    },
+    onMutate: disabled => {
+      update({ directMessagesDisabled: disabled })
+    },
+    onError: () => {
+      invalidate()
+    },
+  })
+
+  return { directMessagesDisabled, setDirectMessagesDisabled, isMutating }
+}

package/src/navigation/index.tsx

@@ -77,6 +77,7 @@ import { NotificationSettingsScreen } from '../screens/notification_settings_scr
 import { PreferredAppSelectionScreen } from '../screens/preferred_app_selection_screen'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
+import { SettingsScreen } from '../screens/settings_screen'
 import {
   SystemMessagePeopleScreen,
   SystemMessagePeopleScreenOptions,
@@ -280,6 +281,16 @@ export const ChatStack = createNativeStackNavigator({
       screen: AvatarPickerScreen,
       options: AvatarPickerScreenOptions,
     },
+    ChatSettings: {
+      screen: SettingsScreen,
+      options: ({ navigation }) => ({
+        title: 'Chat settings',
+        headerBackVisible: false,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+        ),
+      }),
+    },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
       options: ({ navigation }) => ({

package/src/screens/conversation_details_screen.tsx

@@ -122,6 +122,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const canDelete = conversation.memberAbility?.canDelete || false
   const isLeader = conversation.memberAbility?.leader || false
   const isDisabled = conversation.disabled ?? false
+  const showAdultRequirementNotice = isDisabled && conversation.disabledReason === 'safety_check'
 
   const {
     data: members,
@@ -350,7 +351,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       sectionInnerStyle: styles.sectionInnerGenderNotice,
     },
     {
-      type: isDisabled ? SectionTypes.view : SectionTypes.hidden,
+      type: showAdultRequirementNotice ? SectionTypes.view : SectionTypes.hidden,
       data: {
         children: <AdultRequirementNotice />,
       },

package/src/screens/conversation_screen.tsx

@@ -12,7 +12,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
-import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
+import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
@@ -166,7 +166,9 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
     <View style={styles.container}>
       <KeyboardView>
         {noMessages ? (
-          <EmptyConversationBlankState />
+          <View style={styles.emptyState}>
+            <ConversationStartBanner conversation={conversation} hasMessages={false} />
+          </View>
         ) : (
           <FlatList
             inverted
@@ -176,6 +178,9 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             keyExtractor={item => item.id}
             onScroll={trackScroll}
             scrollEventThrottle={10}
+            ListFooterComponent={
+              <ConversationStartBanner conversation={conversation} hasMessages={true} />
+            }
             renderItem={({ item }) => {
               if (item.type === 'DateSeparator') {
                 return <InlineDateSeparator {...item} />
@@ -239,7 +244,8 @@ function ConversationBottomBar({
   replyRootId,
   currentlyEditingMessage,
 }: ConversationBottomBarProps) {
-  if (conversation.disabled) return <ConversationDisabledBanner />
+  if (conversation.disabled)
+    return <ConversationDisabledBanner disabledReason={conversation.disabledReason} />
   if (!canReply) return <MemberMessagesDisabledBanner />
   return (
     <MessageForm.Root
@@ -386,6 +392,10 @@ const useStyles = () => {
       backgroundColor: navigationTheme.colors.card,
       paddingBottom: bottom,
     },
+    emptyState: {
+      flex: 1,
+      justifyContent: 'center',
+    },
     listContainer: {
       paddingVertical: 12,
     },

package/src/screens/conversation_select_type_screen.tsx

@@ -1,6 +1,7 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React 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 { useNewConversationEntry } from '../hooks/use_new_conversation_entry'
 import type { NewConversationFromFilter } from '../hooks/use_new_conversation_from_filter'
@@ -27,13 +28,14 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
   const navigation = useNavigation()
   const entryMode = useNewConversationEntry()
   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 canCreateGroups = entryMode === 'select_type' || entryMode === 'groups'
   const canCreateTeams = entryMode === 'select_type' || entryMode === 'teams'
-  const canCreateDMs = featureEnabled(availableFeatures.direct_messages_eap)
+  const dmFeatureEnabled = featureEnabled(availableFeatures.direct_messages_eap)
 
   const handleFilterPress = () => {
     if (!newConversationFromFilter) return
@@ -101,10 +103,12 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
           accessibilityHint="Opens team selection screen"
         />
       )}
-      {canCreateDMs && (
+      {dmFeatureEnabled && !under_18 && (
         <FormSheet.Action
           title="Direct message"
           onPress={handleDirectMessagePress}
+          disabled={directMessagesDisabled}
+          disabledReason={directMessagesDisabled ? 'Disabled in chat settings' : undefined}
           accessibilityHint="Opens direct message recipient selection screen"
         />
       )}

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

@@ -91,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])
@@ -153,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/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
@@ -12,7 +14,9 @@ export interface ConversationResource {
   conversationMembership?: Partial<ConversationMembershipResource>
   createdAt: string
   deleted?: boolean
+  directMessage?: boolean
   disabled?: boolean
+  disabledReason?: ConversationDisabledReason
   genderOption?: string | null
   groups?: GroupResource[]
   previewAvatarUrls?: string[]

package/src/types/resources/person.ts

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

package/src/utils/request/conversation.ts

@@ -39,6 +39,7 @@ export const getConversationsRequestArgs = ({
           'created_at',
           'badges',
           'disabled',
+          'disabled_reason',
           'groups',
           'last_message_author_id',
           'last_message_author_name',