feat(dsfr): ajout d'un detecteur d'adblock pour éviter qu'un usager p…

…artage un message dans le vide (#6226)

* fix: bug

* fix(adblock): utilisation de l'url de matomo au lieu de celle d'un provider de pub pour éviter de modifier les CSP (#6227)

packages/code-du-travail-frontend/src/modules/layout/feedback/AdBlockDetector.ts

@@ -0,0 +1,15 @@
+import { PIWIK_URL } from "../../../config";
+
+export const detectAdBlockCall = async (): Promise<boolean> => {
+  return fetch(PIWIK_URL, {
+    method: "HEAD",
+    mode: "no-cors",
+    cache: "no-store",
+  })
+    .then(({ redirected }) => {
+      return redirected;
+    })
+    .catch(() => {
+      return true;
+    });
+};

packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackAdblock.tsx

@@ -0,0 +1,15 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+export const FeedbackAdblock = () => {
+  return (
+    <>
+      <h2 className={fr.cx("fr-h5")}>
+        Nous n&apos;avons pas pu envoyer votre réponse
+      </h2>
+      <p>
+        Pour soumettre votre avis, merci de désactiver temporairement votre
+        bloqueur de publicité et recharger la page.
+      </p>
+    </>
+  );
+};

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

@@ -6,10 +6,12 @@ import { FeedbackDefault } from "./FeedbackDefault";
 import { FeedbackContent, FeedbackDataSent } from "./FeedbackContent";
 import { FeedbackAnswered } from "./FeedbackAnswered";
 import { useFeedbackEvents } from "./tracking";
+import { FeedbackAdblock } from "./FeedbackAdblock";
+import { detectAdBlockCall } from "./AdBlockDetector";
 
 export const Feedback = () => {
   const [viewFeedback, setViewFeedback] = useState<
-    "yes" | "no" | "default" | "answered"
+    "yes" | "no" | "default" | "answered" | "adBlockDetected"
   >("default");
   const {
     emitNegativeFeedback,
@@ -18,13 +20,15 @@ export const Feedback = () => {
     emitFeedbackSuggestion,
   } = useFeedbackEvents();
 
-  const onClickNo = () => {
-    setViewFeedback("no");
+  const onClickNo = async () => {
+    const detectAddBlock = await detectAdBlockCall();
+    setViewFeedback(detectAddBlock ? "adBlockDetected" : "no");
     emitNegativeFeedback();
   };
 
-  const onClickYes = () => {
-    setViewFeedback("yes");
+  const onClickYes = async () => {
+    const detectAddBlock = await detectAdBlockCall();
+    setViewFeedback(detectAddBlock ? "adBlockDetected" : "yes");
     emitPositiveFeedback();
   };
 
@@ -48,6 +52,7 @@ export const Feedback = () => {
         <FeedbackContent onSubmit={onSubmit} type="positive" />
       )}
       {viewFeedback === "answered" && <FeedbackAnswered />}
+      {viewFeedback === "adBlockDetected" && <FeedbackAdblock />}
     </div>
   );
 };