feat(appli): modifications pour l'appli

__tests__/utils/main.utils.test.js

@@ -1,5 +1,7 @@
+import { STORAGE_SOURCE } from "../../src/constants/constants"
 import {
   getColorIconAndTextByMood,
+  isUiForApp,
   phoneNumberFormatting,
   updateRadioButtonSelectedInList,
 } from "../../src/utils/main.utils"
@@ -112,4 +114,32 @@ describe("Utils", () => {
       expect(result).toEqual(expected)
     })
   })
+
+  describe("Retourne si le widget est intégré dans l'application 1000jours en particulier ou non", () => {
+    beforeEach(() => {
+      localStorage.clear()
+    })
+
+    test("Retourne True avec la source en paramètre est `1000j-application`", () => {
+      expect(isUiForApp("1000j-application")).toBeTruthy()
+    })
+
+    test("Retourne False avec la source en paramètre est `1000jblues-integration`", () => {
+      expect(isUiForApp("1000jblues-integration")).toBeFalsy()
+    })
+
+    test("Retourne False avec aucune source en paramètre et dans le localStorage", () => {
+      expect(isUiForApp()).toBeFalsy()
+    })
+
+    test("Retourne True avec la source `1000j-application` dans le localStorage", () => {
+      localStorage.setItem(STORAGE_SOURCE, "1000j-application")
+      expect(isUiForApp()).toBeTruthy()
+    })
+
+    test("Retourne False avec la source `1000jblues-integration` dans le localStorage", () => {
+      localStorage.setItem(STORAGE_SOURCE, "1000jblues-integration")
+      expect(isUiForApp()).toBeFalsy()
+    })
+  })
 })

pages/index.js

@@ -11,10 +11,6 @@ import {
 import { useRouter } from "next/router"
 import { gql, useLazyQuery } from "@apollo/client"
 import { client, GET_TEMOIGNAGES_CHIFFRES } from "../apollo-client"
-import {
-  convertArrayLabelsToObject,
-  readSourceInUrl,
-} from "../src/utils/main.utils"
 import {
   EPDS_LABELS_TRANSLATION_BY_LOCALE,
   GET_LOCALES,
@@ -24,6 +20,7 @@ import { CarouselCustom } from "../src/components/CarouselCustom"
 import * as AbTestingUtils from "../src/utils/ab-testing/ab-testing.utils"
 import * as DemographicDataUtils from "../src/utils/ab-testing/demographic-data.utils"
 import * as TrackerUtils from "../src/utils/tracker.utils"
+import * as MainUtils from "../src/utils/main.utils"
 
 export default function Home() {
   const router = useRouter()
@@ -37,7 +34,7 @@ export default function Home() {
   const [chiffresChoc, setChiffresChoc] = useState()
 
   useEffect(() => {
-    const paramSource = readSourceInUrl()
+    const paramSource = MainUtils.readSourceInUrl()
     setSource(paramSource)
 
     const localesQuery = async () => {
@@ -89,7 +86,7 @@ export default function Home() {
       client: client,
       onCompleted: (data) => {
         const labelsData = data.labelsEpdsTraductions[0]?.labels
-        const labels = convertArrayLabelsToObject(labelsData)
+        const labels = MainUtils.convertArrayLabelsToObject(labelsData)
         setLabelsTranslated(labels)
         localStorage.setItem(STORAGE_LABELS, JSON.stringify(labels))
       },
@@ -150,9 +147,9 @@ export default function Home() {
     </>
   )
 
-  return (
-    <div className="container">
-      <div className="main">
+  const ImagesRfAndLogo = () => {
+    return (
+      <>
         <img
           src="/img/logo-republique-francaise.png"
           alt="Logo république française"
@@ -172,8 +169,21 @@ export default function Home() {
             width={130}
           />
         </a>
-        <Row className="slogan">{getSlogan(source, labelsTranslated)}</Row>
-        <br />
+      </>
+    )
+  }
+
+  return (
+    <div className="container">
+      <div className="main">
+        {!MainUtils.isUiForApp(source) ? (
+          <>
+            <ImagesRfAndLogo />
+            <Row className="slogan">{getSlogan(source, labelsTranslated)}</Row>
+            <br />
+          </>
+        ) : null}
+
         <button
           className="fr-btn fr-btn--lg"
           onClick={startSurvey}

src/components/WidgetHeader.js

@@ -1,14 +1,16 @@
 import { Row } from "react-bootstrap"
 import { LocaleButton } from "./LocaleButton"
+import * as MainUtils from "../utils/main.utils"
 
 /**
  * @param {Sting} title (Not required)
  * @param {*} locale (Not required)
  * @returns Header
  */
 export function WidgetHeader({ title, locale }) {
+  const show = !MainUtils.isUiForApp()
 
-  return (
+  return show ? (
     <div className="widget-header">
       <Row>
         <div className="header-block-icons">
@@ -22,5 +24,5 @@ export function WidgetHeader({ title, locale }) {
         {title && <h5 className="title-ddp">{title}</h5>}
       </Row>
     </div>
-  )
+  ) : null
 }

src/constants/constants.js

@@ -18,6 +18,7 @@ export const STORAGE_CONTACT_HOURS = "contactHours"
 
 export const API_URL = process.env.NEXT_PUBLIC_API_URL
 export const EPDS_SOURCE = "SitePartenaire"
+export const EPDS_APP_SOURCE = "1000j-application"
 export const DEFAULT_LOCAL = "FR"
 export const OPEN_CONTACT_FROM_EMAIL = "fromEmail"
 

src/utils/main.utils.js

@@ -1,5 +1,7 @@
 import { Spinner } from "react-bootstrap"
 import { Labels } from "../constants/specificLabels"
+import { EPDS_APP_SOURCE, STORAGE_SOURCE } from "../constants/constants"
+import * as StorageUtils from "../utils/storage.utils"
 import Moment from "moment"
 import "moment/locale/fr"
 
@@ -118,3 +120,13 @@ export const getRandomInt = (max) => {
     return randomVal % max
   }
 }
+
+/**
+ * S'il n'y a pas de source en paramètre, on regarde le localStorage
+ * @param {*} source
+ * @returns Boolean
+ */
+export const isUiForApp = (source) => {
+  if (source) return source === EPDS_APP_SOURCE
+  else return StorageUtils.getInLocalStorage(STORAGE_SOURCE) === EPDS_APP_SOURCE
+}