feat(notif): fréquence pour le moodboard (#1459)

* feat(notif): fréquence mood * fix(notif): restit frequence * feat(accessibilite): focus * fix(notif): fréquence * fix(notifs): retours PR * fix(notif): retours PR
SocialGouv · Oct 18, 2022 · 59de7e7 · 59de7e7
1 parent cac10d9
commit 59de7e7
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 38 deletions.
diff --git a/front/src/components/index.ts b/front/src/components/index.ts
@@ -42,6 +42,7 @@ import NotificationHandler, {
   setNotificationHandler,
 } from "./notification/notificationHandler.component";
 import NotificationPermissionInSettingsModal from "./notification/notificationPermissionInSettingsModal.component";
+import NotificationsFrequency from "./notification/notificationsFrequency.component";
 import NotificationToggle from "./notification/notificationToggle.component";
 import CustomPagination from "./onboardingAndProfile/customOnboardingPagination.component";
 import UpdateChildBirthdayModal from "./onboardingAndProfile/updateChildBirthdayModal.component";
@@ -86,6 +87,7 @@ export {
   MoodsCalendar,
   NotificationHandler,
   NotificationPermissionInSettingsModal,
+  NotificationsFrequency,
   NotificationToggle,
   ParenthequeItem,
   PoiList,

diff --git a/front/src/components/notification/notificationPermissionInSettingsModal.component.tsx b/front/src/components/notification/notificationPermissionInSettingsModal.component.tsx
@@ -22,7 +22,8 @@ const NotificationPermissionInSettingsModal: React.FC<Props> = ({
 }) => {
   const openSettings = useCallback(() => {
     void Linking.openSettings();
-  }, []);
+    closeModal();
+  }, [closeModal]);
 
   return (
     <Modal animationType="slide" transparent={true} visible={visible}>

diff --git a/front/src/components/notification/notificationToggle.component.tsx b/front/src/components/notification/notificationToggle.component.tsx
@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, ReactElement } from "react";
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
@@ -13,9 +13,10 @@ import {
   StorageUtils,
   TrackerUtils,
 } from "../../utils";
-import type { NotificationType } from "../../utils/notifications/notification.util";
+import { NotificationType } from "../../utils/notifications/notification.util";
 import * as NotificationUtils from "../../utils/notifications/notification.util";
 import TrackerHandler from "../tracker/trackerHandler.component";
+import NotificationsFrequency from "./notificationsFrequency.component";
 
 interface Props {
   title: string;
@@ -61,42 +62,51 @@ const NotificationToggle: FC<Props> = ({
     });
   }, [isToggleOn, toggleKey, type, events]);
 
+  const showOptionByType = (_type: NotificationType): ReactElement => {
+    if (_type == NotificationType.moodboard)
+      return <NotificationsFrequency type={_type} />;
+    return <View />;
+  };
+
   return (
     <View style={styles.mainContent}>
       <TrackerHandler eventObject={trackerEventObject} />
-      <View style={styles.itemTextBloc}>
-        <Text style={styles.itemTextTitle} accessibilityRole="header">
-          {title}
-        </Text>
-        <Text style={styles.itemTextDescr}>{description}</Text>
-      </View>
-      <View style={styles.itemToggleBloc}>
-        <Text
-          style={[
-            styles.itemToggleText,
-            isToggleOn ? null : { fontWeight: FontWeight.bold },
-          ]}
-          importantForAccessibility="no"
-          accessibilityElementsHidden
-          accessible={false}
-        >
-          {Labels.buttons.no}
-        </Text>
-        <View style={styles.itemToggle}>
-          <Toggle isToggleOn={isToggleOn} toggleSwitch={onTouchToggle} />
+      <View style={styles.toggleContent}>
+        <View style={styles.itemTextBloc}>
+          <Text style={styles.itemTextTitle} accessibilityRole="header">
+            {title}
+          </Text>
+          <Text style={styles.itemTextDescr}>{description}</Text>
+        </View>
+        <View style={styles.itemToggleBloc}>
+          <Text
+            style={[
+              styles.itemToggleText,
+              isToggleOn ? null : { fontWeight: FontWeight.bold },
+            ]}
+            importantForAccessibility="no"
+            accessibilityElementsHidden
+            accessible={false}
+          >
+            {Labels.buttons.no}
+          </Text>
+          <View style={styles.itemToggle}>
+            <Toggle isToggleOn={isToggleOn} toggleSwitch={onTouchToggle} />
+          </View>
+          <Text
+            style={[
+              styles.itemToggleText,
+              isToggleOn ? { fontWeight: FontWeight.bold } : null,
+            ]}
+            importantForAccessibility="no"
+            accessibilityElementsHidden
+            accessible={false}
+          >
+            {Labels.buttons.yes}
+          </Text>
         </View>
-        <Text
-          style={[
-            styles.itemToggleText,
-            isToggleOn ? { fontWeight: FontWeight.bold } : null,
-          ]}
-          importantForAccessibility="no"
-          accessibilityElementsHidden
-          accessible={false}
-        >
-          {Labels.buttons.yes}
-        </Text>
       </View>
+      <View>{isToggleOn && showOptionByType(type)}</View>
     </View>
   );
 };
@@ -125,9 +135,12 @@ const styles = StyleSheet.create({
     color: Colors.secondaryGreenDark,
   },
   mainContent: {
-    flexDirection: "row",
+    flexDirection: "column",
     marginVertical: Margins.larger,
   },
+  toggleContent: {
+    flexDirection: "row",
+  },
 });
 
 export default NotificationToggle;
diff --git a/front/src/components/notification/notificationsFrequency.component.tsx b/front/src/components/notification/notificationsFrequency.component.tsx
@@ -0,0 +1,110 @@
+import type { FC } from "react";
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { RadioButton } from "react-native-paper";
+
+import { SecondaryText } from "../../components/baseComponents";
+import { Labels } from "../../constants";
+import * as StorageKeys from "../../constants/storageKeys.constants";
+import { Colors, Paddings } from "../../styles";
+import type { TrackerEvent } from "../../type";
+import { StorageUtils, TrackerUtils } from "../../utils";
+import type { NotificationType } from "../../utils/notifications/notification.util";
+import * as NotificationUtils from "../../utils/notifications/notification.util";
+import TrackerHandler from "../tracker/trackerHandler.component";
+
+interface Props {
+  type: NotificationType;
+}
+
+const NotificationsFrequency: FC<Props> = ({ type }) => {
+  const [trackerEventObject, setTrackerEventObject] = useState<TrackerEvent>();
+  const [radioValue, setRadioValue] = useState(
+    NotificationUtils.Frequencies.twiceAWeek
+  );
+
+  const initRadio = useCallback(async () => {
+    const frequency = (await StorageUtils.getStringValue(
+      StorageKeys.notifToggleMoodboardFrequency
+    )) as NotificationUtils.Frequencies;
+
+    setRadioValue(frequency);
+  }, []);
+
+  const saveFraquency = useCallback(
+    async (frequency: NotificationUtils.Frequencies) => {
+      await StorageUtils.storeStringValue(
+        StorageKeys.notifToggleMoodboardFrequency,
+        frequency
+      );
+      void NotificationUtils.scheduleMoodboardNotifications(frequency);
+    },
+    []
+  );
+
+  useEffect(() => {
+    void initRadio();
+  }, [initRadio]);
+
+  const onRadioChange = useCallback(
+    (value: string) => {
+      const newValue = value as NotificationUtils.Frequencies;
+      setRadioValue(newValue);
+
+      void saveFraquency(newValue);
+      setTrackerEventObject({
+        action: TrackerUtils.TrackingEvent.NOTIFICATIONS_CENTER,
+        name: `${TrackerUtils.TrackingEvent.NOTIFICATIONS_CENTER} : ${type} & ${newValue}`,
+      });
+    },
+    [saveFraquency, type]
+  );
+
+  const radioButtonFrequency = (
+    frequencyValue: NotificationUtils.Frequencies,
+    frequencyLabel: string
+  ) => (
+    <View style={styles.radioItem}>
+      <RadioButton value={frequencyValue} color={Colors.primaryBlueDark} />
+      <Text style={styles.radioItemText}>{frequencyLabel}</Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.mainContent}>
+      <TrackerHandler eventObject={trackerEventObject} />
+      <SecondaryText style={styles.question}>
+        {Labels.notification.frequency.question}
+      </SecondaryText>
+      <RadioButton.Group onValueChange={onRadioChange} value={radioValue}>
+        {radioButtonFrequency(
+          NotificationUtils.Frequencies.onceADay,
+          Labels.notification.frequency.onceADay
+        )}
+        {radioButtonFrequency(
+          NotificationUtils.Frequencies.twiceAWeek,
+          Labels.notification.frequency.twiceAWeek
+        )}
+      </RadioButton.Group>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContent: {
+    marginVertical: Paddings.default,
+  },
+  question: {
+    color: Colors.primaryBlueDark,
+  },
+  radioItem: {
+    flexDirection: "row",
+  },
+  radioItemText: {
+    color: Colors.primaryBlueDark,
+    paddingTop: Paddings.smaller,
+  },
+});
+
+export default NotificationsFrequency;
diff --git a/front/src/constants/Labels.ts b/front/src/constants/Labels.ts
@@ -594,6 +594,11 @@ export default {
   },
   noData: "Aucunes données",
   notification: {
+    frequency: {
+      onceADay: "1 fois par jour",
+      question: "À quelle fréquence ?",
+      twiceAWeek: "2 fois par semaine",
+    },
     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",

diff --git a/front/src/constants/storageKeys.constants.ts b/front/src/constants/storageKeys.constants.ts
@@ -20,6 +20,7 @@ export const notifIdNextStep = "@notifIdNextStep";
 export const notifIdsEvents = "@notifIdsEvents";
 export const notifToggleArticles = "@notifToggleArticles";
 export const notifToggleMoodboard = "@notifToggleMoodboard";
+export const notifToggleMoodboardFrequency = "@notifToggleMoodboardFrequency";
 export const notifToggleEvents = "@notifToggleEvents";
 export const eventsCalcFromBirthday = "@eventsCalcFromBirthday";
 export const forceToScheduleEventsNotif = "@forceToScheduleEventsNotif";
@@ -58,6 +59,7 @@ export const allStorageKeys = [
   notifIdsEvents,
   notifToggleArticles,
   notifToggleMoodboard,
+  notifToggleMoodboardFrequency,
   notifToggleEvents,
   eventsCalcFromBirthday,
   forceToScheduleEventsNotif,

diff --git a/front/src/utils/notifications/notification.util.ts b/front/src/utils/notifications/notification.util.ts
@@ -15,6 +15,7 @@ import {
   StorageKeysConstants,
 } from "../../constants";
 import type { Event, Step } from "../../types";
+import type { NotificationUtils } from "..";
 import * as NotificationToggleUtils from "../notifications/notificationToggle.util";
 import { countCurrentStepArticlesNotRead } from "../step/step.util";
 import * as StorageUtils from "../storage.util";
@@ -37,6 +38,11 @@ export enum Weekday {
   saturday = 7,
 }
 
+export enum Frequencies {
+  onceADay = "1 fois par jour",
+  twiceAWeek = "2 fois par semaine",
+}
+
 const sendNotificationReminder = async (
   content: NotificationContentInput,
   trigger: NotificationTriggerInput
@@ -120,17 +126,36 @@ const scheduleMoodboardNotification = async (
   return sendNotificationReminder(buildMoodboardNotificationContent(), trigger);
 };
 
-export const scheduleMoodboardNotifications = async (): Promise<void> => {
+export const scheduleMoodboardNotifications = async (
+  frequency?: NotificationUtils.Frequencies
+): Promise<void> => {
   const isToggleActive = await NotificationToggleUtils.isToggleOn(
     NotificationType.moodboard
   );
   if (isToggleActive) {
     const notifsMoodboard = await getAllNotificationsByType(
       NotificationType.moodboard
     );
+
     if (notifsMoodboard.length === 0) {
-      await scheduleMoodboardNotification(Weekday.tuesday);
-      await scheduleMoodboardNotification(Weekday.friday);
+      await cancelAllNotificationsByType(NotificationType.moodboard);
+
+      switch (frequency) {
+        case Frequencies.onceADay:
+          await scheduleMoodboardNotification(Weekday.monday);
+          await scheduleMoodboardNotification(Weekday.tuesday);
+          await scheduleMoodboardNotification(Weekday.wednesday);
+          await scheduleMoodboardNotification(Weekday.thursday);
+          await scheduleMoodboardNotification(Weekday.friday);
+          await scheduleMoodboardNotification(Weekday.saturday);
+          await scheduleMoodboardNotification(Weekday.sunday);
+          break;
+        case Frequencies.twiceAWeek:
+        default:
+          await scheduleMoodboardNotification(Weekday.tuesday);
+          await scheduleMoodboardNotification(Weekday.friday);
+          break;
+      }
     }
   }
 };