feat(notif): ouverture settings du tél (#1458)

* feat(notif): ouverture settings du tél * fix(notif): retours PR
SocialGouv · Oct 11, 2022 · 9484fdf · 9484fdf
1 parent ef6202e
commit 9484fdf
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 3 deletions.
diff --git a/front/src/components/index.ts b/front/src/components/index.ts
@@ -41,6 +41,7 @@ import MoodsCalendar from "./moodboard/moodsCalendar.component";
 import NotificationHandler, {
   setNotificationHandler,
 } from "./notification/notificationHandler.component";
+import NotificationPermissionInSettingsModal from "./notification/notificationPermissionInSettingsModal.component";
 import NotificationToggle from "./notification/notificationToggle.component";
 import CustomPagination from "./onboardingAndProfile/customOnboardingPagination.component";
 import UpdateChildBirthdayModal from "./onboardingAndProfile/updateChildBirthdayModal.component";
@@ -84,6 +85,7 @@ export {
   MoodItemsInCarousel,
   MoodsCalendar,
   NotificationHandler,
+  NotificationPermissionInSettingsModal,
   NotificationToggle,
   ParenthequeItem,
   PoiList,

diff --git a/front/src/components/notification/notificationPermissionInSettingsModal.component.tsx b/front/src/components/notification/notificationPermissionInSettingsModal.component.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { Linking, Modal, ScrollView, StyleSheet, View } from "react-native";
+
+import { Labels } from "../../constants";
+import { Margins, Paddings, Styles } from "../../styles";
+import {
+  CloseButton,
+  CustomButton,
+  SecondaryText,
+  TitleH1,
+} from "../baseComponents";
+
+interface Props {
+  visible: boolean;
+  closeModal: () => void;
+}
+
+const NotificationPermissionInSettingsModal: React.FC<Props> = ({
+  visible,
+  closeModal,
+}) => {
+  const openSettings = useCallback(() => {
+    void Linking.openSettings();
+  }, []);
+
+  return (
+    <Modal animationType="slide" transparent={true} visible={visible}>
+      <View style={Styles.modale.behindOfModal}>
+        <View style={Styles.modale.modalView}>
+          <View style={Styles.modale.closeButton}>
+            <CloseButton onPress={closeModal} clear />
+          </View>
+          <ScrollView>
+            <View style={styles.content}>
+              <TitleH1
+                title={Labels.notification.title}
+                animated={false}
+                style={styles.titleStyle}
+              />
+              <SecondaryText>{Labels.notification.openSettings}</SecondaryText>
+              <View style={[styles.buttonsContainer, styles.validationButtons]}>
+                <CustomButton
+                  title={Labels.buttons.cancel}
+                  rounded={false}
+                  action={closeModal}
+                />
+                <CustomButton
+                  title={Labels.buttons.settings}
+                  rounded
+                  action={openSettings}
+                />
+              </View>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonsContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginTop: Margins.default,
+  },
+  content: {
+    alignItems: "center",
+    paddingHorizontal: Paddings.largest,
+  },
+  titleStyle: {
+    marginTop: Margins.default,
+  },
+  validationButtons: {
+    flexWrap: "wrap-reverse",
+  },
+});
+
+export default NotificationPermissionInSettingsModal;
diff --git a/front/src/constants/Labels.ts b/front/src/constants/Labels.ts
@@ -195,6 +195,7 @@ export default {
     ok: "Ok",
     pass: "Passer",
     previous: "Précédent",
+    settings: "Paramètres",
     share: "Partager",
     start: "Commencer",
     validate: "Valider",
@@ -593,7 +594,10 @@ export default {
   },
   noData: "Aucunes données",
   notification: {
+    openSettings:
+      "Vos paramètres de notification sont désactivés pour cette application. Merci de vous rendre dans les réglages de votre téléphone afin de modifier ces paramètres.",
     openTheApp: "Ouverture de l'app",
+    title: "Notifications",
   },
   notificationsCenter: {
     article: {

diff --git a/front/src/screens/notificationsCenter/notificationsCenter.component.tsx b/front/src/screens/notificationsCenter/notificationsCenter.component.tsx
@@ -1,16 +1,20 @@
 import type { StackNavigationProp } from "@react-navigation/stack";
 import type { FC } from "react";
 import * as React from "react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 
-import { CustomDivider, NotificationToggle } from "../../components";
+import {
+  CustomDivider,
+  NotificationPermissionInSettingsModal,
+  NotificationToggle,
+} from "../../components";
 import { BackButton, TitleH1 } from "../../components/baseComponents";
 import TrackerHandler from "../../components/tracker/trackerHandler.component";
 import { Labels } from "../../constants";
 import { Colors, Paddings } from "../../styles";
 import type { RootStackParamList } from "../../types";
-import { TrackerUtils } from "../../utils";
+import { NotificationUtils, TrackerUtils } from "../../utils";
 import { NotificationType } from "../../utils/notifications/notification.util";
 
 interface Props {
@@ -19,18 +23,34 @@ interface Props {
 
 const NotificationsCenter: FC<Props> = ({ navigation }) => {
   const [trackerAction, setTrackerAction] = useState<string>("");
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
+
+  useEffect(() => {
+    void checkNotificationInSettings();
+  }, []);
 
   const goBack = useCallback(() => {
     setTrackerAction(Labels.buttons.cancel);
     navigation.goBack();
   }, [navigation]);
 
+  const hideSettingsModal = useCallback(() => {
+    setShowSettingsModal(false);
+  }, []);
+
+  const checkNotificationInSettings = async () => {
+    const areNotificationsAllowed =
+      await NotificationUtils.allowsNotifications();
+    if (!areNotificationsAllowed) setShowSettingsModal(true);
+  };
+
   return (
     <ScrollView style={styles.mainContainer}>
       <TrackerHandler
         screenName={TrackerUtils.TrackingEvent.NOTIFICATIONS_CENTER}
         actionName={trackerAction}
       />
+
       <View style={styles.header}>
         <View style={styles.flexStart}>
           <BackButton action={goBack} />
@@ -52,6 +72,11 @@ const NotificationsCenter: FC<Props> = ({ navigation }) => {
           type={NotificationType.moodboard}
         />
       </View>
+
+      <NotificationPermissionInSettingsModal
+        visible={showSettingsModal}
+        closeModal={hideSettingsModal}
+      />
     </ScrollView>
   );
 };