From d167117963dc2e2ef20e74354601ba13851ed780 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Fri, 15 Dec 2023 17:25:41 -0300
Subject: [PATCH] feat: add vibration when receive in-app notifications

---
 .../InAppNotification/NotifierComponent.tsx   | 13 ++++++++++--
 app/i18n/locales/en.json                      |  4 +++-
 app/lib/constants/notifications.ts            |  1 +
 app/lib/methods/userPreferences.ts            |  1 -
 .../UserNotificationPreferencesView/index.tsx | 20 +++++++++++++++++++
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/app/containers/InAppNotification/NotifierComponent.tsx b/app/containers/InAppNotification/NotifierComponent.tsx
index 8aa4b351a..4f02bca8a 100644
--- a/app/containers/InAppNotification/NotifierComponent.tsx
+++ b/app/containers/InAppNotification/NotifierComponent.tsx
@@ -1,18 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 import { connect } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import * as Haptics from 'expo-haptics';
 
 import Avatar from '../Avatar';
 import { CustomIcon } from '../CustomIcon';
 import sharedStyles from '../../views/Styles';
-import { themes } from '../../lib/constants';
+import { NOTIFICATION_IN_APP_VIBRATION, themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
 import { ROW_HEIGHT } from '../RoomItem';
 import { goRoom } from '../../lib/methods/helpers/goRoom';
 import { IApplicationState, ISubscription, SubscriptionType } from '../../definitions';
 import { hideNotification } from '../../lib/methods/helpers/notifications';
+import userPreferences from '../../lib/methods/userPreferences';
 
 export interface INotifierComponent {
 	notification: {
@@ -97,6 +99,13 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 		hideNotification();
 	};
 
+	useEffect(() => {
+		const notificationInAppVibration = userPreferences.getBool(NOTIFICATION_IN_APP_VIBRATION);
+		if (notificationInAppVibration || notificationInAppVibration === null) {
+			Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+		}
+	}, []);
+
 	return (
 		<View
 			style={[
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index 5753cb3a0..d4742270d 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -763,5 +763,7 @@
   "Pinned_a_message": "Pinned a message:",
   "You_dont_have_permission_to_perform_this_action": "You don’t have permission to perform this action. Check with a workspace administrator.",
   "Jump_to_message": "Jump to message",
-  "Missed_call": "Missed call"
+  "Missed_call": "Missed call",
+  "In_app_message_notifications": "In-app message notifications",
+  "Vibrate": "Vibrate"
 }
\ No newline at end of file
diff --git a/app/lib/constants/notifications.ts b/app/lib/constants/notifications.ts
index 2b3b08185..e59a5b71a 100644
--- a/app/lib/constants/notifications.ts
+++ b/app/lib/constants/notifications.ts
@@ -1 +1,2 @@
 export const NOTIFICATION_PRESENCE_CAP = 'NOTIFICATION_PRESENCE_CAP';
+export const NOTIFICATION_IN_APP_VIBRATION = 'NOTIFICATION_IN_APP_VIBRATION';
diff --git a/app/lib/methods/userPreferences.ts b/app/lib/methods/userPreferences.ts
index f9b82dec4..f61944bd7 100644
--- a/app/lib/methods/userPreferences.ts
+++ b/app/lib/methods/userPreferences.ts
@@ -29,7 +29,6 @@ class UserPreferences {
 
 	getBool(key: string): boolean | null {
 		try {
-			console.log(this.mmkv.getBool(key));
 			return this.mmkv.getBool(key) ?? null;
 		} catch {
 			return null;
diff --git a/app/views/UserNotificationPreferencesView/index.tsx b/app/views/UserNotificationPreferencesView/index.tsx
index 1dcfc5fe4..739756440 100644
--- a/app/views/UserNotificationPreferencesView/index.tsx
+++ b/app/views/UserNotificationPreferencesView/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { Switch } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/native';
 
@@ -14,8 +15,11 @@ import { Services } from '../../lib/services';
 import { useAppSelector } from '../../lib/hooks';
 import ListPicker from './ListPicker';
 import log from '../../lib/methods/helpers/log';
+import { useUserPreferences } from '../../lib/methods';
+import { NOTIFICATION_IN_APP_VIBRATION, SWITCH_TRACK_COLOR } from '../../lib/constants';
 
 const UserNotificationPreferencesView = () => {
+	const [inAppVibration, setInAppVibration] = useUserPreferences<boolean>(NOTIFICATION_IN_APP_VIBRATION, true);
 	const [preferences, setPreferences] = useState({} as INotificationPreferences);
 	const [loading, setLoading] = useState(true);
 
@@ -58,6 +62,10 @@ const UserNotificationPreferencesView = () => {
 		}
 	};
 
+	const toggleInAppVibration = () => {
+		setInAppVibration(!inAppVibration);
+	};
+
 	return (
 		<SafeAreaView testID='user-notification-preference-view'>
 			<StatusBar />
@@ -92,6 +100,18 @@ const UserNotificationPreferencesView = () => {
 							<List.Info info='Push_Notifications_Alert_Info' />
 						</List.Section>
 
+						<List.Section title='In_app_message_notifications'>
+							<List.Separator />
+							<List.Item
+								title='Vibrate'
+								testID='user-notification-preference-view-in-app-vibration'
+								right={() => (
+									<Switch value={inAppVibration} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleInAppVibration} />
+								)}
+							/>
+							<List.Separator />
+						</List.Section>
+
 						<List.Section title='Email'>
 							<List.Separator />
 							<ListPicker