events notifications

Route.tsx

@@ -104,6 +104,7 @@ import CreateEventScreen from 'src/screens/InAppScreens/TravelsScreen/CreateEven
 import MembersListScreen from 'src/screens/InAppScreens/MessagesScreen/MembersListScreen';
 import AllEventPhotosScreen from 'src/screens/InAppScreens/TravelsScreen/AllEventPhotosScreen';
 import ParticipantsListScreen from 'src/screens/InAppScreens/TravelsScreen/ParticipantsListScreen';
+import EventsNotificationsScreen from 'src/screens/NotificationsScreen/EventsNotificationsScreen';
 
 enableScreens();
 
@@ -468,6 +469,10 @@ const Route = () => {
               name={NAVIGATION_PAGES.FRIENDS_NOTIFICATIONS}
               component={FriendsNotificationsScreen}
             />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.EVENTS_NOTIFICATIONS}
+              component={EventsNotificationsScreen}
+            />
           </ScreenStack.Navigator>
         )}
       </BottomTab.Screen>
@@ -498,6 +503,10 @@ const Route = () => {
               name={NAVIGATION_PAGES.LOCATION_SHARING}
               component={LocationSharingScreen}
             />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.EVENTS_NOTIFICATIONS}
+              component={EventsNotificationsScreen}
+            />
           </ScreenStack.Navigator>
         )}
       </BottomTab.Screen>

src/screens/NotificationsScreen/EventsNotificationsScreen/index.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Switch, TouchableOpacity } from 'react-native';
+
+import { Colors } from 'src/theme';
+import { styles } from './styles';
+
+import { Header, PageWrapper } from 'src/components';
+import { usePostSetSettingsMutation } from '@api/notifications';
+
+const EventsNotificationsScreen = ({ route }: { route: any }) => {
+  const [isHomecountrySubscribed, setIsHomecountrySubscribed] = useState(false);
+  const [isHomecountry2Subscribed, setIsHomecountry2Subscribed] = useState(false);
+  const settings = route.params?.settings;
+  const token = route.params?.token;
+  const { mutateAsync: setNotificationsSettings } = usePostSetSettingsMutation();
+
+  useEffect(() => {
+    const emailHomecountry = settings.find(
+      (setting: any) => setting.name === 'email-new-homecountry-event'
+    );
+    const emailHomecountry2 = settings.find(
+      (setting: any) => setting.name === 'email-new-homecountry2-event'
+    );
+
+    setIsHomecountrySubscribed(emailHomecountry?.active === 1);
+    setIsHomecountry2Subscribed(emailHomecountry2?.active === 1);
+  }, [settings]);
+
+  const handleToggleHomecountry = () => {
+    setIsHomecountrySubscribed(!isHomecountrySubscribed);
+    updateSettings('email-new-homecountry-event', isHomecountrySubscribed ? 0 : 1);
+  };
+
+  const handleToggleHomecountry2 = () => {
+    setIsHomecountry2Subscribed(!isHomecountry2Subscribed);
+    updateSettings('email-new-homecountry2-event', isHomecountry2Subscribed ? 0 : 1);
+  };
+
+  const updateSettings = async (settingName: string, active: number) => {
+    const dataToUpdate = { [settingName]: active };
+
+    await setNotificationsSettings({
+      token,
+      settings: JSON.stringify(dataToUpdate)
+    });
+  };
+
+  return (
+    <PageWrapper>
+      <Header label="Events" />
+      <TouchableOpacity
+        style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
+        onPress={handleToggleHomecountry}
+      >
+        <Text
+          style={[styles.buttonLabel, !isHomecountrySubscribed ? { color: Colors.LIGHT_GRAY } : {}]}
+        >
+          Emails about events in home country
+        </Text>
+        <View>
+          <Switch
+            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
+            thumbColor={Colors.WHITE}
+            onValueChange={handleToggleHomecountry}
+            value={isHomecountrySubscribed}
+            style={{ transform: 'scale(0.8)' }}
+          />
+        </View>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
+        onPress={handleToggleHomecountry2}
+      >
+        <Text
+          style={[
+            styles.buttonLabel,
+            !isHomecountry2Subscribed ? { color: Colors.LIGHT_GRAY } : {}
+          ]}
+        >
+          Emails about events in second home country
+        </Text>
+        <View>
+          <Switch
+            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
+            thumbColor={Colors.WHITE}
+            onValueChange={handleToggleHomecountry2}
+            value={isHomecountry2Subscribed}
+            style={{ transform: 'scale(0.8)' }}
+          />
+        </View>
+      </TouchableOpacity>
+    </PageWrapper>
+  );
+};
+
+export default EventsNotificationsScreen;

src/screens/NotificationsScreen/EventsNotificationsScreen/styles.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'src/theme';
+import { getFontSize } from 'src/utils';
+
+export const styles = StyleSheet.create({
+  alignStyle: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  buttonWrapper: {
+    width: '100%',
+    minHeight: 48
+  },
+  buttonLabel: {
+    color: Colors.DARK_BLUE,
+    fontSize: getFontSize(14),
+    fontFamily: 'montserrat-700',
+    flexShrink: 1
+  }
+});

src/screens/NotificationsScreen/index.tsx

@@ -17,6 +17,7 @@ import GearIcon from 'assets/icons/notifications/gear-solid.svg';
 import BellIcon from 'assets/icons/notifications/bell-solid.svg';
 import { useGetSettingsQuery, usePostSetSettingsMutation } from '@api/notifications';
 import { useFocusEffect } from '@react-navigation/native';
+import CalendarIcon from 'assets/icons/events/calendar-solid.svg';
 
 const NotificationsScreen = ({ navigation }: { navigation: any }) => {
   const token = storage.get('token', StoreType.STRING) as string;
@@ -205,6 +206,39 @@ const NotificationsScreen = ({ navigation }: { navigation: any }) => {
         </View>
       </TouchableOpacity>
 
+      <TouchableOpacity
+        style={[
+          styles.alignStyle,
+          styles.buttonWrapper,
+          {
+            justifyContent: 'space-between'
+          }
+        ]}
+        onPress={handleToggleMessages}
+        disabled={!isSubscribed}
+      >
+        <View style={styles.alignStyle}>
+          <ChatIcon
+            fill={isSubscribed ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
+            width={20}
+            height={20}
+          />
+          <Text style={[styles.buttonLabel, !isSubscribed ? { color: Colors.LIGHT_GRAY } : {}]}>
+            Messages
+          </Text>
+        </View>
+        <View>
+          <Switch
+            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
+            thumbColor={Colors.WHITE}
+            onValueChange={handleToggleMessages}
+            value={isEnabledMessages && isSubscribed}
+            style={{ transform: 'scale(0.8)' }}
+            disabled={!isSubscribed}
+          />
+        </View>
+      </TouchableOpacity>
+
       {/* <MenuButton
         label="Notifications list"
         icon={
@@ -238,38 +272,17 @@ const NotificationsScreen = ({ navigation }: { navigation: any }) => {
         disabled={!isSubscribed}
       />
 
-      <TouchableOpacity
-        style={[
-          styles.alignStyle,
-          styles.buttonWrapper,
-          {
-            justifyContent: 'space-between'
-          }
-        ]}
-        onPress={handleToggleMessages}
-        disabled={!isSubscribed}
-      >
-        <View style={styles.alignStyle}>
-          <ChatIcon
-            fill={isSubscribed ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
-            width={20}
-            height={20}
-          />
-          <Text style={[styles.buttonLabel, !isSubscribed ? { color: Colors.LIGHT_GRAY } : {}]}>
-            Messages
-          </Text>
-        </View>
-        <View>
-          <Switch
-            trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
-            thumbColor={Colors.WHITE}
-            onValueChange={handleToggleMessages}
-            value={isEnabledMessages && isSubscribed}
-            style={{ transform: 'scale(0.8)' }}
-            disabled={!isSubscribed}
-          />
-        </View>
-      </TouchableOpacity>
+      <MenuButton
+        label="Events"
+        icon={<CalendarIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
+        red={false}
+        buttonFn={() =>
+          navigation.navigate(NAVIGATION_PAGES.EVENTS_NOTIFICATIONS, {
+            settings: notificationsSettings.settings,
+            token
+          } as never)
+        }
+      />
 
       {/* <MenuButton
         label="System"

src/types/navigation.ts

@@ -79,5 +79,6 @@ export enum NAVIGATION_PAGES {
   CREATE_EVENT = 'inAppCreateEvent',
   MEMBERS_LIST = 'inAppMembersList',
   ALL_EVENT_PHOTOS = 'inAppAllEventPhotos',
-  PARTICIPANTS_LIST = 'inAppParticipantsList'
+  PARTICIPANTS_LIST = 'inAppParticipantsList',
+  EVENTS_NOTIFICATIONS = 'inAppEventsNotifications',
 }