@planningcenter/chat-react-native 3.24.0-rc.8 → 3.24.0

package/build/screens/preferred_app_selection_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"preferred_app_selection_screen.js","sourceRoot":"","sources":["../../src/screens/preferred_app_selection_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StaticScreenProps } from '@react-navigation/native'\nimport { useMutation } from '@tanstack/react-query'\nimport React, { type PropsWithChildren } from 'react'\nimport { Image, StyleSheet, View, type ViewStyle } from 'react-native'\nimport churchCenterLogo from '../../assets/churchCenter.png'\nimport servicesLogo from '../../assets/servicesApp.png'\nimport chatLogo from '../../assets/chatLogo.png'\nimport { Heading, Icon, Text } from '../components'\nimport { useApiClient, useTheme } from '../hooks'\nimport { PreferredApp, useChatTypes } from './preferred_app/hooks/use_chat_types'\nimport { useAppName } from '../hooks/use_app_name'\nimport { throwResponseError } from '../utils/response_error'\n\nexport type PreferredAppSelectionScreenProps = StaticScreenProps<{\n  chatTypeId: number | string\n  conversationType?: 'group' | 'team'\n  currentSelection?: PreferredApp\n}>\n\nexport function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScreenProps) {\n  const { chatTypeId } = route.params\n  const { data: chatTypes, refetch: refetchChatTypes } = useChatTypes()\n  const appName = useAppName()\n\n  const apiClient = useApiClient()\n\n  const { mutate: updateChatType } = useMutation({\n    throwOnError: true,\n    onSuccess: () => refetchChatTypes(),\n    mutationFn: (app: PreferredApp) => {\n      return apiClient.chat\n        .post({\n          url: `/me/chat_types/${chatTypeId}/set_preferred_appz`,\n          data: { data: { type: 'ChatType', attributes: { app } } },\n        })\n        .catch(throwResponseError)\n    },\n  })\n  const chatType = chatTypes.find(t => t.id === chatTypeId)\n  const { preferredAppOptions } = chatType || {}\n\n  const handleSelection = (app: PreferredApp) => {\n    updateChatType(app)\n  }\n\n  const sectionTitle = `${chatType?.title} Conversations`\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.section}>\n        <Heading variant=\"h3\" style={styles.sectionHeading}>\n          {sectionTitle}\n        </Heading>\n        {preferredAppOptions?.sort(sortPreferredApp('asc')).map((option, key) => (\n          <PressableRow\n            key={`${key}-${option}`}\n            isActive={chatType?.preferredApp === option}\n            onPress={() => handleSelection(option)}\n          >\n            <Image source={getAppImage(option)} style={styles.logo} />\n            <Text>\n              {option}\n              {appName.includes(option.replace(/\\s/, '').toLowerCase()) ? ' ( current )' : ''}\n            </Text>\n          </PressableRow>\n        ))}\n      </View>\n    </View>\n  )\n}\n\nconst sortPreferredApp = (dir?: 'asc' | 'desc') => (a: PreferredApp, b: PreferredApp) => {\n  if (a === 'None') return 1\n  if (a > b) return dir === 'asc' ? 1 : -1\n  if (b > a) return dir === 'asc' ? -1 : 1\n\n  return 0\n}\n\nconst getAppImage = (option: PreferredApp) => {\n  switch (option) {\n    case 'Church Center':\n      return churchCenterLogo\n    case 'Services':\n      return servicesLogo\n    case 'Chat':\n      return chatLogo\n    default:\n      return undefined\n  }\n}\n\nconst PressableRow = ({\n  children,\n  isActive,\n  onPress,\n  style,\n}: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {\n  const styles = useRowStyles({ isActive })\n  return (\n    <PlatformPressable\n      style={styles.pressable}\n      onPress={onPress}\n      accessibilityRole=\"radio\"\n      accessibilityState={{ selected: isActive }}\n    >\n      <View style={styles.row}>\n        <View style={[styles.rowInner, style]}>{children}</View>\n        <Icon\n          name=\"general.check\"\n          style={styles.rowIconRight}\n          accessibilityElementsHidden\n          maxFontSizeMultiplier={2.5}\n        />\n      </View>\n    </PlatformPressable>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  section: {\n    paddingTop: 16,\n  },\n  sectionHeading: {\n    paddingHorizontal: 16,\n    paddingBottom: 4,\n  },\n  logo: {\n    width: 32,\n    height: 32,\n    borderRadius: 8,\n  },\n})\n\nconst useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {\n  const theme = useTheme()\n\n  return StyleSheet.create({\n    pressable: {\n      paddingLeft: 16,\n      backgroundColor: theme.colors.surfaceColor100,\n    },\n    row: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: 12,\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.borderColorDefaultBase,\n      paddingVertical: 12,\n      paddingRight: 16,\n    },\n    rowInner: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      flexShrink: 1,\n    },\n    rowIconRight: {\n      fontSize: 16,\n      color: theme.colors.statusSuccessIcon,\n      opacity: isActive ? 1 : 0,\n    },\n  })\n}\n"]}
+{"version":3,"file":"preferred_app_selection_screen.js","sourceRoot":"","sources":["../../src/screens/preferred_app_selection_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StaticScreenProps } from '@react-navigation/native'\nimport { useMutation } from '@tanstack/react-query'\nimport React, { type PropsWithChildren } from 'react'\nimport { Image, StyleSheet, View, type ViewStyle } from 'react-native'\nimport churchCenterLogo from '../../assets/churchCenter.png'\nimport servicesLogo from '../../assets/servicesApp.png'\nimport chatLogo from '../../assets/chatLogo.png'\nimport { Heading, Icon, Text } from '../components'\nimport { useApiClient, useTheme } from '../hooks'\nimport { PreferredApp, useChatTypes } from './preferred_app/hooks/use_chat_types'\nimport { useAppName } from '../hooks/use_app_name'\nimport { throwResponseError } from '../utils/response_error'\n\nexport type PreferredAppSelectionScreenProps = StaticScreenProps<{\n  chatTypeId: number | string\n  conversationType?: 'group' | 'team'\n  currentSelection?: PreferredApp\n}>\n\nexport function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScreenProps) {\n  const { chatTypeId } = route.params\n  const { data: chatTypes, refetch: refetchChatTypes } = useChatTypes()\n  const appName = useAppName()\n\n  const apiClient = useApiClient()\n\n  const { mutate: updateChatType } = useMutation({\n    throwOnError: true,\n    onSuccess: () => refetchChatTypes(),\n    mutationFn: (app: PreferredApp) => {\n      return apiClient.chat\n        .post({\n          url: `/me/chat_types/${chatTypeId}/set_preferred_app`,\n          data: { data: { type: 'ChatType', attributes: { app } } },\n        })\n        .catch(throwResponseError)\n    },\n  })\n  const chatType = chatTypes.find(t => t.id === chatTypeId)\n  const { preferredAppOptions } = chatType || {}\n\n  const handleSelection = (app: PreferredApp) => {\n    updateChatType(app)\n  }\n\n  const sectionTitle = `${chatType?.title} Conversations`\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.section}>\n        <Heading variant=\"h3\" style={styles.sectionHeading}>\n          {sectionTitle}\n        </Heading>\n        {preferredAppOptions?.sort(sortPreferredApp('asc')).map((option, key) => (\n          <PressableRow\n            key={`${key}-${option}`}\n            isActive={chatType?.preferredApp === option}\n            onPress={() => handleSelection(option)}\n          >\n            <Image source={getAppImage(option)} style={styles.logo} />\n            <Text>\n              {option}\n              {appName.includes(option.replace(/\\s/, '').toLowerCase()) ? ' ( current )' : ''}\n            </Text>\n          </PressableRow>\n        ))}\n      </View>\n    </View>\n  )\n}\n\nconst sortPreferredApp = (dir?: 'asc' | 'desc') => (a: PreferredApp, b: PreferredApp) => {\n  if (a === 'None') return 1\n  if (a > b) return dir === 'asc' ? 1 : -1\n  if (b > a) return dir === 'asc' ? -1 : 1\n\n  return 0\n}\n\nconst getAppImage = (option: PreferredApp) => {\n  switch (option) {\n    case 'Church Center':\n      return churchCenterLogo\n    case 'Services':\n      return servicesLogo\n    case 'Chat':\n      return chatLogo\n    default:\n      return undefined\n  }\n}\n\nconst PressableRow = ({\n  children,\n  isActive,\n  onPress,\n  style,\n}: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {\n  const styles = useRowStyles({ isActive })\n  return (\n    <PlatformPressable\n      style={styles.pressable}\n      onPress={onPress}\n      accessibilityRole=\"radio\"\n      accessibilityState={{ selected: isActive }}\n    >\n      <View style={styles.row}>\n        <View style={[styles.rowInner, style]}>{children}</View>\n        <Icon\n          name=\"general.check\"\n          style={styles.rowIconRight}\n          accessibilityElementsHidden\n          maxFontSizeMultiplier={2.5}\n        />\n      </View>\n    </PlatformPressable>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  section: {\n    paddingTop: 16,\n  },\n  sectionHeading: {\n    paddingHorizontal: 16,\n    paddingBottom: 4,\n  },\n  logo: {\n    width: 32,\n    height: 32,\n    borderRadius: 8,\n  },\n})\n\nconst useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {\n  const theme = useTheme()\n\n  return StyleSheet.create({\n    pressable: {\n      paddingLeft: 16,\n      backgroundColor: theme.colors.surfaceColor100,\n    },\n    row: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: 12,\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.borderColorDefaultBase,\n      paddingVertical: 12,\n      paddingRight: 16,\n    },\n    rowInner: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      flexShrink: 1,\n    },\n    rowIconRight: {\n      fontSize: 16,\n      color: theme.colors.statusSuccessIcon,\n      opacity: isActive ? 1 : 0,\n    },\n  })\n}\n"]}

package/build/types/resources/group_membership.d.ts

@@ -0,0 +1,6 @@
+import { ResourceObject } from '../api_primitives';
+export interface GroupMembership extends ResourceObject {
+    notificationLevel: string;
+    notificationLevelDescription: string;
+}
+//# sourceMappingURL=group_membership.d.ts.map

package/build/types/resources/group_membership.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group_membership.d.ts","sourceRoot":"","sources":["../../../src/types/resources/group_membership.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,iBAAiB,EAAE,MAAM,CAAA;IACzB,4BAA4B,EAAE,MAAM,CAAA;CACrC"}

package/build/types/resources/group_membership.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=group_membership.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group_membership.js","sourceRoot":"","sources":["../../../src/types/resources/group_membership.ts"],"names":[],"mappings":"","sourcesContent":["import { ResourceObject } from '../api_primitives'\n\nexport interface GroupMembership extends ResourceObject {\n  notificationLevel: string\n  notificationLevelDescription: string\n}\n"]}

package/build/types/resources/group_resource.d.ts

@@ -1,4 +1,5 @@
 import { AppName } from './app_name';
+import { GroupMembership } from './group_membership';
 export type SourceType = 'Team' | 'Group' | 'PlanTeam';
 export type GraphId = `${AppName}-${SourceType}-${number}`;
 export interface GroupResource {
@@ -11,4 +12,7 @@ export interface GroupResource {
     sourceAppName: AppName;
     sourceType: SourceType;
 }
+export interface GroupResourceWithMembership extends GroupResource {
+    myGroupMembership?: GroupMembership;
+}
 //# sourceMappingURL=group_resource.d.ts.map

package/build/types/resources/group_resource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"group_resource.d.ts","sourceRoot":"","sources":["../../../src/types/resources/group_resource.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;AACtD,MAAM,MAAM,OAAO,GAAG,GAAG,OAAO,IAAI,UAAU,IAAI,MAAM,EAAE,CAAA;AAE1D,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,OAAO,CAAA;IACX,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACvB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,UAAU,CAAA;CACvB"}
+{"version":3,"file":"group_resource.d.ts","sourceRoot":"","sources":["../../../src/types/resources/group_resource.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;AACtD,MAAM,MAAM,OAAO,GAAG,GAAG,OAAO,IAAI,UAAU,IAAI,MAAM,EAAE,CAAA;AAE1D,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,OAAO,CAAA;IACX,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACvB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,UAAU,CAAA;CACvB;AAED,MAAM,WAAW,2BAA4B,SAAQ,aAAa;IAChE,iBAAiB,CAAC,EAAE,eAAe,CAAA;CACpC"}

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

@@ -1 +1 @@
-{"version":3,"file":"group_resource.js","sourceRoot":"","sources":["../../../src/types/resources/group_resource.ts"],"names":[],"mappings":"","sourcesContent":["import { AppName } from './app_name'\n\nexport type SourceType = 'Team' | 'Group' | 'PlanTeam'\nexport type GraphId = `${AppName}-${SourceType}-${number}`\n\nexport interface GroupResource {\n  id: GraphId\n  type: 'Group'\n  links: { self: string }\n  name: string | null\n  sourceAppName: AppName\n  sourceType: SourceType\n}\n"]}
+{"version":3,"file":"group_resource.js","sourceRoot":"","sources":["../../../src/types/resources/group_resource.ts"],"names":[],"mappings":"","sourcesContent":["import { AppName } from './app_name'\nimport { GroupMembership } from './group_membership'\n\nexport type SourceType = 'Team' | 'Group' | 'PlanTeam'\nexport type GraphId = `${AppName}-${SourceType}-${number}`\n\nexport interface GroupResource {\n  id: GraphId\n  type: 'Group'\n  links: { self: string }\n  name: string | null\n  sourceAppName: AppName\n  sourceType: SourceType\n}\n\nexport interface GroupResourceWithMembership extends GroupResource {\n  myGroupMembership?: GroupMembership\n}\n"]}

package/build/types/resources/index.d.ts

@@ -8,4 +8,6 @@ export * from './groups';
 export * from './app_grant';
 export * from './services';
 export * from './organization';
+export * from './group_membership';
+export * from './group_resource';
 //# sourceMappingURL=index.d.ts.map

package/build/types/resources/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}

package/build/types/resources/index.js

@@ -8,4 +8,6 @@ export * from './groups';
 export * from './app_grant';
 export * from './services';
 export * from './organization';
+export * from './group_membership';
+export * from './group_resource';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.24.0-rc.8",
+  "version": "3.24.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": "6259e50e7b8ca70aee8b50cc641bc3a6c2d6c11a"
+  "gitHead": "766e0c2895aed482fffb467e07439de8cc6d2253"
 }

package/src/components/display/platform_modal_header_buttons.tsx

@@ -3,6 +3,7 @@ import { TextButton } from './text_button'
 import { HeaderButton } from '@react-navigation/elements'
 import { Icon } from './icon'
 import { useTheme } from '../../hooks'
+import type { NativeStackHeaderRightProps } from '@react-navigation/native-stack'
 
 interface HeaderTextButtonProps {
   onPress: () => void
@@ -62,6 +63,21 @@ export const HeaderDismissButton = ({
   })
 }
 
+interface HeaderDoneButtonProps extends NativeStackHeaderRightProps {
+  navigation: { goBack: () => void; getState: () => any }
+}
+
+export const HeaderDoneButton = ({ navigation, ...props }: HeaderDoneButtonProps) => {
+  const state = navigation.getState()
+  const isFirstScreen = state.index === 0
+
+  if (!isFirstScreen) {
+    return null
+  }
+
+  return <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+}
+
 const useStyles = () => {
   const { colors } = useTheme()
 

package/src/navigation/index.tsx

@@ -8,7 +8,10 @@ import { CardStyleInterpolators } from '@react-navigation/stack'
 import React from 'react'
 import { Platform } from 'react-native'
 import { Icon } from '../components'
-import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import {
+  HeaderDoneButton,
+  HeaderTextButton,
+} from '../components/display/platform_modal_header_buttons'
 import {
   AttachmentActionsScreen,
   AttachmentActionsScreenOptions,
@@ -51,6 +54,7 @@ import { MessageReportScreen, MessageReportScreenOptions } from '../screens/mess
 import { NotFound } from '../screens/not_found'
 import { NotificationSettingsScreen } from '../screens/notification_settings_screen'
 import { PreferredAppSelectionScreen } from '../screens/preferred_app_selection_screen'
+import { GroupNotificationSettingsScreen } from '../screens/group_notification_settings_screen'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { ScreenLayoutWithChatAccessGate } from './screenLayout'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
@@ -126,32 +130,6 @@ export const NewConversationStack = createNativeStackNavigator({
   },
 })
 
-export const NotificationSettingsStack = createNativeStackNavigator({
-  initialRouteName: 'NotificationSettings',
-  screenOptions: {
-    headerBackButtonDisplayMode: 'minimal',
-  },
-  screenLayout: ScreenLayoutWithChatAccessGate,
-  screens: {
-    NotificationSettings: {
-      screen: NotificationSettingsScreen,
-      options: ({ navigation }) => ({
-        title: 'Chat',
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
-        ),
-        headerBackVisible: false,
-      }),
-    },
-    PreferredAppSelection: {
-      screen: PreferredAppSelectionScreen,
-      options: {
-        title: 'Preferred app',
-      },
-    },
-  },
-})
-
 export const ChatStack = createNativeStackNavigator({
   screenOptions: {
     headerBackButtonDisplayMode: 'minimal',
@@ -251,13 +229,31 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
-    NotificationSettingsStack: {
-      screen: NotificationSettingsStack,
+    NotificationSettings: {
+      screen: NotificationSettingsScreen,
+      options: ({ navigation }) => ({
+        title: 'Chat',
+        headerBackVisible: false,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+        ),
+      }),
+    },
+    PreferredAppSelection: {
+      screen: PreferredAppSelectionScreen,
       options: {
-        headerShown: false,
-        presentation: 'modal',
+        title: 'Preferred app',
       },
     },
+    GroupNotificationSettings: {
+      screen: GroupNotificationSettingsScreen,
+      options: ({ route, navigation }) => ({
+        title: (route.params as { title?: string })?.title || 'Group Settings',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderDoneButton {...props} navigation={navigation} />
+        ),
+      }),
+    },
     New: {
       screen: NewConversationStack,
       if: useQualifiedByAge,

package/src/screens/group_notification_settings_screen.tsx

@@ -0,0 +1,92 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useEffect } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Heading, Switch, Text } from '../components'
+import { useTheme } from '../hooks'
+import { platformFontWeightBold } from '../utils/styles'
+import { useGroup, useGroupMembershipUpdate } from './notification_settings/hooks/groups'
+
+export type GroupNotificationSettingsScreenProps = StaticScreenProps<{
+  groupId: number | string
+  title: string
+}>
+
+export function GroupNotificationSettingsScreen({ route }: GroupNotificationSettingsScreenProps) {
+  const { groupId, title } = route.params
+  const navigation = useNavigation()
+  const styles = useStyles()
+  const { data: group } = useGroup({ groupId })
+  const { mutate: updateNotificationLevel } = useGroupMembershipUpdate({ groupId })
+
+  const notificationsEnabled = group.myGroupMembership?.notificationLevel === 'everything'
+
+  useEffect(() => {
+    if (!group.name || title === group.name) return
+
+    navigation.setOptions({ title: group.name })
+  }, [group.name, title, navigation])
+
+  const handleToggle = (value: boolean) => {
+    const notificationLevel = value ? 'everything' : 'nothing'
+    updateNotificationLevel(notificationLevel)
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.sectionOuter}>
+        <View style={styles.sectionInner}>
+          <Heading variant="h3" style={styles.sectionHeading}>
+            Group notification settings
+          </Heading>
+          <Text variant="tertiary" style={styles.sectionSubtitle}>
+            The settings are applied to all conversations in{' '}
+            <Text style={styles.groupNameBold}>{group.name || title}</Text>
+          </Text>
+        </View>
+      </View>
+      <View style={styles.settingRow}>
+        <Text>Enable notifications</Text>
+        <Switch value={notificationsEnabled} onValueChange={handleToggle} />
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.surfaceColor100,
+    },
+    sectionOuter: {
+      paddingLeft: 16,
+      backgroundColor: colors.surfaceColor100,
+    },
+    sectionInner: {
+      paddingRight: 16,
+      paddingTop: 16,
+      paddingBottom: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+    },
+    sectionHeading: {
+      paddingBottom: 4,
+    },
+    sectionSubtitle: {
+      color: colors.textColorDefaultSecondary,
+    },
+    groupNameBold: {
+      fontWeight: platformFontWeightBold,
+    },
+    settingRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: colors.surfaceColor100,
+    },
+  })
+}

package/src/screens/index.ts

@@ -4,6 +4,7 @@ export * from './conversation_screen'
 export * from './conversation_new/conversation_new_screen'
 export * from './notification_settings_screen'
 export * from './preferred_app_selection_screen'
+export * from './group_notification_settings_screen'
 export * from './conversation_filter_recipients/conversation_filter_recipients_screen'
 export * from './message_actions_screen'
 export * from './message_report_screen'

package/src/screens/message_report/components/message_preview.tsx

@@ -10,12 +10,13 @@ interface MessagePreviewProps {
 }
 
 export function MessagePreview({ message, style }: MessagePreviewProps) {
-  const styles = useStyles()
-
   const hasImages = message.attachments.some(
     att => att.type === 'MessageAttachment' && att.attributes?.contentType?.startsWith('image/')
   )
 
+  const imageOnly = hasImages && !message.text
+  const styles = useStyles({ imageOnly })
+
   return (
     <View style={[styles.previewContainer, style]}>
       <View style={styles.previewHeader}>
@@ -23,15 +24,7 @@ export function MessagePreview({ message, style }: MessagePreviewProps) {
         <Text style={styles.authorName}>{message.author.name}</Text>
       </View>
 
-      <View style={styles.messageBubbleContainer}>
-        {message.text && (
-          <View style={styles.messageBubble}>
-            <Text style={styles.messageText} numberOfLines={5}>
-              {message.text}
-            </Text>
-          </View>
-        )}
-
+      <View style={styles.messageBubble}>
         {hasImages && (
           <View style={styles.imagePlaceholder}>
             <Icon name="general.image" style={styles.placeholderIcon} />
@@ -40,12 +33,18 @@ export function MessagePreview({ message, style }: MessagePreviewProps) {
             </Text>
           </View>
         )}
+
+        {message.text && (
+          <Text style={styles.messageText} numberOfLines={5}>
+            {message.text}
+          </Text>
+        )}
       </View>
     </View>
   )
 }
 
-const useStyles = () => {
+const useStyles = ({ imageOnly }: { imageOnly: boolean }) => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
@@ -62,31 +61,25 @@ const useStyles = () => {
       fontWeight: '600',
       color: colors.textColorDefaultPrimary,
     },
-    messageBubbleContainer: {
-      gap: 8,
-    },
     messageBubble: {
       backgroundColor: colors.fillColorNeutral060,
       borderRadius: 16,
-      paddingHorizontal: 16,
-      paddingVertical: 12,
+      overflow: 'hidden',
       alignSelf: 'flex-start',
-      maxWidth: '80%',
+      maxWidth: imageOnly ? '40%' : '80%',
     },
     messageText: {
       fontSize: 14,
       color: colors.textColorDefaultPrimary,
       lineHeight: 20,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
     },
     imagePlaceholder: {
       height: 120,
-      backgroundColor: colors.fillColorNeutral060,
-      borderRadius: 16,
       justifyContent: 'center',
       alignItems: 'center',
       gap: 8,
-      maxWidth: '80%',
-      alignSelf: 'flex-start',
     },
     placeholderIcon: {
       fontSize: 32,

package/src/screens/notification_settings/hooks/groups.ts

@@ -0,0 +1,101 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { getRequestQueryKey, useApiClient } from '../../../hooks'
+import { useSuspenseGet, useSuspensePaginator } from '../../../hooks'
+import { ApiResource } from '../../../types'
+import { GroupMembership, GroupResourceWithMembership } from '../../../types/resources'
+import { throwResponseError } from '../../../utils/response_error'
+
+export const getGroupsRequestArgs = () => ({
+  url: '/me/groups',
+  data: {
+    perPage: 100,
+    include: ['my_group_membership'],
+    filter: 'user_settable_notification_level',
+    fields: {
+      Group: [],
+      GroupMembership: ['notification_level', 'notification_level_description'],
+    },
+    order: 'name',
+  },
+})
+
+export const getGroupRequestArgs = ({ groupId }: { groupId: number | string }) => ({
+  url: `/me/groups/${groupId}`,
+  data: {
+    include: ['my_group_membership'],
+    fields: {
+      Group: ['name', 'source_app_name', 'source_type', 'my_group_membership'],
+      GroupMembership: ['notification_level', 'notification_level_description'],
+    },
+  },
+})
+
+export const useGroups = () => {
+  const args = getGroupsRequestArgs()
+
+  return useSuspensePaginator<GroupResourceWithMembership>(args)
+}
+
+export const useGroup = ({ groupId }: { groupId: number | string }) => {
+  const args = getGroupRequestArgs({ groupId })
+
+  return useSuspenseGet<GroupResourceWithMembership>(args)
+}
+
+export const useGroupMembershipUpdate = ({ groupId }: { groupId: number | string }) => {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+  const requestArgs = getGroupRequestArgs({ groupId })
+  const queryKey = getRequestQueryKey(requestArgs)
+
+  return useMutation({
+    throwOnError: true,
+    onMutate: notificationLevel => {
+      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
+        if (!groupData?.data.myGroupMembership) return groupData
+
+        return {
+          ...groupData,
+          data: {
+            ...groupData.data,
+            myGroupMembership: {
+              ...groupData.data.myGroupMembership,
+              notificationLevel,
+            },
+          },
+        }
+      })
+    },
+    onSuccess: response => {
+      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
+        if (!groupData?.data.myGroupMembership) return groupData
+
+        return {
+          ...groupData,
+          data: {
+            ...groupData.data,
+            myGroupMembership: {
+              ...groupData.data.myGroupMembership,
+              ...response.data,
+            },
+          },
+        }
+      })
+    },
+    mutationFn: (notificationLevel: string) => {
+      return apiClient.chat
+        .patch<ApiResource<GroupMembership>>({
+          url: `/me/groups/${groupId}/my_group_membership`,
+          data: {
+            data: {
+              type: 'GroupMembership',
+              attributes: {
+                notification_level: notificationLevel,
+              },
+            },
+          },
+        })
+        .catch(throwResponseError)
+    },
+  })
+}