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

package/src/screens/notification_settings_screen.tsx

@@ -0,0 +1,356 @@
+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 { Heading, Icon, Text } from '../components'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import { useTheme } from '../hooks'
+import { isDefined } from '../types'
+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']
+}
+
+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()
+
+  // 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="footnote" 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`,
+        subtitle: type.preferredApp,
+        onPress: () =>
+          navigation.navigate('PreferredAppSelection', {
+            chatTypeId: type.id,
+          }),
+      },
+      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
+    .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="h3">{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
+  subtitle?: string
+  rightItemStyle?: ViewStyle
+}
+
+function SettingRow({ title, style, subtitle, 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(subtitle) && <Text variant="footnote">{subtitle}</Text>}
+      </View>
+      {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
+    </View>
+  )
+}
+
+interface LinkRowProps {
+  title: string
+  subtitle: string
+  onPress: () => void
+}
+
+function LinkRow({ title, subtitle, onPress }: LinkRowProps) {
+  const styles = useLinkRowStyles()
+
+  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}>
+          <Text numberOfLines={1}>{subtitle}</Text>
+          {Platform.OS === 'ios' && (
+            <Icon name="general.rightChevron" size={16} style={styles.icon} />
+          )}
+        </View>
+      </View>
+    </PlatformPressable>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({ isStart, isEnd }: { 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,
+    },
+    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,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 12,
+      paddingVertical: 4,
+    },
+    rightContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    title: {
+      flexShrink: 1,
+    },
+    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: [],
+      },
+    },
+  })
+}

package/src/screens/preferred_app_selection_screen.tsx

@@ -0,0 +1,169 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import { StaticScreenProps } from '@react-navigation/native'
+import { useMutation } from '@tanstack/react-query'
+import React, { type PropsWithChildren } from 'react'
+import { Image, StyleSheet, View, type ViewStyle } from 'react-native'
+import churchCenterLogo from '../../assets/churchCenter.png'
+import servicesLogo from '../../assets/servicesApp.png'
+import chatLogo from '../../assets/chatLogo.png'
+import { Heading, Icon, Text } from '../components'
+import { useApiClient, useTheme } from '../hooks'
+import { PreferredApp, useChatTypes } from './preferred_app/hooks/use_chat_types'
+import { useAppName } from '../hooks/use_app_name'
+import { throwResponseError } from '../utils/response_error'
+
+export type PreferredAppSelectionScreenProps = StaticScreenProps<{
+  chatTypeId: number | string
+  conversationType?: 'group' | 'team'
+  currentSelection?: PreferredApp
+}>
+
+export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScreenProps) {
+  const { chatTypeId } = route.params
+  const { data: chatTypes, refetch: refetchChatTypes } = useChatTypes()
+  const appName = useAppName()
+
+  const apiClient = useApiClient()
+
+  const { mutate: updateChatType } = useMutation({
+    throwOnError: true,
+    onSuccess: () => refetchChatTypes(),
+    mutationFn: (app: PreferredApp) => {
+      return apiClient.chat
+        .post({
+          url: `/me/chat_types/${chatTypeId}/set_preferred_appz`,
+          data: { data: { type: 'ChatType', attributes: { app } } },
+        })
+        .catch(throwResponseError)
+    },
+  })
+  const chatType = chatTypes.find(t => t.id === chatTypeId)
+  const { preferredAppOptions } = chatType || {}
+
+  const handleSelection = (app: PreferredApp) => {
+    updateChatType(app)
+  }
+
+  const sectionTitle = `${chatType?.title} Conversations`
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.section}>
+        <Heading variant="h3" style={styles.sectionHeading}>
+          {sectionTitle}
+        </Heading>
+        {preferredAppOptions?.sort(sortPreferredApp('asc')).map((option, key) => (
+          <PressableRow
+            key={`${key}-${option}`}
+            isActive={chatType?.preferredApp === option}
+            onPress={() => handleSelection(option)}
+          >
+            <Image source={getAppImage(option)} style={styles.logo} />
+            <Text>
+              {option}
+              {appName.includes(option.replace(/\s/, '').toLowerCase()) ? ' ( current )' : ''}
+            </Text>
+          </PressableRow>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const sortPreferredApp = (dir?: 'asc' | 'desc') => (a: PreferredApp, b: PreferredApp) => {
+  if (a === 'None') return 1
+  if (a > b) return dir === 'asc' ? 1 : -1
+  if (b > a) return dir === 'asc' ? -1 : 1
+
+  return 0
+}
+
+const getAppImage = (option: PreferredApp) => {
+  switch (option) {
+    case 'Church Center':
+      return churchCenterLogo
+    case 'Services':
+      return servicesLogo
+    case 'Chat':
+      return chatLogo
+    default:
+      return undefined
+  }
+}
+
+const PressableRow = ({
+  children,
+  isActive,
+  onPress,
+  style,
+}: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {
+  const styles = useRowStyles({ isActive })
+  return (
+    <PlatformPressable
+      style={styles.pressable}
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isActive }}
+    >
+      <View style={styles.row}>
+        <View style={[styles.rowInner, style]}>{children}</View>
+        <Icon
+          name="general.check"
+          style={styles.rowIconRight}
+          accessibilityElementsHidden
+          maxFontSizeMultiplier={2.5}
+        />
+      </View>
+    </PlatformPressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  section: {
+    paddingTop: 16,
+  },
+  sectionHeading: {
+    paddingHorizontal: 16,
+    paddingBottom: 4,
+  },
+  logo: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+  },
+})
+
+const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    pressable: {
+      paddingLeft: 16,
+      backgroundColor: theme.colors.surfaceColor100,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.borderColorDefaultBase,
+      paddingVertical: 12,
+      paddingRight: 16,
+    },
+    rowInner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      flexShrink: 1,
+    },
+    rowIconRight: {
+      fontSize: 16,
+      color: theme.colors.statusSuccessIcon,
+      opacity: isActive ? 1 : 0,
+    },
+  })
+}

package/src/types/images.d.ts

@@ -0,0 +1,14 @@
+declare module '*.png' {
+  const value: import('react-native').ImageSourcePropType
+  export default value
+}
+
+declare module '*.jpg' {
+  const value: import('react-native').ImageSourcePropType
+  export default value
+}
+
+declare module '*.jpeg' {
+  const value: import('react-native').ImageSourcePropType
+  export default value
+}