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

package/src/hooks/use_conversation.ts

@@ -38,7 +38,12 @@ 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',
+      ],
       ConversationBadge: ['app_name', 'pco_resource_type', 'text'],
       Group: ['type', 'id', 'links', 'name', 'source_app_name', 'source_type'],
     },

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/navigation/index.tsx

@@ -163,13 +163,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'}

package/src/screens/conversation_details_screen.tsx

@@ -1,25 +1,25 @@
+import { HeaderTitle as ElementsHeaderTitle, HeaderTitleProps } 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,21 +31,20 @@ 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,
   useConversationDelete,
   useConversationDisableReplies,
-  useConversationMute,
   useConversationUpdate,
 } from '../hooks/use_conversation'
+import { useConversationMembershipUpdate } from '../hooks/use_conversation_membership'
+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 ========
@@ -91,7 +90,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   const { data: conversation } = useConversation(route.params)
   const [title, setTitle] = useState(conversation.title)
-  const { muted, setMuted } = useConversationMute(route.params)
+  const { mutate: updateMembership } = useConversationMembershipUpdate(route.params)
   const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
@@ -101,6 +100,10 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const trimmedTitle = title.trim()
   const emptyTitle = trimmedTitle === '' || title === null
 
+  const notificationsEnabled =
+    conversation.conversationMembership?.notificationLevel === 'everything'
+  const notificationLevelDescription =
+    conversation?.conversationMembership?.notificationLevelDescription
   const canUpdate = conversation.memberAbility?.canUpdate || false
   const canDelete = conversation.memberAbility?.canDelete || false
   const isLeader = conversation.memberAbility?.leader || false
@@ -163,6 +166,15 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const productName = badge?.appName
   const name = badge?.text || undefined
 
+  const handleToggleNotificationPreferences = useCallback(
+    (value: boolean) => {
+      updateMembership({
+        notificationLevel: value ? 'everything' : 'nothing',
+      })
+    },
+    [updateMembership]
+  )
+
   const handleDelete = useCallback(() => {
     Alert.alert(
       'Delete conversation',
@@ -246,8 +258,14 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: SectionTypes.setting,
       data: {
-        title: 'Mute',
-        rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,
+        title: 'Enable notifications',
+        subtitle: notificationLevelDescription,
+        rightItem: (
+          <Switch
+            value={notificationsEnabled}
+            onValueChange={handleToggleNotificationPreferences}
+          />
+        ),
       },
       showBottomBorder: true,
     },

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>
@@ -134,9 +135,18 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         title: title,
         badge: badges?.[0],
         deleted: conversation?.deleted,
+        muted: conversation?.muted,
       })
     }
-  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle])
+  }, [
+    navigation,
+    title,
+    badges,
+    conversation?.deleted,
+    conversation?.muted,
+    reply_root_id,
+    replyHeaderTitle,
+  ])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -390,6 +400,7 @@ interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
   deleted?: boolean
+  muted?: boolean
 }
 
 export const ConversationScreenTitle = ({
@@ -398,6 +409,7 @@ export const ConversationScreenTitle = ({
   children,
   style,
   deleted,
+  muted,
 }: ConversationScreenTitleProps) => {
   const styles = usePressableHeaderStyle()
   const navigation = useNavigation()
@@ -416,9 +428,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 +453,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 +461,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/types/resources/conversation.ts

@@ -1,5 +1,6 @@
 import type { AnalyticsMetadataResource } from './analytics_metadata'
 import { ConversationBadgeResource } from './conversation_badge'
+import { ConversationMembershipResource } from './conversation_membership'
 import { GroupResource } from './group_resource'
 import { MemberAbilityResource } from './member_ability'
 
@@ -8,9 +9,7 @@ export interface ConversationResource {
   id: number
   badges?: ConversationBadgeResource[]
   analyticsMetadata?: AnalyticsMetadataResource
-  conversationMembership?: {
-    lastReadMessageSortKey: string
-  }
+  conversationMembership?: Partial<ConversationMembershipResource>
   createdAt: string
   deleted?: boolean
   groups?: GroupResource[]

package/src/types/resources/conversation_membership.ts

@@ -0,0 +1,15 @@
+import { ResourceObject } from '../api_primitives'
+
+export type NotificationLevelValue = 'everything' | 'nothing'
+export type NotificationLevelDescription = string
+
+export interface ConversationMembershipResource extends ResourceObject {
+  type: 'ConversationMembership'
+  lastReadMessageSortKey: string
+  notificationLevel: NotificationLevelValue
+  notificationLevelDescription: NotificationLevelDescription
+  notificationLevelOptions: Array<{
+    description: NotificationLevelDescription
+    value: NotificationLevelValue
+  }>
+}

package/src/types/resources/index.ts

@@ -1,5 +1,6 @@
 export * from './analytics_metadata'
 export * from './conversation'
+export * from './conversation_membership'
 export * from './member'
 export * from './message'
 export * from './oauth_token'

package/src/utils/deep_snake_case_keys.ts

@@ -0,0 +1,16 @@
+import { isArray, isObject, mapKeys, mapValues, snakeCase } from 'lodash'
+
+type ObjType = Record<string, unknown> | unknown[] | unknown
+
+export function deepSnakeCaseKeys<T extends ObjType>(obj: T): T {
+  if (isArray(obj)) {
+    return obj.map(deepSnakeCaseKeys) as T
+  } else if (isObject(obj)) {
+    return mapValues(
+      // @ts-ignore This mutates the object, but we don't care about the type here
+      mapKeys(obj, (_value: string, key: string) => snakeCase(key)),
+      deepSnakeCaseKeys
+    ) as T
+  }
+  return obj
+}