@planningcenter/chat-react-native 3.38.1 → 3.38.2-qa-778.0

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -0,0 +1,536 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import { StackActions, useNavigation } from '@react-navigation/native'
+import { useEffect, useState } from 'react'
+import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
+import { Avatar, Badge, Banner, Icon, Spinner, Text } from '../../components'
+import { ActionButton } from '../../components/display/action_button'
+import { ComponentErrorBoundary } from '../../components/page/component_error_boundary'
+import { useTheme } from '../../hooks'
+import { useDirectMessageAffiliations } from '../../hooks/direct_messages/use_direct_message_affiliations'
+import { useDirectMessageCandidates } from '../../hooks/direct_messages/use_direct_message_candidates'
+import { useDirectMessageConversationValidate } from '../../hooks/direct_messages/use_direct_message_conversation_validate'
+import { useFindOrCreateDirectMessageConversation } from '../../hooks/direct_messages/use_find_or_create_direct_message_conversation'
+import { DirectMessageCandidateResource } from '../../types/resources/direct_message_candidate'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+
+const MAX_RECIPIENTS = 9
+
+export function ConversationSelectDirectMessageRecipientsScreen(
+  _props: ConversationSelectRecipientsScreenProps
+) {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const [searchTerm, setSearchTerm] = useState('')
+  const [debouncedTerm, setDebouncedTerm] = useState('')
+  const [selectedPeople, setSelectedPeople] = useState<Map<string, DirectMessageCandidateResource>>(
+    new Map()
+  )
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedTerm(searchTerm), 200)
+    return () => clearTimeout(timer)
+  }, [searchTerm])
+
+  const selectPerson = (person: DirectMessageCandidateResource) => {
+    if (selectedPeople.size >= MAX_RECIPIENTS) return
+    setSelectedPeople(prev => new Map(prev).set(person.id, person))
+    setSearchTerm('')
+    setDebouncedTerm('')
+  }
+
+  const removePerson = (id: string) => {
+    setSelectedPeople(prev => {
+      const next = new Map(prev)
+      next.delete(id)
+      return next
+    })
+  }
+
+  const recipientIds = [...selectedPeople.keys()]
+  const { warnings, validationPending } = useDirectMessageConversationValidate({ recipientIds })
+
+  const handleSuccess = (conversationId: number) => {
+    navigation.getParent()?.goBack()
+    navigation.dispatch(StackActions.push('Conversation', { conversation_id: conversationId }))
+  }
+
+  const { findOrCreateConversation, directMessageExists, isFinding, isError } =
+    useFindOrCreateDirectMessageConversation({ recipientIds, onSuccess: handleSuccess })
+
+  const buttonText = (() => {
+    if (selectedPeople.size === 0) return 'Start conversation'
+    if (selectedPeople.size === 1) {
+      const firstName = selectedPeople.values().next().value!.name.split(' ')[0]
+      return directMessageExists ? `Open message with ${firstName}` : `Message ${firstName}`
+    }
+    return directMessageExists
+      ? `Open direct message (${selectedPeople.size})`
+      : `Start direct message (${selectedPeople.size})`
+  })()
+
+  return (
+    <View style={styles.container}>
+      {isError && (
+        <Banner
+          appearance="error"
+          description="There was an issue starting the conversation. Please try again."
+          style={styles.errorBanner}
+        />
+      )}
+      <ToField
+        selectedPeople={selectedPeople}
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+        onRemove={removePerson}
+        onClear={() => setSelectedPeople(new Map())}
+      />
+      <View style={styles.candidateResultsContainer}>
+        <ComponentErrorBoundary
+          key={debouncedTerm}
+          fallback={
+            <Banner
+              appearance="error"
+              description="Couldn't load people right now. Try again."
+              style={styles.errorBanner}
+            />
+          }
+        >
+          <CandidateResults
+            term={debouncedTerm}
+            selectedPeople={selectedPeople}
+            onSelect={selectPerson}
+          />
+        </ComponentErrorBoundary>
+      </View>
+      <ActionButton
+        title={buttonText}
+        disabled={
+          selectedPeople.size === 0 || validationPending || warnings.length > 0 || isFinding
+        }
+        loading={validationPending || isFinding}
+        onPress={() => findOrCreateConversation(recipientIds)}
+        warnings={warnings}
+      />
+    </View>
+  )
+}
+
+function ToField({
+  selectedPeople,
+  searchTerm,
+  onSearchChange,
+  onRemove,
+  onClear,
+}: {
+  selectedPeople: Map<string, DirectMessageCandidateResource>
+  searchTerm: string
+  onSearchChange: (term: string) => void
+  onRemove: (id: string) => void
+  onClear: () => void
+}) {
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const hasSelections = selectedPeople.size > 0
+
+  return (
+    <View style={styles.toField}>
+      <View style={styles.toFieldHeader}>
+        <Text style={styles.toLabel}>To</Text>
+        {hasSelections && (
+          <Pressable onPress={onClear} hitSlop={8}>
+            <Text style={styles.clearButton}>Clear</Text>
+          </Pressable>
+        )}
+      </View>
+      <View style={styles.toInputArea}>
+        {[...selectedPeople.values()].map(person => (
+          <PersonChip key={person.id} person={person} onRemove={onRemove} />
+        ))}
+        <TextInput
+          autoFocus
+          placeholder="Search"
+          placeholderTextColor={colors.textColorDefaultPlaceholder}
+          value={searchTerm}
+          onChangeText={onSearchChange}
+          style={styles.toTextInput}
+          returnKeyType="search"
+        />
+      </View>
+    </View>
+  )
+}
+
+function PersonChip({
+  person,
+  onRemove,
+}: {
+  person: DirectMessageCandidateResource
+  onRemove: (id: string) => void
+}) {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.chip}>
+      <Avatar sourceUri={person.avatar} size="sm" showFallback />
+      <Text style={styles.chipName}>{person.name}</Text>
+      <Pressable
+        onPress={() => onRemove(person.id)}
+        hitSlop={8}
+        accessibilityLabel={`Remove ${person.name}`}
+      >
+        <Icon name="general.x" size={12} style={styles.chipRemoveIcon} />
+      </Pressable>
+    </View>
+  )
+}
+
+function CandidateResults({
+  term,
+  selectedPeople,
+  onSelect,
+}: {
+  term: string
+  selectedPeople: Map<string, DirectMessageCandidateResource>
+  onSelect: (candidate: DirectMessageCandidateResource) => void
+}) {
+  const styles = useStyles()
+  const { data, isFetching } = useDirectMessageCandidates(term)
+  const { groups, teams } = useDirectMessageAffiliations()
+
+  if (term.length < 1) {
+    if (selectedPeople.size > 0) return null
+
+    return (
+      <View style={styles.emptyState}>
+        <Icon name="churchCenter.people" size={40} style={styles.emptyStateIcon} />
+        <Text style={styles.emptyStateTitle}>Search for people to direct message</Text>
+        <Text variant="secondary" style={styles.emptyStateSubtitle}>
+          Start a conversation with people in your groups and teams.
+        </Text>
+      </View>
+    )
+  }
+
+  const isAtLimit = selectedPeople.size >= MAX_RECIPIENTS
+
+  if (isAtLimit) {
+    return (
+      <View style={styles.emptyState}>
+        <Text variant="secondary" style={styles.emptyStateSubtitle}>
+          You can add up to {MAX_RECIPIENTS} people to a direct message.
+        </Text>
+      </View>
+    )
+  }
+
+  const unselectedCandidates = (data?.data ?? []).filter(c => !selectedPeople.has(c.id))
+  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)
+
+  if (isFetching && unselectedCandidates.length === 0) {
+    return (
+      <View style={styles.emptyState}>
+        <Spinner />
+      </View>
+    )
+  }
+
+  if (!isFetching && unselectedCandidates.length === 0) {
+    return (
+      <View style={styles.emptyState}>
+        <Icon name="general.search" size={32} style={styles.emptyStateIcon} />
+        <Text style={styles.emptyStateTitle}>No matches for "{term}"</Text>
+        <Text variant="secondary" style={styles.emptyStateSubtitle}>
+          Try a different name, or check that you share a group or team with them.
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <CandidateList
+      candidates={unselectedCandidates}
+      hasTruncated={hasTruncated}
+      groups={groups}
+      teams={teams}
+      onSelect={onSelect}
+    />
+  )
+}
+
+function candidateBadges(candidate: DirectMessageCandidateResource) {
+  const badges = []
+  if (candidate.directMessagesDisabled) badges.push({ title: 'DMs off' })
+  if (candidate.under_18) badges.push({ title: 'Under 18' })
+  return badges
+}
+
+function candidateAffiliationNames(
+  candidate: DirectMessageCandidateResource,
+  groups: Map<number, string>,
+  teams: Map<number, string>
+) {
+  return [
+    ...candidate.groups.flatMap(id => {
+      const name = groups.get(id)
+      return name ? [name] : []
+    }),
+    ...candidate.teams.flatMap(id => {
+      const name = teams.get(id)
+      return name ? [name] : []
+    }),
+  ]
+}
+
+function CandidateList({
+  candidates,
+  hasTruncated,
+  groups,
+  teams,
+  onSelect,
+}: {
+  candidates: DirectMessageCandidateResource[]
+  hasTruncated: boolean
+  groups: Map<number, string>
+  teams: Map<number, string>
+  onSelect: (candidate: DirectMessageCandidateResource) => void
+}) {
+  const styles = useStyles()
+  const available = candidates.filter(c => !c.directMessagesDisabled)
+  const dmDisabled = candidates.filter(c => c.directMessagesDisabled)
+
+  return (
+    <FlatList<DirectMessageCandidateResource>
+      data={available}
+      keyExtractor={item => item.id}
+      renderItem={({ item }) => (
+        <CandidateItem
+          candidate={item}
+          badges={candidateBadges(item)}
+          affiliationNames={candidateAffiliationNames(item, groups, teams)}
+          onSelect={() => onSelect(item)}
+        />
+      )}
+      ListHeaderComponent={
+        <View style={styles.resultsHeader}>
+          <Text style={styles.resultsHeading}>Results</Text>
+        </View>
+      }
+      ListFooterComponent={
+        <>
+          {dmDisabled.length > 0 && (
+            <>
+              <View style={styles.unavailableHeader}>
+                <Text variant="secondary" style={styles.unavailableLabel}>
+                  Unavailable for direct messages
+                </Text>
+              </View>
+              {dmDisabled.map(candidate => (
+                <CandidateItem
+                  key={candidate.id}
+                  candidate={candidate}
+                  badges={candidateBadges(candidate)}
+                  affiliationNames={candidateAffiliationNames(candidate, groups, teams)}
+                  disabled
+                />
+              ))}
+            </>
+          )}
+          {hasTruncated && (
+            <View style={styles.truncatedFooter}>
+              <Text variant="secondary" style={styles.truncatedText}>
+                Keep typing to narrow your results.
+              </Text>
+            </View>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+function CandidateItem({
+  candidate,
+  badges,
+  affiliationNames,
+  onSelect,
+  disabled = false,
+}: {
+  candidate: DirectMessageCandidateResource
+  badges: { title: string }[]
+  affiliationNames: string[]
+  onSelect?: () => void
+  disabled?: boolean
+}) {
+  const styles = useStyles()
+
+  return (
+    <PlatformPressable
+      onPress={disabled ? undefined : onSelect}
+      accessibilityRole="button"
+      accessibilityLabel={`Select ${candidate.name}`}
+      accessibilityState={{ disabled }}
+    >
+      <View style={[styles.row, disabled && styles.candidateDisabled]}>
+        <Avatar sourceUri={candidate.avatar} size="lg" showFallback />
+        <View style={styles.rowInfo}>
+          <Text style={styles.rowName}>{candidate.name}</Text>
+          {affiliationNames.length > 0 && (
+            <Text style={styles.rowAffiliations} numberOfLines={2}>
+              {affiliationNames.join(', ')}
+            </Text>
+          )}
+          {badges.length > 0 && (
+            <View style={styles.badgeRow}>
+              {badges.map(({ title }) => (
+                <Badge key={title} label={title} />
+              ))}
+            </View>
+          )}
+        </View>
+      </View>
+    </PlatformPressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    candidateResultsContainer: {
+      flex: 1,
+    },
+    toField: {
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 8,
+    },
+    toFieldHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    toLabel: {
+      fontWeight: '600',
+      color: colors.textColorDefaultSecondary,
+    },
+    clearButton: {
+      color: colors.interaction,
+    },
+    toInputArea: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: 6,
+      borderWidth: 1,
+      borderColor: colors.borderColorDefaultBase,
+      borderRadius: 8,
+      paddingHorizontal: 10,
+      paddingVertical: 8,
+    },
+    toTextInput: {
+      flex: 1,
+      minWidth: 80,
+      color: colors.textColorDefaultPrimary,
+      fontSize: 16,
+      paddingVertical: 2,
+    },
+    chip: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      borderWidth: 1,
+      borderColor: colors.borderColorDefaultBase,
+      borderRadius: 100,
+      paddingLeft: 4,
+      paddingRight: 6,
+      paddingVertical: 3,
+    },
+    chipName: {
+      fontSize: 14,
+    },
+    chipRemoveIcon: {
+      color: colors.iconColorDefaultSecondary,
+    },
+    errorBanner: {
+      margin: 16,
+    },
+    emptyState: {
+      alignItems: 'center',
+      paddingTop: 32,
+      paddingHorizontal: 32,
+      gap: 8,
+    },
+    emptyStateIcon: {
+      color: colors.iconColorDefaultSecondary,
+      marginBottom: 4,
+    },
+    emptyStateTitle: {
+      fontWeight: '600',
+      textAlign: 'center',
+    },
+    emptyStateSubtitle: {
+      textAlign: 'center',
+      fontSize: 14,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderColor: colors.borderColorDefaultDim,
+    },
+    rowInfo: {
+      flex: 1,
+      gap: 2,
+    },
+    rowName: {
+      fontSize: 15,
+      fontWeight: '500',
+    },
+    rowAffiliations: {
+      fontSize: 12,
+      color: colors.textColorDefaultSecondary,
+    },
+    badgeRow: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 4,
+      marginTop: 4,
+    },
+
+    candidateDisabled: {
+      opacity: 0.5,
+    },
+    resultsHeader: {
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 8,
+    },
+    resultsHeading: {
+      fontWeight: '600',
+    },
+    unavailableHeader: {
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 8,
+    },
+    unavailableLabel: {
+      fontSize: 13,
+    },
+    truncatedFooter: {
+      paddingHorizontal: 16,
+      paddingTop: 12,
+      paddingBottom: 8,
+    },
+    truncatedText: {
+      fontSize: 13,
+      textAlign: 'center',
+    },
+  })
+}

package/src/screens/conversation_select_type_screen.tsx

@@ -1,6 +1,8 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useCurrentPerson } from '../hooks/use_current_person'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { useNewConversationEntry } from '../hooks/use_new_conversation_entry'
 import type { NewConversationFromFilter } from '../hooks/use_new_conversation_from_filter'
 import { AppName } from '../types/resources/app_name'
@@ -17,15 +19,23 @@ export type ConversationSelectTypeScreenProps = StaticScreenProps<{
   newConversationFromFilter?: NewConversationFromFilter
 }>
 
+type NewConversationTypeScreen =
+  | 'ConversationSelectGroupRecipients'
+  | 'ConversationSelectTeamsILeadRecipients'
+  | 'ConversationSelectDirectMessageRecipients'
+
 export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeScreenProps) {
   const navigation = useNavigation()
   const entryMode = useNewConversationEntry()
+  const { featureEnabled } = useFeatures()
+  const { directMessagesDisabled, under_18 } = useCurrentPerson()
   const { newConversationFromFilter, chat_group_graph_id, group_source_app_name } =
     route.params || {}
 
   const filterParams = { chat_group_graph_id, group_source_app_name }
   const canCreateGroups = entryMode === 'select_type' || entryMode === 'groups'
   const canCreateTeams = entryMode === 'select_type' || entryMode === 'teams'
+  const dmFeatureEnabled = featureEnabled(availableFeatures.direct_messages_eap)
 
   const handleFilterPress = () => {
     if (!newConversationFromFilter) return
@@ -55,27 +65,17 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
     })
   }
 
-  const handleGroupPress = () => {
+  const navigateToNewConversationType = (screen: NewConversationTypeScreen) => {
     Haptic.impactLight()
     navigation.goBack()
-    requestAnimationFrame(() => {
-      navigation.navigate('New', {
-        screen: 'ConversationSelectGroupRecipients',
-        params: filterParams,
-      })
-    })
+    requestAnimationFrame(() => navigation.navigate('New', { screen, params: filterParams }))
   }
 
-  const handleTeamPress = () => {
-    Haptic.impactLight()
-    navigation.goBack()
-    requestAnimationFrame(() => {
-      navigation.navigate('New', {
-        screen: 'ConversationSelectTeamsILeadRecipients',
-        params: filterParams,
-      })
-    })
-  }
+  const handleGroupPress = () => navigateToNewConversationType('ConversationSelectGroupRecipients')
+  const handleTeamPress = () =>
+    navigateToNewConversationType('ConversationSelectTeamsILeadRecipients')
+  const handleDirectMessagePress = () =>
+    navigateToNewConversationType('ConversationSelectDirectMessageRecipients')
 
   return (
     <FormSheet.Root>
@@ -103,6 +103,15 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
           accessibilityHint="Opens team selection screen"
         />
       )}
+      {dmFeatureEnabled && !under_18 && (
+        <FormSheet.Action
+          title="Direct message"
+          onPress={handleDirectMessagePress}
+          disabled={directMessagesDisabled}
+          disabledReason={directMessagesDisabled ? 'Disabled in chat settings' : undefined}
+          accessibilityHint="Opens direct message recipient selection screen"
+        />
+      )}
     </FormSheet.Root>
   )
 }