@planningcenter/chat-react-native 3.24.4 → 3.25.0-rc.1

package/src/screens/conversation_details_screen.tsx

@@ -1,25 +1,29 @@
+import {
+  HeaderTitle as ElementsHeaderTitle,
+  HeaderTitleProps,
+  PlatformPressable,
+} from '@react-navigation/elements'
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, {
   useCallback,
   useEffect,
+  useRef,
   useState,
-  type SetStateAction,
   type Dispatch,
   type ReactNode,
-  useRef,
+  type SetStateAction,
 } from 'react'
 import {
+  Alert,
   FlatList,
+  Platform,
+  Pressable,
   StyleSheet,
   TextInput,
   View,
-  type ViewStyle,
   type ViewProps,
-  Pressable,
-  Alert,
-  Platform,
+  type ViewStyle,
 } from 'react-native'
-import { HeaderTitle as ElementsHeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
 import {
   Badge,
   ChildNotice,
@@ -31,6 +35,8 @@ import {
   TextButton,
   type TextStyle,
 } from '../components'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { useSuspensePaginator, useTheme } from '../hooks'
 import {
   useConversation,
@@ -39,14 +45,11 @@ import {
   useConversationMute,
   useConversationUpdate,
 } from '../hooks/use_conversation'
+
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { MemberResource, isDefined } from '../types'
-import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
-import { tokens } from '../vendor/tapestry/tokens'
-import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { GroupResource } from '../types/resources/group_resource'
-import { useFeatures } from '../hooks/use_features'
-import { availableFeatures } from '../hooks/use_features'
-
+import { tokens } from '../vendor/tapestry/tokens'
 // =========================================
 // ====== Factory Constants & Types ========
 // =========================================
@@ -56,6 +59,7 @@ enum SectionTypes {
   hidden,
   members,
   loadingMembers,
+  navigableSetting,
   setting,
   view,
 }
@@ -64,6 +68,7 @@ type SectionListData = Array<
   | DataItem<{ title: string }, SectionTypes.header>
   | DataItem<MemberResource, SectionTypes.members>
   | DataItem<any, SectionTypes.loadingMembers>
+  | DataItem<NavigableSettingRowProps, SectionTypes.navigableSetting>
   | DataItem<ViewProps, SectionTypes.view>
   | DataItem<SettingRowProps, SectionTypes.setting>
   | DataItem<any, SectionTypes.hidden>
@@ -91,16 +96,20 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   const { data: conversation } = useConversation(route.params)
   const [title, setTitle] = useState(conversation.title)
-  const { muted, setMuted } = useConversationMute(route.params)
+  const { conversation_id } = route.params
   const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
   const { featureEnabled } = useFeatures()
   const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+  const granularNotificationsEnabled = featureEnabled(availableFeatures.granular_notifications_ui)
+  const { muted, setMuted } = useConversationMute({ conversation_id })
 
   const trimmedTitle = title.trim()
   const emptyTitle = trimmedTitle === '' || title === null
 
+  const notificationLevelDescription =
+    conversation?.conversationMembership?.notificationLevelDescription
   const canUpdate = conversation.memberAbility?.canUpdate || false
   const canDelete = conversation.memberAbility?.canDelete || false
   const isLeader = conversation.memberAbility?.leader || false
@@ -243,14 +252,25 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       showBottomBorder: true,
       sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
     },
-    {
-      type: SectionTypes.setting,
-      data: {
-        title: 'Mute',
-        rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,
-      },
-      showBottomBorder: true,
-    },
+    granularNotificationsEnabled
+      ? {
+          type: SectionTypes.navigableSetting,
+          data: {
+            title: 'Notifications',
+            subtitle: notificationLevelDescription,
+            onPress: () =>
+              navigation.navigate('ConversationNotificationLevelSelect', { conversation_id }),
+          },
+          showBottomBorder: true,
+        }
+      : {
+          type: SectionTypes.setting,
+          data: {
+            title: 'Mute',
+            rightItem: <Switch value={muted} onValueChange={value => setMuted(value)} />,
+          },
+          showBottomBorder: true,
+        },
     {
       type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
       data: {
@@ -350,6 +370,18 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
                   <Text>Loading more...</Text>
                 </ListSection>
               )
+            case SectionTypes.navigableSetting:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <NavigableSettingRow {...item.data} />
+                </ListSection>
+              )
             case SectionTypes.setting:
               return (
                 <ListSection
@@ -459,6 +491,12 @@ function TitleInput({ canUpdate, title, setTitle, style, isEmpty }: InputProps)
   )
 }
 
+interface NavigableSettingRowProps {
+  title: string
+  subtitle?: string
+  onPress: () => void
+}
+
 interface SettingRowProps {
   title: string
   style?: ViewStyle
@@ -510,6 +548,30 @@ function SettingRow({
   )
 }
 
+function NavigableSettingRow({ title, subtitle, onPress }: NavigableSettingRowProps) {
+  const styles = useStyles()
+  return (
+    <PlatformPressable onPress={onPress} accessibilityRole="button">
+      <View style={styles.settingRow}>
+        <View style={styles.settingRowContent}>
+          <Text variant="plain" style={styles.settingRowText}>
+            {title}
+          </Text>
+          {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
+        </View>
+        {Platform.OS === 'ios' && (
+          <Icon
+            name="general.rightChevron"
+            size={16}
+            style={styles.navigableSettingChevron}
+            accessibilityElementsHidden
+          />
+        )}
+      </View>
+    </PlatformPressable>
+  )
+}
+
 function TeamsGroup({ teams }: { teams: GroupResource[] }) {
   const styles = useStyles()
 
@@ -628,6 +690,9 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     settingRowText: {
       lineHeight: 20,
     },
+    navigableSettingChevron: {
+      color: colors.iconColorDefaultDisabled,
+    },
     teamGroup: {
       flexDirection: 'row',
       gap: 4,

package/src/screens/conversation_notification_level_select_screen.tsx

@@ -0,0 +1,73 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { PressableRow } from '../components'
+import { useTheme } from '../hooks'
+import { useConversation } from '../hooks/use_conversation'
+import { useConversationMembershipUpdate } from '../hooks/use_conversation_membership'
+import { NotificationLevelValue } from '../types'
+
+export const ConversationNotificationLevelSelectScreenOptions = getFormSheetScreenOptions({
+  headerTitle: 'Notification level',
+  sheetAllowedDetents: [0.35],
+})
+
+export type ConversationNotificationLevelSelectScreenProps = StaticScreenProps<{
+  conversation_id: number
+}>
+
+export function ConversationNotificationLevelSelectScreen({
+  route,
+}: ConversationNotificationLevelSelectScreenProps) {
+  const { conversation_id } = route.params
+  const navigation = useNavigation()
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const { data: conversation } = useConversation({ conversation_id })
+  const { mutate: updateNotificationLevel } = useConversationMembershipUpdate({ conversation_id })
+
+  const notificationLevel = conversation.conversationMembership?.notificationLevel
+  const notificationLevelOptions =
+    conversation.conversationMembership?.notificationLevelOptions ?? []
+
+  const handleSelect = (value: NotificationLevelValue, isActive: boolean) => {
+    if (!isActive) {
+      const muted = value === 'nothing'
+      updateNotificationLevel({
+        muted,
+        notificationLevel: value as typeof notificationLevel,
+      })
+    }
+    navigation.goBack()
+  }
+
+  return (
+    <FormSheet.Root contentStyle={styles.content}>
+      {notificationLevelOptions.map(option => {
+        const isActive = option.enabled
+        return (
+          <PressableRow
+            key={option.value}
+            text={option.description}
+            isActive={isActive}
+            onPress={() => handleSelect(option.value, isActive)}
+            iconColor={colors.statusSuccessIcon}
+            style={styles.row}
+          />
+        )
+      })}
+    </FormSheet.Root>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    content: {
+      paddingTop: 20,
+    },
+    row: {
+      borderBottomWidth: 0,
+    },
+  })
+}

package/src/screens/conversation_screen.tsx

@@ -53,6 +53,7 @@ export type ConversationRouteProps = {
   subtitle?: string
   badge?: ConversationBadgeResource
   deleted?: boolean
+  muted?: boolean
 }
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
@@ -109,6 +110,8 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const replyHeaderTitle = replyRootAuthorFirstName
     ? `Reply to ${replyRootAuthorFirstName}`
     : 'Reply'
+  // Prefer the membership for optimistic updates.
+  const muted = conversation.conversationMembership?.muted ?? conversation.muted
 
   const listRef = useRef<FlatList>(null)
   const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
@@ -134,9 +137,10 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         title: title,
         badge: badges?.[0],
         deleted: conversation?.deleted,
+        muted,
       })
     }
-  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle])
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle, muted])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -390,6 +394,7 @@ interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
   deleted?: boolean
+  muted?: boolean
 }
 
 export const ConversationScreenTitle = ({
@@ -398,6 +403,7 @@ export const ConversationScreenTitle = ({
   children,
   style,
   deleted,
+  muted,
 }: ConversationScreenTitleProps) => {
   const styles = usePressableHeaderStyle()
   const navigation = useNavigation()
@@ -416,9 +422,12 @@ export const ConversationScreenTitle = ({
       }}
     >
       <View style={styles.titleWrapper}>
-        <HeaderTitle maxFontSizeMultiplier={1} style={style}>
-          {children}
-        </HeaderTitle>
+        <View style={styles.titleTextContainer}>
+          <HeaderTitle maxFontSizeMultiplier={1} style={style}>
+            {children}
+          </HeaderTitle>
+        </View>
+        {muted && <Icon name="general.bellMuted" size={12} />}
         {!deleted && <Icon name="general.downChevron" size={12} />}
       </View>
       <Badge
@@ -438,6 +447,7 @@ const usePressableHeaderStyle = () => {
     container: {
       alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
       marginRight: Platform.select({ ios: 20, default: 16 }),
+      flex: 1,
     },
     titleWrapper: {
       alignItems: 'center',
@@ -445,6 +455,10 @@ const usePressableHeaderStyle = () => {
       flexDirection: 'row',
       flexShrink: 1,
     },
+    titleTextContainer: {
+      flexShrink: 1,
+      minWidth: 0,
+    },
     badge: {
       alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),
       marginTop: 2,

package/src/screens/group_notification_level_select_screen.tsx

@@ -0,0 +1,62 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { PressableRow } from '../components'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useTheme } from '../hooks'
+import { useGroup, useGroupMembershipUpdate } from './notification_settings/hooks/groups'
+
+export const GroupNotificationLevelSelectScreenOptions = getFormSheetScreenOptions({
+  headerTitle: 'Notification level',
+  sheetAllowedDetents: [0.35],
+})
+
+export type GroupNotificationLevelSelectScreenProps = StaticScreenProps<{
+  groupId: number | string
+}>
+
+export function GroupNotificationLevelSelectScreen({
+  route,
+}: GroupNotificationLevelSelectScreenProps) {
+  const { groupId } = route.params
+  const navigation = useNavigation()
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const { data: group } = useGroup({ groupId })
+  const { mutate: updateNotificationLevel } = useGroupMembershipUpdate({ groupId })
+
+  const notificationLevelOptions = group.myGroupMembership?.notificationLevelOptions ?? []
+
+  const handleSelect = (value: string, isActive: boolean) => {
+    if (!isActive) {
+      updateNotificationLevel({ notificationLevel: value })
+    }
+    navigation.goBack()
+  }
+
+  return (
+    <FormSheet.Root contentStyle={styles.content}>
+      {notificationLevelOptions.map(option => (
+        <PressableRow
+          key={option.value}
+          text={option.description}
+          isActive={option.enabled}
+          onPress={() => handleSelect(option.value, option.enabled)}
+          iconColor={colors.statusSuccessIcon}
+          style={styles.row}
+        />
+      ))}
+    </FormSheet.Root>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    content: {
+      paddingTop: 20,
+    },
+    row: {
+      borderBottomWidth: 0,
+    },
+  })
+}

package/src/screens/group_notification_settings_screen.tsx

@@ -1,10 +1,17 @@
+import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useEffect } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Heading, Switch, Text } from '../components'
+import { Platform, StyleSheet, View } from 'react-native'
+import { Heading, Icon, Text } from '../components'
 import { useTheme } from '../hooks'
 import { platformFontWeightBold } from '../utils/styles'
-import { useGroup, useGroupMembershipUpdate } from './notification_settings/hooks/groups'
+import { useGroup } from './notification_settings/hooks/groups'
+import type { GroupNotificationLevelSelectScreenProps } from './group_notification_level_select_screen'
+
+type GroupNotificationSettingsStackParamList = {
+  GroupNotificationLevelSelect: GroupNotificationLevelSelectScreenProps['route']['params']
+}
 
 export type GroupNotificationSettingsScreenProps = StaticScreenProps<{
   groupId: number | string
@@ -13,12 +20,12 @@ export type GroupNotificationSettingsScreenProps = StaticScreenProps<{
 
 export function GroupNotificationSettingsScreen({ route }: GroupNotificationSettingsScreenProps) {
   const { groupId, title } = route.params
-  const navigation = useNavigation()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<GroupNotificationSettingsStackParamList>>()
   const styles = useStyles()
   const { data: group } = useGroup({ groupId })
-  const { mutate: updateNotificationLevel } = useGroupMembershipUpdate({ groupId })
 
-  const notificationsEnabled = group.myGroupMembership?.notificationLevel === 'everything'
+  const notificationLevelDescription = group.myGroupMembership?.notificationLevelDescription
 
   useEffect(() => {
     if (!group.name || title === group.name) return
@@ -26,9 +33,8 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
     navigation.setOptions({ title: group.name })
   }, [group.name, title, navigation])
 
-  const handleToggle = (value: boolean) => {
-    const notificationLevel = value ? 'everything' : 'nothing'
-    updateNotificationLevel(notificationLevel)
+  const handleOpenSelector = () => {
+    navigation.navigate('GroupNotificationLevelSelect', { groupId })
   }
 
   return (
@@ -44,10 +50,30 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
           </Text>
         </View>
       </View>
-      <View style={styles.settingRow}>
-        <Text>Enable notifications</Text>
-        <Switch value={notificationsEnabled} onValueChange={handleToggle} />
-      </View>
+      <PlatformPressable
+        style={styles.settingRowPressable}
+        onPress={handleOpenSelector}
+        accessibilityRole="button"
+        accessibilityLabel="Notify me for"
+        accessibilityHint={`Currently set to ${notificationLevelDescription}. Tap to change.`}
+      >
+        <View style={styles.settingRowInner}>
+          <View style={styles.settingRowText}>
+            <Text>Notify me for</Text>
+            {Boolean(notificationLevelDescription) && (
+              <Text variant="tertiary">{notificationLevelDescription}</Text>
+            )}
+          </View>
+          {Platform.OS === 'ios' && (
+            <Icon
+              name="general.rightChevron"
+              size={16}
+              style={styles.chevron}
+              accessibilityElementsHidden
+            />
+          )}
+        </View>
+      </PlatformPressable>
     </View>
   )
 }
@@ -66,7 +92,7 @@ const useStyles = () => {
     },
     sectionInner: {
       paddingRight: 16,
-      paddingTop: 16,
+      paddingTop: 24,
       paddingBottom: 12,
       borderBottomWidth: 1,
       borderBottomColor: colors.borderColorDefaultBase,
@@ -80,13 +106,22 @@ const useStyles = () => {
     groupNameBold: {
       fontWeight: platformFontWeightBold,
     },
-    settingRow: {
+    settingRowPressable: {
+      paddingLeft: 16,
+    },
+    settingRowInner: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 16,
+      justifyContent: 'space-between',
+      paddingRight: 16,
       paddingVertical: 12,
-      backgroundColor: colors.surfaceColor100,
+    },
+    settingRowText: {
+      flex: 1,
+      gap: 2,
+    },
+    chevron: {
+      color: colors.iconColorDefaultDisabled,
     },
   })
 }