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

package/build/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.js

@@ -1,25 +1,334 @@
-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';
+const MAX_RECIPIENTS = 9;
 export function ConversationSelectDirectMessageRecipientsScreen(_props) {
     const styles = useStyles();
+    const navigation = useNavigation();
+    const [searchTerm, setSearchTerm] = useState('');
+    const [debouncedTerm, setDebouncedTerm] = useState('');
+    const [selectedPeople, setSelectedPeople] = useState(new Map());
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedTerm(searchTerm), 200);
+        return () => clearTimeout(timer);
+    }, [searchTerm]);
+    const selectPerson = (person) => {
+        if (selectedPeople.size >= MAX_RECIPIENTS)
+            return;
+        setSelectedPeople(prev => new Map(prev).set(person.id, person));
+        setSearchTerm('');
+        setDebouncedTerm('');
+    };
+    const removePerson = (id) => {
+        setSelectedPeople(prev => {
+            const next = new Map(prev);
+            next.delete(id);
+            return next;
+        });
+    };
+    const recipientIds = [...selectedPeople.keys()];
+    const { warnings, validationPending } = useDirectMessageConversationValidate({ recipientIds });
+    const handleSuccess = (conversationId) => {
+        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, }) {
+    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, }) {
+    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, }) {
+    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) {
+    const badges = [];
+    if (candidate.directMessagesDisabled)
+        badges.push({ title: 'DMs off' });
+    if (candidate.under_18)
+        badges.push({ title: 'Under 18' });
+    return badges;
+}
+function candidateAffiliationNames(candidate, groups, teams) {
+    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, }) {
+    const styles = useStyles();
+    const available = candidates.filter(c => !c.directMessagesDisabled);
+    const dmDisabled = candidates.filter(c => c.directMessagesDisabled);
+    return (<FlatList 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, }) {
+    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',
-            justifyContent: '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',
+        },
     });
 };
 //# sourceMappingURL=conversation_select_direct_message_recipients_screen.js.map

package/build/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.js.map

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

package/build/screens/conversations/components/list_header_component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list_header_component.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AA0BnD,eAAO,MAAM,mBAAmB,yBAqL/B,CAAA"}
+{"version":3,"file":"list_header_component.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAiCnD,eAAO,MAAM,mBAAmB,yBAgO/B,CAAA"}

package/build/screens/conversations/components/list_header_component.js

@@ -2,12 +2,10 @@ import { 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, useCurrentPersonCache, useTheme } from '../../../hooks';
-import { useCanCreateConversations } from '../../../hooks';
+import { useAtFontScaleBreakpoint, useCanCreateConversations, useCurrentPersonCache, useDirectMessagesEnabled, useHasDirectMessages, useNewConversationEntry, useTheme, } from '../../../hooks';
 import { useAppName } from '../../../hooks/use_app_name';
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions';
 import { useCanDisplayGroups } from '../../../hooks/use_groups';
-import { useNewConversationEntry } from '../../../hooks/use_new_conversation_entry';
 import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter';
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils';
 import { Haptic } from '../../../utils/native_adapters';
@@ -19,14 +17,18 @@ var FilterTypes;
     FilterTypes["All"] = "All";
     FilterTypes["Groups"] = "Groups";
     FilterTypes["Teams"] = "Teams";
+    FilterTypes["DMs"] = "DMs";
     FilterTypes["More"] = "More";
 })(FilterTypes || (FilterTypes = {}));
 export const ListHeaderComponent = () => {
     const navigation = useNavigation();
     const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' });
     const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' });
+    const directMessagesEnabled = useDirectMessagesEnabled();
+    const hasDirectMessages = useHasDirectMessages();
+    const canFilterByDMs = directMessagesEnabled && hasDirectMessages;
     const route = useRoute();
-    const { chat_group_graph_id, group_source_app_name = '' } = route.params || {};
+    const { chat_group_graph_id, group_source_app_name = '', show_direct_messages, } = route.params || {};
     const currentPersonCache = useCurrentPersonCache();
     const { markAllRead, isPending } = useMarkAllRead();
     const canCreateConversations = useCanCreateConversations();
@@ -43,8 +45,11 @@ export const ListHeaderComponent = () => {
         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]);
+    }, [chat_group_graph_id, group_source_app_name, show_direct_messages]);
     const handleNewConversationNavigation = useCallback(() => {
         if (newConversationFromFilter || entryMode === 'select_type') {
             return navigation.navigate('ConversationSelectType', {
@@ -65,6 +70,9 @@ export const ListHeaderComponent = () => {
             });
         }
     }, [navigation, route.params, entryMode, newConversationFromFilter]);
+    const handleChatSettings = useCallback(() => {
+        navigation.navigate('ChatSettings', {});
+    }, [navigation]);
     const handleMoreOptions = useCallback(() => {
         navigation.navigate('ConversationsMoreActions');
     }, [navigation]);
@@ -72,8 +80,9 @@ export const ListHeaderComponent = () => {
         navigation.navigate('ConversationFilters', {
             chat_group_graph_id,
             group_source_app_name,
+            show_direct_messages,
         });
-    }, [navigation, chat_group_graph_id, group_source_app_name]);
+    }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages]);
     const handleMarkAllRead = useCallback(() => {
         currentPersonCache.update({ unreadCount: 0 });
         Haptic.notificationSuccess();
@@ -89,7 +98,8 @@ export const ListHeaderComponent = () => {
     }, [active, handleMarkAllRead]);
     const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups;
     const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups;
-    const shouldShowHeaderFiltersButton = hasSomeSourceFilterCapability && !hasMultiSourceFilterCapabilities;
+    const showFilterRow = hasMultiSourceFilterCapabilities || canFilterByDMs;
+    const shouldShowHeaderFiltersButton = hasSomeSourceFilterCapability && !showFilterRow;
     const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton
         ? 'View filters'
         : 'View more filters';
@@ -111,25 +121,33 @@ export const ListHeaderComponent = () => {
           </TextButton>
         </View>
         <View style={styles.actionsContainer}>
+          {directMessagesEnabled && (<ListHeaderActionButton name="general.cog" onPress={handleChatSettings} accessibilityLabel="Chat settings" 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}/>)}
           {appName !== 'services' && (<ListHeaderActionButton name="general.threeDots" onPress={handleMoreOptions} accessibilityLabel="More options" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}/>)}
           {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps}/>}
         </View>
       </View>
-      {hasMultiSourceFilterCapabilities && (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.filterRow} accessibilityRole="toolbar">
+      {showFilterRow && (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.filterRow} accessibilityRole="toolbar">
           <ToggleButton title={FilterTypes.All} active={active === FilterTypes.All} onPress={() => navigation.setParams({
                 chat_group_graph_id: undefined,
                 group_source_app_name: undefined,
+                show_direct_messages: undefined,
             })} accessibilityLabel="Show all conversations" style={styles.filterButton}/>
-          <ToggleButton title={FilterTypes.Groups} active={active === FilterTypes.Groups} onPress={() => navigation.setParams({
-                chat_group_graph_id: undefined,
-                group_source_app_name: 'Groups',
-            })} accessibilityLabel="Filter to group conversations" style={styles.filterButton}/>
-
-          <ToggleButton title={FilterTypes.Teams} active={active === FilterTypes.Teams} onPress={() => navigation.setParams({
-                chat_group_graph_id: undefined,
-                group_source_app_name: 'Services',
-            })} accessibilityLabel="Filter to team conversations" style={styles.filterButton}/>
+          {canFilterByGroups && (<ToggleButton title={FilterTypes.Groups} active={active === FilterTypes.Groups} onPress={() => navigation.setParams({
+                    chat_group_graph_id: undefined,
+                    group_source_app_name: 'Groups',
+                    show_direct_messages: undefined,
+                })} accessibilityLabel="Filter to group conversations" style={styles.filterButton}/>)}
+          {canFilterByTeams && (<ToggleButton title={FilterTypes.Teams} active={active === FilterTypes.Teams} onPress={() => navigation.setParams({
+                    chat_group_graph_id: undefined,
+                    group_source_app_name: 'Services',
+                    show_direct_messages: undefined,
+                })} accessibilityLabel="Filter to team conversations" style={styles.filterButton}/>)}
+          {canFilterByDMs && (<ToggleButton title={FilterTypes.DMs} active={active === FilterTypes.DMs} onPress={() => navigation.setParams({
+                    chat_group_graph_id: undefined,
+                    group_source_app_name: undefined,
+                    show_direct_messages: true,
+                })} accessibilityLabel="Filter to direct message conversations" style={styles.filterButton}/>)}
           <ToggleButton {...moreFiltersButtonProps}/>
         </ScrollView>)}
       <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL}/>

package/build/screens/conversations/components/list_header_component.js.map

@@ -1 +1 @@
-{"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, ScrollView, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useCanCreateConversations } from '../../../hooks'\nimport { useAppName } from '../../../hooks/use_app_name'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { useNewConversationEntry } from '../../../hooks/use_new_conversation_entry'\nimport { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'\nimport { GraphId } from '../../../types/resources/group_resource'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'\nimport { Haptic } from '../../../utils/native_adapters'\nimport { ConversationsScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\nimport { ListHeaderActionButton } from './list_header_action_button'\n\nconst ROW_PADDING_HORIZONTAL = 16\n\nenum FilterTypes {\n  All = 'All',\n  Groups = 'Groups',\n  Teams = 'Teams',\n  More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n  const navigation = useNavigation()\n  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()\n  const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}\n  const currentPersonCache = useCurrentPersonCache()\n  const { markAllRead, isPending } = useMarkAllRead()\n  const canCreateConversations = useCanCreateConversations()\n  const entryMode = useNewConversationEntry()\n  const newConversationFromFilter = useNewConversationFromFilter(\n    chat_group_graph_id as GraphId | undefined\n  )\n  const appName = useAppName()\n\n  const active: FilterTypes = useMemo(() => {\n    if (chat_group_graph_id) {\n      return FilterTypes.More\n    } else if (/groups/i.test(group_source_app_name)) {\n      return FilterTypes.Groups\n    } else if (/services/i.test(group_source_app_name)) {\n      return FilterTypes.Teams\n    }\n\n    return FilterTypes.All\n  }, [chat_group_graph_id, group_source_app_name])\n\n  const handleNewConversationNavigation = useCallback(() => {\n    if (newConversationFromFilter || entryMode === 'select_type') {\n      return navigation.navigate('ConversationSelectType', {\n        ...route.params,\n        newConversationFromFilter,\n      })\n    }\n\n    if (entryMode === 'groups') {\n      return navigation.navigate('New', {\n        screen: 'ConversationSelectGroupRecipients',\n        params: { ...route.params },\n      })\n    }\n\n    if (entryMode === 'teams') {\n      return navigation.navigate('New', {\n        screen: 'ConversationSelectTeamsILeadRecipients',\n        params: { ...route.params },\n      })\n    }\n  }, [navigation, route.params, entryMode, newConversationFromFilter])\n\n  const handleMoreOptions = useCallback(() => {\n    navigation.navigate('ConversationsMoreActions')\n  }, [navigation])\n\n  const handleOpenConversationFilters = useCallback(() => {\n    navigation.navigate('ConversationFilters', {\n      chat_group_graph_id,\n      group_source_app_name,\n    })\n  }, [navigation, chat_group_graph_id, group_source_app_name])\n\n  const handleMarkAllRead = useCallback(() => {\n    currentPersonCache.update({ unreadCount: 0 })\n    Haptic.notificationSuccess()\n    markAllRead()\n  }, [currentPersonCache, markAllRead])\n\n  const alertMarkAllRead = useCallback(() => {\n    if (active === FilterTypes.All) return handleMarkAllRead()\n\n    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n      { text: 'Cancel' },\n      { text: 'OK', onPress: () => handleMarkAllRead() },\n    ])\n  }, [active, handleMarkAllRead])\n\n  const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups\n  const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups\n  const shouldShowHeaderFiltersButton =\n    hasSomeSourceFilterCapability && !hasMultiSourceFilterCapabilities\n  const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton\n    ? 'View filters'\n    : 'View more filters'\n\n  const moreFiltersButtonProps = {\n    onPress: handleOpenConversationFilters,\n    active: active === FilterTypes.More,\n    iconNameRight: 'general.threeReducingHorizontalBars' as const,\n    accessibilityLabel: moreFiltersButtonA11yLabel,\n  }\n\n  const styles = useStyles({ shouldShowHeaderFiltersButton })\n\n  return (\n    <View style={styles.listHeader}>\n      <View style={styles.headingRow}>\n        <View style={styles.titleContainer}>\n          <Heading numberOfLines={1} variant=\"h2\">\n            Conversations\n          </Heading>\n          <TextButton\n            onPress={alertMarkAllRead}\n            disabled={isPending}\n            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            accessibilityShowsLargeContentViewer\n            accessibilityLargeContentTitle=\"Mark all read\"\n          >\n            Mark all read\n          </TextButton>\n        </View>\n        <View style={styles.actionsContainer}>\n          {canCreateConversations && (\n            <ListHeaderActionButton\n              name=\"churchCenter.signups\"\n              onPress={handleNewConversationNavigation}\n              accessibilityLabel=\"New conversation\"\n              testID=\"conversations-new-conversation-button\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            />\n          )}\n          {appName !== 'services' && (\n            <ListHeaderActionButton\n              name=\"general.threeDots\"\n              onPress={handleMoreOptions}\n              accessibilityLabel=\"More options\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            />\n          )}\n          {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}\n        </View>\n      </View>\n      {hasMultiSourceFilterCapabilities && (\n        <ScrollView\n          horizontal\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={styles.filterRow}\n          accessibilityRole=\"toolbar\"\n        >\n          <ToggleButton\n            title={FilterTypes.All}\n            active={active === FilterTypes.All}\n            onPress={() =>\n              navigation.setParams({\n                chat_group_graph_id: undefined,\n                group_source_app_name: undefined,\n              })\n            }\n            accessibilityLabel=\"Show all conversations\"\n            style={styles.filterButton}\n          />\n          <ToggleButton\n            title={FilterTypes.Groups}\n            active={active === FilterTypes.Groups}\n            onPress={() =>\n              navigation.setParams({\n                chat_group_graph_id: undefined,\n                group_source_app_name: 'Groups',\n              })\n            }\n            accessibilityLabel=\"Filter to group conversations\"\n            style={styles.filterButton}\n          />\n\n          <ToggleButton\n            title={FilterTypes.Teams}\n            active={active === FilterTypes.Teams}\n            onPress={() =>\n              navigation.setParams({\n                chat_group_graph_id: undefined,\n                group_source_app_name: 'Services',\n              })\n            }\n            accessibilityLabel=\"Filter to team conversations\"\n            style={styles.filterButton}\n          />\n          <ToggleButton {...moreFiltersButtonProps} />\n        </ScrollView>\n      )}\n      <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />\n    </View>\n  )\n}\n\nconst useStyles = ({\n  shouldShowHeaderFiltersButton,\n}: {\n  shouldShowHeaderFiltersButton: boolean\n}) => {\n  const theme = useTheme()\n  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(\n    shouldShowHeaderFiltersButton ? 1.2 : undefined\n  )\n\n  return StyleSheet.create({\n    listHeader: {\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n      paddingBottom: 16,\n      gap: 16,\n    },\n    headingRow: {\n      gap: 12,\n      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',\n      justifyContent: 'space-between',\n      paddingBottom: atFontScaleBreakpoint ? 4 : 0,\n      paddingHorizontal: ROW_PADDING_HORIZONTAL,\n    },\n    titleContainer: {\n      gap: 8,\n    },\n    actionsContainer: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n    },\n    markAllReadRow: {\n      paddingBottom: 4,\n    },\n    filterRow: {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      gap: 8,\n      paddingHorizontal: ROW_PADDING_HORIZONTAL,\n      flexGrow: 1,\n    },\n    filterButton: {\n      flex: 1,\n      minWidth: 65,\n    },\n  })\n}\n"]}
+{"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, ScrollView, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport {\n  useAtFontScaleBreakpoint,\n  useCanCreateConversations,\n  useCurrentPersonCache,\n  useDirectMessagesEnabled,\n  useHasDirectMessages,\n  useNewConversationEntry,\n  useTheme,\n} from '../../../hooks'\nimport { useAppName } from '../../../hooks/use_app_name'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'\nimport { GraphId } from '../../../types/resources/group_resource'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'\nimport { Haptic } from '../../../utils/native_adapters'\nimport { ConversationsScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\nimport { ListHeaderActionButton } from './list_header_action_button'\n\nconst ROW_PADDING_HORIZONTAL = 16\n\nenum FilterTypes {\n  All = 'All',\n  Groups = 'Groups',\n  Teams = 'Teams',\n  DMs = 'DMs',\n  More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n  const navigation = useNavigation()\n  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n  const directMessagesEnabled = useDirectMessagesEnabled()\n  const hasDirectMessages = useHasDirectMessages()\n  const canFilterByDMs = directMessagesEnabled && hasDirectMessages\n  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()\n  const {\n    chat_group_graph_id,\n    group_source_app_name = '',\n    show_direct_messages,\n  } = route.params || {}\n  const currentPersonCache = useCurrentPersonCache()\n  const { markAllRead, isPending } = useMarkAllRead()\n  const canCreateConversations = useCanCreateConversations()\n  const entryMode = useNewConversationEntry()\n  const newConversationFromFilter = useNewConversationFromFilter(\n    chat_group_graph_id as GraphId | undefined\n  )\n  const appName = useAppName()\n\n  const active: FilterTypes = useMemo(() => {\n    if (chat_group_graph_id) {\n      return FilterTypes.More\n    } else if (/groups/i.test(group_source_app_name)) {\n      return FilterTypes.Groups\n    } else if (/services/i.test(group_source_app_name)) {\n      return FilterTypes.Teams\n    } else if (show_direct_messages) {\n      return FilterTypes.DMs\n    }\n\n    return FilterTypes.All\n  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])\n\n  const handleNewConversationNavigation = useCallback(() => {\n    if (newConversationFromFilter || entryMode === 'select_type') {\n      return navigation.navigate('ConversationSelectType', {\n        ...route.params,\n        newConversationFromFilter,\n      })\n    }\n\n    if (entryMode === 'groups') {\n      return navigation.navigate('New', {\n        screen: 'ConversationSelectGroupRecipients',\n        params: { ...route.params },\n      })\n    }\n\n    if (entryMode === 'teams') {\n      return navigation.navigate('New', {\n        screen: 'ConversationSelectTeamsILeadRecipients',\n        params: { ...route.params },\n      })\n    }\n  }, [navigation, route.params, entryMode, newConversationFromFilter])\n\n  const handleChatSettings = useCallback(() => {\n    navigation.navigate('ChatSettings', {})\n  }, [navigation])\n\n  const handleMoreOptions = useCallback(() => {\n    navigation.navigate('ConversationsMoreActions')\n  }, [navigation])\n\n  const handleOpenConversationFilters = useCallback(() => {\n    navigation.navigate('ConversationFilters', {\n      chat_group_graph_id,\n      group_source_app_name,\n      show_direct_messages,\n    })\n  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])\n\n  const handleMarkAllRead = useCallback(() => {\n    currentPersonCache.update({ unreadCount: 0 })\n    Haptic.notificationSuccess()\n    markAllRead()\n  }, [currentPersonCache, markAllRead])\n\n  const alertMarkAllRead = useCallback(() => {\n    if (active === FilterTypes.All) return handleMarkAllRead()\n\n    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n      { text: 'Cancel' },\n      { text: 'OK', onPress: () => handleMarkAllRead() },\n    ])\n  }, [active, handleMarkAllRead])\n\n  const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups\n  const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups\n  const showFilterRow = hasMultiSourceFilterCapabilities || canFilterByDMs\n  const shouldShowHeaderFiltersButton = hasSomeSourceFilterCapability && !showFilterRow\n  const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton\n    ? 'View filters'\n    : 'View more filters'\n\n  const moreFiltersButtonProps = {\n    onPress: handleOpenConversationFilters,\n    active: active === FilterTypes.More,\n    iconNameRight: 'general.threeReducingHorizontalBars' as const,\n    accessibilityLabel: moreFiltersButtonA11yLabel,\n  }\n\n  const styles = useStyles({ shouldShowHeaderFiltersButton })\n\n  return (\n    <View style={styles.listHeader}>\n      <View style={styles.headingRow}>\n        <View style={styles.titleContainer}>\n          <Heading numberOfLines={1} variant=\"h2\">\n            Conversations\n          </Heading>\n          <TextButton\n            onPress={alertMarkAllRead}\n            disabled={isPending}\n            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            accessibilityShowsLargeContentViewer\n            accessibilityLargeContentTitle=\"Mark all read\"\n          >\n            Mark all read\n          </TextButton>\n        </View>\n        <View style={styles.actionsContainer}>\n          {directMessagesEnabled && (\n            <ListHeaderActionButton\n              name=\"general.cog\"\n              onPress={handleChatSettings}\n              accessibilityLabel=\"Chat settings\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            />\n          )}\n          {canCreateConversations && (\n            <ListHeaderActionButton\n              name=\"churchCenter.signups\"\n              onPress={handleNewConversationNavigation}\n              accessibilityLabel=\"New conversation\"\n              testID=\"conversations-new-conversation-button\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            />\n          )}\n          {appName !== 'services' && (\n            <ListHeaderActionButton\n              name=\"general.threeDots\"\n              onPress={handleMoreOptions}\n              accessibilityLabel=\"More options\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            />\n          )}\n          {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}\n        </View>\n      </View>\n      {showFilterRow && (\n        <ScrollView\n          horizontal\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={styles.filterRow}\n          accessibilityRole=\"toolbar\"\n        >\n          <ToggleButton\n            title={FilterTypes.All}\n            active={active === FilterTypes.All}\n            onPress={() =>\n              navigation.setParams({\n                chat_group_graph_id: undefined,\n                group_source_app_name: undefined,\n                show_direct_messages: undefined,\n              })\n            }\n            accessibilityLabel=\"Show all conversations\"\n            style={styles.filterButton}\n          />\n          {canFilterByGroups && (\n            <ToggleButton\n              title={FilterTypes.Groups}\n              active={active === FilterTypes.Groups}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Groups',\n                  show_direct_messages: undefined,\n                })\n              }\n              accessibilityLabel=\"Filter to group conversations\"\n              style={styles.filterButton}\n            />\n          )}\n          {canFilterByTeams && (\n            <ToggleButton\n              title={FilterTypes.Teams}\n              active={active === FilterTypes.Teams}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Services',\n                  show_direct_messages: undefined,\n                })\n              }\n              accessibilityLabel=\"Filter to team conversations\"\n              style={styles.filterButton}\n            />\n          )}\n          {canFilterByDMs && (\n            <ToggleButton\n              title={FilterTypes.DMs}\n              active={active === FilterTypes.DMs}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: undefined,\n                  show_direct_messages: true,\n                })\n              }\n              accessibilityLabel=\"Filter to direct message conversations\"\n              style={styles.filterButton}\n            />\n          )}\n          <ToggleButton {...moreFiltersButtonProps} />\n        </ScrollView>\n      )}\n      <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />\n    </View>\n  )\n}\n\nconst useStyles = ({\n  shouldShowHeaderFiltersButton,\n}: {\n  shouldShowHeaderFiltersButton: boolean\n}) => {\n  const theme = useTheme()\n  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(\n    shouldShowHeaderFiltersButton ? 1.2 : undefined\n  )\n\n  return StyleSheet.create({\n    listHeader: {\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n      paddingBottom: 16,\n      gap: 16,\n    },\n    headingRow: {\n      gap: 12,\n      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',\n      justifyContent: 'space-between',\n      paddingBottom: atFontScaleBreakpoint ? 4 : 0,\n      paddingHorizontal: ROW_PADDING_HORIZONTAL,\n    },\n    titleContainer: {\n      gap: 8,\n    },\n    actionsContainer: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n    },\n    markAllReadRow: {\n      paddingBottom: 4,\n    },\n    filterRow: {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      gap: 8,\n      paddingHorizontal: ROW_PADDING_HORIZONTAL,\n      flexGrow: 1,\n    },\n    filterButton: {\n      flex: 1,\n      minWidth: 65,\n    },\n  })\n}\n"]}