From e1ec0da0a434df69a36016b9adfaa71aed312c13 Mon Sep 17 00:00:00 2001 From: Maxime Golfier <25312957+maxgfr@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:10:24 +0200 Subject: [PATCH] =?UTF-8?q?feat(dsfr):=20cr=C3=A9ation=20du=20composant=20?= =?UTF-8?q?"Besoin=20de=20plus=20d'information"=20(#6135)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: ui * fix: composant --- .../public/static/assets/img/srdt.svg | 25 +++ .../__snapshots__/NeedMoreInfo.test.tsx.snap | 43 ---- .../src/modules/layout/index.tsx | 2 +- .../src/modules/layout/infos/PopupContent.tsx | 107 ++++++++++ .../infos/__tests__/PopupContent.test.tsx | 10 + .../__snapshots__/PopupContent.test.tsx.snap | 87 +++++++++ .../__snapshots__/index.test.tsx.snap | 183 ++++++++++++++++++ .../__tests__/index.test.tsx} | 2 +- .../{NeedMoreInfo.tsx => infos/index.tsx} | 13 +- .../src/modules/layout/infos/tracking.ts | 32 +++ 10 files changed, 458 insertions(+), 46 deletions(-) create mode 100644 packages/code-du-travail-frontend/public/static/assets/img/srdt.svg delete mode 100644 packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap create mode 100644 packages/code-du-travail-frontend/src/modules/layout/infos/PopupContent.tsx create mode 100644 packages/code-du-travail-frontend/src/modules/layout/infos/__tests__/PopupContent.test.tsx create mode 100644 packages/code-du-travail-frontend/src/modules/layout/infos/__tests__/__snapshots__/PopupContent.test.tsx.snap create mode 100644 packages/code-du-travail-frontend/src/modules/layout/infos/__tests__/__snapshots__/index.test.tsx.snap rename packages/code-du-travail-frontend/src/modules/layout/{__tests__/NeedMoreInfo.test.tsx => infos/__tests__/index.test.tsx} (84%) rename packages/code-du-travail-frontend/src/modules/layout/{NeedMoreInfo.tsx => infos/index.tsx} (74%) create mode 100644 packages/code-du-travail-frontend/src/modules/layout/infos/tracking.ts diff --git a/packages/code-du-travail-frontend/public/static/assets/img/srdt.svg b/packages/code-du-travail-frontend/public/static/assets/img/srdt.svg new file mode 100644 index 0000000000..400623cc59 --- /dev/null +++ b/packages/code-du-travail-frontend/public/static/assets/img/srdt.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap b/packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap deleted file mode 100644 index 2886a2a473..0000000000 --- a/packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap +++ /dev/null @@ -1,43 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should match snapshot 1`] = ` -
-
-
-
-
-

- Besoin de plus d'informations ? -

-

- Les services du ministère du Travail en région informent, conseillent et orientent les salariés et les employeurs du secteur privé sur leurs questions en droit du travail. -

-
- -
-
-
-
-
-
-`; diff --git a/packages/code-du-travail-frontend/src/modules/layout/index.tsx b/packages/code-du-travail-frontend/src/modules/layout/index.tsx index ec2b2589d3..8d854134ee 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/index.tsx +++ b/packages/code-du-travail-frontend/src/modules/layout/index.tsx @@ -1,7 +1,7 @@ import { fr } from "@codegouvfr/react-dsfr"; import { Footer } from "./Footer"; import { Header } from "./header"; -import { NeedMoreInfo } from "./NeedMoreInfo"; +import { NeedMoreInfo } from "./infos"; import { SkipLinks } from "./SkipLinks"; export const DsfrLayout = ({ children }: { children: React.ReactNode }) => { diff --git a/packages/code-du-travail-frontend/src/modules/layout/infos/PopupContent.tsx b/packages/code-du-travail-frontend/src/modules/layout/infos/PopupContent.tsx new file mode 100644 index 0000000000..4237a3bda1 --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/layout/infos/PopupContent.tsx @@ -0,0 +1,107 @@ +"use client"; + +import { Input } from "@codegouvfr/react-dsfr/Input"; +import Image from "next/image"; +import { useEffect, useState } from "react"; +import { useNeedMoreInfoEvents } from "./tracking"; +import servicesDeRenseignement from "../../../data/services-de-renseignement.json"; +import { Button } from "@codegouvfr/react-dsfr/Button"; +import { usePathname } from "next/navigation"; +import { fr } from "@codegouvfr/react-dsfr"; +import { css } from "../../../../styled-system/css"; + +type ServiceRenseignement = { + name: string; + url: string; +}; + +export function PopupContent() { + const currentPathName = usePathname(); + const [department, setDepartment] = useState(""); + const [result, setResult] = useState( + undefined + ); + const { emitModalIsOpened, emitTrackNumber } = useNeedMoreInfoEvents(); + + const onSearchInput = () => { + const departmentNum = (department.replace(/^0+/, "") || "").toLowerCase(); + const departmentData = servicesDeRenseignement[departmentNum]; + setResult(departmentData); + }; + + const onClickLinkPhoneNumber = () => { + emitTrackNumber(); + }; + + useEffect(() => { + if (currentPathName) emitModalIsOpened(currentPathName); + }, [currentPathName, emitModalIsOpened]); + + return ( + <> +

Contact téléphonique

+ + Contactez les services de renseignements au droit du travail au 0800 026 080 + +

+ Contact par email et prise de rendez-vous +

+ setDepartment(e.target.value), + onKeyDown: (e) => { + if (e.key === "Enter") { + onSearchInput(); + } + }, + }} + addon={ + + + +
+
+
+
+
+ +
+
+

+ Les services du ministère du Travail +

+

+ Contact téléphonique +

+ + Contactez les services de renseignements au droit du travail au 0800 026 080 + +

+ Contact par email et prise de rendez-vous +

+
+ +
+ +
+
+
+

+ Attention, ces services délivrent une information juridique, ils ne sont pas compétents pour : +

+
    +
  • + les demandes d'intervention en entreprise +
    • +
  • + la constitution des dossiers prud’homaux +
    • +
  • + les calculs de droit au chômage +
    • +
  • + vous renseigner sur les cotisations sociales +
    • +
+
+
+
+
+
+
+ + + + + + + +`; diff --git a/packages/code-du-travail-frontend/src/modules/layout/__tests__/NeedMoreInfo.test.tsx b/packages/code-du-travail-frontend/src/modules/layout/infos/__tests__/index.test.tsx similarity index 84% rename from packages/code-du-travail-frontend/src/modules/layout/__tests__/NeedMoreInfo.test.tsx rename to packages/code-du-travail-frontend/src/modules/layout/infos/__tests__/index.test.tsx index 826279dbca..5f9f848921 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/__tests__/NeedMoreInfo.test.tsx +++ b/packages/code-du-travail-frontend/src/modules/layout/infos/__tests__/index.test.tsx @@ -1,6 +1,6 @@ import { render } from "@testing-library/react"; import React from "react"; -import { NeedMoreInfo } from "../NeedMoreInfo"; +import { NeedMoreInfo } from "../index"; describe("", () => { it("should match snapshot", () => { diff --git a/packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx b/packages/code-du-travail-frontend/src/modules/layout/infos/index.tsx similarity index 74% rename from packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx rename to packages/code-du-travail-frontend/src/modules/layout/infos/index.tsx index b408e8ebbf..ced8ce3928 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx +++ b/packages/code-du-travail-frontend/src/modules/layout/infos/index.tsx @@ -1,6 +1,13 @@ import { fr } from "@codegouvfr/react-dsfr"; import { Button } from "@codegouvfr/react-dsfr/Button"; -import { css } from "../../../styled-system/css"; +import { css } from "../../../../styled-system/css"; +import { createModal } from "@codegouvfr/react-dsfr/Modal"; +import { PopupContent } from "./PopupContent"; + +export const needMoreInfoModal = createModal({ + id: "more-info-modal", + isOpenedByDefault: true, +}); export const NeedMoreInfo = () => { return ( @@ -19,9 +26,13 @@ export const NeedMoreInfo = () => { iconId="fr-icon-chat-3-line" iconPosition="right" priority="secondary" + nativeButtonProps={needMoreInfoModal.buttonProps} > Trouver les services près de chez moi + + + diff --git a/packages/code-du-travail-frontend/src/modules/layout/infos/tracking.ts b/packages/code-du-travail-frontend/src/modules/layout/infos/tracking.ts new file mode 100644 index 0000000000..f1ffe8e57f --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/layout/infos/tracking.ts @@ -0,0 +1,32 @@ +import { push as matopush } from "@socialgouv/matomo-next"; +import { MatomoBaseEvent } from "../../../lib"; + +export enum MatomoNeedMoreInfoEventSecondary { + CONTACT = "contact", +} + +export enum MatomoNeedMoreInfoEventTertiary { + CLICK_PHONE_NUMBER = "click_phone_number", + CLICK_CONTACT_MODAL = "click_contact_sr_modale", +} + +export const useNeedMoreInfoEvents = () => { + const emitTrackNumber = () => { + matopush([ + MatomoBaseEvent.TRACK_EVENT, + MatomoNeedMoreInfoEventSecondary.CONTACT, + MatomoNeedMoreInfoEventTertiary.CLICK_PHONE_NUMBER, + ]); + }; + + const emitModalIsOpened = (baseUrl: string) => { + matopush([ + MatomoBaseEvent.TRACK_EVENT, + MatomoNeedMoreInfoEventSecondary.CONTACT, + MatomoNeedMoreInfoEventTertiary.CLICK_CONTACT_MODAL, + baseUrl, + ]); + }; + + return { emitTrackNumber, emitModalIsOpened }; +};