diff --git a/front/src/components/index.ts b/front/src/components/index.ts index ab42d090d..6adbf46d7 100644 --- 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 new file mode 100644 index 000000000..fca4bbb90 --- /dev/null +++ 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 = ({ + visible, + closeModal, +}) => { + const openSettings = useCallback(() => { + void Linking.openSettings(); + }, []); + + return ( + + + + + + + + + + {Labels.notification.openSettings} + + + + + + + + + + ); +}; + +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 index 1c0254724..bd18b687b 100644 --- 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 index 7b6c6c401..926439717 100644 --- 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 = ({ navigation }) => { const [trackerAction, setTrackerAction] = useState(""); + 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 ( + @@ -52,6 +72,11 @@ const NotificationsCenter: FC = ({ navigation }) => { type={NotificationType.moodboard} /> + + ); };