feat: zeroaaccident

SocialGouv · Mar 4, 2024 · 438aab0 · 438aab0
1 parent 29ee0fd
commit 438aab0
Show file tree

Hide file tree

Showing 12 changed files with 175 additions and 10 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,10 +2,10 @@
   "eslint.workingDirectories": ["front", "back", "lib"],
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript", "typescript"],
   "[html]": {
     "editor.formatOnSave": false
-  },
+  }
 }
diff --git a/front/.env.example b/front/.env.example
@@ -10,7 +10,7 @@ MATOMO_URL=https://matomo.fabrique.social.gouv.fr/
 PLAY_STORE_API_KEY=
 SENTRY_DSN=https://5dbac413000f4a43a073841acebc82f5@sentry.fabrique.social.gouv.fr/55
 SENTRY_ENABLED=true
-SENTRY_AUTH_TOKEN=18a8f019ec4340888a656cef36f381544b0bb2b7096a45b0b4366b1bd62d0dfd
+SENTRY_AUTH_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 GOOGLE_MAPS_API_KEY=
 DEEPLINK_DOMAIN=1000jours.fabrique.social.gouv.fr
 DEEPLINK_PATH=app-millejours

diff --git a/front/src/components/zeroAccident/zeroAccidentBanner.component.tsx b/front/src/components/zeroAccident/zeroAccidentBanner.component.tsx
@@ -0,0 +1,82 @@
+import type { FC } from "react";
+import * as React from "react";
+import { Linking, StyleSheet } from "react-native";
+
+import { Links } from "../../constants";
+import { PLATFORM_IS_ANDROID } from "../../constants/platform.constants";
+import { Colors, Margins, Paddings, Sizes } from "../../styles";
+import type { TrackerEvent } from "../../type";
+import { TrackerUtils } from "../../utils";
+import { CommonText, CustomButton, View } from "../baseComponents";
+import TrackerHandler from "../tracker/trackerHandler.component";
+
+interface Props {
+  title: string;
+  buttonTitle: string;
+  fromPage: string;
+}
+
+const ZeroAccidentBanner: FC<Props> = ({ title, buttonTitle, fromPage }) => {
+  const [trackerEventObject, setTrackerEventObject] =
+    React.useState<TrackerEvent>();
+
+  const goToStore = React.useCallback(() => {
+    const storeUrl = PLATFORM_IS_ANDROID
+      ? Links.zeroAccidentAppUrlAndroid
+      : Links.zeroAccidentHttpsiOSAppUrl;
+
+    setTrackerEventObject({
+      action: TrackerUtils.TrackingEvent.ZERO_ACCIDENT,
+      name: `${TrackerUtils.TrackingEvent.ZERO_ACCIDENT} - ${
+        PLATFORM_IS_ANDROID ? "Android" : "iOS"
+      } (${fromPage})`,
+    });
+    void Linking.openURL(storeUrl);
+  }, [fromPage]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  return (
+    <>
+      <TrackerHandler eventObject={trackerEventObject} />
+      <View style={styles.container}>
+        <CommonText style={styles.bannerTitle}>{title}</CommonText>
+        <CustomButton title={buttonTitle} rounded action={goToStore} />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  bannerButtonTitle: {
+    fontSize: Sizes.sm,
+    textTransform: "uppercase",
+  },
+  bannerDescription: {
+    color: Colors.commonText,
+    marginVertical: Margins.light,
+  },
+  bannerTitle: {
+    color: Colors.primaryBlueDark,
+    fontSize: Sizes.sm,
+    lineHeight: Sizes.lg,
+  },
+  container: {
+    backgroundColor: Colors.primaryBlueLight,
+    borderLeftColor: Colors.primaryBlueDark,
+    borderLeftWidth: 3,
+    marginBottom: Paddings.light,
+    marginVertical: Paddings.default,
+    padding: Paddings.default,
+  },
+  header: {
+    paddingBottom: Paddings.larger,
+  },
+  mainContainer: {
+    backgroundColor: Colors.white,
+    flex: 1,
+    paddingHorizontal: Paddings.larger,
+    paddingVertical: Paddings.default,
+  },
+});
+
+export default ZeroAccidentBanner;
diff --git a/front/src/constants/Labels.ts b/front/src/constants/Labels.ts
@@ -832,4 +832,16 @@ export default {
   toAccessClickHere: "Pour y accéder, vous pouvez cliquer ici : ",
   version: "v.",
   warning: "Attention",
+  zeroAccident: {
+    article: {
+      buttonTitle: "Télécharger",
+      title:
+        "Vous êtes parent d’un jeune enfant et vous souhaitez en apprendre plus sur les risques d’accidents à la maison? Téléchargez le jeu Zéro accident: un jeu d’enfant et déjouez les chutes, les intoxications, les suffocations et la noyade!",
+    },
+    survey: {
+      buttonTitle: "Jouer",
+      title:
+        "Tester ses connaissances en prévention des accidents de la vie courante chez les enfants entre 0 et 4 ans.",
+    },
+  },
 };
diff --git a/front/src/constants/databaseQueries/configDbQueries.constants.ts b/front/src/constants/databaseQueries/configDbQueries.constants.ts
@@ -1,8 +1,16 @@
 export const CONFIG_GET_ALL = `
-  query GetLastAppVersion {
+  query GetConfig {
     config {
       lastAppVersionNumber
       news
     }
   }
 `;
+
+export const CONFIG_ZERO_ACCIDENT = `
+  query GetConfig {
+    config {
+      activationZeroAccident
+    }
+  }
+`;
diff --git a/front/src/constants/databaseQueries/homeDbQueries.constants.ts b/front/src/constants/databaseQueries/homeDbQueries.constants.ts
@@ -151,6 +151,7 @@ export const ARTICLE_DETAILS_WITH_ID = (
           id
         }
         handicap
+        zeroAccident: zero_accident
       }
     }
   `;

diff --git a/front/src/constants/links.constants.ts b/front/src/constants/links.constants.ts
@@ -9,3 +9,10 @@ export const httpsiOSAppUrl =
   "https://apps.apple.com/us/app/1000-premiers-jours/id1573729958";
 export const tndReviewUrl =
   "https://jedonnemonavis.numerique.gouv.fr/Demarches/3589?&view-mode=formulaire-avis&nd_source=button&key=8681b4521eb48f91024faeb86f3d53f4";
+
+export const zeroAccidentAppUrlAndroid =
+  "https://play.google.com/store/apps/details?id=com.fabrique.millejours";
+export const zeroAccidentAppUrliOS =
+  "itms-apps://itunes.com/app/1000-premiers-jours/id1573729958";
+export const zeroAccidentHttpsiOSAppUrl =
+  "https://apps.apple.com/us/app/1000-premiers-jours/id1573729958";
diff --git a/front/src/screens/articles/articleDetail.component.tsx b/front/src/screens/articles/articleDetail.component.tsx
@@ -40,7 +40,9 @@ import {
   View,
 } from "../../components/baseComponents";
 import TrackerHandler from "../../components/tracker/trackerHandler.component";
+import ZeroAccidentBanner from "../../components/zeroAccident/zeroAccidentBanner.component";
 import {
+  ConfigQueries,
   FetchPoliciesConstants,
   HomeDbQueries,
   Labels,
@@ -54,6 +56,7 @@ import type {
   Article,
   ArticleInShortItem,
   ArticleLink,
+  Config,
   Step,
   TabHomeParamList,
 } from "../../types";
@@ -105,6 +108,15 @@ const ArticleDetail: FC<Props> = ({
   const [articleHasBeenRead, setArticleHasBeenRead] = useState(false);
   const MIN_RATIO_FOR_HAS_BEEN_READ = 0.55;
 
+  const [config, setConfig] = React.useState<Config | null>(null);
+
+  const handleConfig = useCallback((data: unknown) => {
+    const result = data ? (data as { config: Config }) : undefined;
+    if (result?.config) {
+      setConfig(result.config);
+    }
+  }, []);
+
   useEffect(() => {
     const checkArticleRead = async () => {
       if (articleId) {
@@ -321,6 +333,22 @@ const ArticleDetail: FC<Props> = ({
                     html={currentArticle.texte2}
                     screenWidth={articleWidth}
                   />
+                  <GraphQLQuery
+                    query={ConfigQueries.CONFIG_ZERO_ACCIDENT}
+                    fetchPolicy={FetchPoliciesConstants.NO_CACHE}
+                    getFetchedData={handleConfig}
+                    showErrorMessage={false}
+                    noLoader
+                    noLoaderBackdrop
+                  />
+                  {config?.activationZeroAccident &&
+                    currentArticle.zeroAccident && (
+                      <ZeroAccidentBanner
+                        title={Labels.zeroAccident.article.title}
+                        buttonTitle={Labels.zeroAccident.article.buttonTitle}
+                        fromPage="Article"
+                      />
+                    )}
                   <Links linksArray={linksArray} />
                   <UsefulQuestion
                     question={Labels.article.usefulTitle}

diff --git a/front/src/screens/surveys/tabSurveysScreen.component.tsx b/front/src/screens/surveys/tabSurveysScreen.component.tsx
@@ -12,20 +12,32 @@ import {
   View,
 } from "../../components/baseComponents";
 import TrackerHandler from "../../components/tracker/trackerHandler.component";
-import { Labels } from "../../constants";
+import ZeroAccidentBanner from "../../components/zeroAccident/zeroAccidentBanner.component";
+import { ConfigQueries, FetchPoliciesConstants, Labels } from "../../constants";
+import { GraphQLQuery } from "../../services";
 import { Colors, Margins, Paddings, Sizes } from "../../styles";
 import type { SurveyBanner } from "../../type/survey.types";
+import type { Config } from "../../types";
 import { LinkingUtils, RootNavigation, TrackerUtils } from "../../utils";
 
 const TabSurveysScreen: FC = () => {
+  const [config, setConfig] = React.useState<Config | null>(null);
+
+  const handleConfig = useCallback((data: unknown) => {
+    const result = data ? (data as { config: Config }) : undefined;
+    if (result?.config) {
+      setConfig(result.config);
+    }
+  }, []);
+
   const openEpdsSurvey = useCallback(() => {
     const EPDS_WIDGET_SOURCE = "1000j-application";
-
     void LinkingUtils.openWebsite(
       `${process.env.EPDS_WIDGET_URL}/?source=${EPDS_WIDGET_SOURCE}`,
       false
     );
   }, []);
+
   const openTndSurvey = useCallback(() => {
     void RootNavigation.navigate("tndSurvey");
   }, []);
@@ -54,6 +66,21 @@ const TabSurveysScreen: FC = () => {
         description={Labels.surveys.description}
         style={styles.header}
       />
+      <GraphQLQuery
+        query={ConfigQueries.CONFIG_ZERO_ACCIDENT}
+        fetchPolicy={FetchPoliciesConstants.NO_CACHE}
+        getFetchedData={handleConfig}
+        showErrorMessage={false}
+        noLoader
+        noLoaderBackdrop
+      />
+      {config?.activationZeroAccident && (
+        <ZeroAccidentBanner
+          title={Labels.zeroAccident.survey.title}
+          buttonTitle={Labels.zeroAccident.survey.buttonTitle}
+          fromPage="Surveys"
+        />
+      )}
       {surveysBanner.map((survey, index) => (
         <View key={index} style={styles.surveyBlock}>
           <CommonText style={styles.bannerTitle}>{survey.title}</CommonText>

diff --git a/front/src/types.tsx b/front/src/types.tsx
@@ -174,6 +174,7 @@ export type Article = {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   cartographie_pois_types?: PoiType[];
   handicap?: boolean;
+  zeroAccident?: boolean;
 };
 
 export type ArticleInShortItem = {
@@ -274,6 +275,7 @@ export type ArticleListHeaderParams = {
 export type Config = {
   lastAppVersionNumber: string | null;
   news?: string;
+  activationZeroAccident?: boolean;
 };
 
 export type MarkedDatesType = Record<string, MarkingProps>;
diff --git a/front/src/utils/tracking/tracker.util.ts b/front/src/utils/tracking/tracker.util.ts
@@ -43,6 +43,7 @@ export enum TrackingEvent {
   NOTIFICATIONS_DISABLED = "Notifications désactivées",
   RESSOURCES = "Ressources",
   SURVEYS = "Évaluations",
+  ZERO_ACCIDENT = "Zero Accident",
 }
 
 export const matomoInstance = async (): Promise<MatomoTracker> => {

diff --git a/front/tsconfig.json b/front/tsconfig.json
@@ -2,10 +2,7 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "jsx": "react-native",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "moduleResolution": "node",
     "noEmit": true,
     "skipLibCheck": true,