@planningcenter/chat-react-native 3.35.0-rc.4 → 3.35.0-rc.6

package/src/components/conversation/message_form.tsx

@@ -38,6 +38,8 @@ import {
   platformPressedOpacityStyle,
 } from '../../utils'
 import { pickAttachmentPreviewKind } from '../../utils/attachment_kind'
+import { canSubmitMessage } from '../../utils/can_submit_message'
+import { isInputEditable } from '../../utils/is_input_editable'
 import {
   DocumentPicker,
   DocumentPickerResult,
@@ -73,6 +75,7 @@ const MessageFormContext = React.createContext<{
   setText: (text: string) => void
   onSubmit: () => void
   disabled: boolean
+  inputEditable: boolean
   canGiphy: boolean
   usingGiphy: boolean
   setUsingGiphy: (usingGiphy: boolean) => void
@@ -86,6 +89,7 @@ const MessageFormContext = React.createContext<{
   setText: (_text: string) => {},
   onSubmit: () => {},
   disabled: false,
+  inputEditable: true,
   canGiphy: false,
   usingGiphy: false,
   setUsingGiphy: (_usingGiphy: boolean) => {},
@@ -180,15 +184,19 @@ function MessageFormRoot({
     return () => clearTimeout(timeoutId)
   }, [text, attachmentUploader.attachments, saveDraft, currentlyEditingMessage])
 
-  const canSubmit = (() => {
-    if (isPending) return false
-    if (attachmentUploader?.pendingUploads) return false
-    if (attachmentUploader?.flaggedAttachmentCount) return false
-    if (text.length > 0) return true
-    if (attachmentUploader?.attachments?.length) return true
-    return false
-  })()
+  const canSubmit = canSubmitMessage({
+    isPending,
+    conversationDisabled: conversation.disabled ?? false,
+    pendingUploads: !!attachmentUploader?.pendingUploads,
+    hasFlaggedAttachments: !!attachmentUploader?.flaggedAttachmentCount,
+    hasText: text.length > 0,
+    hasSendableAttachments: !!attachmentUploader?.attachmentIds?.length,
+  })
   const disabled = !canSubmit
+  const inputEditable = isInputEditable({
+    isPending,
+    conversationDisabled: conversation.disabled ?? false,
+  })
 
   /*
     Opening a FormSheet on Android while the keyboard is visible breaks the FormSheet's height & position.
@@ -252,6 +260,7 @@ function MessageFormRoot({
         setText,
         onSubmit: handleSubmit,
         disabled,
+        inputEditable,
         canGiphy,
         usingGiphy,
         setUsingGiphy,
@@ -398,7 +407,7 @@ function MessageFormInput() {
   const styles = useMessageFormStyles()
   const theme = useTheme()
   const fontScale = useFontScale()
-  const { text, setText, onSubmit, usingGiphy, attachmentUploader, replyRootId } =
+  const { text, setText, onSubmit, inputEditable, usingGiphy, attachmentUploader, replyRootId } =
     React.useContext(MessageFormContext)
   const attachmentError = attachmentUploader?.errorMessage
 
@@ -445,6 +454,7 @@ function MessageFormInput() {
           maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}
           onSubmitEditing={onSubmit}
           submitBehavior={usingGiphy ? 'submit' : 'newline'}
+          editable={inputEditable}
         />
       </View>
     </View>

package/src/components/conversation/messages_disabled_banners.tsx

@@ -20,6 +20,17 @@ export const MemberMessagesDisabledBanner = () => {
   )
 }
 
+export const ConversationDisabledBanner = () => {
+  const styles = useStyles()
+
+  return (
+    <MessagesDisabledBanner
+      description="Conversations with teens require at least 2 adults. This chat is paused until another adult is added."
+      style={styles.memberBanner}
+    />
+  )
+}
+
 interface MessagesDisabledBannerProps {
   description: string
   style?: ViewStyle

package/src/hooks/use_conversation.ts

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

package/src/screens/conversation_screen.tsx

@@ -18,6 +18,7 @@ import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_bu
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
 import {
+  ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
   MemberMessagesDisabledBanner,
 } from '../components/conversation/messages_disabled_banners'
@@ -48,7 +49,9 @@ import {
 } from '../hooks/use_product_analytics'
 import { useScrollTracking } from '../hooks/use_scroll_tracking'
 import { useTrackHighestSeenMessage } from '../hooks/use_track_highest_seen_message'
+import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
+import { MessageResource } from '../types/resources/message'
 import { getRelativeDateStatus } from '../utils/date'
 import {
   groupMessages,
@@ -319,33 +322,55 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         />
         {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
-        {canReply ? (
-          <MessageForm.Root
-            replyRootAuthorFirstName={replyRootAuthorFirstName}
-            conversation={conversation}
-            replyRootId={replyRootId}
-            currentlyEditingMessage={currentlyEditingMessage}
-            // We use a separate key so that it remounts component when switching between new
-            // and edit message. This simplifies internal state handling.
-            key={
-              currentlyEditingMessage
-                ? `edit-message-form-${currentlyEditingMessage.id}`
-                : 'new-message-form'
-            }
-          >
-            <MessageForm.AttachmentPicker />
-            <MessageForm.Commands />
-            <MessageForm.TextInput />
-            <MessageForm.SubmitButton />
-          </MessageForm.Root>
-        ) : (
-          <MemberMessagesDisabledBanner />
-        )}
+        <ConversationBottomBar
+          conversation={conversation}
+          canReply={canReply}
+          replyRootAuthorFirstName={replyRootAuthorFirstName}
+          replyRootId={replyRootId}
+          currentlyEditingMessage={currentlyEditingMessage}
+        />
       </KeyboardView>
     </View>
   )
 }
 
+interface ConversationBottomBarProps {
+  conversation: ConversationResource
+  canReply: boolean | undefined
+  replyRootAuthorFirstName: string | undefined
+  replyRootId: string | null | undefined
+  currentlyEditingMessage: MessageResource | undefined
+}
+
+function ConversationBottomBar({
+  conversation,
+  canReply,
+  replyRootAuthorFirstName,
+  replyRootId,
+  currentlyEditingMessage,
+}: ConversationBottomBarProps) {
+  if (conversation.disabled) return <ConversationDisabledBanner />
+  if (!canReply) return <MemberMessagesDisabledBanner />
+  return (
+    <MessageForm.Root
+      replyRootAuthorFirstName={replyRootAuthorFirstName}
+      conversation={conversation}
+      replyRootId={replyRootId}
+      currentlyEditingMessage={currentlyEditingMessage}
+      key={
+        currentlyEditingMessage
+          ? `edit-message-form-${currentlyEditingMessage.id}`
+          : 'new-message-form'
+      }
+    >
+      <MessageForm.AttachmentPicker />
+      <MessageForm.Commands />
+      <MessageForm.TextInput />
+      <MessageForm.SubmitButton />
+    </MessageForm.Root>
+  )
+}
+
 function InlineDateSeparator({ date }: DateSeparator) {
   const styles = useDateSeparatorStyles()
   const { isThisYear } = getRelativeDateStatus(date)

package/src/screens/group_notification_settings_screen.tsx

@@ -41,12 +41,14 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
     <View style={styles.container}>
       <View style={styles.sectionOuter}>
         <View style={styles.sectionInner}>
-          <Heading variant="h3" style={styles.sectionHeading}>
+          <Heading variant="h2" style={styles.sectionHeading}>
             Group notification settings
           </Heading>
           <Text variant="tertiary" style={styles.sectionSubtitle}>
             The settings are applied to all conversations in{' '}
-            <Text style={styles.groupNameBold}>{group.name || title}</Text>
+            <Text variant="tertiary" style={styles.groupNameBold}>
+              {group.name || title}
+            </Text>
           </Text>
         </View>
       </View>
@@ -98,10 +100,11 @@ const useStyles = () => {
       borderBottomColor: colors.borderColorDefaultBase,
     },
     sectionHeading: {
-      paddingBottom: 4,
+      paddingBottom: 12,
     },
     sectionSubtitle: {
       color: colors.textColorDefaultSecondary,
+      paddingBottom: 2,
     },
     groupNameBold: {
       fontWeight: platformFontWeightBold,

package/src/screens/notification_settings_screen.tsx

@@ -90,7 +90,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
     ...chatTypes.map(type => ({
       type: SectionTypes.link,
       data: {
-        title: `${type.title} Conversations`,
+        title: `${type.title} conversations`,
         rightLabel: type.preferredApp,
         onPress: () =>
           navigation.navigate('PreferredAppSelection', {
@@ -284,7 +284,7 @@ function LinkRow({ title, subtitle, rightLabel, onPress }: LinkRowProps) {
           <Text style={styles.title} numberOfLines={2}>
             {title}
           </Text>
-          {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
+          {Boolean(subtitle) && <Text variant="tertiary">{subtitle}</Text>}
         </View>
         <View style={styles.rightContent}>
           {isSourceType ? (

package/src/screens/preferred_app_selection_screen.tsx

@@ -41,12 +41,12 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
     updateChatType(app)
   }
 
-  const sectionTitle = `${chatType?.title} Conversations`
+  const sectionTitle = `${chatType?.title} conversations`
 
   return (
     <View style={styles.container}>
       <View style={styles.section}>
-        <Heading variant="h3" style={styles.sectionHeading}>
+        <Heading variant="h2" style={styles.sectionHeading}>
           {sectionTitle}
         </Heading>
         {preferredAppOptions?.sort(sortPreferredApp('asc')).map((option, key) => (
@@ -120,7 +120,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   section: {
-    paddingTop: 16,
+    paddingTop: 24,
   },
   sectionHeading: {
     paddingHorizontal: 16,

package/src/types/resources/conversation.ts

@@ -12,6 +12,7 @@ export interface ConversationResource {
   conversationMembership?: Partial<ConversationMembershipResource>
   createdAt: string
   deleted?: boolean
+  disabled?: boolean
   genderOption?: string | null
   groups?: GroupResource[]
   previewAvatarUrls?: string[]

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

@@ -0,0 +1,32 @@
+import { canSubmitMessage } from '../can_submit_message'
+
+const base = {
+  isPending: false,
+  conversationDisabled: false,
+  pendingUploads: false,
+  hasFlaggedAttachments: false,
+  hasText: false,
+  hasSendableAttachments: false,
+}
+
+describe('canSubmitMessage', () => {
+  it.each([
+    ['empty form', base, false],
+    ['has text', { ...base, hasText: true }, true],
+    ['has attachments', { ...base, hasSendableAttachments: true }, true],
+    ['pending request blocks submit', { ...base, hasText: true, isPending: true }, false],
+    [
+      'conversation disabled blocks submit',
+      { ...base, hasText: true, conversationDisabled: true },
+      false,
+    ],
+    ['pending uploads block submit', { ...base, hasText: true, pendingUploads: true }, false],
+    [
+      'flagged attachments block submit',
+      { ...base, hasText: true, hasFlaggedAttachments: true },
+      false,
+    ],
+  ])('%s', (_label, args, expected) => {
+    expect(canSubmitMessage(args)).toBe(expected)
+  })
+})

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

@@ -0,0 +1,17 @@
+import { isInputEditable } from '../is_input_editable'
+
+const base = {
+  isPending: false,
+  conversationDisabled: false,
+}
+
+describe('isInputEditable', () => {
+  it.each([
+    ['active conversation with no text', base, true],
+    ['active conversation with text', base, true],
+    ['pending request locks input', { ...base, isPending: true }, false],
+    ['disabled conversation locks input', { ...base, conversationDisabled: true }, false],
+  ])('%s', (_label, args, expected) => {
+    expect(isInputEditable(args)).toBe(expected)
+  })
+})

package/src/utils/can_submit_message.ts

@@ -0,0 +1,23 @@
+export interface CanSubmitMessageArgs {
+  isPending: boolean
+  conversationDisabled: boolean
+  pendingUploads: boolean
+  hasFlaggedAttachments: boolean
+  hasText: boolean
+  hasSendableAttachments: boolean
+}
+
+export function canSubmitMessage({
+  isPending,
+  conversationDisabled,
+  pendingUploads,
+  hasFlaggedAttachments,
+  hasText,
+  hasSendableAttachments,
+}: CanSubmitMessageArgs): boolean {
+  if (isPending) return false
+  if (conversationDisabled) return false
+  if (pendingUploads) return false
+  if (hasFlaggedAttachments) return false
+  return hasText || hasSendableAttachments
+}

package/src/utils/is_input_editable.ts

@@ -0,0 +1,8 @@
+export interface IsInputEditableArgs {
+  isPending: boolean
+  conversationDisabled: boolean
+}
+
+export function isInputEditable({ isPending, conversationDisabled }: IsInputEditableArgs): boolean {
+  return !isPending && !conversationDisabled
+}

package/src/utils/request/conversation.ts

@@ -31,6 +31,7 @@ export const getConversationsRequestArgs = ({
         Conversation: [
           'created_at',
           'badges',
+          'disabled',
           'groups',
           'last_message_author_id',
           'last_message_author_name',