diff --git a/front/src/components/index.ts b/front/src/components/index.ts index 6adbf46d7..27c5f8f12 100644 --- 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 index fca4bbb90..1319c94d4 100644 --- a/front/src/components/notification/notificationPermissionInSettingsModal.component.tsx +++ b/front/src/components/notification/notificationPermissionInSettingsModal.component.tsx @@ -22,7 +22,8 @@ const NotificationPermissionInSettingsModal: React.FC = ({ }) => { const openSettings = useCallback(() => { void Linking.openSettings(); - }, []); + closeModal(); + }, [closeModal]); return ( diff --git a/front/src/components/notification/notificationToggle.component.tsx b/front/src/components/notification/notificationToggle.component.tsx index 8fec1193b..56487728a 100644 --- 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 = ({ }); }, [isToggleOn, toggleKey, type, events]); + const showOptionByType = (_type: NotificationType): ReactElement => { + if (_type == NotificationType.moodboard) + return ; + return ; + }; + return ( - - - {title} - - {description} - - - - {Labels.buttons.no} - - - + + + + {title} + + {description} + + + + {Labels.buttons.no} + + + + + + {Labels.buttons.yes} + - - {Labels.buttons.yes} - + {isToggleOn && showOptionByType(type)} ); }; @@ -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 new file mode 100644 index 000000000..78fe4c5e2 --- /dev/null +++ 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 = ({ type }) => { + const [trackerEventObject, setTrackerEventObject] = useState(); + 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 + ) => ( + + + {frequencyLabel} + + ); + + return ( + + + + {Labels.notification.frequency.question} + + + {radioButtonFrequency( + NotificationUtils.Frequencies.onceADay, + Labels.notification.frequency.onceADay + )} + {radioButtonFrequency( + NotificationUtils.Frequencies.twiceAWeek, + Labels.notification.frequency.twiceAWeek + )} + + + ); +}; + +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 index 4f88da06e..f901c215d 100644 --- 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 index 63b8eab60..a1cfd59b4 100644 --- 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 index 3642dbb59..23b24110f 100644 --- 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,7 +126,9 @@ const scheduleMoodboardNotification = async ( return sendNotificationReminder(buildMoodboardNotificationContent(), trigger); }; -export const scheduleMoodboardNotifications = async (): Promise => { +export const scheduleMoodboardNotifications = async ( + frequency?: NotificationUtils.Frequencies +): Promise => { const isToggleActive = await NotificationToggleUtils.isToggleOn( NotificationType.moodboard ); @@ -128,9 +136,26 @@ export const scheduleMoodboardNotifications = async (): Promise => { 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; + } } } };