@planningcenter/chat-react-native 3.39.0-rc.0 → 3.39.0-rc.10

package/src/screens/conversation_filters/components/rows.tsx

@@ -17,13 +17,26 @@ import { FilterTypes } from '../filter_types'
 import { FilteredGroup } from '../hooks/filters'
 import { ConversationFilterStackParamList } from '../screen_props'
 
-export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
+export type FilterProps = {
+  group_source_app_name?: string
+  show_direct_messages?: boolean
+  isActive: boolean
+  filter: FilterTypes
+}
 
-export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
+export const FilterRow = ({
+  group_source_app_name,
+  show_direct_messages,
+  isActive,
+  filter,
+}: FilterProps) => {
   const { setAppFilter } = useContext(FilterContext)
 
   return (
-    <PressableRow onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>
+    <PressableRow
+      onPress={() => setAppFilter({ group_source_app_name, show_direct_messages })}
+      isActive={isActive}
+    >
       <Text>{filter}</Text>
     </PressableRow>
   )

package/src/screens/conversation_filters/context/conversation_filter_context.tsx

@@ -21,6 +21,7 @@ export const FilterContext = createContext<{
   params: {
     chat_group_graph_id: undefined,
     group_source_app_name: undefined,
+    show_direct_messages: undefined,
   },
   scrollOffset: 0,
   setScrollOffset: () => {},
@@ -55,6 +56,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         StackActions.popTo('Conversations', {
           chat_group_graph_id: undefined,
           group_source_app_name: undefined,
+          show_direct_messages: undefined,
         })
       )
     },
@@ -62,12 +64,14 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
       navigation.setParams({
         chat_group_graph_id: params.chat_group_graph_id,
         group_source_app_name: undefined,
+        show_direct_messages: undefined,
       })
     },
     setAppFilter: (params: Omit<ConversationFiltersParams, 'chat_group_graph_id'>) => {
       navigation.setParams({
         chat_group_graph_id: undefined,
         group_source_app_name: params.group_source_app_name,
+        show_direct_messages: params.show_direct_messages,
       })
     },
     applyFilters: (params: ConversationFiltersParams) => {

package/src/screens/conversation_filters/filter_types.ts

@@ -1,5 +1,6 @@
 export enum FilterTypes {
   All = 'All conversations',
+  DirectMessages = 'Direct messages',
   Groups = 'All my groups',
   Teams = 'All my teams and plans',
   More = 'More',

package/src/screens/conversation_filters/screen_props.ts

@@ -4,6 +4,7 @@ import { GraphId } from '../../types/resources/group_resource'
 export type ConversationFiltersParams = {
   chat_group_graph_id?: GraphId
   group_source_app_name?: string
+  show_direct_messages?: boolean
 }
 
 export type ConversationFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>

package/src/screens/conversation_screen.tsx

@@ -239,7 +239,8 @@ function ConversationBottomBar({
   replyRootId,
   currentlyEditingMessage,
 }: ConversationBottomBarProps) {
-  if (conversation.disabled) return <ConversationDisabledBanner />
+  if (conversation.disabled)
+    return <ConversationDisabledBanner disabledReason={conversation.disabledReason} />
   if (!canReply) return <MemberMessagesDisabledBanner />
   return (
     <MessageForm.Root

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -1,33 +1,536 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Heading, Text } from '../../components'
+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}>
-      <Heading variant="h2">New direct message</Heading>
-      <Text variant="secondary">Coming soon</Text>
+      {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 { bottom } = useSafeAreaInsets()
+  const { colors } = useTheme()
 
   return StyleSheet.create({
     container: {
       flex: 1,
-      padding: 16,
-      paddingBottom: 16 + bottom,
+    },
+    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',
-      justifyContent: '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',
+    },
   })
 }