@planningcenter/chat-react-native 3.26.1-rc.0 → 3.27.0-rc.0

package/build/hooks/use_groups_groups.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_groups_groups.d.ts","sourceRoot":"","sources":["../../src/hooks/use_groups_groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAG9C,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAY3B,CAAA;AAED,eAAO,MAAM,yBAAyB,eAGrC,CAAA"}
+{"version":3,"file":"use_groups_groups.d.ts","sourceRoot":"","sources":["../../src/hooks/use_groups_groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAG9C,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkB3B,CAAA;AAED,eAAO,MAAM,yBAAyB,eAGrC,CAAA"}

package/build/hooks/use_groups_groups.js

@@ -5,7 +5,13 @@ export const useGroupsGroups = () => {
         data: {
             perPage: 100,
             fields: {
-                Group: ['can_create_conversation', 'name', 'header_image', 'memberships_count'],
+                Group: [
+                    'can_create_conversation',
+                    'can_create_conversation_reason_code',
+                    'name',
+                    'header_image',
+                    'memberships_count',
+                ],
             },
             order: 'name',
         },

package/build/hooks/use_groups_groups.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_groups_groups.js","sourceRoot":"","sources":["../../src/hooks/use_groups_groups.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,OAAO,eAAe,CAAsB;QAC1C,GAAG,EAAE,YAAY;QACjB,IAAI,EAAE;YACJ,OAAO,EAAE,GAAG;YACZ,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,yBAAyB,EAAE,MAAM,EAAE,cAAc,EAAE,mBAAmB,CAAC;aAChF;YACD,KAAK,EAAE,MAAM;SACd;QACD,GAAG,EAAE,QAAQ;KACd,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,eAAe,EAAE,CAAA;IAC/C,OAAO,MAAM,EAAE,MAAM,GAAG,CAAC,CAAA;AAC3B,CAAC,CAAA","sourcesContent":["import { GroupsGroupResource } from '../types'\nimport { useApiPaginator } from './use_api'\n\nexport const useGroupsGroups = () => {\n  return useApiPaginator<GroupsGroupResource>({\n    url: '/me/groups',\n    data: {\n      perPage: 100,\n      fields: {\n        Group: ['can_create_conversation', 'name', 'header_image', 'memberships_count'],\n      },\n      order: 'name',\n    },\n    app: 'groups',\n  })\n}\n\nexport const useCanDisplayGroupsGroups = () => {\n  const { data: groups = [] } = useGroupsGroups()\n  return groups?.length > 0\n}\n"]}
+{"version":3,"file":"use_groups_groups.js","sourceRoot":"","sources":["../../src/hooks/use_groups_groups.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,OAAO,eAAe,CAAsB;QAC1C,GAAG,EAAE,YAAY;QACjB,IAAI,EAAE;YACJ,OAAO,EAAE,GAAG;YACZ,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,yBAAyB;oBACzB,qCAAqC;oBACrC,MAAM;oBACN,cAAc;oBACd,mBAAmB;iBACpB;aACF;YACD,KAAK,EAAE,MAAM;SACd;QACD,GAAG,EAAE,QAAQ;KACd,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,eAAe,EAAE,CAAA;IAC/C,OAAO,MAAM,EAAE,MAAM,GAAG,CAAC,CAAA;AAC3B,CAAC,CAAA","sourcesContent":["import { GroupsGroupResource } from '../types'\nimport { useApiPaginator } from './use_api'\n\nexport const useGroupsGroups = () => {\n  return useApiPaginator<GroupsGroupResource>({\n    url: '/me/groups',\n    data: {\n      perPage: 100,\n      fields: {\n        Group: [\n          'can_create_conversation',\n          'can_create_conversation_reason_code',\n          'name',\n          'header_image',\n          'memberships_count',\n        ],\n      },\n      order: 'name',\n    },\n    app: 'groups',\n  })\n}\n\nexport const useCanDisplayGroupsGroups = () => {\n  const { data: groups = [] } = useGroupsGroups()\n  return groups?.length > 0\n}\n"]}

package/build/screens/conversation_select_recipients/components/restricted_group_row.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GroupsGroupResource } from '../../../types';
+interface RestrictedGroupRowProps {
+    group: GroupsGroupResource;
+}
+export declare const RestrictedGroupRow: ({ group }: RestrictedGroupRowProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=restricted_group_row.d.ts.map

package/build/screens/conversation_select_recipients/components/restricted_group_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"restricted_group_row.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/restricted_group_row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAGpD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,mBAAmB,CAAA;CAC3B;AAaD,eAAO,MAAM,kBAAkB,cAAe,uBAAuB,sBA4BpE,CAAA"}

package/build/screens/conversation_select_recipients/components/restricted_group_row.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Image, Text } from '../../../components';
+import { useTheme } from '../../../hooks';
+import { platformFontWeightMedium } from '../../../utils';
+const DEFAULT_REASON = 'Chat is not enabled for this group';
+const REASON_DISPLAY_TEXT = {
+    leaders_only: 'Only leaders can start conversations',
+    chat_disabled: DEFAULT_REASON,
+};
+function reasonText(reasonCode) {
+    if (!reasonCode)
+        return DEFAULT_REASON;
+    return REASON_DISPLAY_TEXT[reasonCode] || DEFAULT_REASON;
+}
+export const RestrictedGroupRow = ({ group }) => {
+    const styles = useStyles();
+    return (<View style={styles.row} accessibilityLabel={`${group.name} — ${reasonText(group.canCreateConversationReasonCode)}`}>
+      <View style={styles.innerContainer}>
+        {group.headerImage?.thumbnail && (<Image source={{ uri: group.headerImage.thumbnail }} resizeMode="cover" style={styles.image} alt=""/>)}
+        <View style={styles.content}>
+          <Text style={styles.title} numberOfLines={2}>
+            {group.name}
+          </Text>
+          <Text variant="tertiary" numberOfLines={1}>
+            {reasonText(group.canCreateConversationReasonCode)}
+          </Text>
+        </View>
+      </View>
+    </View>);
+};
+const ASPECT_RATIO = 16 / 9;
+const THUMBNAIL_WIDTH = 80;
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
+const useStyles = () => {
+    const theme = useTheme();
+    return StyleSheet.create({
+        row: {
+            paddingLeft: 16,
+            opacity: 0.5,
+        },
+        innerContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+            paddingVertical: 16,
+            paddingRight: 16,
+            borderBottomWidth: 1,
+            borderColor: theme.colors.fillColorNeutral050Base,
+        },
+        image: {
+            width: THUMBNAIL_WIDTH,
+            height: THUMBNAIL_HEIGHT,
+            borderRadius: 4,
+        },
+        title: {
+            fontWeight: platformFontWeightMedium,
+            flexShrink: 1,
+        },
+        content: {
+            flexShrink: 1,
+            gap: 2,
+        },
+    });
+};
+//# sourceMappingURL=restricted_group_row.js.map

package/build/screens/conversation_select_recipients/components/restricted_group_row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restricted_group_row.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/restricted_group_row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAMzD,MAAM,cAAc,GAAG,oCAAoC,CAAA;AAC3D,MAAM,mBAAmB,GAA2B;IAClD,YAAY,EAAE,sCAAsC;IACpD,aAAa,EAAE,cAAc;CAC9B,CAAA;AAED,SAAS,UAAU,CAAC,UAAyB;IAC3C,IAAI,CAAC,UAAU;QAAE,OAAO,cAAc,CAAA;IACtC,OAAO,mBAAmB,CAAC,UAAU,CAAC,IAAI,cAAc,CAAA;AAC1D,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAClB,kBAAkB,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,MAAM,UAAU,CAAC,KAAK,CAAC,+BAA+B,CAAC,EAAE,CAAC,CAE3F;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACjC;QAAA,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,IAAI,CAC/B,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAC7C,UAAU,CAAC,OAAO,CAClB,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,GAAG,CAAC,EAAE,EACN,CACH,CACD;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAC1C;YAAA,CAAC,KAAK,CAAC,IAAI,CACb;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CACxC;YAAA,CAAC,UAAU,CAAC,KAAK,CAAC,+BAA+B,CAAC,CACpD;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,EAAE,GAAG,CAAC,CAAA;AAC3B,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,gBAAgB,GAAG,eAAe,GAAG,YAAY,CAAA;AAEvD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,GAAG,EAAE;YACH,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,GAAG;SACb;QACD,cAAc,EAAE;YACd,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,EAAE;YACP,eAAe,EAAE,EAAE;YACnB,YAAY,EAAE,EAAE;YAChB,iBAAiB,EAAE,CAAC;YACpB,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB;SAClD;QACD,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,MAAM,EAAE,gBAAgB;YACxB,YAAY,EAAE,CAAC;SAChB;QACD,KAAK,EAAE;YACL,UAAU,EAAE,wBAAwB;YACpC,UAAU,EAAE,CAAC;SACd;QACD,OAAO,EAAE;YACP,UAAU,EAAE,CAAC;YACb,GAAG,EAAE,CAAC;SACP;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Image, Text } from '../../../components'\nimport { useTheme } from '../../../hooks'\nimport { GroupsGroupResource } from '../../../types'\nimport { platformFontWeightMedium } from '../../../utils'\n\ninterface RestrictedGroupRowProps {\n  group: GroupsGroupResource\n}\n\nconst DEFAULT_REASON = 'Chat is not enabled for this group'\nconst REASON_DISPLAY_TEXT: Record<string, string> = {\n  leaders_only: 'Only leaders can start conversations',\n  chat_disabled: DEFAULT_REASON,\n}\n\nfunction reasonText(reasonCode: string | null): string {\n  if (!reasonCode) return DEFAULT_REASON\n  return REASON_DISPLAY_TEXT[reasonCode] || DEFAULT_REASON\n}\n\nexport const RestrictedGroupRow = ({ group }: RestrictedGroupRowProps) => {\n  const styles = useStyles()\n\n  return (\n    <View\n      style={styles.row}\n      accessibilityLabel={`${group.name} — ${reasonText(group.canCreateConversationReasonCode)}`}\n    >\n      <View style={styles.innerContainer}>\n        {group.headerImage?.thumbnail && (\n          <Image\n            source={{ uri: group.headerImage.thumbnail }}\n            resizeMode=\"cover\"\n            style={styles.image}\n            alt=\"\"\n          />\n        )}\n        <View style={styles.content}>\n          <Text style={styles.title} numberOfLines={2}>\n            {group.name}\n          </Text>\n          <Text variant=\"tertiary\" numberOfLines={1}>\n            {reasonText(group.canCreateConversationReasonCode)}\n          </Text>\n        </View>\n      </View>\n    </View>\n  )\n}\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nconst useStyles = () => {\n  const theme = useTheme()\n\n  return StyleSheet.create({\n    row: {\n      paddingLeft: 16,\n      opacity: 0.5,\n    },\n    innerContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      paddingVertical: 16,\n      paddingRight: 16,\n      borderBottomWidth: 1,\n      borderColor: theme.colors.fillColorNeutral050Base,\n    },\n    image: {\n      width: THUMBNAIL_WIDTH,\n      height: THUMBNAIL_HEIGHT,\n      borderRadius: 4,\n    },\n    title: {\n      fontWeight: platformFontWeightMedium,\n      flexShrink: 1,\n    },\n    content: {\n      flexShrink: 1,\n      gap: 2,\n    },\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_select_group_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,uCAAuC,EAAE,MAAM,sBAAsB,CAAA;AAI9E,eAAO,MAAM,uCAAuC,eAEjD,uCAAuC,sBAwCzC,CAAA"}
+{"version":3,"file":"conversation_select_group_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,uCAAuC,EAAE,MAAM,sBAAsB,CAAA;AA2B9E,eAAO,MAAM,uCAAuC,eAEjD,uCAAuC,sBAuDzC,CAAA"}

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.js

@@ -1,17 +1,37 @@
 import { useNavigation } from '@react-navigation/native';
+import { partition } from 'lodash';
 import React from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
-import { Heading } from '../../components';
+import { SectionList, StyleSheet, View } from 'react-native';
+import { Heading, Text } from '../../components';
 import { useGroupsGroups } from '../../hooks/use_groups_groups';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row';
 import { GroupsRecipientRow } from './components/groups_recipient_row';
+import { RestrictedGroupRow } from './components/restricted_group_row';
+const SectionKey = {
+    my: 'my',
+    more: 'more',
+};
+const SECTION_CONFIG = {
+    [SectionKey.my]: {
+        title: 'My groups',
+        subtitle: null,
+        ListItemComponent: GroupsRecipientRow,
+    },
+    [SectionKey.more]: {
+        title: 'More groups',
+        subtitle: 'You can not start a new conversation in these groups',
+        ListItemComponent: RestrictedGroupRow,
+    },
+};
 export const ConversationSelectGroupRecipientsScreen = ({ route, }) => {
     const styles = useStyles();
     const navigation = useNavigation();
     const { data: groups = [] } = useGroupsGroups();
-    const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation);
-    const showGroupsDisclaimer = groups.length > groupsWithCreatePermission.length;
+    const [myGroups, moreGroups] = partition(groups, g => g.canCreateConversation);
+    const sections = [
+        { key: SectionKey.my, data: myGroups },
+        { key: SectionKey.more, data: moreGroups },
+    ].filter(({ data }) => data.length > 0);
     const handleNavigateToConversationNew = (group) => {
         navigation.navigate('New', {
             screen: 'ConversationNew',
@@ -22,11 +42,23 @@ export const ConversationSelectGroupRecipientsScreen = ({ route, }) => {
             },
         });
     };
-    return (<FlatList data={groupsWithCreatePermission} keyExtractor={item => item.id.toString()} contentContainerStyle={styles.contentContainer} ListHeaderComponent={<View style={styles.sectionHeader}>
-          <Heading variant="h3">All my groups</Heading>
-        </View>} renderItem={({ item: group }) => {
-            return (<GroupsRecipientRow key={group.id} group={group} onPress={handleNavigateToConversationNew}/>);
-        }} ListFooterComponent={showGroupsDisclaimer ? <GroupsWithoutChatDisclaimerRow /> : null}/>);
+    return (<SectionList sections={sections} keyExtractor={item => item.id.toString()} stickySectionHeadersEnabled={false} contentContainerStyle={styles.contentContainer} renderSectionHeader={({ section }) => {
+            const { title, subtitle } = SECTION_CONFIG[section.key];
+            return (<View style={[
+                    styles.sectionHeader,
+                    section.key === SectionKey.more && styles.sectionHeaderSpaced,
+                ]}>
+            <View>
+              <Heading variant="h3">{title}</Heading>
+              {subtitle && (<Text variant="tertiary" style={styles.sectionSubtitle}>
+                  {subtitle}
+                </Text>)}
+            </View>
+          </View>);
+        }} renderItem={({ item: group, section }) => {
+            const { ListItemComponent } = SECTION_CONFIG[section.key];
+            return <ListItemComponent group={group} onPress={handleNavigateToConversationNew}/>;
+        }}/>);
 };
 const useStyles = () => {
     const { bottom } = useSafeAreaInsets();
@@ -40,6 +72,12 @@ const useStyles = () => {
             padding: 16,
             paddingBottom: 4,
         },
+        sectionHeaderSpaced: {
+            marginTop: 16,
+        },
+        sectionSubtitle: {
+            marginTop: 4,
+        },
     });
 };
 //# sourceMappingURL=conversation_select_group_recipients_screen.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"conversation_select_group_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,OAAO,EAAE,8BAA8B,EAAE,MAAM,iDAAiD,CAAA;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAEtE,MAAM,CAAC,MAAM,uCAAuC,GAAG,CAAC,EACtD,KAAK,GACmC,EAAE,EAAE;IAC5C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,eAAe,EAAE,CAAA;IAC/C,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAA;IAC9E,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,GAAG,0BAA0B,CAAC,MAAM,CAAA;IAE9E,MAAM,+BAA+B,GAAG,CAAC,KAA0B,EAAE,EAAE;QACrE,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;YACzB,MAAM,EAAE,iBAAiB;YACzB,MAAM,EAAE;gBACN,GAAG,KAAK,CAAC,MAAM;gBACf,QAAQ,EAAE,KAAK,CAAC,EAAE;gBAClB,eAAe,EAAE,QAAQ;aAC1B;SACF,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,0BAA0B,CAAC,CACjC,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CACzC,qBAAqB,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAC/C,mBAAmB,CAAC,CAClB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;UAAA,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,CAC9C;QAAA,EAAE,IAAI,CACR,CAAC,CACD,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAiC,EAAE,EAAE;YAC7D,OAAO,CACL,CAAC,kBAAkB,CACjB,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CACd,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,+BAA+B,CAAC,EACzC,CACH,CAAA;QACH,CAAC,CAAC,CACF,mBAAmB,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,8BAA8B,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EACtF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,gBAAgB,EAAE;YAChB,aAAa,EAAE,MAAM;SACtB;QACD,aAAa,EAAE;YACb,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,eAAe;YAC/B,OAAO,EAAE,EAAE;YACX,aAAa,EAAE,CAAC;SACjB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { FlatList, StyleSheet, View } from 'react-native'\nimport { Heading } from '../../components'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { ConversationSelectRecipientsScreenProps } from './types/screen_props'\nimport { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row'\nimport { GroupsRecipientRow } from './components/groups_recipient_row'\n\nexport const ConversationSelectGroupRecipientsScreen = ({\n  route,\n}: ConversationSelectRecipientsScreenProps) => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: groups = [] } = useGroupsGroups()\n  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n  const showGroupsDisclaimer = groups.length > groupsWithCreatePermission.length\n\n  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n    navigation.navigate('New', {\n      screen: 'ConversationNew',\n      params: {\n        ...route.params,\n        group_id: group.id,\n        source_app_name: 'Groups',\n      },\n    })\n  }\n\n  return (\n    <FlatList\n      data={groupsWithCreatePermission}\n      keyExtractor={item => item.id.toString()}\n      contentContainerStyle={styles.contentContainer}\n      ListHeaderComponent={\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">All my groups</Heading>\n        </View>\n      }\n      renderItem={({ item: group }: { item: GroupsGroupResource }) => {\n        return (\n          <GroupsRecipientRow\n            key={group.id}\n            group={group}\n            onPress={handleNavigateToConversationNew}\n          />\n        )\n      }}\n      ListFooterComponent={showGroupsDisclaimer ? <GroupsWithoutChatDisclaimerRow /> : null}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    contentContainer: {\n      paddingBottom: bottom,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: 16,\n      paddingBottom: 4,\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_select_group_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { partition } from 'lodash'\nimport React from 'react'\nimport { SectionList, StyleSheet, View } from 'react-native'\nimport { Heading, Text } from '../../components'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { ConversationSelectRecipientsScreenProps } from './types/screen_props'\nimport { GroupsRecipientRow } from './components/groups_recipient_row'\nimport { RestrictedGroupRow } from './components/restricted_group_row'\n\nconst SectionKey = {\n  my: 'my',\n  more: 'more',\n} as const\n\nconst SECTION_CONFIG = {\n  [SectionKey.my]: {\n    title: 'My groups',\n    subtitle: null,\n    ListItemComponent: GroupsRecipientRow,\n  },\n  [SectionKey.more]: {\n    title: 'More groups',\n    subtitle: 'You can not start a new conversation in these groups',\n    ListItemComponent: RestrictedGroupRow,\n  },\n}\n\ninterface GroupsSection {\n  key: keyof typeof SectionKey\n  data: GroupsGroupResource[]\n}\n\nexport const ConversationSelectGroupRecipientsScreen = ({\n  route,\n}: ConversationSelectRecipientsScreenProps) => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: groups = [] } = useGroupsGroups()\n\n  const [myGroups, moreGroups] = partition(groups, g => g.canCreateConversation)\n\n  const sections: GroupsSection[] = [\n    { key: SectionKey.my, data: myGroups },\n    { key: SectionKey.more, data: moreGroups },\n  ].filter(({ data }) => data.length > 0)\n\n  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n    navigation.navigate('New', {\n      screen: 'ConversationNew',\n      params: {\n        ...route.params,\n        group_id: group.id,\n        source_app_name: 'Groups',\n      },\n    })\n  }\n\n  return (\n    <SectionList<GroupsGroupResource, GroupsSection>\n      sections={sections}\n      keyExtractor={item => item.id.toString()}\n      stickySectionHeadersEnabled={false}\n      contentContainerStyle={styles.contentContainer}\n      renderSectionHeader={({ section }) => {\n        const { title, subtitle } = SECTION_CONFIG[section.key]\n        return (\n          <View\n            style={[\n              styles.sectionHeader,\n              section.key === SectionKey.more && styles.sectionHeaderSpaced,\n            ]}\n          >\n            <View>\n              <Heading variant=\"h3\">{title}</Heading>\n              {subtitle && (\n                <Text variant=\"tertiary\" style={styles.sectionSubtitle}>\n                  {subtitle}\n                </Text>\n              )}\n            </View>\n          </View>\n        )\n      }}\n      renderItem={({ item: group, section }) => {\n        const { ListItemComponent } = SECTION_CONFIG[section.key]\n        return <ListItemComponent group={group} onPress={handleNavigateToConversationNew} />\n      }}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    contentContainer: {\n      paddingBottom: bottom,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: 16,\n      paddingBottom: 4,\n    },\n    sectionHeaderSpaced: {\n      marginTop: 16,\n    },\n    sectionSubtitle: {\n      marginTop: 4,\n    },\n  })\n}\n"]}

package/build/types/resources/groups/groups_group_resource.d.ts

@@ -10,5 +10,6 @@ export interface GroupsGroupResource extends ResourceObject {
     name: string;
     membershipsCount: number;
     canCreateConversation: boolean;
+    canCreateConversationReasonCode: string | null;
 }
 //# sourceMappingURL=groups_group_resource.d.ts.map

package/build/types/resources/groups/groups_group_resource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groups_group_resource.d.ts","sourceRoot":"","sources":["../../../../src/types/resources/groups/groups_group_resource.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;IACb,WAAW,EAAE;QACX,SAAS,EAAE,MAAM,CAAA;QACjB,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB,EAAE,MAAM,CAAA;IACxB,qBAAqB,EAAE,OAAO,CAAA;CAC/B"}
+{"version":3,"file":"groups_group_resource.d.ts","sourceRoot":"","sources":["../../../../src/types/resources/groups/groups_group_resource.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;IACb,WAAW,EAAE;QACX,SAAS,EAAE,MAAM,CAAA;QACjB,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB,EAAE,MAAM,CAAA;IACxB,qBAAqB,EAAE,OAAO,CAAA;IAC9B,+BAA+B,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/C"}

package/build/types/resources/groups/groups_group_resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"groups_group_resource.js","sourceRoot":"","sources":["../../../../src/types/resources/groups/groups_group_resource.ts"],"names":[],"mappings":"","sourcesContent":["import { ResourceObject } from '../../api_primitives'\n\nexport interface GroupsGroupResource extends ResourceObject {\n  id: number\n  type: 'Group'\n  headerImage: {\n    thumbnail: string\n    medium: string\n    original: string\n  }\n  name: string\n  membershipsCount: number\n  canCreateConversation: boolean\n}\n"]}
+{"version":3,"file":"groups_group_resource.js","sourceRoot":"","sources":["../../../../src/types/resources/groups/groups_group_resource.ts"],"names":[],"mappings":"","sourcesContent":["import { ResourceObject } from '../../api_primitives'\n\nexport interface GroupsGroupResource extends ResourceObject {\n  id: number\n  type: 'Group'\n  headerImage: {\n    thumbnail: string\n    medium: string\n    original: string\n  }\n  name: string\n  membershipsCount: number\n  canCreateConversation: boolean\n  canCreateConversationReasonCode: string | null\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.26.1-rc.0",
+  "version": "3.27.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -58,5 +58,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "c156833a4091ac3628566c992e7ef63c19b5c630"
+  "gitHead": "f78fa57e7b21a19c41972fcd0e0fcc6b99e096c5"
 }

package/src/hooks/use_groups_groups.ts

@@ -7,7 +7,13 @@ export const useGroupsGroups = () => {
     data: {
       perPage: 100,
       fields: {
-        Group: ['can_create_conversation', 'name', 'header_image', 'memberships_count'],
+        Group: [
+          'can_create_conversation',
+          'can_create_conversation_reason_code',
+          'name',
+          'header_image',
+          'memberships_count',
+        ],
       },
       order: 'name',
     },

package/src/screens/conversation_select_recipients/components/restricted_group_row.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Image, Text } from '../../../components'
+import { useTheme } from '../../../hooks'
+import { GroupsGroupResource } from '../../../types'
+import { platformFontWeightMedium } from '../../../utils'
+
+interface RestrictedGroupRowProps {
+  group: GroupsGroupResource
+}
+
+const DEFAULT_REASON = 'Chat is not enabled for this group'
+const REASON_DISPLAY_TEXT: Record<string, string> = {
+  leaders_only: 'Only leaders can start conversations',
+  chat_disabled: DEFAULT_REASON,
+}
+
+function reasonText(reasonCode: string | null): string {
+  if (!reasonCode) return DEFAULT_REASON
+  return REASON_DISPLAY_TEXT[reasonCode] || DEFAULT_REASON
+}
+
+export const RestrictedGroupRow = ({ group }: RestrictedGroupRowProps) => {
+  const styles = useStyles()
+
+  return (
+    <View
+      style={styles.row}
+      accessibilityLabel={`${group.name} — ${reasonText(group.canCreateConversationReasonCode)}`}
+    >
+      <View style={styles.innerContainer}>
+        {group.headerImage?.thumbnail && (
+          <Image
+            source={{ uri: group.headerImage.thumbnail }}
+            resizeMode="cover"
+            style={styles.image}
+            alt=""
+          />
+        )}
+        <View style={styles.content}>
+          <Text style={styles.title} numberOfLines={2}>
+            {group.name}
+          </Text>
+          <Text variant="tertiary" numberOfLines={1}>
+            {reasonText(group.canCreateConversationReasonCode)}
+          </Text>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const ASPECT_RATIO = 16 / 9
+const THUMBNAIL_WIDTH = 80
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
+
+const useStyles = () => {
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    row: {
+      paddingLeft: 16,
+      opacity: 0.5,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 16,
+      paddingRight: 16,
+      borderBottomWidth: 1,
+      borderColor: theme.colors.fillColorNeutral050Base,
+    },
+    image: {
+      width: THUMBNAIL_WIDTH,
+      height: THUMBNAIL_HEIGHT,
+      borderRadius: 4,
+    },
+    title: {
+      fontWeight: platformFontWeightMedium,
+      flexShrink: 1,
+    },
+    content: {
+      flexShrink: 1,
+      gap: 2,
+    },
+  })
+}

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -1,13 +1,37 @@
 import { useNavigation } from '@react-navigation/native'
+import { partition } from 'lodash'
 import React from 'react'
-import { FlatList, StyleSheet, View } from 'react-native'
-import { Heading } from '../../components'
+import { SectionList, StyleSheet, View } from 'react-native'
+import { Heading, Text } from '../../components'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
-import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row'
 import { GroupsRecipientRow } from './components/groups_recipient_row'
+import { RestrictedGroupRow } from './components/restricted_group_row'
+
+const SectionKey = {
+  my: 'my',
+  more: 'more',
+} as const
+
+const SECTION_CONFIG = {
+  [SectionKey.my]: {
+    title: 'My groups',
+    subtitle: null,
+    ListItemComponent: GroupsRecipientRow,
+  },
+  [SectionKey.more]: {
+    title: 'More groups',
+    subtitle: 'You can not start a new conversation in these groups',
+    ListItemComponent: RestrictedGroupRow,
+  },
+}
+
+interface GroupsSection {
+  key: keyof typeof SectionKey
+  data: GroupsGroupResource[]
+}
 
 export const ConversationSelectGroupRecipientsScreen = ({
   route,
@@ -15,8 +39,13 @@ export const ConversationSelectGroupRecipientsScreen = ({
   const styles = useStyles()
   const navigation = useNavigation()
   const { data: groups = [] } = useGroupsGroups()
-  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
-  const showGroupsDisclaimer = groups.length > groupsWithCreatePermission.length
+
+  const [myGroups, moreGroups] = partition(groups, g => g.canCreateConversation)
+
+  const sections: GroupsSection[] = [
+    { key: SectionKey.my, data: myGroups },
+    { key: SectionKey.more, data: moreGroups },
+  ].filter(({ data }) => data.length > 0)
 
   const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
     navigation.navigate('New', {
@@ -30,25 +59,35 @@ export const ConversationSelectGroupRecipientsScreen = ({
   }
 
   return (
-    <FlatList
-      data={groupsWithCreatePermission}
+    <SectionList<GroupsGroupResource, GroupsSection>
+      sections={sections}
       keyExtractor={item => item.id.toString()}
+      stickySectionHeadersEnabled={false}
       contentContainerStyle={styles.contentContainer}
-      ListHeaderComponent={
-        <View style={styles.sectionHeader}>
-          <Heading variant="h3">All my groups</Heading>
-        </View>
-      }
-      renderItem={({ item: group }: { item: GroupsGroupResource }) => {
+      renderSectionHeader={({ section }) => {
+        const { title, subtitle } = SECTION_CONFIG[section.key]
         return (
-          <GroupsRecipientRow
-            key={group.id}
-            group={group}
-            onPress={handleNavigateToConversationNew}
-          />
+          <View
+            style={[
+              styles.sectionHeader,
+              section.key === SectionKey.more && styles.sectionHeaderSpaced,
+            ]}
+          >
+            <View>
+              <Heading variant="h3">{title}</Heading>
+              {subtitle && (
+                <Text variant="tertiary" style={styles.sectionSubtitle}>
+                  {subtitle}
+                </Text>
+              )}
+            </View>
+          </View>
         )
       }}
-      ListFooterComponent={showGroupsDisclaimer ? <GroupsWithoutChatDisclaimerRow /> : null}
+      renderItem={({ item: group, section }) => {
+        const { ListItemComponent } = SECTION_CONFIG[section.key]
+        return <ListItemComponent group={group} onPress={handleNavigateToConversationNew} />
+      }}
     />
   )
 }
@@ -66,5 +105,11 @@ const useStyles = () => {
       padding: 16,
       paddingBottom: 4,
     },
+    sectionHeaderSpaced: {
+      marginTop: 16,
+    },
+    sectionSubtitle: {
+      marginTop: 4,
+    },
   })
 }

package/src/types/resources/groups/groups_group_resource.ts

@@ -11,4 +11,5 @@ export interface GroupsGroupResource extends ResourceObject {
   name: string
   membershipsCount: number
   canCreateConversation: boolean
+  canCreateConversationReasonCode: string | null
 }

package/build/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.d.ts

@@ -1,2 +0,0 @@
-export declare const GroupsWithoutChatDisclaimerRow: () => import("react").JSX.Element;
-//# sourceMappingURL=groups_without_chat_disclaimer_row.d.ts.map

package/build/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"groups_without_chat_disclaimer_row.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,mCAQ1C,CAAA"}

package/build/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.js

@@ -1,17 +0,0 @@
-import { Text } from '../../../components';
-import { StyleSheet } from 'react-native';
-export const GroupsWithoutChatDisclaimerRow = () => {
-    const styles = useStyles();
-    return (<Text variant="footnote" style={styles.disclaimer}>
-      *You have additional groups without chat enabled or permissions to start a new conversation.
-    </Text>);
-};
-const useStyles = () => {
-    return StyleSheet.create({
-        disclaimer: {
-            paddingHorizontal: 16,
-            paddingVertical: 12,
-        },
-    });
-};
-//# sourceMappingURL=groups_without_chat_disclaimer_row.js.map

package/build/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"groups_without_chat_disclaimer_row.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,EAAE;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAChD;;IACF,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,iBAAiB,EAAE,EAAE;YACrB,eAAe,EAAE,EAAE;SACpB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { Text } from '../../../components'\nimport { StyleSheet } from 'react-native'\n\nexport const GroupsWithoutChatDisclaimerRow = () => {\n  const styles = useStyles()\n\n  return (\n    <Text variant=\"footnote\" style={styles.disclaimer}>\n      *You have additional groups without chat enabled or permissions to start a new conversation.\n    </Text>\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    disclaimer: {\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n  })\n}\n"]}

package/src/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.tsx

@@ -1,21 +0,0 @@
-import { Text } from '../../../components'
-import { StyleSheet } from 'react-native'
-
-export const GroupsWithoutChatDisclaimerRow = () => {
-  const styles = useStyles()
-
-  return (
-    <Text variant="footnote" style={styles.disclaimer}>
-      *You have additional groups without chat enabled or permissions to start a new conversation.
-    </Text>
-  )
-}
-
-const useStyles = () => {
-  return StyleSheet.create({
-    disclaimer: {
-      paddingHorizontal: 16,
-      paddingVertical: 12,
-    },
-  })
-}