Skip to content

Commit 6f8ce6d

Browse files
ViczeiVictor
Viczei
and
Victor
authored
feat: ajout du bandeau tally (#6821)
* feat: ajout du bandeau tally * review * review * fix: review * try dsfr icon * refacto * feat: update memorize tally notice was closed * feat: cacher bandeau lorsque click sur croix * resize tally * fix: accessibilité bouton * fix: décallage * fix: design --------- Co-authored-by: Victor <[email protected]>
1 parent d556ddc commit 6f8ce6d

File tree

4 files changed

+113
-178
lines changed

4 files changed

+113
-178
lines changed

‎packages/code-du-travail-frontend/src/modules/config/DefaultLayout.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { SentryTest } from "../sentry";
1212
import { ConsentManager } from "../cookie-consent";
1313
import { shouldShowCookieBanner } from "../cookie-consent/config";
1414
import { usePathname } from "next/navigation";
15-
import { Tally } from "./Tally";
1615

1716
type Props = {
1817
children: React.ReactNode;
@@ -33,7 +32,6 @@ export default function DefaultLayout({
3332
const lang = "fr";
3433
const pathname = usePathname() || "";
3534
const showCookieBanner = shouldShowCookieBanner(pathname);
36-
const showTally = !pathname.startsWith("/widgets");
3735

3836
return (
3937
<html {...getHtmlAttributes({ lang })}>
@@ -64,7 +62,6 @@ export default function DefaultLayout({
6462
>
6563
{children}
6664
{showCookieBanner && <ConsentManager />}
67-
{showTally && <Tally id={"3E2Ypo"} />}
6865
</DsfrProvider>
6966
<MatomoAnalytics />
7067
{ENV === "development" && <SentryTest />}

‎packages/code-du-travail-frontend/src/modules/config/Tally.tsx‎

Lines changed: 0 additions & 174 deletions
This file was deleted.

‎packages/code-du-travail-frontend/src/modules/layout/TallyNotice.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
"use client";
2+
3+
import { fr } from "@codegouvfr/react-dsfr";
4+
import Button from "@codegouvfr/react-dsfr/Button";
5+
import Script from "next/script";
6+
import { css } from "@styled-system/css";
7+
import { useState, useEffect } from "react";
8+
9+
type TallyNoticeProps = { onClose: () => void; id: string };
10+
11+
export const TallyNotice = ({ onClose, id }: TallyNoticeProps) => {
12+
const [isNoticeVisible, setIsNoticeVisible] = useState(false);
13+
14+
useEffect(() => {
15+
const isClosed = localStorage.getItem("tallyNoticeClosed");
16+
if (!isClosed || isClosed === "false") {
17+
setIsNoticeVisible(true);
18+
}
19+
}, []);
20+
21+
const handleClose = () => {
22+
localStorage.setItem("tallyNoticeClosed", "true");
23+
setIsNoticeVisible(false);
24+
onClose();
25+
};
26+
27+
if (!isNoticeVisible) {
28+
return null;
29+
}
30+
31+
return (
32+
<>
33+
<Script id="tally-js" src="https://tally.so/widgets/embed.js" />
34+
<div className={fr.cx("fr-notice", "fr-notice--info")}>
35+
<div
36+
className={`${fr.cx(
37+
"fr-container",
38+
//@ts-ignore
39+
"fr-notice__content",
40+
"fr-grid-row",
41+
"fr-grid-row--middle"
42+
)} ${containerStyles}`}
43+
>
44+
<p
45+
className={fr.cx(
46+
"fr-notice__title",
47+
"fr-col-12",
48+
"fr-col-md-4",
49+
"fr-my-1w"
50+
)}
51+
>
52+
Donnez votre avis pour améliorer le site
53+
</p>
54+
<button
55+
className={`${fr.cx(
56+
"fr-btn",
57+
//@ts-ignore
58+
"fr-btn--primary",
59+
"fr-ml-md-2w",
60+
"fr-col-12",
61+
"fr-col-md-2",
62+
"fr-text--middle"
63+
)} ${respondButtonStyles}`}
64+
data-tally-open={id}
65+
data-tally-width="700"
66+
data-tally-overlay="1"
67+
data-tally-auto-resize="true"
68+
aria-label="Ouvrir le formulaire d'avis"
69+
aria-haspopup="dialog"
70+
aria-expanded="false"
71+
>
72+
Répondre
73+
</button>
74+
<Button
75+
iconId="fr-icon-close-line"
76+
onClick={handleClose}
77+
priority="tertiary no outline"
78+
title="Fermer la notice"
79+
className={closeButtonStyles}
80+
size="small"
81+
nativeButtonProps={{ "aria-label": "Fermer la notice" }}
82+
></Button>
83+
</div>
84+
</div>
85+
</>
86+
);
87+
};
88+
89+
const containerStyles = css({ position: "relative" });
90+
91+
const respondButtonStyles = css({
92+
display: "flex",
93+
justifyContent: "center",
94+
alignItems: "center",
95+
});
96+
97+
const closeButtonStyles = css({
98+
position: "absolute",
99+
top: "0.25rem",
100+
right: "1rem",
101+
zIndex: 10,
102+
});

‎packages/code-du-travail-frontend/src/modules/layout/index.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
1-
import { ReactNode } from "react";
1+
"use client";
2+
3+
import { ReactNode, useState } from "react";
24
import { css } from "@styled-system/css";
35
import { PolyfillComponent } from "../config/PolyfillComponent";
46
import { Footer } from "./footer";
57
import { Header } from "./header";
68
import { SkipLinks } from "./SkipLinks";
9+
import { TallyNotice } from "./TallyNotice"; // Importez le composant Notice
10+
import { usePathname } from "next/navigation";
711

812
type Props = {
913
children: ReactNode;
1014
container?: "fr-container" | "fr-container--fluid";
1115
};
1216

1317
export const DsfrLayout = ({ children, container = "fr-container" }: Props) => {
18+
const [isNoticeVisible, setIsNoticeVisible] = useState(true);
19+
const pathname = usePathname() || "";
20+
const showTally = !pathname.startsWith("/widgets");
1421
return (
1522
<>
1623
<PolyfillComponent />
1724
<SkipLinks />
1825
<Header />
26+
{showTally && isNoticeVisible && (
27+
<TallyNotice onClose={() => setIsNoticeVisible(false)} id="3E2Ypo" />
28+
)}
1929
<main className={`${container} ${printStyle}`} id="main" role="main">
2030
{children}
2131
</main>

0 commit comments

Comments
 (0)