@planningcenter/chat-react-native 3.5.0-rc.1 → 3.5.0

package/src/screens/conversation_new/components/groups_form.tsx

@@ -58,6 +58,8 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
     <KeyboardView>
       <FormList
         memberData={groupMemberships.adultMembers}
+        loadingMore={groupMemberships.isFetchingNextPage}
+        onEndReached={groupMemberships.fetchNextPage}
         FormContent={
           <FormContent
             group={group}
@@ -97,12 +99,9 @@ function FormContent({ group, title, setTitle, groupMemberships }: FormContentPr
 
   const childMembers = groupMemberships.childMembers
   const hasChildren = childMembers.length > 0
-  const adultCount = groupMemberships.adultMembers.length
-  const memberCount = isLeader ? membershipsCount : adultCount
-  const memberHeaderLabel = `${pluralize(memberCount, 'member')} selected`
+  const memberHeaderLabel = `${pluralize(membershipsCount, 'member')} selected`
 
   const showMemberError = groupMemberships.isError
-  const showChildNotice = hasChildren && isLeader
 
   return (
     <View style={styles.formContent}>
@@ -124,7 +123,9 @@ function FormContent({ group, title, setTitle, groupMemberships }: FormContentPr
       <Divider />
       <View style={styles.memberSection}>
         <Heading variant="h3">{memberHeaderLabel}</Heading>
-        {showChildNotice && <ChildNotice childMembers={childMembers} style={styles.banner} />}
+        {hasChildren && (
+          <ChildNotice childMembers={childMembers} showMembers={isLeader} style={styles.banner} />
+        )}
         {showMemberError && (
           <Banner
             appearance="error"

package/src/screens/conversation_new/components/services_form.tsx

@@ -162,7 +162,9 @@ function FormContent({
       <Divider />
       <View style={styles.memberSection}>
         <Heading variant="h3">{pluralize(memberCount, 'member')} selected</Heading>
-        {hasChildren && <ChildNotice childMembers={childMembers} style={styles.banner} />}
+        {hasChildren && (
+          <ChildNotice childMembers={childMembers} showMembers={true} style={styles.banner} />
+        )}
         {isMemberError && (
           <Banner
             appearance="error"

package/src/screens/conversation_screen.tsx

@@ -55,6 +55,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const { repliesDisabled, memberAbility } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
+  const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
 
   // Seems to be necessary to define this way so we get the route picked up
   const headerTitle = useCallback(
@@ -70,7 +71,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
 
   return (
     <View style={styles.container}>
-      <KeyboardView style={styles.keyboardView}>
+      <KeyboardView>
         {noMessages ? (
           <EmptyConversationBlankState />
         ) : (
@@ -86,7 +87,13 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
                 return <InlineDateSeparator {...item} />
               }
 
-              return <Message {...item} conversation_id={conversation_id} />
+              return (
+                <Message
+                  {...item}
+                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+                  conversation_id={conversation_id}
+                />
+              )
             }}
             onEndReached={() => fetchNextPage()}
           />
@@ -252,9 +259,6 @@ const useStyles = () => {
       backgroundColor: navigationTheme.colors.card,
       paddingBottom: bottom,
     },
-    keyboardView: {
-      flex: 1,
-    },
     listContainer: {
       gap: 12,
       paddingHorizontal: 16,

package/src/screens/conversations/conversations_screen.tsx

@@ -1,7 +1,7 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Conversations } from '../../components'
+import { Conversations, TextButton } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
 import { useCanCreateConversations } from '../../hooks'
@@ -54,6 +54,10 @@ export function ConversationsScreen({ route }: ConversationScreenProps) {
     })
   }
 
+  const reportABug = () => {
+    return navigation.navigate('BugReport')
+  }
+
   return (
     <View style={styles.container}>
       <ConversationsContextProvider args={route.params}>
@@ -63,6 +67,12 @@ export function ConversationsScreen({ route }: ConversationScreenProps) {
         visible={canCreateConversations}
         title="New conversation"
         onPress={handleNewConversationNavigation}
+        buttonIconNameLeft="churchCenter.signups"
+        secondaryButton={
+          <TextButton variant="tertiary" onPress={reportABug}>
+            Report a bug
+          </TextButton>
+        }
       />
     </View>
   )

package/src/screens/design_system_screen.tsx

@@ -8,6 +8,7 @@ import {
   Badge,
   Banner,
   BannerCollapsible,
+  BlankState,
   Button,
   ToggleButton,
   Heading,
@@ -20,6 +21,7 @@ import {
   Text,
   TextButton,
   TextInlineButton,
+  ImageAttachmentPreview,
 } from '../components/display'
 import {
   space,
@@ -28,7 +30,7 @@ import {
   platformFontWeightMedium,
 } from '../utils'
 import BannerPrimitive from '../components/primitive/banner_primitive'
-import { BlankState } from '../components/display/blank_state'
+import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 
 // =================================
 // ====== Docs Utils ===============
@@ -696,9 +698,41 @@ function ImageIconsSection({ isLast }: SectionProps) {
           <Image source={{ uri: URL.image }} style={styles.image} alt="" />
         </Row>
       </Group>
+      <Group
+        title="ImageAttachmentPreview"
+        description="Displays an image attachment in different sizes with a close button. It takes a `fileName` prop that gets passed to the image's `alt` attribute."
+      >
+        <Row>
+          <ImageAttachmentPreview
+            size="sm"
+            uri={URL.image}
+            fileName="mountains.jpg"
+            onClosePress={buttonPress}
+          />
+          <ImageAttachmentPreview
+            uri={URL.image}
+            fileName="mountains.jpg"
+            onClosePress={buttonPress}
+          />
+          <ImageAttachmentPreview
+            uri={URL.broken}
+            fileName="broken.jpg"
+            onClosePress={buttonPress}
+          />
+        </Row>
+      </Group>
+      <Group
+        title="VideoAttachmentPreview"
+        description="Displays an video attachment with a close button. It takes a `name` prop and an optional duration."
+      >
+        <Row>
+          <VideoAttachmentPreview name="mountains.mp4" onClosePress={buttonPress} />
+          <VideoAttachmentPreview name="mountains.mp4" duration="1:20" onClosePress={buttonPress} />
+        </Row>
+      </Group>
       <Group
         title="Avatar"
-        description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline "presence" indicator.'
+        description='Displays the profile image for a user in different sizes and has a loading spinner. Can optionally show an online/offline "presence" indicator. Fallback condition and icon are optionally configurable.'
       >
         <Row>
           <Avatar sourceUri={URL.broken} />
@@ -710,10 +744,21 @@ function ImageIconsSection({ isLast }: SectionProps) {
           <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback} />
           <Avatar presence="offline" sourceUri={URL.avatar} />
         </Row>
+        <Row>
+          <Avatar sourceUri="" />
+          <Avatar sourceUri="" size="md" />
+          <Avatar sourceUri="" size="sm" />
+          <Avatar
+            sourceUri={URL.broken}
+            showFallback={true}
+            fallbackIconName="general.star"
+            size="sm"
+          />
+        </Row>
       </Group>
       <Group
         title="AvatarGroup"
-        description="Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load."
+        description="Shows 1-4 images in a grid at different sizes. Loading spinner shows until all images successfully load. Fallback condition and icon are optionally configurable."
       >
         <Row>
           <AvatarGroup sourceUris={[URL.broken]} />
@@ -723,6 +768,26 @@ function ImageIconsSection({ isLast }: SectionProps) {
           <AvatarGroup sourceUris={URL.three_avatars} />
           <AvatarGroup sourceUris={URL.four_avatars} />
         </Row>
+        <Row>
+          <AvatarGroup sourceUris={[]} showFallback={true} fallbackIconName="general.person" />
+          <AvatarGroup
+            sourceUris={[]}
+            showFallback={true}
+            fallbackIconName="people.noTextMessage"
+          />
+          <AvatarGroup
+            sourceUris={[]}
+            showFallback={true}
+            fallbackIconName="general.star"
+            size="md"
+          />
+          <AvatarGroup
+            sourceUris={[]}
+            showFallback={true}
+            fallbackIconName="general.heart"
+            size="sm"
+          />
+        </Row>
       </Group>
       <Group
         title="Icon"

package/src/types/resources/denormalized_attachment_resource.ts

@@ -82,8 +82,8 @@ export interface DenormalizedGiphyAttachmentResourceForCreate extends GenericAtt
 
 interface GiphyVariant {
   url: string
-  width: number
-  height: number
+  width: string
+  height: string
   size: string
   frames: string
 }

package/src/types/resources/member_ability.ts

@@ -2,6 +2,7 @@ export interface MemberAbilityResource {
   type: 'MemberAbility'
   canUpdate: boolean
   canDelete: boolean
+  canDeleteNonAuthoredMessages: boolean
   leader: boolean
   canReply: boolean
 }

package/src/utils/request/conversation.ts

@@ -1,8 +1,9 @@
+import { GraphId } from '../../types/resources/group_resource'
 import { GetRequest } from '../client/types'
 
 export interface ConversationRequestArgs {
   gids: string
-  chat_group_graph_id?: string
+  chat_group_graph_id?: GraphId
   group_source_app_name?: string
 }