fix cookie consent in google maps embed

app/components/Blocks/GoogleMaps/index.module.css

@@ -1,14 +1,17 @@
 .container {
-    margin: 2em var(--page-margin);
+  margin: 2em var(--page-margin);
 }
 .container h2 {
-    font-size: var(--font-size-xx-big);
-    text-align: center;
+  font-size: var(--font-size-xx-big);
+  text-align: center;
 }
 .container iframe {
-    margin: 0 auto;
-    aspect-ratio: 3/2;
-    max-width: 100%;
-    max-height: max(30em, 50vh);
-    display: block;
-}
+  margin: 0 auto;
+  aspect-ratio: 3/2;
+  max-width: 100%;
+  max-height: max(30em, 50vh);
+  display: block;
+}
+.noConsent {
+  text-align: center;
+}

app/components/Blocks/GoogleMaps/index.tsx

@@ -1,6 +1,8 @@
-import React, { useEffect } from "react";
+import React from "react";
 import classes from "./index.module.css";
-import { getCookieConsentValue } from "react-cookie-consent";
+import { useCookieConsent } from "~/providers/Cookies";
+import { useTranslation } from "react-i18next";
+import Button from "~/components/Button";
 
 export type Type = {
   blockType: "googleMaps";
@@ -10,10 +12,9 @@ export type Type = {
 };
 
 export const GoogleMaps: React.FC<Type> = ({ title, src }) => {
-  const [consent, setConsent] = React.useState(false);
-  useEffect(() => {
-    setConsent(!!getCookieConsentValue());
-  }, []);
+  const { consent, resetConsent } = useCookieConsent();
+  const { t } = useTranslation();
+
   return consent ? (
     <div className={classes.container}>
       {title && <h2>{title}</h2>}
@@ -29,9 +30,12 @@ export const GoogleMaps: React.FC<Type> = ({ title, src }) => {
       />
     </div>
   ) : (
-    <>
-      {/* TODO: we could show a preview here asking the user to consent to cookies */}
-    </>
+    <div className={classes.noConsent}>
+      <p>{t("cookies.noConsent")}</p>
+      {consent !== null && (
+        <Button onClick={resetConsent}>{t("cookies.resetConsent")}</Button>
+      )}
+    </div>
   );
 };