@planningcenter/chat-react-native 4.2.0-rc.1 → 4.2.0-rc.3

package/src/screens/conversations/components/search_list_header_component.tsx

@@ -0,0 +1,291 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, ScrollView, StyleSheet, View } from 'react-native'
+import { Heading, TextButton, ToggleButton } from '../../../components'
+import {
+  useAtFontScaleBreakpoint,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEligible,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
+import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
+import { GraphId } from '../../../types/resources/group_resource'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
+import { Haptic } from '../../../utils/native_adapters'
+import { ConversationFiltersParams } from '../../conversation_filters/screen_props'
+import { ConversationsScreenProps } from '../conversations_screen'
+import { ChatGroupBadge } from './chat_group_badge'
+import { ListHeaderActionButton } from './list_header_action_button'
+
+const ROW_PADDING_HORIZONTAL = 16
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  DMs = 'DMs',
+  More = 'More',
+}
+
+export const SearchListHeaderComponent = () => {
+  const navigation = useNavigation()
+  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
+  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
+  const directMessagesEligible = useDirectMessagesEligible()
+  const hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
+  const {
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+  } = route.params || {}
+  const currentPersonCache = useCurrentPersonCache()
+  const { markAllRead, isPending } = useMarkAllRead()
+  const canCreateConversations = useCanCreateConversations()
+  const entryMode = useNewConversationEntry()
+  const newConversationFromFilter = useNewConversationFromFilter(
+    chat_group_graph_id as GraphId | undefined
+  )
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id) {
+      return FilterTypes.More
+    } else if (/groups/i.test(group_source_app_name)) {
+      return FilterTypes.Groups
+    } else if (/services/i.test(group_source_app_name)) {
+      return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DMs
+    }
+
+    return FilterTypes.All
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+
+  const handleNewConversationNavigation = useCallback(() => {
+    if (newConversationFromFilter || entryMode === 'select_type') {
+      return navigation.navigate('ConversationSelectType', {
+        ...route.params,
+        newConversationFromFilter,
+      })
+    }
+
+    if (entryMode === 'groups') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectGroupRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'teams') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectTeamsILeadRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'direct_message') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectDirectMessageRecipients',
+        params: { ...route.params },
+      })
+    }
+  }, [navigation, route.params, entryMode, newConversationFromFilter])
+
+  const handleSetFilter = useCallback(
+    (params: ConversationFiltersParams) => {
+      navigation.setParams({
+        title: undefined,
+        chat_group_graph_id: undefined,
+        group_source_app_name: undefined,
+        show_direct_messages: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
+  const handleChatSettings = useCallback(() => {
+    navigation.navigate('ChatSettings', {})
+  }, [navigation])
+
+  const handleOpenConversationFilters = useCallback(() => {
+    navigation.navigate('ConversationFilters', {
+      chat_group_graph_id,
+      group_source_app_name,
+      show_direct_messages,
+    })
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+
+  const handleMarkAllRead = useCallback(() => {
+    currentPersonCache.update({ unreadCount: 0 })
+    Haptic.notificationSuccess()
+    markAllRead()
+  }, [currentPersonCache, markAllRead])
+
+  const alertMarkAllRead = useCallback(() => {
+    if (active === FilterTypes.All) return handleMarkAllRead()
+
+    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [
+      { text: 'Cancel' },
+      { text: 'OK', onPress: () => handleMarkAllRead() },
+    ])
+  }, [active, handleMarkAllRead])
+
+  const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups
+  const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups
+  const showFilterRow = hasMultiSourceFilterCapabilities || canFilterByDMs
+  const shouldShowHeaderFiltersButton = hasSomeSourceFilterCapability && !showFilterRow
+  const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton
+    ? 'View filters'
+    : 'View more filters'
+
+  const moreFiltersButtonProps = {
+    onPress: handleOpenConversationFilters,
+    active: active === FilterTypes.More,
+    iconNameRight: 'general.threeReducingHorizontalBars' as const,
+    accessibilityLabel: moreFiltersButtonA11yLabel,
+  }
+
+  const styles = useStyles({ shouldShowHeaderFiltersButton })
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <Heading numberOfLines={1} variant="h2">
+            Conversations
+          </Heading>
+          <TextButton
+            onPress={alertMarkAllRead}
+            disabled={isPending}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Mark all read"
+          >
+            Mark all read
+          </TextButton>
+        </View>
+        <View style={styles.actionsContainer}>
+          <ListHeaderActionButton
+            name="general.cog"
+            onPress={handleChatSettings}
+            accessibilityLabel="Chat settings"
+            testID="conversations-chat-settings-button"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          />
+          {canCreateConversations && (
+            <ListHeaderActionButton
+              name="churchCenter.signups"
+              onPress={handleNewConversationNavigation}
+              accessibilityLabel="New conversation"
+              testID="conversations-new-conversation-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+          {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
+        </View>
+      </View>
+      {showFilterRow && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.filterRow}
+          accessibilityRole="toolbar"
+        >
+          <ToggleButton
+            title={FilterTypes.All}
+            active={active === FilterTypes.All}
+            onPress={() => handleSetFilter({})}
+            accessibilityLabel="Show all conversations"
+            style={styles.filterButton}
+          />
+          {canFilterByGroups && (
+            <ToggleButton
+              title={FilterTypes.Groups}
+              active={active === FilterTypes.Groups}
+              onPress={() => handleSetFilter({ group_source_app_name: 'Groups' })}
+              accessibilityLabel="Filter to group conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByTeams && (
+            <ToggleButton
+              title={FilterTypes.Teams}
+              active={active === FilterTypes.Teams}
+              onPress={() => handleSetFilter({ group_source_app_name: 'Services' })}
+              accessibilityLabel="Filter to team conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByDMs && (
+            <ToggleButton
+              title={FilterTypes.DMs}
+              active={active === FilterTypes.DMs}
+              onPress={() => handleSetFilter({ show_direct_messages: true })}
+              accessibilityLabel="Filter to direct message conversations"
+              style={styles.filterButton}
+            />
+          )}
+          <ToggleButton {...moreFiltersButtonProps} />
+        </ScrollView>
+      )}
+      <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />
+    </View>
+  )
+}
+
+const useStyles = ({
+  shouldShowHeaderFiltersButton,
+}: {
+  shouldShowHeaderFiltersButton: boolean
+}) => {
+  const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(
+    shouldShowHeaderFiltersButton ? 1.2 : undefined
+  )
+
+  return StyleSheet.create({
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.statusErrorBorder,
+      paddingBottom: 16,
+      gap: 16,
+    },
+    headingRow: {
+      gap: 12,
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      justifyContent: 'space-between',
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+    titleContainer: {
+      gap: 8,
+    },
+    actionsContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    markAllReadRow: {
+      paddingBottom: 4,
+    },
+    filterRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      gap: 8,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+      flexGrow: 1,
+    },
+    filterButton: {
+      flex: 1,
+      minWidth: 65,
+    },
+  })
+}

package/src/screens/conversations/conversations_screen.tsx

@@ -3,10 +3,12 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations } from '../../components'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
+import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/use_product_analytics'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
 import { ListHeaderComponent } from './components/list_header_component'
+import { SearchListHeaderComponent } from './components/search_list_header_component'
 
 export type ConversationsScreenProps = StaticScreenProps<{
   title?: string
@@ -17,13 +19,16 @@ export type ConversationsScreenProps = StaticScreenProps<{
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
   const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const searchEnabled = featureEnabled(availableFeatures.search)
+  const Header = searchEnabled ? SearchListHeaderComponent : ListHeaderComponent
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)
 
   return (
     <View style={styles.container}>
       <ConversationsContextProvider args={route.params} opts={{ throwOnError: true }}>
-        <Conversations ListHeaderComponent={ListHeaderComponent} />
+        <Conversations ListHeaderComponent={Header} />
       </ConversationsContextProvider>
     </View>
   )

package/src/screens/settings_screen.tsx

@@ -2,7 +2,8 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
-import { Heading, Icon, Text } from '../components'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Heading, Icon, Text, VersionFooter } from '../components'
 import { Switch } from '../components/display/switch'
 import { useDirectMessagesEligible, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
@@ -50,6 +51,9 @@ export function SettingsScreen({}: SettingsScreenProps) {
         <NavRow label="Notification settings" onPress={handleNotificationSettings} />
         {appName !== 'services' && <NavRow label="Get help" onPress={handleGetHelp} />}
       </View>
+      <View style={styles.footer}>
+        <VersionFooter />
+      </View>
     </View>
   )
 }
@@ -80,10 +84,16 @@ function NavRow({ label, onPress }: NavRowProps) {
 
 const useStyles = () => {
   const { colors } = useTheme()
+  const insets = useSafeAreaInsets()
   return StyleSheet.create({
     container: {
       flex: 1,
     },
+    footer: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      paddingBottom: Math.max(insets.bottom, 8),
+    },
     sectionOuter: {
       paddingLeft: 16,
     },

package/src/utils/package_version.ts

@@ -0,0 +1,3 @@
+const { version } = require('../../package.json') as { version: string }
+
+export const chatReactNativeVersion = version

package/src/utils/time.ts

@@ -12,6 +12,7 @@ export function toMs(value: number, unit: TimeUnit): number {
 }
 
 export const FIVE_SECONDS = toMs(5, 'seconds')
+export const ONE_MINUTE = toMs(1, 'minutes')
 export const FIVE_MINUTES = toMs(5, 'minutes')
 export const THIRTY_MINUTES = toMs(30, 'minutes')
 export const ONE_HOUR = toMs(1, 'hours')