feat: add troubleshooting to notifications pages (#5276)

* feat: add troubleshooting to notifications pages

* fix e2e test

app/i18n/locales/en.json

@@ -769,5 +769,6 @@
   "Jitsi_authentication_before_making_calls_admin": "Jitsi may require authentication before making calls. To learn more about their policies, visit the Jitsi website. You can also update the default app for video calls in the preferences.",
   "Jitsi_authentication_before_making_calls": "Jitsi may require authentication before making calls. To learn more about their policies, visit the Jitsi website.",
   "Jitsi_authentication_before_making_calls_ask_admin": "If you believe there are problems with Jitsi and its authentication, ask a workspace administrator for help.",
-  "Continue": "Continue"
+  "Continue": "Continue",
+  "Troubleshooting": "Troubleshooting"
 }

app/views/NotificationPreferencesView/index.tsx

@@ -1,6 +1,7 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/core';
 import React, { useEffect, useState } from 'react';
 import { Switch, Text } from 'react-native';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import { TActionSheetOptionsItem, useActionSheet } from '../../containers/ActionSheet';
 import { CustomIcon } from '../../containers/CustomIcon';
@@ -91,8 +92,11 @@ const RenderSwitch = ({ preference, room, onChangeValue }: IBaseParams) => {
 const NotificationPreferencesView = (): React.ReactElement => {
 	const route = useRoute<RouteProp<ChatsStackParamList, 'NotificationPrefView'>>();
 	const { rid, room } = route.params;
-	const navigation = useNavigation();
-	const serverVersion = useAppSelector(state => state.server.version);
+	const navigation = useNavigation<StackNavigationProp<ChatsStackParamList, 'RoomsListView'>>();
+	const { serverVersion, isMasterDetail } = useAppSelector(state => ({
+		serverVersion: state.server.version,
+		isMasterDetail: state.app.isMasterDetail
+	}));
 	const [hideUnreadStatus, setHideUnreadStatus] = useState(room.hideUnreadStatus);
 
 	useEffect(() => {
@@ -108,6 +112,14 @@ const NotificationPreferencesView = (): React.ReactElement => {
 		});
 	}, []);
 
+	const goPushTroubleshoot = () => {
+		if (isMasterDetail) {
+			navigation.navigate('ModalStackNavigator', { screen: 'PushTroubleshootView' });
+		} else {
+			navigation.navigate('PushTroubleshootView');
+		}
+	};
+
 	const saveNotificationSettings = async (key: TUnionOptionsRoomNotifications, params: IRoomNotifications, onError: Function) => {
 		try {
 			// @ts-ignore
@@ -202,6 +214,13 @@ const NotificationPreferencesView = (): React.ReactElement => {
 						onChangeValue={saveNotificationSettings}
 					/>
 					<List.Separator />
+					<List.Item
+						title='Troubleshooting'
+						onPress={goPushTroubleshoot}
+						testID='notification-preference-view-troubleshooting'
+						showActionIndicator
+					/>
+					<List.Separator />
 					<List.Info info='Push_Notifications_Alert_Info' />
 				</List.Section>
 				<List.Section title='Email'>

app/views/UserNotificationPreferencesView/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { StackNavigationProp } from '@react-navigation/stack';
-import { useNavigation } from '@react-navigation/native';
+import { CompositeNavigationProp, useNavigation } from '@react-navigation/native';
 
 import StatusBar from '../../containers/StatusBar';
 import * as List from '../../containers/List';
@@ -14,13 +14,22 @@ import { Services } from '../../lib/services';
 import { useAppSelector } from '../../lib/hooks';
 import ListPicker from './ListPicker';
 import log from '../../lib/methods/helpers/log';
+import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
+
+type TNavigation = CompositeNavigationProp<
+	StackNavigationProp<ProfileStackParamList, 'UserNotificationPrefView'>,
+	StackNavigationProp<MasterDetailInsideStackParamList>
+>;
 
 const UserNotificationPreferencesView = () => {
 	const [preferences, setPreferences] = useState({} as INotificationPreferences);
 	const [loading, setLoading] = useState(true);
 
-	const navigation = useNavigation<StackNavigationProp<ProfileStackParamList, 'UserNotificationPrefView'>>();
-	const userId = useAppSelector(state => getUserSelector(state).id);
+	const navigation = useNavigation<TNavigation>();
+	const { userId, isMasterDetail } = useAppSelector(state => ({
+		userId: getUserSelector(state).id,
+		isMasterDetail: state.app.isMasterDetail
+	}));
 
 	useLayoutEffect(() => {
 		navigation.setOptions({
@@ -58,6 +67,14 @@ const UserNotificationPreferencesView = () => {
 		}
 	};
 
+	const goPushTroubleshoot = () => {
+		if (isMasterDetail) {
+			navigation.navigate('ModalStackNavigator', { screen: 'PushTroubleshootView' });
+		} else {
+			navigation.navigate('PushTroubleshootView');
+		}
+	};
+
 	return (
 		<SafeAreaView testID='user-notification-preference-view'>
 			<StatusBar />
@@ -89,6 +106,13 @@ const UserNotificationPreferencesView = () => {
 								value={preferences.pushNotifications}
 							/>
 							<List.Separator />
+							<List.Item
+								title='Troubleshooting'
+								onPress={goPushTroubleshoot}
+								testID='user-notification-preference-view-troubleshooting'
+								showActionIndicator
+							/>
+							<List.Separator />
 							<List.Info info='Push_Notifications_Alert_Info' />
 						</List.Section>