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

package/src/screens/notification_settings_screen.tsx

@@ -3,10 +3,12 @@ import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useCallback, useEffect, type ReactNode } from 'react'
 import { FlatList, Platform, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
-import { Heading, Icon, Text } from '../components'
+import { Badge, Heading, Icon, Text } from '../components'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
 import { isDefined } from '../types'
+import type { GroupNotificationSettingsScreenProps } from './group_notification_settings_screen'
+import { useGroups } from './notification_settings/hooks/groups'
 import { useChatTypes } from './preferred_app/hooks/use_chat_types'
 import type { PreferredAppSelectionScreenProps } from './preferred_app_selection_screen'
 
@@ -17,6 +19,7 @@ import type { PreferredAppSelectionScreenProps } from './preferred_app_selection
 type NotificationSettingsStackParamList = {
   NotificationSettings: {}
   PreferredAppSelection: PreferredAppSelectionScreenProps['route']['params']
+  GroupNotificationSettings: GroupNotificationSettingsScreenProps['route']['params']
 }
 
 enum SectionTypes {
@@ -53,6 +56,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   const navigation = useNavigation<NativeStackNavigationProp<NotificationSettingsStackParamList>>()
   const styles = useStyles()
   const { data: chatTypes } = useChatTypes()
+  const { data: groups } = useGroups()
 
   // Header configuration
   const HeaderRight = useCallback(() => {
@@ -84,7 +88,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
       type: SectionTypes.view,
       data: {
         children: (
-          <Text variant="footnote" style={styles.sectionDescription}>
+          <Text variant="tertiary" style={styles.sectionDescription}>
             Choose which app receives each type of chat notification
           </Text>
         ),
@@ -95,32 +99,47 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
       type: SectionTypes.link,
       data: {
         title: `${type.title} Conversations`,
-        subtitle: type.preferredApp,
+        rightLabel: type.preferredApp,
         onPress: () =>
           navigation.navigate('PreferredAppSelection', {
             chatTypeId: type.id,
           }),
       },
+      sectionInnerStyle: { paddingVertical: 0 },
+      showBottomBorder: true,
+    })),
+    {
+      type: SectionTypes.header,
+      data: {
+        title: 'Manage chat settings',
+      },
+      sectionInnerStyle: styles.sectionInnerHeader,
+    },
+    {
+      type: SectionTypes.view,
+      data: {
+        children: (
+          <Text variant="tertiary" style={styles.sectionDescription}>
+            Notification settings for all of your group, team and event related conversations
+          </Text>
+        ),
+      },
+      showBottomBorder: true,
+    },
+    ...groups.map(group => ({
+      type: SectionTypes.link,
+      data: {
+        title: group.name,
+        rightLabel: group.sourceType,
+        onPress: () =>
+          navigation.navigate('GroupNotificationSettings', {
+            groupId: group.id,
+            title: group.name || 'Group',
+          }),
+      },
+      sectionInnerStyle: { paddingVertical: 0 },
       showBottomBorder: true,
     })),
-    // {
-    //   type: SectionTypes.header,
-    //   data: {
-    //     title: 'Manage chat settings',
-    //   },
-    //   sectionInnerStyle: styles.sectionInnerHeader,
-    // },
-    // {
-    //   type: SectionTypes.view,
-    //   data: {
-    //     children: (
-    //       <Text variant="footnote" style={styles.sectionDescription}>
-    //         Notification settings for all of your group, team and event related conversations
-    //       </Text>
-    //     ),
-    //   },
-    //   showBottomBorder: true,
-    // },
   ].filter(item => item.type !== SectionTypes.hidden)
 
   const headerIndices = listData
@@ -148,7 +167,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
                   outerStyle={item?.sectionOuterStyle}
                   innerStyle={item?.sectionInnerStyle}
                 >
-                  <Heading variant="h3">{item.data.title}</Heading>
+                  <Heading variant="h2">{item.data.title}</Heading>
                 </ListSection>
               )
             case SectionTypes.setting:
@@ -227,11 +246,11 @@ interface SettingRowProps {
   title: string
   style?: ViewStyle
   rightItem?: ReactNode
-  subtitle?: string
+  rightLabel?: string
   rightItemStyle?: ViewStyle
 }
 
-function SettingRow({ title, style, subtitle, rightItem, rightItemStyle = {} }: SettingRowProps) {
+function SettingRow({ title, style, rightLabel, rightItem, rightItemStyle = {} }: SettingRowProps) {
   const styles = useStyles()
 
   return (
@@ -240,7 +259,7 @@ function SettingRow({ title, style, subtitle, rightItem, rightItemStyle = {} }:
         <Text variant="plain" style={styles.settingRowText}>
           {title}
         </Text>
-        {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
+        {Boolean(rightLabel) && <Text variant="footnote">{rightLabel}</Text>}
       </View>
       {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
     </View>
@@ -249,12 +268,13 @@ function SettingRow({ title, style, subtitle, rightItem, rightItemStyle = {} }:
 
 interface LinkRowProps {
   title: string
-  subtitle: string
+  rightLabel: string
   onPress: () => void
 }
 
-function LinkRow({ title, subtitle, onPress }: LinkRowProps) {
+function LinkRow({ title, rightLabel, onPress }: LinkRowProps) {
   const styles = useLinkRowStyles()
+  const isSourceType = rightLabel === 'Team' || rightLabel === 'Group' || rightLabel === 'PlanTeam'
 
   return (
     <PlatformPressable
@@ -269,7 +289,13 @@ function LinkRow({ title, subtitle, onPress }: LinkRowProps) {
           {title}
         </Text>
         <View style={styles.rightContent}>
-          <Text numberOfLines={1}>{subtitle}</Text>
+          {isSourceType ? (
+            <Badge label={rightLabel} appearance="neutral" variant="meta" />
+          ) : (
+            <Text numberOfLines={1} style={styles.rightLabelText}>
+              {rightLabel}
+            </Text>
+          )}
           {Platform.OS === 'ios' && (
             <Icon name="general.rightChevron" size={16} style={styles.icon} />
           )}
@@ -283,24 +309,21 @@ function LinkRow({ title, subtitle, onPress }: LinkRowProps) {
 // ====== Styles ===================
 // =================================
 
-const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {
+const useStyles = ({}: { isStart?: boolean; isEnd?: boolean } = {}) => {
   const { colors } = useTheme()
   const headerBottomPadding = 0
 
   return StyleSheet.create({
     listContainer: {
       flex: 1,
-      backgroundColor: colors.surfaceColor080,
     },
     contentContainer: {},
     sectionOuterBase: {
       paddingLeft: 16,
-      backgroundColor: colors.surfaceColor100,
     },
     sectionInnerBase: {
       paddingRight: 16,
-      paddingTop: isStart ? 16 : 12,
-      paddingBottom: isEnd ? 16 : 12,
+      paddingVertical: 16,
     },
     sectionInnerHeader: {
       paddingBottom: headerBottomPadding,
@@ -333,13 +356,13 @@ const useLinkRowStyles = () => {
   return StyleSheet.create({
     row: {
       paddingLeft: 0,
+      paddingVertical: 16,
     },
     innerContainer: {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
       gap: 12,
-      paddingVertical: 4,
     },
     rightContent: {
       flexDirection: 'row',
@@ -348,6 +371,10 @@ const useLinkRowStyles = () => {
     },
     title: {
       flexShrink: 1,
+      alignSelf: 'center',
+    },
+    rightLabelText: {
+      color: theme.colors.textColorDefaultSecondary,
     },
     icon: {
       color: theme.colors.iconColorDefaultDisabled,

package/src/screens/preferred_app_selection_screen.tsx

@@ -31,7 +31,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
     mutationFn: (app: PreferredApp) => {
       return apiClient.chat
         .post({
-          url: `/me/chat_types/${chatTypeId}/set_preferred_appz`,
+          url: `/me/chat_types/${chatTypeId}/set_preferred_app`,
           data: { data: { type: 'ChatType', attributes: { app } } },
         })
         .catch(throwResponseError)

package/src/types/resources/group_membership.ts

@@ -0,0 +1,6 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface GroupMembership extends ResourceObject {
+  notificationLevel: string
+  notificationLevelDescription: string
+}

package/src/types/resources/group_resource.ts

@@ -1,4 +1,5 @@
 import { AppName } from './app_name'
+import { GroupMembership } from './group_membership'
 
 export type SourceType = 'Team' | 'Group' | 'PlanTeam'
 export type GraphId = `${AppName}-${SourceType}-${number}`
@@ -11,3 +12,7 @@ export interface GroupResource {
   sourceAppName: AppName
   sourceType: SourceType
 }
+
+export interface GroupResourceWithMembership extends GroupResource {
+  myGroupMembership?: GroupMembership
+}

package/src/types/resources/index.ts

@@ -8,3 +8,5 @@ export * from './groups'
 export * from './app_grant'
 export * from './services'
 export * from './organization'
+export * from './group_membership'
+export * from './group_resource'