Merge branch 'feat.troubleshooting-notification-push-quota' into TC-782-Mobile-Troubleshoot-notifications

app/i18n/locales/en.json

@@ -748,6 +748,9 @@
   "Device_notification_settings": "Device notification settings",
   "Allow_push_notifications_for_rocket_chat": "Allow push notifications for Rocket.Chat",
   "Go_to_device_settings": "Go to device settings",
+  "Community_edition_push_quota": "Community push quota",
+  "Workspace_consumption": "Workspace consumption",
+  "Workspace_consumption_description": "There’s a set amount of push notifications per month",
   "Push_gateway_connection": "Push Gateway Connection",
   "Custom_push_gateway_connection": "Custom Gateway Connection",
   "Test_push_notification": "Test push notification",

app/i18n/locales/pt-BR.json

@@ -766,6 +766,9 @@
   "Device_notification_settings": "Configurações de notificações do dispositivo",
   "Allow_push_notifications_for_rocket_chat": "Permitir notificações push para o Rocket.Chat",
   "Go_to_device_settings": "Ir para configurações do dispositivo",
+  "Community_edition_push_quota": "Cota de notificações push Community Edition",
+  "Workspace_consumption": "Consumo do Workspace",
+  "Workspace_consumption_description": "Existe uma quantidade definida de notificações push por mês",
   "Push_gateway_connection": "Conexão com o Gateway de Push",
   "Custom_push_gateway_connection": "Conexão Personalizada com o Gateway",
   "Test_push_notification": "Testar notificação push",

app/reducers/troubleshootingNotification.test.ts

@@ -19,7 +19,9 @@ describe('test troubleshootingNotification reducer', () => {
 			deviceNotificationEnabled: true,
 			highlightTroubleshooting: false,
 			defaultPushGateway: true,
-			pushGatewayEnabled: true
+			pushGatewayEnabled: true,
+			consumptionPercentage: 0,
+			isCommunityEdition: false
 		};
 		mockedStore.dispatch(setTroubleshootingNotification(payload));
 		const state = mockedStore.getState().troubleshootingNotification;

app/reducers/troubleshootingNotification.ts

@@ -6,13 +6,17 @@ export interface ITroubleshootingNotification {
 	pushGatewayEnabled: boolean;
 	defaultPushGateway: boolean;
 	highlightTroubleshooting: boolean;
+	consumptionPercentage: number;
+	isCommunityEdition: boolean;
 }
 
 export const initialState: ITroubleshootingNotification = {
 	deviceNotificationEnabled: false,
 	pushGatewayEnabled: false,
 	defaultPushGateway: false,
-	highlightTroubleshooting: false
+	highlightTroubleshooting: false,
+	consumptionPercentage: 0,
+	isCommunityEdition: false
 };
 
 export default (state = initialState, action: TActionTroubleshootingNotification): ITroubleshootingNotification => {

app/sagas/troubleshootingNotification.ts

@@ -20,13 +20,14 @@ function* request() {
 	let defaultPushGateway = false;
 	let pushGatewayEnabled = false;
 	try {
-		const { authorizationStatus } = yield* call(notifee.getNotificationSettings);
+		const { authorizationStatus } = yield * call(notifee.getNotificationSettings);
 		deviceNotificationEnabled = authorizationStatus > 0;
-		const pushInfoResult = yield* call(pushInfo);
+		const pushInfoResult = yield * call(pushInfo);
 		if (pushInfoResult.success) {
 			pushGatewayEnabled = pushInfoResult.pushGatewayEnabled;
 			defaultPushGateway = pushInfoResult.defaultPushGateway;
 		}
+		// TODO: Need to request the information of push quota and if the server is a community edition
 	} catch (e) {
 		log(e);
 	} finally {

app/views/PushTroubleshootView/components/ListPercentage.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import * as List from '../../../containers/List';
+import { useTheme } from '../../../theme';
+import sharedStyles from '../../Styles';
+
+const styles = StyleSheet.create({
+	pickerText: {
+		...sharedStyles.textRegular,
+		fontSize: 16
+	}
+});
+
+type TPercentageState = 'success' | 'warning' | 'danger';
+
+const DANGER_VALUE = 90;
+const WARNING_MINIMUM_VALUE = 70;
+const WARNING_MAXIMUM_VALUE = 90;
+
+const getPercentageState = (value: number): TPercentageState => {
+	if (value > WARNING_MINIMUM_VALUE && value < WARNING_MAXIMUM_VALUE) {
+		return 'warning';
+	}
+	if (value >= DANGER_VALUE) {
+		return 'danger';
+	}
+	return 'success';
+};
+
+const ListPercentage = ({
+	value = 0,
+	title,
+	testID,
+	onPress
+}: {
+	title: string;
+	testID: string;
+	value: number;
+	onPress: () => void;
+}) => {
+	const { colors } = useTheme();
+	const percentage = `${Math.floor(value)}%`;
+	const percentageState = getPercentageState(value);
+
+	let percentageTextColor = colors.statusFontOnSuccess;
+	if (percentageState === 'warning') {
+		percentageTextColor = colors.statusFontOnWarning;
+	}
+	if (percentageState === 'danger') {
+		percentageTextColor = colors.statusFontOnDanger;
+	}
+
+	return (
+		<List.Item
+			title={title}
+			testID={testID}
+			onPress={onPress}
+			right={() => <Text style={[styles.pickerText, { color: percentageTextColor }]}>{percentage}</Text>}
+		/>
+	);
+};
+
+export default ListPercentage;

app/views/PushTroubleshootView/index.tsx

@@ -15,6 +15,7 @@ import { compareServerVersion, isIOS, showErrorAlert } from '../../lib/methods/h
 import { requestTroubleshootingNotification } from '../../actions/troubleshootingNotification';
 import { useAppSelector, usePermissions } from '../../lib/hooks';
 import { Services } from '../../lib/services';
+import ListPercentage from './components/ListPercentage';
 
 interface IPushTroubleshootViewProps {
 	navigation: StackNavigationProp<SettingsStackParamList, 'PushTroubleshootView'>;
@@ -24,16 +25,23 @@ const PushTroubleshootView = ({ navigation }: IPushTroubleshootViewProps): JSX.E
 	const { colors } = useTheme();
 	const dispatch = useDispatch();
 	const [testPushNotificationsPermission] = usePermissions(['test-push-notifications']);
-
-	const { deviceNotificationEnabled, defaultPushGateway, pushGatewayEnabled, foreground, serverVersion } = useAppSelector(
-		state => ({
-			deviceNotificationEnabled: state.troubleshootingNotification.deviceNotificationEnabled,
-			pushGatewayEnabled: state.troubleshootingNotification.pushGatewayEnabled,
-			defaultPushGateway: state.troubleshootingNotification.defaultPushGateway,
-			foreground: state.app.foreground,
-			serverVersion: state.server.version
-		})
-	);
+	const {
+		deviceNotificationEnabled,
+		defaultPushGateway,
+		pushGatewayEnabled,
+		consumptionPercentage,
+		isCommunityEdition,
+		foreground,
+		serverVersion
+	} = useAppSelector(state => ({
+		deviceNotificationEnabled: state.troubleshootingNotification.deviceNotificationEnabled,
+		pushGatewayEnabled: state.troubleshootingNotification.pushGatewayEnabled,
+		defaultPushGateway: state.troubleshootingNotification.defaultPushGateway,
+		foreground: state.app.foreground,
+		serverVersion: state.server.version,
+		isCommunityEdition: state.troubleshootingNotification.isCommunityEdition,
+		consumptionPercentage: state.troubleshootingNotification.consumptionPercentage
+	}));
 
 	useEffect(() => {
 		if (foreground) {
@@ -59,6 +67,10 @@ const PushTroubleshootView = ({ navigation }: IPushTroubleshootViewProps): JSX.E
 		);
 	};
 
+	const alertWorkspaceConsumption = () => {
+		Alert.alert(I18n.t('Push_consumption_alert_title'), I18n.t('Push_consumption_alert_description'));
+	};
+
 	const goToNotificationSettings = () => {
 		if (isIOS) {
 			Linking.openURL('app-settings:');
@@ -109,6 +121,20 @@ const PushTroubleshootView = ({ navigation }: IPushTroubleshootViewProps): JSX.E
 					<List.Separator />
 				</CustomListSection>
 
+				{isCommunityEdition ? (
+					<List.Section title='Community_edition_push_quota'>
+						<List.Separator />
+						<ListPercentage
+							title='Workspace_consumption'
+							onPress={alertWorkspaceConsumption}
+							testID='push-troubleshoot-view-workspace-consumption'
+							value={consumptionPercentage}
+						/>
+						<List.Separator />
+						<List.Info info='Workspace_consumption_description' />
+					</List.Section>
+				) : null}
+
 				{compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.6.0') ? (
 					<CustomListSection
 						title={!defaultPushGateway ? 'Custom_push_gateway_connection' : 'Push_gateway_connection'}