From 4c9d343bd7131463b09f1ae3b958f83192f18f4d Mon Sep 17 00:00:00 2001
From: Martin Gerritsen <martin.gerritsen@gmail.com>
Date: Wed, 6 Nov 2024 23:52:45 +0100
Subject: [PATCH 1/3] feat(CookieConsent) Added Cookie consent banner

---
 src/app/casos-activos/solicitudes/page.js    | 19 ++---
 src/app/voluntometro/page.js                 | 17 ++---
 src/components/CookieBanner/CookieBanner.tsx | 77 ++++++++++++++++++++
 src/components/{Modal.js => Modal.tsx}       | 38 ++++++++--
 src/components/auth/PhoneNumberDialog.js     |  8 +-
 src/components/layout/EmergencyLayout.tsx    |  2 +
 src/components/map/map.tsx                   | 11 +--
 src/context/EmergencyProvider.tsx            | 30 +++++---
 src/helpers/constants.ts                     |  2 +
 9 files changed, 161 insertions(+), 43 deletions(-)
 create mode 100644 src/components/CookieBanner/CookieBanner.tsx
 rename src/components/{Modal.js => Modal.tsx} (53%)

diff --git a/src/app/casos-activos/solicitudes/page.js b/src/app/casos-activos/solicitudes/page.js
index cc41c002..0120dd32 100644
--- a/src/app/casos-activos/solicitudes/page.js
+++ b/src/app/casos-activos/solicitudes/page.js
@@ -10,7 +10,9 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { tiposAyudaOptions } from '@/helpers/constants';
 import Modal from '@/components/Modal';
 import { useModal } from '@/context/EmergencyProvider';
-import { useTowns } from '../../../context/TownProvider';
+import { useTowns } from '@/context/TownProvider';
+
+const MODAL_NAME = 'solicitudes';
 
 export default function Solicitudes() {
   const towns = useTowns();
@@ -23,10 +25,10 @@ export default function Solicitudes() {
   const [data, setData] = useState([]);
   const [currentPage, setCurrentPage] = useState(Number(searchParams.get('page')) || 1);
   const [currentCount, setCurrentCount] = useState(0);
-  const { showModal, toggleModal } = useModal();
+  const { toggleModal } = useModal();
 
   const closeModal = () => {
-    toggleModal(false);
+    toggleModal(MODAL_NAME, false);
   };
   const itemsPerPage = 10;
   const numPages = (count) => {
@@ -172,7 +174,7 @@ export default function Solicitudes() {
 
             <button
               onClick={() => {
-                toggleModal(true);
+                toggleModal(MODAL_NAME, true);
               }}
               className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 flex items-center gap-2 whitespace-nowrap"
             >
@@ -187,11 +189,10 @@ export default function Solicitudes() {
       <div className="flex items-center justify-center">
         <Pagination currentPage={currentPage} totalPages={numPages(currentCount)} onPageChange={changePage} />
       </div>
-      {showModal && (
-        <Modal>
-          <OfferHelp town={towns[filtroData.pueblo - 1]} onClose={closeModal} isModal={true} />
-        </Modal>
-      )}
+
+      <Modal id={MODAL_NAME}>
+        <OfferHelp town={towns[filtroData.pueblo - 1]} onClose={closeModal} isModal={true} />
+      </Modal>
     </>
   );
 }
diff --git a/src/app/voluntometro/page.js b/src/app/voluntometro/page.js
index bca8fb7e..d845ecc3 100644
--- a/src/app/voluntometro/page.js
+++ b/src/app/voluntometro/page.js
@@ -7,14 +7,16 @@ import OfferHelp from '@/components/OfferHelp';
 import { useModal } from '@/context/EmergencyProvider';
 import Modal from '@/components/Modal';
 
+const MODAL_NAME = 'voluntometro';
+
 export default function Voluntometro() {
   const [pueblos, setPueblos] = useState([]);
-  const { showModal, toggleModal } = useModal();
+  const { toggleModal } = useModal();
 
   const [town, setTown] = useState(0);
 
   const closeModal = () => {
-    toggleModal(false);
+    toggleModal(MODAL_NAME, false);
   };
 
   useEffect(() => {
@@ -164,7 +166,7 @@ export default function Voluntometro() {
               </div>
               <button
                 onClick={() => {
-                  toggleModal(true);
+                  toggleModal(MODAL_NAME, true);
                   setTown(pueblo);
                 }}
                 className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600"
@@ -176,12 +178,9 @@ export default function Voluntometro() {
         ))}
       </div>
 
-      {/* Modal with full form */}
-      {showModal && (
-        <Modal>
-          <OfferHelp town={town} onClose={closeModal} isModal={true} />
-        </Modal>
-      )}
+      <Modal id={MODAL_NAME}>
+        <OfferHelp town={town} onClose={closeModal} isModal={true} />
+      </Modal>
     </div>
   );
 }
diff --git a/src/components/CookieBanner/CookieBanner.tsx b/src/components/CookieBanner/CookieBanner.tsx
new file mode 100644
index 00000000..b7f79932
--- /dev/null
+++ b/src/components/CookieBanner/CookieBanner.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { FC, useEffect, useState } from 'react';
+import Modal from '@/components/Modal';
+import { useModal } from '@/context/EmergencyProvider';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const MODAL_NAME = 'cookie-banner';
+const POLICY_URL = '/politica-privacidad';
+const COOKIE_CONSENT_KEY = 'cookieConsentAccepted';
+
+const CookieBanner: FC = () => {
+  const { toggleModal } = useModal();
+  const pathname = usePathname();
+  const [hasConsent, setHasConsent] = useState(false);
+
+  useEffect(() => {
+    // Check for consent in localStorage when the component mounts
+    const consent = localStorage.getItem(COOKIE_CONSENT_KEY);
+    setHasConsent(Boolean(consent));
+  }, []);
+
+  const handleAcceptCookies = () => {
+    // Set consent in localStorage and close the modal
+    localStorage.setItem(COOKIE_CONSENT_KEY, 'true');
+    setHasConsent(true);
+    toggleModal(MODAL_NAME, false);
+  };
+
+  const handleRejectCookies = () => {
+    // Redirect to Google if cookies are rejected
+    window.location.href = 'https://www.google.com';
+  };
+
+  useEffect(() => {
+    // Show the modal only if consent is not given and we're not on the policy page
+    if (!hasConsent && pathname !== POLICY_URL) {
+      toggleModal(MODAL_NAME, true);
+    } else {
+      toggleModal(MODAL_NAME, false);
+    }
+  }, [hasConsent, pathname]);
+
+  if (hasConsent) return null; // Do not render the modal if consent is already given
+
+  return (
+    <Modal id={MODAL_NAME} allowClose={false}>
+      <div className="bg-yellow-50 p-4 rounded">
+        <h2 className="text-yellow-800 font-semibold mb-4">Política de Cookies</h2>
+        <p className="text-yellow-800">
+          Usamos cookies para mejorar su experiencia. Al aceptar, usted está de acuerdo con nuestra{' '}
+          <Link href={POLICY_URL} className="text-yellow-900 font-semibold underline">
+            política de cookies
+          </Link>
+          .
+        </p>
+        <div className="mt-4 flex justify-end space-x-4">
+          <button
+            onClick={handleRejectCookies}
+            className="flex-1 bg-red-500 text-white py-3 px-4 rounded-lg font-semibold"
+          >
+            Rechazar
+          </button>
+          <button
+            onClick={handleAcceptCookies}
+            className="flex-1 bg-green-500 text-white py-3 px-4 rounded-lg font-semibold"
+          >
+            Aceptar
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default CookieBanner;
diff --git a/src/components/Modal.js b/src/components/Modal.tsx
similarity index 53%
rename from src/components/Modal.js
rename to src/components/Modal.tsx
index 10b6ae89..e7b8950e 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.tsx
@@ -1,13 +1,39 @@
 import { useModal } from '@/context/EmergencyProvider';
+import { MouseEvent, FC, ReactNode } from 'react';
 
-export const Modal = ({ children, maxWidth = 'max-w-2xl', allowClose = true }) => {
-  const { showModal, toggleModal } = useModal();
+type TailwindMaxWidth =
+  | 'max-w-xs'
+  | 'max-w-sm'
+  | 'max-w-md'
+  | 'max-w-lg'
+  | 'max-w-xl'
+  | 'max-w-2xl'
+  | 'max-w-3xl'
+  | 'max-w-4xl'
+  | 'max-w-5xl'
+  | 'max-w-6xl'
+  | 'max-w-7xl'
+  | 'max-w-full'
+  | 'max-w-screen-sm'
+  | 'max-w-screen-md'
+  | 'max-w-screen-lg'
+  | 'max-w-screen-xl'
+  | 'max-w-screen-2xl';
 
-  if (!showModal) return null;
+type ModalProps = {
+  id: string;
+  children: ReactNode;
+  maxWidth?: TailwindMaxWidth;
+  allowClose?: boolean;
+};
+
+const Modal: FC<ModalProps> = ({ id, children, maxWidth = 'max-w-2xl', allowClose = true }) => {
+  const { isModalOpen, toggleModal } = useModal();
+  if (!isModalOpen[id]) return null;
 
-  const handleBackdropClick = (e) => {
+  const handleBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
     if (allowClose && e.target === e.currentTarget) {
-      toggleModal();
+      toggleModal(id);
     }
   };
 
@@ -19,7 +45,7 @@ export const Modal = ({ children, maxWidth = 'max-w-2xl', allowClose = true }) =
       <div className={`relative bg-white rounded-lg shadow-xl ${maxWidth} w-full m-4`}>
         {allowClose && (
           <button
-            onClick={() => toggleModal()}
+            onClick={() => toggleModal(id)}
             className="absolute top-1 right-1 text-gray-400 hover:text-gray-500 z-10 focus:outline-none"
           >
             <span className="sr-only">Close</span>
diff --git a/src/components/auth/PhoneNumberDialog.js b/src/components/auth/PhoneNumberDialog.js
index 535117c2..94da5dee 100644
--- a/src/components/auth/PhoneNumberDialog.js
+++ b/src/components/auth/PhoneNumberDialog.js
@@ -9,6 +9,8 @@ import { PhoneInput } from '@/components/PhoneInput';
 import { formatPhoneNumber } from '@/helpers/utils';
 import { isValidPhone } from '@/helpers/utils';
 
+const MODAL_NAME = 'phone-number';
+
 const PhoneForm = ({ onSubmit }) => {
   const [phoneNumber, setPhoneNumber] = useState('');
 
@@ -79,7 +81,7 @@ const PhoneNumberDialog = () => {
       if (metadata.telefono) {
         return;
       }
-      toggleModal();
+      toggleModal(MODAL_NAME);
     };
 
     fetchNumber();
@@ -103,11 +105,11 @@ const PhoneNumberDialog = () => {
       throw new Error('Error a la hora de actualizar el usuario con un numero de telefono');
     }
 
-    toggleModal();
+    toggleModal(MODAL_NAME);
   }, []);
 
   return (
-    <Modal maxWidth={'max-w-md'} allowClose={false}>
+    <Modal id={MODAL_NAME} maxWidth={'max-w-md'} allowClose={false}>
       <PhoneForm onSubmit={handleSubmit} />
     </Modal>
   );
diff --git a/src/components/layout/EmergencyLayout.tsx b/src/components/layout/EmergencyLayout.tsx
index e23a0bd8..ba590ea3 100644
--- a/src/components/layout/EmergencyLayout.tsx
+++ b/src/components/layout/EmergencyLayout.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, PropsWithChildren } from 'react';
 // @ts-ignore
 import Sidebar from './Sidebar';
 import Footer from './Footer';
+import CookieBanner from '@/components/CookieBanner/CookieBanner';
 
 export default function EmergencyLayout({ children }: PropsWithChildren) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true); // Por defecto abierto
@@ -31,6 +32,7 @@ export default function EmergencyLayout({ children }: PropsWithChildren) {
           <div className="max-w-7xl w-full">{children}</div>
         </main>
         <Footer />
+        <CookieBanner />
       </div>
     </div>
   );
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 2f123efb..9b28e071 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -6,9 +6,10 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 import { Marker } from 'react-map-gl/maplibre';
 import { MapPin } from 'lucide-react';
 import { useModal } from '@/context/EmergencyProvider';
-// @ts-ignore
 import Modal from '@/components/Modal';
 
+const MODAL_NAME = `map-marker`;
+
 const urgencyToColor = {
   alta: 'text-red-500',
   media: 'text-amber-500',
@@ -34,7 +35,7 @@ const DEFAULT_ZOOM = 12;
 const Map: FC<MapProps> = ({ markers = [] }) => {
   const [selectedMarker, setSelectedMarker] = useState<PinMapa | null>(null);
 
-  const { showModal, toggleModal } = useModal();
+  const { toggleModal } = useModal();
 
   console.log(selectedMarker);
   return (
@@ -50,11 +51,11 @@ const Map: FC<MapProps> = ({ markers = [] }) => {
       {markers.map((m) => {
         return (
           <Marker
-            key={m.id}
+            key={`marker-${m.id}-${m.latitude}-${m.longitude}-${m.urgency}`}
             longitude={m.longitude}
             latitude={m.latitude}
             onClick={() => {
-              toggleModal(true);
+              toggleModal(MODAL_NAME, true);
               setSelectedMarker(m);
             }}
             anchor="bottom"
@@ -63,7 +64,7 @@ const Map: FC<MapProps> = ({ markers = [] }) => {
           </Marker>
         );
       })}
-      {selectedMarker && showModal && <Modal>{selectedMarker.popup}</Modal>}
+      {selectedMarker && <Modal id={MODAL_NAME}>{selectedMarker.popup}</Modal>}
     </ReactMap>
   );
 };
diff --git a/src/context/EmergencyProvider.tsx b/src/context/EmergencyProvider.tsx
index fcd02baa..76a109fe 100644
--- a/src/context/EmergencyProvider.tsx
+++ b/src/context/EmergencyProvider.tsx
@@ -1,24 +1,32 @@
 'use client';
 
-import React, { createContext, ReactNode, useContext, useState } from 'react';
+import React, { createContext, FC, ReactNode, useContext, useState } from 'react';
 
-const EmergencyContext = createContext<EmergencyCtx>({ showModal: false, toggleModal: () => {} });
-
-type EmergencyCtx = {
-  showModal: boolean;
-  toggleModal: (force: boolean) => void;
+type EmergencyContextType = {
+  isModalOpen: { [key: string]: boolean };
+  toggleModal: (id: string, force?: boolean) => void;
 };
 
-type SessionProviderProps = {
+const EmergencyContext = createContext<EmergencyContextType>({
+  isModalOpen: {},
+  toggleModal: () => {},
+});
+
+type EmergencyProviderProps = {
   children: ReactNode;
 };
 
-export const EmergencyProvider: React.FC<SessionProviderProps> = ({ children }) => {
-  const [showModal, setShowModal] = useState(false);
+export const EmergencyProvider: FC<EmergencyProviderProps> = ({ children }) => {
+  const [isModalOpen, setIsModalOpen] = useState<{ [key: string]: boolean }>({});
 
-  const toggleModal = (force: boolean) => setShowModal((prev) => (force !== undefined ? force : !prev));
+  const toggleModal = (id: string, force?: boolean) => {
+    setIsModalOpen((prev) => ({
+      ...prev,
+      [id]: force !== undefined ? force : !prev[id],
+    }));
+  };
 
-  return <EmergencyContext.Provider value={{ showModal, toggleModal }}>{children}</EmergencyContext.Provider>;
+  return <EmergencyContext.Provider value={{ isModalOpen, toggleModal }}>{children}</EmergencyContext.Provider>;
 };
 
 export const useModal = () => {
diff --git a/src/helpers/constants.ts b/src/helpers/constants.ts
index 431ddc2f..d0eb3d6e 100644
--- a/src/helpers/constants.ts
+++ b/src/helpers/constants.ts
@@ -18,3 +18,5 @@ export const mapToIdAndLabel = (data: any) => {
     label: data[key],
   }));
 };
+
+export const COOKIE_CONSENT_KEY = 'ajudana_cookie_consent';

From 2e70a972637e21987791322f8fafea991c352d7b Mon Sep 17 00:00:00 2001
From: Martin Gerritsen <martin.gerritsen@gmail.com>
Date: Wed, 6 Nov 2024 23:56:03 +0100
Subject: [PATCH 2/3] More clear name on the cookie consent key

---
 src/components/CookieBanner/CookieBanner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CookieBanner/CookieBanner.tsx b/src/components/CookieBanner/CookieBanner.tsx
index b7f79932..edffe6be 100644
--- a/src/components/CookieBanner/CookieBanner.tsx
+++ b/src/components/CookieBanner/CookieBanner.tsx
@@ -8,7 +8,7 @@ import { usePathname } from 'next/navigation';
 
 const MODAL_NAME = 'cookie-banner';
 const POLICY_URL = '/politica-privacidad';
-const COOKIE_CONSENT_KEY = 'cookieConsentAccepted';
+const COOKIE_CONSENT_KEY = 'ajudadanaCookieConsentAccepted';
 
 const CookieBanner: FC = () => {
   const { toggleModal } = useModal();

From 078fd941c89976a40b42271e45c8254308f03607 Mon Sep 17 00:00:00 2001
From: Martin Gerritsen <martin.gerritsen@gmail.com>
Date: Thu, 7 Nov 2024 08:14:50 +0100
Subject: [PATCH 3/3] Removed Cookie key in constant

---
 src/components/CookieBanner/CookieBanner.tsx | 2 +-
 src/helpers/constants.ts                     | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/CookieBanner/CookieBanner.tsx b/src/components/CookieBanner/CookieBanner.tsx
index edffe6be..d99de933 100644
--- a/src/components/CookieBanner/CookieBanner.tsx
+++ b/src/components/CookieBanner/CookieBanner.tsx
@@ -8,7 +8,7 @@ import { usePathname } from 'next/navigation';
 
 const MODAL_NAME = 'cookie-banner';
 const POLICY_URL = '/politica-privacidad';
-const COOKIE_CONSENT_KEY = 'ajudadanaCookieConsentAccepted';
+const COOKIE_CONSENT_KEY = 'ajudaDanaCookieConsentAccepted';
 
 const CookieBanner: FC = () => {
   const { toggleModal } = useModal();
diff --git a/src/helpers/constants.ts b/src/helpers/constants.ts
index 5d9b87cf..f89eded4 100644
--- a/src/helpers/constants.ts
+++ b/src/helpers/constants.ts
@@ -20,5 +20,3 @@ export const mapToIdAndLabel = (data: any) => {
     label: data[key],
   }));
 };
-
-export const COOKIE_CONSENT_KEY = 'ajudana_cookie_consent';