@planningcenter/chat-react-native 3.24.4 → 3.24.5-qa-563.0

package/src/components/conversation/message.tsx

@@ -45,7 +45,6 @@ interface MessageProps extends MessageResource {
   conversation_id: number
   latestReadMessageSortKey?: string
   inReplyScreen?: boolean
-  repliesEnabled?: boolean
 }
 
 export function Message({
@@ -53,7 +52,6 @@ export function Message({
   conversation_id,
   latestReadMessageSortKey,
   inReplyScreen,
-  repliesEnabled,
   ...message
 }: MessageProps) {
   const { text, reactionCounts, pending, error, attachments, author } = message
@@ -85,11 +83,10 @@ export function Message({
   }
 
   const renderAuthor = (!message.mine && message.renderAuthor) || false
-  const showReplyCountButton =
-    !inReplyScreen && message.replyRootId === message.id && repliesEnabled
+  const showReplyCountButton = !inReplyScreen && message.replyRootId === message.id
   const isReplyRootMessage = message.replyRootId === message.id
   const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
-  const replyToReplyRootMessage = repliesEnabled && !isReplyRootMessage && !!message.replyRootId
+  const replyToReplyRootMessage = !isReplyRootMessage && !!message.replyRootId
 
   const replyCountText = pluralize(message.replyCount, 'reply')
   const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
@@ -221,9 +218,7 @@ export function Message({
             ) : (
               <View style={styles.avatarPlaceholder} />
             )}
-            {repliesEnabled && (
-              <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
-            )}
+            <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
           </View>
         )}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
@@ -332,7 +327,7 @@ export function Message({
             </View>
           )}
         </View>
-        {repliesEnabled && message.mine && (
+        {message.mine && (
           <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
         )}
       </Animated.View>

package/src/components/conversation/message_form.tsx

@@ -29,7 +29,6 @@ import {
   platformFontWeightMedium,
   platformPressedOpacityStyle,
 } from '../../utils'
-import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import { useMessageDraft } from '../../hooks/use_message_draft'
 import {
@@ -571,11 +570,9 @@ function EditingIndicator() {
 function ReplyIndicator() {
   const { replyRootId, replyRootAuthorFirstName } = React.useContext(MessageFormContext)
   const navigation = useNavigation()
-  const { featureEnabled } = useFeatures()
-  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
   const title = replyRootAuthorFirstName ? `Reply to ${replyRootAuthorFirstName}` : 'Reply'
 
-  if (!repliesEnabled || !replyRootId) return null
+  if (!replyRootId) return null
 
   return (
     <FormIndicatorRow

package/src/components/conversation/messages_disabled_banners.tsx

@@ -2,30 +2,22 @@ import { StyleSheet, View, type ViewStyle } from 'react-native'
 import { useTheme } from '../../hooks'
 import { Text } from '../display'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { useFeatures } from '../../hooks/use_features'
-import { availableFeatures } from '../../hooks/use_features'
 
 export const LeaderMessagesDisabledBanner = () => {
-  const { featureEnabled } = useFeatures()
-  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
-
-  const description = repliesEnabled
-    ? 'Only leaders can send messages in this conversation.'
-    : 'Replies are frozen for everyone else.'
-
-  return <MessagesDisabledBanner description={description} />
+  return (
+    <MessagesDisabledBanner description="Only leaders can send messages in this conversation." />
+  )
 }
 
 export const MemberMessagesDisabledBanner = () => {
   const styles = useStyles()
-  const { featureEnabled } = useFeatures()
-  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
 
-  const description = repliesEnabled
-    ? 'Only leaders can send messages, but you can still add reactions.'
-    : 'Replies have been disabled by a leader, but you can still add reactions.'
-
-  return <MessagesDisabledBanner description={description} style={styles.memberBanner} />
+  return (
+    <MessagesDisabledBanner
+      description="Only leaders can send messages, but you can still add reactions."
+      style={styles.memberBanner}
+    />
+  )
 }
 
 interface MessagesDisabledBannerProps {

package/src/components/conversations/conversation_actions.tsx

@@ -91,7 +91,7 @@ export function ConversationActions({
   const accessibilityActions = [
     {
       name: muted ? 'unmute' : 'mute',
-      label: muted ? 'Unmute' : 'Mute',
+      label: muted ? 'Enable' : 'Silence',
     },
     ...readAccessibilityAction,
   ]
@@ -182,8 +182,8 @@ function LeftActions({
   const styles = useStyles()
 
   const muteToggleContent = {
-    true: { iconName: 'general.bell', label: 'Unmute' },
-    false: { iconName: 'general.bellMuted', label: 'Mute' },
+    true: { iconName: 'general.bell', label: 'Enable' },
+    false: { iconName: 'general.bellMuted', label: 'Silence' },
   } as const
 
   const latestMessageUnreadToggleContent = {

package/src/components/conversations/conversations.tsx

@@ -83,6 +83,7 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
                     title: item.resource.title,
                     badge: item.resource.badges?.[0],
                     deleted: item.resource.deleted,
+                    muted: item.resource.muted,
                   })
                 }
                 showBadges={showBadges}

package/src/hooks/use_conversation.ts

@@ -38,7 +38,13 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'can_reply',
         'can_delete_non_authored_messages',
       ],
-      ConversationMembership: ['last_read_message_sort_key'],
+      ConversationMembership: [
+        'last_read_message_sort_key',
+        'notification_level',
+        'notification_level_description',
+        'notification_level_options',
+        'muted',
+      ],
       ConversationBadge: ['app_name', 'pco_resource_type', 'text'],
       Group: ['type', 'id', 'links', 'name', 'source_app_name', 'source_type'],
     },
@@ -72,6 +78,9 @@ export const useConversationMute = ({ conversation_id }: { conversation_id: numb
         if (!prev?.data) return prev
         setValue(muted)
         prev.data.muted = muted
+        if (prev.data.conversationMembership) {
+          prev.data.conversationMembership.muted = muted
+        }
 
         return prev
       })
@@ -93,6 +102,9 @@ export const useConversationMute = ({ conversation_id }: { conversation_id: numb
         // Posting to the mute action endpoint can't return all the fields
         // so we need to set only the fields we require
         prev.data.muted = response.data.muted
+        if (prev.data.conversationMembership) {
+          prev.data.conversationMembership.muted = response.data.muted
+        }
         setValue(response.data.muted)
 
         return prev

package/src/hooks/use_conversation_membership.ts

@@ -0,0 +1,91 @@
+import { Updater, useMutation, useQueryClient } from '@tanstack/react-query'
+import { ApiResource, ConversationMembershipResource, ConversationResource } from '../types'
+import { useApiClient } from './use_api_client'
+import { getConversationRequestArgs } from './use_conversation'
+import { getRequestQueryKey } from './use_suspense_api'
+import { deepSnakeCaseKeys } from '../utils/deep_snake_case_keys'
+import { throwResponseError } from '../utils/response_error'
+
+export const useConversationMembershipUpdate = ({
+  conversation_id,
+}: {
+  conversation_id: number
+}) => {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+  const requestArgs = getConversationRequestArgs({ conversation_id })
+  const conversationMembershipFields = requestArgs.data.fields.ConversationMembership.join(',')
+  const queryKey = getRequestQueryKey(requestArgs)
+
+  return useMutation({
+    throwOnError: true,
+    onMutate: async (attributes: Partial<ConversationMembershipResource>) => {
+      queryClient.setQueryData<ApiResource<ConversationResource>>(
+        queryKey,
+        updateConversationMembershipAttributes(attributes)
+      )
+    },
+    mutationKey: ['updateConversationMembership', conversation_id],
+    mutationFn: async (attributes: Partial<ConversationMembershipResource>) => {
+      return apiClient.chat
+        .patch<ApiResource<ConversationMembershipResource>>({
+          url: `/me/conversations/${conversation_id}/conversation_membership`,
+          data: {
+            data: {
+              type: 'ConversationMembership',
+              attributes: deepSnakeCaseKeys(attributes),
+            },
+            fields: {
+              ConversationMembership: conversationMembershipFields,
+            },
+          },
+        })
+        .catch(throwResponseError)
+    },
+    onSuccess: response => {
+      const membership = response.data
+
+      queryClient.setQueryData<ApiResource<ConversationResource>>(
+        queryKey,
+        updateConversationMembershipAttributes(membership)
+      )
+    },
+  })
+}
+
+const updateConversationMembershipAttributes =
+  (
+    membership: Partial<ConversationMembershipResource>
+  ): Updater<
+    ApiResource<ConversationResource> | undefined,
+    ApiResource<ConversationResource> | undefined
+  > =>
+  conversationData =>
+    mergeConversationMembership(conversationData, membership)
+
+const mergeConversationMembership = (
+  conversationData: ApiResource<ConversationResource> | undefined,
+  membership: Partial<ConversationMembershipResource>
+) => {
+  if (!conversationData) return undefined
+  if (!conversationData.data) return conversationData
+  if (!conversationData.data.conversationMembership) return conversationData
+
+  const previousMembership: Partial<ConversationMembershipResource> =
+    conversationData.data.conversationMembership || {}
+
+  const mergedMembership: Partial<ConversationMembershipResource> = {
+    ...previousMembership,
+    ...membership,
+  }
+
+  const data: ConversationResource = {
+    ...conversationData.data,
+    conversationMembership: mergedMembership,
+  }
+
+  return {
+    ...conversationData,
+    data,
+  }
+}

package/src/hooks/use_conversations_actions.ts

@@ -67,6 +67,10 @@ export const useConversationsMute = ({ conversation }: { conversation: Conversat
       update({
         ...conversation,
         muted,
+        conversationMembership: {
+          ...conversation?.conversationMembership,
+          muted,
+        },
       })
     },
     mutationKey: ['muteConversation'],

package/src/hooks/use_features.ts

@@ -34,8 +34,8 @@ export function useFeatures() {
 }
 
 export const availableFeatures = {
-  threaded_replies: 'ROLLOUT_MOBILE_threaded_replies_v1',
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
+  granular_notifications_ui: 'ROLLOUT_granular_notification_preferences_ui',
 }
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/navigation/index.tsx

@@ -56,6 +56,14 @@ import { NotFound } from '../screens/not_found'
 import { NotificationSettingsScreen } from '../screens/notification_settings_screen'
 import { PreferredAppSelectionScreen } from '../screens/preferred_app_selection_screen'
 import { GroupNotificationSettingsScreen } from '../screens/group_notification_settings_screen'
+import {
+  GroupNotificationLevelSelectScreen,
+  GroupNotificationLevelSelectScreenOptions,
+} from '../screens/group_notification_level_select_screen'
+import {
+  ConversationNotificationLevelSelectScreen,
+  ConversationNotificationLevelSelectScreenOptions,
+} from '../screens/conversation_notification_level_select_screen'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { ScreenLayoutWithChatAccessGate } from './screenLayout'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
@@ -163,13 +171,15 @@ export const ChatStack = createNativeStackNavigator({
       screen: ConversationScreen,
       options: ({ route, navigation }) => ({
         headerTitle: (props: NativeStackHeaderRightProps) => {
-          const { conversation_id, title, badge, deleted } = route.params as ConversationRouteProps
+          const { conversation_id, title, badge, deleted, muted } =
+            route.params as ConversationRouteProps
 
           return (
             <ConversationScreenTitle
               conversation_id={conversation_id}
               badge={badge}
               deleted={deleted}
+              muted={muted}
               {...props}
             >
               {title ?? 'Conversation'}
@@ -259,6 +269,14 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    GroupNotificationLevelSelect: {
+      screen: GroupNotificationLevelSelectScreen,
+      options: GroupNotificationLevelSelectScreenOptions,
+    },
+    ConversationNotificationLevelSelect: {
+      screen: ConversationNotificationLevelSelectScreen,
+      options: ConversationNotificationLevelSelectScreenOptions,
+    },
     New: {
       screen: NewConversationStack,
       if: useQualifiedByAge,

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,19 @@ 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,19 +251,29 @@ 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: {
-        title: repliesEnabled ? 'Leader messages only' : 'Freeze conversation',
-        subtitle: repliesEnabled ? undefined : 'Disables replies for everyone except leaders.',
+        title: 'Only leaders can message',
         rightItem: (
           <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />
         ),
@@ -350,6 +368,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 +489,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 +546,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 +688,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,
+    },
+  })
+}