@planningcenter/chat-react-native 3.30.0-rc.5 → 3.30.0-rc.7

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

@@ -44,9 +44,13 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
     app: 'groups',
   })
 
-  const groupMemberships = useGroupMembersForNewConversation({ id: groupId })
-
   const activeGenderId = genderFilterEnabled ? genderId : null
+  const activeGenderValue = genderFilterEnabled ? genderValue : null
+
+  const groupMemberships = useGroupMembersForNewConversation({
+    id: groupId,
+    gender: activeGenderValue,
+  })
 
   const handleGenderToggle = (enabled: boolean) => {
     const displayLabel = genderValue ? genderDisplayLabel(genderValue) : ''
@@ -101,6 +105,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
             genderFetching={genderFetching}
             onGenderToggle={handleGenderToggle}
             groupMemberships={groupMemberships}
+            filteredMemberCount={groupMemberships.adultMembers.length}
           />
         }
       />
@@ -124,6 +129,7 @@ interface FormContentProps {
   genderFetching: boolean
   onGenderToggle: (enabled: boolean) => void
   groupMemberships: GroupMembersForNewConversationResult
+  filteredMemberCount: number
 }
 
 function FormContent({
@@ -136,6 +142,7 @@ function FormContent({
   genderFetching,
   onGenderToggle,
   groupMemberships,
+  filteredMemberCount,
 }: FormContentProps) {
   const styles = useStyles()
   const inputRef = useRef<TextInput>(null)
@@ -150,7 +157,8 @@ function FormContent({
 
   const childMembers = groupMemberships.childMembers
   const hasChildren = childMembers.length > 0
-  const memberHeaderLabel = `${pluralize(membershipsCount, 'member')} selected`
+  const displayCount = genderFilterEnabled ? filteredMemberCount : membershipsCount
+  const memberHeaderLabel = `${pluralize(displayCount, 'member')} selected`
 
   const showMemberError = groupMemberships.isError
 

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

@@ -67,8 +67,8 @@ export const ListHeaderComponent = () => {
     }
   }, [navigation, route.params, entryMode])
 
-  const handleGetHelp = useCallback(() => {
-    navigation.navigate('GetHelp', { type: 'chat' })
+  const handleMoreOptions = useCallback(() => {
+    navigation.navigate('ConversationsMoreActions')
   }, [navigation])
 
   const handleOpenConversationFilters = useCallback(() => {
@@ -139,9 +139,9 @@ export const ListHeaderComponent = () => {
           )}
           {appName !== 'services' && (
             <ListHeaderActionButton
-              name="general.outlinedInfoCircle"
-              onPress={handleGetHelp}
-              accessibilityLabel="Get help"
+              name="general.threeDots"
+              onPress={handleMoreOptions}
+              accessibilityLabel="More options"
               maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
             />
           )}

package/src/screens/conversations/conversations_more_actions_screen.tsx

@@ -0,0 +1,51 @@
+import { useNavigation } from '@react-navigation/native'
+import { useCallback } from 'react'
+import { StyleSheet } from 'react-native'
+import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
+
+export const ConversationsMoreActionsScreenOptions = getFormSheetScreenOptions({
+  headerTitle: 'Conversation actions',
+})
+
+export function ConversationsMoreActionsScreen() {
+  const navigation = useNavigation()
+
+  const handleGetHelp = useCallback(() => {
+    navigation.goBack()
+    requestAnimationFrame(() => {
+      navigation.navigate('GetHelp', { type: 'chat' })
+    })
+  }, [navigation])
+
+  const handleChatNotifications = useCallback(() => {
+    navigation.goBack()
+    requestAnimationFrame(() => {
+      navigation.navigate('NotificationSettings', {})
+    })
+  }, [navigation])
+
+  const styles = useStyles()
+
+  return (
+    <FormSheet.Root contentStyle={styles.formSheetContent}>
+      <FormSheet.Action
+        iconName="general.cog"
+        title="Chat notifications"
+        onPress={handleChatNotifications}
+      />
+      <FormSheet.Action
+        iconName="general.outlinedInfoCircle"
+        title="Get help"
+        onPress={handleGetHelp}
+      />
+    </FormSheet.Root>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    formSheetContent: {
+      paddingTop: 16,
+    },
+  })
+}

package/src/screens/design_system_screen.tsx

@@ -64,6 +64,7 @@ const personAdult = {
   avatar: URL.avatar,
   badges: [{ title: 'Conversation owner' }, { title: 'Leader' }],
   child: false,
+  gender: null,
 }
 
 const personChild = {
@@ -73,6 +74,7 @@ const personChild = {
   avatar: URL.two_avatars[1],
   badges: [],
   child: true,
+  gender: null,
 }
 
 const buttonPress = () => Alert.alert('Button clicked')

package/src/types/resources/groups/groups_member_resource_with_person.ts

@@ -7,6 +7,7 @@ export interface GroupsGroupMemberResource {
     lastName: string
     avatarUrl: string
     child: boolean
+    gender: string | null
     id: number
     type: 'Person'
   }

package/src/types/resources/member.ts

@@ -5,6 +5,7 @@ export interface MemberResource {
   avatar: string
   badges: MemberBadge[]
   child: boolean
+  gender: string | null
   role?: string
 }