@planningcenter/chat-react-native 4.4.1-qa-staging.17 → 4.4.1-qa-staging.19

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

@@ -0,0 +1,286 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
+import { FilterDropdown, FilterDropdownOption, TextButton } from '../../../components'
+import {
+  useAtFontScaleBreakpoint,
+  useCanBrowseArchivedConversations,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEligible,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
+import { useApiGet } from '../../../hooks/use_api'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
+import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
+import { useSearchEnabled } from '../../../hooks/use_search_enabled'
+import { GraphId, GroupResource } 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 { ListHeaderActionButton } from './list_header_action_button'
+
+const ROW_PADDING_HORIZONTAL = 16
+const ALL_CONVERSATIONS_LABEL = 'All conversations'
+const ARCHIVED_LABEL = 'Archived'
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  DMs = 'DMs',
+  More = 'More',
+}
+
+const FILTER_PARAMS: Record<Exclude<FilterTypes, FilterTypes.More>, ConversationFiltersParams> = {
+  [FilterTypes.All]: {},
+  [FilterTypes.Groups]: { group_source_app_name: 'Groups' },
+  [FilterTypes.Teams]: { group_source_app_name: 'Services' },
+  [FilterTypes.DMs]: { show_direct_messages: true },
+}
+
+export const FilterDropdownListHeaderComponent = () => {
+  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 canBrowseArchived = useCanBrowseArchivedConversations()
+  const searchEnabled = useSearchEnabled()
+  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
+  const {
+    title,
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+    show_archived,
+  } = 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 { data: group } = useApiGet<GroupResource>(
+    { url: `/me/groups/${chat_group_graph_id}`, data: { fields: { Group: [] } }, app: 'chat' },
+    { enabled: !!chat_group_graph_id }
+  )
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id || show_archived) {
+      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, show_archived])
+
+  const options: FilterDropdownOption[] = useMemo(
+    () => [
+      { id: FilterTypes.All, label: FilterTypes.All },
+      ...(canFilterByGroups ? [{ id: FilterTypes.Groups, label: FilterTypes.Groups }] : []),
+      ...(canFilterByTeams ? [{ id: FilterTypes.Teams, label: FilterTypes.Teams }] : []),
+      ...(canFilterByDMs ? [{ id: FilterTypes.DMs, label: FilterTypes.DMs }] : []),
+    ],
+    [canFilterByGroups, canFilterByTeams, canFilterByDMs]
+  )
+
+  const triggerLabel = useMemo(() => {
+    if (chat_group_graph_id) return group?.name || title || ALL_CONVERSATIONS_LABEL
+    if (show_archived) return ARCHIVED_LABEL
+    if (active === FilterTypes.All) return ALL_CONVERSATIONS_LABEL
+
+    return active
+  }, [chat_group_graph_id, group?.name, title, show_archived, active])
+
+  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,
+        show_archived: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
+  const handleSelectFilter = useCallback(
+    (id: string) => {
+      const params = FILTER_PARAMS[id as keyof typeof FILTER_PARAMS]
+      if (params) handleSetFilter(params)
+    },
+    [handleSetFilter]
+  )
+
+  const handleSearch = useCallback(() => {
+    navigation.navigate('Search')
+  }, [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,
+      show_archived,
+    })
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
+
+  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 showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived
+
+  const styles = useStyles()
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <FilterDropdown
+            options={options}
+            selectedId={active}
+            onSelect={handleSelectFilter}
+            onMoreFilters={handleOpenConversationFilters}
+            showMoreFilters={showMoreFilters}
+            triggerLabel={triggerLabel}
+          />
+        </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}
+            />
+          )}
+          {searchEnabled && (
+            <ListHeaderActionButton
+              name="general.search"
+              onPress={handleSearch}
+              accessibilityLabel="Search"
+              testID="conversations-search-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+        </View>
+      </View>
+      {!show_archived && (
+        <View style={styles.markAllReadRow}>
+          <TextButton
+            onPress={alertMarkAllRead}
+            disabled={isPending}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Mark all read"
+          >
+            Mark all read
+          </TextButton>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
+  return StyleSheet.create({
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingBottom: 16,
+      gap: 8,
+    },
+    headingRow: {
+      gap: 12,
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      justifyContent: 'space-between',
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+    titleContainer: {
+      flexShrink: 1,
+      minWidth: 0,
+    },
+    actionsContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    markAllReadRow: {
+      alignItems: 'flex-start',
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+  })
+}

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

@@ -44,6 +44,7 @@ export const ListHeaderComponent = () => {
     chat_group_graph_id,
     group_source_app_name = '',
     show_direct_messages,
+    show_archived,
   } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
@@ -54,7 +55,7 @@ export const ListHeaderComponent = () => {
   )
 
   const active: FilterTypes = useMemo(() => {
-    if (chat_group_graph_id) {
+    if (chat_group_graph_id || show_archived) {
       return FilterTypes.More
     } else if (/groups/i.test(group_source_app_name)) {
       return FilterTypes.Groups
@@ -65,7 +66,7 @@ export const ListHeaderComponent = () => {
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleNewConversationNavigation = useCallback(() => {
     if (newConversationFromFilter || entryMode === 'select_type') {
@@ -104,6 +105,7 @@ export const ListHeaderComponent = () => {
         chat_group_graph_id: undefined,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
+        show_archived: undefined,
         ...params,
       })
     },
@@ -119,8 +121,9 @@ export const ListHeaderComponent = () => {
       chat_group_graph_id,
       group_source_app_name,
       show_direct_messages,
+      show_archived,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
@@ -161,15 +164,17 @@ export const ListHeaderComponent = () => {
           <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>
+          {!show_archived && (
+            <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

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

@@ -44,6 +44,7 @@ export const SearchListHeaderComponent = () => {
     chat_group_graph_id,
     group_source_app_name = '',
     show_direct_messages,
+    show_archived,
   } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
@@ -54,7 +55,7 @@ export const SearchListHeaderComponent = () => {
   )
 
   const active: FilterTypes = useMemo(() => {
-    if (chat_group_graph_id) {
+    if (chat_group_graph_id || show_archived) {
       return FilterTypes.More
     } else if (/groups/i.test(group_source_app_name)) {
       return FilterTypes.Groups
@@ -65,7 +66,7 @@ export const SearchListHeaderComponent = () => {
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleNewConversationNavigation = useCallback(() => {
     if (newConversationFromFilter || entryMode === 'select_type') {
@@ -104,6 +105,7 @@ export const SearchListHeaderComponent = () => {
         chat_group_graph_id: undefined,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
+        show_archived: undefined,
         ...params,
       })
     },
@@ -123,8 +125,9 @@ export const SearchListHeaderComponent = () => {
       chat_group_graph_id,
       group_source_app_name,
       show_direct_messages,
+      show_archived,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
@@ -165,15 +168,17 @@ export const SearchListHeaderComponent = () => {
           <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>
+          {!show_archived && (
+            <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

package/src/screens/conversations/conversations_screen.tsx

@@ -3,10 +3,13 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations } from '../../components'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
+import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
 import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/use_product_analytics'
 import { useSearchEnabled } from '../../hooks/use_search_enabled'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
+import { Menu } from '../../utils/native_adapters'
+import { FilterDropdownListHeaderComponent } from './components/filter_dropdown_list_header_component'
 import { ListHeaderComponent } from './components/list_header_component'
 import { SearchListHeaderComponent } from './components/search_list_header_component'
 
@@ -15,12 +18,12 @@ export type ConversationsScreenProps = StaticScreenProps<{
   chat_group_graph_id?: GraphId
   group_source_app_name?: AppName
   show_direct_messages?: boolean
+  show_archived?: boolean
 }>
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
   const styles = useStyles()
-  const searchEnabled = useSearchEnabled()
-  const Header = searchEnabled ? SearchListHeaderComponent : ListHeaderComponent
+  const Header = useListHeaderComponent()
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)
 
@@ -33,6 +36,16 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
   )
 }
 
+const useListHeaderComponent = () => {
+  const filterDropdownEnabled = useFilterDropdownEnabled()
+  const searchEnabled = useSearchEnabled()
+
+  if (filterDropdownEnabled && Menu.isConfigured) return FilterDropdownListHeaderComponent
+  if (searchEnabled) return SearchListHeaderComponent
+
+  return ListHeaderComponent
+}
+
 const useStyles = () => {
   return StyleSheet.create({
     container: {

package/src/types/resources/person.ts

@@ -23,5 +23,6 @@ export interface CurrentPersonResource extends PersonResource {
   ageQualificationStatus?: AgeQualificationStatus
   directMessagesDisabled: boolean
   directMessagesEligible: boolean
+  canBrowseArchivedConversations?: boolean
   under_18: boolean
 }

package/src/utils/__tests__/conversation.test.ts

@@ -12,6 +12,7 @@ describe('getConversationsRequestArgs', () => {
     ],
     ['chat_group_graph_id', { chat_group_graph_id: groupId }, 'mine_or_not_empty,group'],
     ['show_direct_messages', { show_direct_messages: true }, 'mine_or_not_empty,direct_message'],
+    ['show_archived', { show_archived: true }, 'mine_or_not_empty,archived'],
   ])('%s uses filter: %s', (_label, args, expectedFilter) => {
     expect(getConversationsRequestArgs(args).data.filter).toBe(expectedFilter)
   })

package/src/utils/__tests__/date.test.ts

@@ -16,4 +16,8 @@ describe('formatEventDateTime', () => {
   it('includes the year for dates in other years', () => {
     expect(formatEventDateTime(new Date(2025, 1, 3, 14, 18))).toBe('Feb 3, 2025 at 2:18pm')
   })
+
+  it('drops the minutes on the hour', () => {
+    expect(formatEventDateTime(new Date(2026, 1, 3, 14, 0))).toBe('Feb 3 at 2pm')
+  })
 })

package/src/utils/date.ts

@@ -1,4 +1,4 @@
-import { date as formatDate, time as formatTime } from '@planningcenter/datetime-fmt'
+import { date as formatDate } from '@planningcenter/datetime-fmt'
 import dayjs from './dayjs'
 
 export type DateProps = string | number | Date
@@ -64,7 +64,8 @@ export function relativeTime(date: DateProps): string {
 
 export function formatEventDateTime(date: DateProps) {
   const { isThisYear } = getRelativeDateStatus(date)
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
-  const day = formatDate(date, { style: 'abbreviated', year: !isThisYear, timeZone })
-  return `${day} at ${formatTime(date, { timeZone })}`
+  const local = dayjs(date)
+  const day = local.format(isThisYear ? 'MMM D' : 'MMM D, YYYY')
+  const time = local.format(local.minute() === 0 ? 'ha' : 'h:mma')
+  return `${day} at ${time}`
 }

package/src/utils/native_adapters/__tests__/menu.test.tsx

@@ -8,7 +8,9 @@ const actions = [{ id: 'all', title: 'All' }]
 describe('MenuAdapter', () => {
   it('renders the trigger and warns when the host configured no menu', () => {
     const warn = jest.spyOn(console, 'warn').mockImplementation(() => {})
-    const { View } = new MenuAdapter()
+    const { View, isConfigured } = new MenuAdapter()
+
+    expect(isConfigured).toBe(false)
 
     render(
       <View actions={actions}>
@@ -28,7 +30,9 @@ describe('MenuAdapter', () => {
         <Text>{hostActions.map(action => action.title).join(',')}</Text>
       </>
     )
-    const { View } = new MenuAdapter({ View: HostMenuView })
+    const { View, isConfigured } = new MenuAdapter({ View: HostMenuView })
+
+    expect(isConfigured).toBe(true)
 
     render(
       <View actions={actions}>

package/src/utils/native_adapters/menu.tsx

@@ -61,8 +61,10 @@ function UnconfiguredMenuView({ children, style, testID }: MenuViewProps) {
 
 export class MenuAdapter {
   View: MenuView
+  isConfigured: boolean
 
   constructor(methods?: { View: MenuView }) {
     this.View = methods?.View ?? UnconfiguredMenuView
+    this.isConfigured = !!methods?.View
   }
 }

package/src/utils/request/conversation.ts

@@ -6,6 +6,7 @@ export interface ConversationRequestArgs {
   chat_group_graph_id?: GraphId
   group_source_app_name?: string
   show_direct_messages?: boolean
+  show_archived?: boolean
 }
 
 export const getConversationsRequestArgs = ({
@@ -13,10 +14,13 @@ export const getConversationsRequestArgs = ({
   chat_group_graph_id,
   group_source_app_name,
   show_direct_messages,
+  show_archived,
 }: Partial<ConversationRequestArgs> = {}): GetRequest => {
   let filter: string
   if (chat_group_graph_id) {
     filter = 'mine_or_not_empty,group'
+  } else if (show_archived) {
+    filter = 'mine_or_not_empty,archived'
   } else if (show_direct_messages) {
     filter = 'mine_or_not_empty,direct_message'
   } else if (group_source_app_name) {

package/src/vendor/font_awesome_pro_solid_icons.ts

@@ -608,3 +608,15 @@ export const faTag: IconDefinition = {
     'M32.5 96l0 149.5c0 17 6.7 33.3 18.7 45.3l192 192c25 25 65.5 25 90.5 0L483.2 333.3c25-25 25-65.5 0-90.5l-192-192C279.2 38.7 263 32 246 32L96.5 32c-35.3 0-64 28.7-64 64zm112 16a32 32 0 1 1 0 64 32 32 0 1 1 0-64z',
   ],
 }
+
+export const faBoxArchive: IconDefinition = {
+  prefix: 'fas',
+  iconName: 'box-archive',
+  icon: [
+    512,
+    512,
+    ['archive'],
+    'f187',
+    'M0 64C0 46.3 14.3 32 32 32l448 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96L0 64zM32 176l448 0 0 240c0 35.3-28.7 64-64 64L96 480c-35.3 0-64-28.7-64-64l0-240zm152 64c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z',
+  ],
+}