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

package/build/types/resources/index.js

@@ -1,4 +1,6 @@
 export * from './analytics_metadata';
+export * from './direct_message_affiliations';
+export * from './direct_message_candidate';
 export * from './conversation';
 export * from './conversation_membership';
 export * from './conversation_validate';

package/build/types/resources/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './analytics_metadata'\nexport * from './conversation'\nexport * from './conversation_membership'\nexport * from './conversation_validate'\nexport * from './member'\nexport * from './message'\nexport * from './oauth_token'\nexport * from './person'\nexport * from './groups'\nexport * from './app_grant'\nexport * from './services'\nexport * from './organization'\nexport * from './group_membership'\nexport * from './group_resource'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './analytics_metadata'\nexport * from './direct_message_affiliations'\nexport * from './direct_message_candidate'\nexport * from './conversation'\nexport * from './conversation_membership'\nexport * from './conversation_validate'\nexport * from './member'\nexport * from './message'\nexport * from './oauth_token'\nexport * from './person'\nexport * from './groups'\nexport * from './app_grant'\nexport * from './services'\nexport * from './organization'\nexport * from './group_membership'\nexport * from './group_resource'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.39.0-rc.0",
+  "version": "3.39.0-rc.2",
   "description": "",
   "main": "build/index.js",
   "react-native": "./src/index.tsx",
@@ -72,5 +72,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~5.9.2"
   },
-  "gitHead": "698101c907dc57af0ca09aa2427328ab23a28431"
+  "gitHead": "2008d809d6e5be72841b9c1b015ee18c84c66a05"
 }

package/src/hooks/direct_messages/use_direct_message_affiliations.ts

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { ApiResource } from '../../types'
+import { DirectMessageAffiliationsResource } from '../../types/resources/direct_message_affiliations'
+import { useApiClient } from '../use_api_client'
+
+export function useDirectMessageAffiliations() {
+  const apiClient = useApiClient()
+
+  const { data } = useQuery({
+    queryKey: ['chat', '/me/direct_message_affiliations'],
+    queryFn: () =>
+      apiClient.chat.get({
+        url: '/me/direct_message_affiliations',
+        data: {
+          fields: { DirectMessageAffiliations: ['groups', 'teams'] },
+        },
+      }) as Promise<ApiResource<DirectMessageAffiliationsResource>>,
+    staleTime: 5 * 60 * 1000,
+  })
+
+  const groups = useMemo(
+    () =>
+      new Map<number, string>(
+        Object.entries(data?.data?.groups ?? {}).map(([id, name]) => [+id, name])
+      ),
+    [data]
+  )
+
+  const teams = useMemo(
+    () =>
+      new Map<number, string>(
+        Object.entries(data?.data?.teams ?? {}).map(([id, name]) => [+id, name])
+      ),
+    [data]
+  )
+
+  return { groups, teams }
+}

package/src/hooks/direct_messages/use_direct_message_candidates.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiCollection } from '../../types'
+import { DirectMessageCandidateResource } from '../../types/resources/direct_message_candidate'
+import { useApiClient } from '../use_api_client'
+
+export function useDirectMessageCandidates(term: string) {
+  const apiClient = useApiClient()
+  return useQuery({
+    queryKey: ['chat', '/me/direct_message_candidates', term],
+    queryFn: () =>
+      apiClient.chat.get({
+        url: '/me/direct_message_candidates',
+        data: {
+          q: term,
+          fields: {
+            DirectMessageCandidate: [
+              'name',
+              'avatar',
+              'groups',
+              'teams',
+              'under_18',
+              'direct_messages_disabled',
+            ],
+          },
+        },
+      }) as Promise<ApiCollection<DirectMessageCandidateResource>>,
+    enabled: term.length >= 1,
+    staleTime: 1000 * 60,
+    throwOnError: true,
+  })
+}

package/src/hooks/direct_messages/use_direct_message_conversation_validate.ts

@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiResource, ConversationValidateResource, ConversationWarning } from '../../types'
+import { useApiClient } from '../use_api_client'
+
+interface Props {
+  recipientIds: string[]
+  enabled?: boolean
+}
+
+export function useDirectMessageConversationValidate({ recipientIds, enabled = true }: Props) {
+  const apiClient = useApiClient()
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['chat', '/me/conversation_validate', { recipient_ids: recipientIds }],
+    queryFn: () =>
+      apiClient.chat.post<ApiResource<ConversationValidateResource>>({
+        url: '/me/conversation_validate',
+        data: {
+          data: {
+            type: 'ConversationValidate',
+            attributes: { recipient_ids: recipientIds },
+          },
+        },
+      }),
+    enabled: enabled && recipientIds.length > 0,
+    retry: false,
+  })
+
+  const warnings: ConversationWarning[] = data?.data.warnings ?? []
+
+  return {
+    warnings,
+    validationPending: enabled && recipientIds.length > 0 && isLoading,
+  }
+}

package/src/hooks/direct_messages/use_find_or_create_direct_message_conversation.ts

@@ -0,0 +1,66 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState, useCallback } from 'react'
+import { ApiCollection, ApiResource, ConversationResource } from '../../types'
+import { ApiClient, useApiClient } from '../use_api_client'
+
+const findDirectMessageConversation = (apiClient: ApiClient, participantIds: string[]) =>
+  apiClient.chat.get({
+    url: '/me/conversations',
+    data: {
+      fields: { Conversation: ['title'] },
+      filter: 'with_exact_direct_message_participants',
+      participant_ids: participantIds.join(','),
+    },
+  }) as Promise<ApiCollection<ConversationResource>>
+
+const createDirectMessageConversation = (apiClient: ApiClient, ids: string[]) =>
+  apiClient.chat.post({
+    url: '/me/direct_messages',
+    data: {
+      data: {
+        type: 'DirectMessage',
+        attributes: { recipients: ids },
+      },
+    },
+  }) as Promise<ApiResource<ConversationResource>>
+
+interface Props {
+  recipientIds: string[]
+  onSuccess: (conversationId: ConversationResource['id']) => void
+}
+
+export function useFindOrCreateDirectMessageConversation({ recipientIds, onSuccess }: Props) {
+  const apiClient = useApiClient()
+  const [isFinding, setIsFinding] = useState(false)
+  const [isError, setIsError] = useState(false)
+
+  const { data } = useQuery({
+    queryKey: ['chat', '/me/conversations', 'with_exact_direct_message_participants', recipientIds],
+    queryFn: () => findDirectMessageConversation(apiClient, recipientIds),
+    enabled: recipientIds.length > 0,
+  })
+
+  const directMessageExists = (data?.data.length ?? 0) > 0
+
+  const findOrCreateConversation = useCallback(
+    async (participantIds: string[]) => {
+      setIsFinding(true)
+      setIsError(false)
+      try {
+        const findResponse = await findDirectMessageConversation(apiClient, participantIds)
+        if (findResponse.data.length > 0) {
+          onSuccess(findResponse.data[0].id)
+        } else {
+          const createResponse = await createDirectMessageConversation(apiClient, participantIds)
+          onSuccess(createResponse.data.id)
+        }
+      } catch {
+        setIsError(true)
+        setIsFinding(false)
+      }
+    },
+    [apiClient, onSuccess]
+  )
+
+  return { findOrCreateConversation, directMessageExists, isFinding, isError }
+}

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -1,33 +1,411 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { PlatformPressable } from '@react-navigation/elements'
+import { useEffect, useState } from 'react'
+import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Heading, Text } from '../../components'
+import { Avatar, Banner, Icon, Spinner, Text } from '../../components'
+import { ComponentErrorBoundary } from '../../components/page/component_error_boundary'
+import { useTheme } from '../../hooks'
+import { useDirectMessageCandidates } from '../../hooks/direct_messages/use_direct_message_candidates'
+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 [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
+    })
+  }
 
   return (
     <View style={styles.container}>
-      <Heading variant="h2">New direct message</Heading>
-      <Text variant="secondary">Coming soon</Text>
+      <ToField
+        selectedPeople={selectedPeople}
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+        onRemove={removePerson}
+        onClear={() => setSelectedPeople(new Map())}
+      />
+      <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>
+  )
+}
+
+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)
+
+  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>
+    )
+  }
+
+  if (selectedPeople.size >= MAX_RECIPIENTS) {
+    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))
+
+  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>
+    )
+  }
+
+  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)
+
+  return (
+    <CandidateList
+      candidates={unselectedCandidates}
+      hasTruncated={hasTruncated}
+      onSelect={onSelect}
+    />
+  )
+}
+
+function CandidateList({
+  candidates,
+  hasTruncated,
+  onSelect,
+}: {
+  candidates: DirectMessageCandidateResource[]
+  hasTruncated: boolean
+  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} onPress={() => 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} disabled />
+              ))}
+            </>
+          )}
+          {hasTruncated && (
+            <View style={styles.truncatedFooter}>
+              <Text variant="secondary" style={styles.truncatedText}>
+                Keep typing to narrow your results.
+              </Text>
+            </View>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+function CandidateItem({
+  candidate,
+  onPress,
+  disabled = false,
+}: {
+  candidate: DirectMessageCandidateResource
+  onPress?: () => void
+  disabled?: boolean
+}) {
+  const styles = useStyles()
+
+  return (
+    <PlatformPressable
+      onPress={disabled ? undefined : onPress}
+      accessibilityRole="button"
+      accessibilityLabel={`Select ${candidate.name}`}
+      accessibilityState={{ disabled }}
+    >
+      <View style={[styles.row, disabled && styles.candidateDisabled]}>
+        <Avatar sourceUri={candidate.avatar} size="lg" showFallback />
+        <Text style={styles.rowName}>{candidate.name}</Text>
+      </View>
+    </PlatformPressable>
+  )
+}
+
 const useStyles = () => {
   const { bottom } = useSafeAreaInsets()
+  const { colors } = useTheme()
 
   return StyleSheet.create({
     container: {
       flex: 1,
-      padding: 16,
-      paddingBottom: 16 + bottom,
+      paddingBottom: bottom,
+    },
+    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',
-      justifyContent: '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: 'center',
+      gap: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderColor: colors.fillColorNeutral050Base,
+    },
+    rowName: {
+      flex: 1,
+    },
+    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/types/resources/direct_message_affiliations.ts

@@ -0,0 +1,8 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface DirectMessageAffiliationsResource extends ResourceObject {
+  type: 'DirectMessageAffiliations'
+  id: string
+  groups: Record<string, string>
+  teams: Record<string, string>
+}

package/src/types/resources/direct_message_candidate.ts

@@ -0,0 +1,12 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface DirectMessageCandidateResource extends ResourceObject {
+  type: 'DirectMessageCandidate'
+  id: string
+  name: string
+  avatar: string
+  groups: number[]
+  teams: number[]
+  under_18: boolean
+  directMessagesDisabled: boolean
+}

package/src/types/resources/index.ts

@@ -1,4 +1,6 @@
 export * from './analytics_metadata'
+export * from './direct_message_affiliations'
+export * from './direct_message_candidate'
 export * from './conversation'
 export * from './conversation_membership'
 export * from './conversation_validate'