@planningcenter/chat-react-native 4.4.1-qa-staging.16 → 4.4.1-qa-staging.18

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',
+  ],
+}