@planningcenter/chat-react-native 4.1.1-qa-staging.4 → 4.2.0-rc.1

package/src/__tests__/screens/conversation_new/components/services_form.test.tsx

@@ -1,91 +0,0 @@
-import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
-import { render } from '@testing-library/react-native'
-import React from 'react'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
-import { useFindOrCreateServicesConversation } from '../../../../hooks/services/use_find_or_create_services_conversation'
-import { useTeamMembersForNewConversation } from '../../../../hooks/services/use_team_members_for_new_conversation'
-import { ServicesForm } from '../../../../screens/conversation_new/components/services_form'
-
-jest.mock('react-native-reanimated', () => ({
-  ...jest.requireActual('react-native-reanimated/mock'),
-  LayoutAnimationConfig: ({ children }: { children: React.ReactNode }) => children,
-}))
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({ navigate: jest.fn(), dispatch: jest.fn(), getParent: () => undefined }),
-}))
-jest.mock('../../../../hooks/use_api_client', () => ({ useApiClient: () => ({}) }))
-jest.mock('../../../../hooks/use_upload_client', () => ({ useUploadClient: () => ({}) }))
-jest.mock('../../../../hooks/use_features', () => ({
-  ...jest.requireActual('../../../../hooks/use_features'),
-  useFeatures: () => ({ features: [], featureEnabled: () => false }),
-}))
-jest.mock('../../../../hooks/use_conversation_validate', () => ({
-  useConversationValidate: () => ({ warnings: [], validationPending: false }),
-}))
-jest.mock('../../../../hooks/services/use_services_chat_conversation_payload', () => ({
-  useServicesChatConversationPayload: () => ({ payload: undefined, isLoading: false }),
-}))
-jest.mock('../../../../hooks/services/use_services_team', () => ({
-  useServicesTeams: () => [],
-}))
-jest.mock('../../../../hooks/services/use_team_plans', () => ({
-  useTeamPlans: () => ({
-    planOptions: [],
-    isFetching: false,
-    isError: false,
-    findPlan: () => undefined,
-  }),
-}))
-jest.mock('../../../../hooks/services/use_team_members_for_new_conversation', () => ({
-  useTeamMembersForNewConversation: jest.fn(() => ({ members: [], isError: false })),
-}))
-jest.mock('../../../../hooks/services/use_find_or_create_services_conversation', () => ({
-  useFindOrCreateServicesConversation: jest.fn(() => ({
-    mutate: jest.fn(),
-    isPending: false,
-    selectionHasConversation: false,
-    isLoadingConversationCheck: false,
-  })),
-}))
-
-const mockedFindOrCreate = jest.mocked(useFindOrCreateServicesConversation)
-const mockedTeamMembers = jest.mocked(useTeamMembersForNewConversation)
-
-const latestArgs = <T extends jest.Mock>(mock: T) => mock.mock.calls.at(-1)?.[0]
-
-const safeAreaMetrics = {
-  frame: { x: 0, y: 0, width: 390, height: 844 },
-  insets: { top: 0, right: 0, bottom: 0, left: 0 },
-}
-
-const renderForm = (props: { initialPlanId?: number } = {}) =>
-  render(
-    <SafeAreaProvider initialMetrics={safeAreaMetrics}>
-      <ThemeProvider value={DefaultTheme}>
-        <ServicesForm initialTeamIds={[1, 2]} {...props} />
-      </ThemeProvider>
-    </SafeAreaProvider>
-  )
-
-describe('ServicesForm', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it('filters by plan when opened from a plan', () => {
-    const { getByRole } = renderForm({ initialPlanId: 42 })
-
-    expect(getByRole('switch').props.value).toBe(true)
-    expect(latestArgs(mockedFindOrCreate)).toMatchObject({ teamIds: [1, 2], planId: 42 })
-    expect(latestArgs(mockedTeamMembers)).toMatchObject({ teamIds: [1, 2], planId: 42 })
-  })
-
-  it('does not filter by plan when opened without a plan', () => {
-    const { getByRole } = renderForm()
-
-    expect(getByRole('switch').props.value).toBe(false)
-    expect(latestArgs(mockedFindOrCreate)).toMatchObject({ teamIds: [1, 2], planId: undefined })
-    expect(latestArgs(mockedTeamMembers)).toMatchObject({ teamIds: [1, 2], planId: undefined })
-  })
-})

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

@@ -1,291 +0,0 @@
-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,
-    },
-  })
-}