@planningcenter/chat-react-native 3.24.0-rc.7 → 3.24.0-rc.9

package/src/components/display/platform_modal_header_buttons.tsx

@@ -3,6 +3,7 @@ import { TextButton } from './text_button'
 import { HeaderButton } from '@react-navigation/elements'
 import { Icon } from './icon'
 import { useTheme } from '../../hooks'
+import type { NativeStackHeaderRightProps } from '@react-navigation/native-stack'
 
 interface HeaderTextButtonProps {
   onPress: () => void
@@ -62,6 +63,21 @@ export const HeaderDismissButton = ({
   })
 }
 
+interface HeaderDoneButtonProps extends NativeStackHeaderRightProps {
+  navigation: { goBack: () => void; getState: () => any }
+}
+
+export const HeaderDoneButton = ({ navigation, ...props }: HeaderDoneButtonProps) => {
+  const state = navigation.getState()
+  const isFirstScreen = state.index === 0
+
+  if (!isFirstScreen) {
+    return null
+  }
+
+  return <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+}
+
 const useStyles = () => {
   const { colors } = useTheme()
 

package/src/navigation/index.tsx

@@ -8,7 +8,10 @@ import { CardStyleInterpolators } from '@react-navigation/stack'
 import React from 'react'
 import { Platform } from 'react-native'
 import { Icon } from '../components'
-import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import {
+  HeaderDoneButton,
+  HeaderTextButton,
+} from '../components/display/platform_modal_header_buttons'
 import {
   AttachmentActionsScreen,
   AttachmentActionsScreenOptions,
@@ -49,6 +52,9 @@ import {
 } from '../screens/message_actions_screen'
 import { MessageReportScreen, MessageReportScreenOptions } from '../screens/message_report_screen'
 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 { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { ScreenLayoutWithChatAccessGate } from './screenLayout'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
@@ -223,6 +229,31 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    NotificationSettings: {
+      screen: NotificationSettingsScreen,
+      options: ({ navigation }) => ({
+        title: 'Chat',
+        headerBackVisible: false,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+        ),
+      }),
+    },
+    PreferredAppSelection: {
+      screen: PreferredAppSelectionScreen,
+      options: {
+        title: 'Preferred app',
+      },
+    },
+    GroupNotificationSettings: {
+      screen: GroupNotificationSettingsScreen,
+      options: ({ route, navigation }) => ({
+        title: (route.params as { title?: string })?.title || 'Group Settings',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderDoneButton {...props} navigation={navigation} />
+        ),
+      }),
+    },
     New: {
       screen: NewConversationStack,
       if: useQualifiedByAge,

package/src/screens/group_notification_settings_screen.tsx

@@ -0,0 +1,92 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useEffect } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Heading, Switch, Text } from '../components'
+import { useTheme } from '../hooks'
+import { platformFontWeightBold } from '../utils/styles'
+import { useGroup, useGroupMembershipUpdate } from './notification_settings/hooks/groups'
+
+export type GroupNotificationSettingsScreenProps = StaticScreenProps<{
+  groupId: number | string
+  title: string
+}>
+
+export function GroupNotificationSettingsScreen({ route }: GroupNotificationSettingsScreenProps) {
+  const { groupId, title } = route.params
+  const navigation = useNavigation()
+  const styles = useStyles()
+  const { data: group } = useGroup({ groupId })
+  const { mutate: updateNotificationLevel } = useGroupMembershipUpdate({ groupId })
+
+  const notificationsEnabled = group.myGroupMembership?.notificationLevel === 'everything'
+
+  useEffect(() => {
+    if (!group.name || title === group.name) return
+
+    navigation.setOptions({ title: group.name })
+  }, [group.name, title, navigation])
+
+  const handleToggle = (value: boolean) => {
+    const notificationLevel = value ? 'everything' : 'nothing'
+    updateNotificationLevel(notificationLevel)
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.sectionOuter}>
+        <View style={styles.sectionInner}>
+          <Heading variant="h3" style={styles.sectionHeading}>
+            Group notification settings
+          </Heading>
+          <Text variant="tertiary" style={styles.sectionSubtitle}>
+            The settings are applied to all conversations in{' '}
+            <Text style={styles.groupNameBold}>{group.name || title}</Text>
+          </Text>
+        </View>
+      </View>
+      <View style={styles.settingRow}>
+        <Text>Enable notifications</Text>
+        <Switch value={notificationsEnabled} onValueChange={handleToggle} />
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.surfaceColor100,
+    },
+    sectionOuter: {
+      paddingLeft: 16,
+      backgroundColor: colors.surfaceColor100,
+    },
+    sectionInner: {
+      paddingRight: 16,
+      paddingTop: 16,
+      paddingBottom: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+    },
+    sectionHeading: {
+      paddingBottom: 4,
+    },
+    sectionSubtitle: {
+      color: colors.textColorDefaultSecondary,
+    },
+    groupNameBold: {
+      fontWeight: platformFontWeightBold,
+    },
+    settingRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: colors.surfaceColor100,
+    },
+  })
+}

package/src/screens/index.ts

@@ -2,6 +2,9 @@ export * from './design_system_screen'
 export * from './conversation_details_screen'
 export * from './conversation_screen'
 export * from './conversation_new/conversation_new_screen'
+export * from './notification_settings_screen'
+export * from './preferred_app_selection_screen'
+export * from './group_notification_settings_screen'
 export * from './conversation_filter_recipients/conversation_filter_recipients_screen'
 export * from './message_actions_screen'
 export * from './message_report_screen'

package/src/screens/notification_settings/hooks/groups.ts

@@ -0,0 +1,101 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { getRequestQueryKey, useApiClient } from '../../../hooks'
+import { useSuspenseGet, useSuspensePaginator } from '../../../hooks'
+import { ApiResource } from '../../../types'
+import { GroupMembership, GroupResourceWithMembership } from '../../../types/resources'
+import { throwResponseError } from '../../../utils/response_error'
+
+export const getGroupsRequestArgs = () => ({
+  url: '/me/groups',
+  data: {
+    perPage: 100,
+    include: ['my_group_membership'],
+    filter: 'user_settable_notification_level',
+    fields: {
+      Group: [],
+      GroupMembership: ['notification_level', 'notification_level_description'],
+    },
+    order: 'name',
+  },
+})
+
+export const getGroupRequestArgs = ({ groupId }: { groupId: number | string }) => ({
+  url: `/me/groups/${groupId}`,
+  data: {
+    include: ['my_group_membership'],
+    fields: {
+      Group: ['name', 'source_app_name', 'source_type', 'my_group_membership'],
+      GroupMembership: ['notification_level', 'notification_level_description'],
+    },
+  },
+})
+
+export const useGroups = () => {
+  const args = getGroupsRequestArgs()
+
+  return useSuspensePaginator<GroupResourceWithMembership>(args)
+}
+
+export const useGroup = ({ groupId }: { groupId: number | string }) => {
+  const args = getGroupRequestArgs({ groupId })
+
+  return useSuspenseGet<GroupResourceWithMembership>(args)
+}
+
+export const useGroupMembershipUpdate = ({ groupId }: { groupId: number | string }) => {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+  const requestArgs = getGroupRequestArgs({ groupId })
+  const queryKey = getRequestQueryKey(requestArgs)
+
+  return useMutation({
+    throwOnError: true,
+    onMutate: notificationLevel => {
+      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
+        if (!groupData?.data.myGroupMembership) return groupData
+
+        return {
+          ...groupData,
+          data: {
+            ...groupData.data,
+            myGroupMembership: {
+              ...groupData.data.myGroupMembership,
+              notificationLevel,
+            },
+          },
+        }
+      })
+    },
+    onSuccess: response => {
+      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
+        if (!groupData?.data.myGroupMembership) return groupData
+
+        return {
+          ...groupData,
+          data: {
+            ...groupData.data,
+            myGroupMembership: {
+              ...groupData.data.myGroupMembership,
+              ...response.data,
+            },
+          },
+        }
+      })
+    },
+    mutationFn: (notificationLevel: string) => {
+      return apiClient.chat
+        .patch<ApiResource<GroupMembership>>({
+          url: `/me/groups/${groupId}/my_group_membership`,
+          data: {
+            data: {
+              type: 'GroupMembership',
+              attributes: {
+                notification_level: notificationLevel,
+              },
+            },
+          },
+        })
+        .catch(throwResponseError)
+    },
+  })
+}

package/src/screens/notification_settings_screen.tsx

@@ -0,0 +1,383 @@
+import { PlatformPressable } from '@react-navigation/elements'
+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 { 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'
+
+// =========================================
+// ====== Factory Constants & Types ========
+// =========================================
+
+type NotificationSettingsStackParamList = {
+  NotificationSettings: {}
+  PreferredAppSelection: PreferredAppSelectionScreenProps['route']['params']
+  GroupNotificationSettings: GroupNotificationSettingsScreenProps['route']['params']
+}
+
+enum SectionTypes {
+  header,
+  hidden,
+  setting,
+  view,
+  link,
+}
+
+type SectionListData = Array<
+  | DataItem<{ title: string }, SectionTypes.header>
+  | DataItem<ViewProps, SectionTypes.view>
+  | DataItem<SettingRowProps, SectionTypes.setting>
+  | DataItem<LinkRowProps, SectionTypes.link>
+  | DataItem<any, SectionTypes.hidden>
+>
+
+interface DataItem<T, TName extends SectionTypes> {
+  type: TName
+  data: T
+  sectionOuterStyle?: ViewStyle
+  sectionInnerStyle?: ViewStyle
+  showBottomBorder?: boolean
+}
+
+// =================================
+// ====== Components ===============
+// =================================
+
+export type NotificationSettingsScreenProps = StaticScreenProps<{}>
+
+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(() => {
+    return (
+      <HeaderTextButton
+        onPress={() => {
+          // Save settings logic would go here
+          navigation.goBack()
+        }}
+        title="Done"
+      />
+    )
+  }, [navigation])
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: HeaderRight,
+    })
+  }, [HeaderRight, navigation])
+
+  // Build section data
+  const listData = [
+    {
+      type: SectionTypes.header,
+      data: { title: 'Preferred app' },
+      sectionInnerStyle: styles.sectionInnerHeader,
+    },
+    {
+      type: SectionTypes.view,
+      data: {
+        children: (
+          <Text variant="tertiary" style={styles.sectionDescription}>
+            Choose which app receives each type of chat notification
+          </Text>
+        ),
+      },
+      showBottomBorder: true,
+    },
+    ...chatTypes.map(type => ({
+      type: SectionTypes.link,
+      data: {
+        title: `${type.title} Conversations`,
+        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,
+    })),
+  ].filter(item => item.type !== SectionTypes.hidden)
+
+  const headerIndices = listData
+    .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))
+    .filter(isDefined)
+
+  return (
+    <View style={styles.listContainer}>
+      <FlatList
+        data={listData as SectionListData}
+        contentContainerStyle={styles.contentContainer}
+        renderItem={({ item, index }) => {
+          const [isStart, isEnd] = [
+            index === 0 || headerIndices.includes(index),
+            index === listData.length - 1 || headerIndices.includes(index + 1),
+          ]
+
+          switch (item.type) {
+            case SectionTypes.header:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <Heading variant="h2">{item.data.title}</Heading>
+                </ListSection>
+              )
+            case SectionTypes.setting:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <SettingRow {...item.data} />
+                </ListSection>
+              )
+            case SectionTypes.view:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <View {...item.data} style={item.data.style} />
+                </ListSection>
+              )
+            case SectionTypes.link:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <LinkRow {...item.data} />
+                </ListSection>
+              )
+            default:
+              return null
+          }
+        }}
+      />
+    </View>
+  )
+}
+
+interface ListSectionProps {
+  isStart?: boolean
+  isEnd?: boolean
+  showBottomBorder?: boolean
+  outerStyle?: ViewStyle
+  innerStyle?: ViewStyle
+  children: ReactNode
+}
+
+function ListSection({
+  isStart,
+  isEnd,
+  showBottomBorder,
+  outerStyle,
+  innerStyle,
+  children,
+}: ListSectionProps) {
+  const styles = useStyles({ isStart, isEnd })
+  const bottomBorder = showBottomBorder ? styles.sectionInnerBottomBorder : {}
+
+  return (
+    <View style={[styles.sectionOuterBase, outerStyle]}>
+      <View style={[styles.sectionInnerBase, bottomBorder, innerStyle]}>{children}</View>
+    </View>
+  )
+}
+
+interface SettingRowProps {
+  title: string
+  style?: ViewStyle
+  rightItem?: ReactNode
+  rightLabel?: string
+  rightItemStyle?: ViewStyle
+}
+
+function SettingRow({ title, style, rightLabel, rightItem, rightItemStyle = {} }: SettingRowProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={[styles.settingRow, style]}>
+      <View style={styles.settingRowContent}>
+        <Text variant="plain" style={styles.settingRowText}>
+          {title}
+        </Text>
+        {Boolean(rightLabel) && <Text variant="footnote">{rightLabel}</Text>}
+      </View>
+      {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
+    </View>
+  )
+}
+
+interface LinkRowProps {
+  title: string
+  rightLabel: string
+  onPress: () => void
+}
+
+function LinkRow({ title, rightLabel, onPress }: LinkRowProps) {
+  const styles = useLinkRowStyles()
+  const isSourceType = rightLabel === 'Team' || rightLabel === 'Group' || rightLabel === 'PlanTeam'
+
+  return (
+    <PlatformPressable
+      style={styles.row}
+      onPress={onPress}
+      accessibilityRole="link"
+      accessibilityLabel={title}
+      accessibilityHint={`Navigate to ${title} settings`}
+    >
+      <View style={styles.innerContainer}>
+        <Text style={styles.title} numberOfLines={2}>
+          {title}
+        </Text>
+        <View style={styles.rightContent}>
+          {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} />
+          )}
+        </View>
+      </View>
+    </PlatformPressable>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({}: { isStart?: boolean; isEnd?: boolean } = {}) => {
+  const { colors } = useTheme()
+  const headerBottomPadding = 0
+
+  return StyleSheet.create({
+    listContainer: {
+      flex: 1,
+    },
+    contentContainer: {},
+    sectionOuterBase: {
+      paddingLeft: 16,
+    },
+    sectionInnerBase: {
+      paddingRight: 16,
+      paddingVertical: 16,
+    },
+    sectionInnerHeader: {
+      paddingBottom: headerBottomPadding,
+    },
+    sectionInnerBottomBorder: {
+      borderBottomColor: colors.borderColorDefaultBase,
+      borderBottomWidth: 1,
+    },
+    sectionDescription: {
+      color: colors.textColorDefaultSecondary,
+    },
+    settingRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: 8,
+    },
+    settingRowContent: {
+      flex: 1,
+    },
+    settingRowText: {
+      lineHeight: 20,
+    },
+  })
+}
+
+const useLinkRowStyles = () => {
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    row: {
+      paddingLeft: 0,
+      paddingVertical: 16,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 12,
+    },
+    rightContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    title: {
+      flexShrink: 1,
+      alignSelf: 'center',
+    },
+    rightLabelText: {
+      color: theme.colors.textColorDefaultSecondary,
+    },
+    icon: {
+      color: theme.colors.iconColorDefaultDisabled,
+    },
+  })
+}

package/src/screens/preferred_app/hooks/use_chat_types.ts

@@ -0,0 +1,25 @@
+import { useSuspenseGet } from '../../../hooks'
+import { ResourceObject } from '../../../types'
+
+export type SourceAppName = 'Services' | 'Church Center'
+export type PreferredApp = 'Services' | 'Church Center' | 'Chat' | 'None'
+
+export interface ChatTypeResource extends ResourceObject {
+  type: 'ChatType'
+  defaultPreferredApp: PreferredApp
+  preferredApp: PreferredApp
+  preferredAppOptions: PreferredApp[]
+  sourceAppName: SourceAppName
+  title: string
+}
+
+export const useChatTypes = () => {
+  return useSuspenseGet<ChatTypeResource[]>({
+    url: '/me/chat_types',
+    data: {
+      fields: {
+        ChatType: [],
+      },
+    },
+  })
+}