Merge branch 'main' into feat/address-map

src/app/auth/page.js

@@ -6,11 +6,11 @@ import { authService } from '@/lib/service';
 
 export default function AuthPage() {
   const router = useRouter();
-
+  
   useEffect(() => {
     async function fetchSession() {
       const { data: session } = await authService.getSessionUser();
-      if (session.user) {
+      if (session.user) {       
         router.push('/');
       }
     }

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,12 +174,15 @@ 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"
             >
               <HeartHandshake className="w-5 h-5" />
-              Ofrecer ayuda {filtroData.pueblo === 'todos' ? '' : ' a ' + towns[filtroData.pueblo - 1]?.name}
+              Ofrecer ayuda{' '}
+              {filtroData.pueblo === 'todos'
+                ? ''
+                : ' a ' + towns.find((town) => town.id === Number(filtroData.pueblo))?.name}
             </button>
           </div>
         ) : (
@@ -187,11 +192,14 @@ 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.find((town) => town.id === Number(filtroData.pueblo))?.name}
+          onClose={closeModal}
+          isModal={true}
+        />
+      </Modal>
     </>
   );
 }

src/app/voluntometro/page.js

@@ -1,7 +1,5 @@
 import { supabase } from '@/lib/supabase/client';
 import { HeartHandshake, Search, Thermometer } from 'lucide-react';
-import OfferHelp from '@/components/OfferHelp';
-import Modal from '@/components/Modal';
 import TownCardInfo from '@/components/TownCardInfo';
 
 const getCount = async () => {
@@ -39,7 +37,6 @@ const getCount = async () => {
     ofertas: ofreceCount || 0,
   };
 };
-
 const getVolunteers = async () => {
   const today = new Date().toISOString().split('T')[0];
 
@@ -87,7 +84,7 @@ const getVolunteers = async () => {
 export default async function Voluntometro() {
   const pueblos = await getVolunteers();
   const count = await getCount();
-  console.log(pueblos.ofertasButton);
+
   const getFechaHoy = () => {
     const fecha = new Date();
     return fecha.toLocaleDateString('es-ES', {
@@ -96,6 +93,7 @@ export default async function Voluntometro() {
       year: 'numeric',
     });
   };
+
   const getTopAndBottomPueblos = () => {
     const sortedPueblos = [...pueblos].sort((a, b) => {
       const volunteersDiffA = a.count - a.needHelp;

src/components/AsignarSolicitudButton.tsx

@@ -8,14 +8,19 @@ import { Spinner } from '@/components/Spinner';
 import Link from 'next/link';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
+import Modal from '@/components/Modal';
+import { useModal } from '@/context/EmergencyProvider';
 
 type AsignarSolicitudButtonProps = {
   helpRequest: HelpRequestData;
 };
 
 export default function AsignarSolicitudButton({ helpRequest }: AsignarSolicitudButtonProps) {
+  const { toggleModal } = useModal();
   const session = useSession();
 
+  const MODAL_NAME = `Solicitud-${helpRequest.id}`;
+
   const {
     data: assignments,
     isLoading,
@@ -60,10 +65,15 @@ export default function AsignarSolicitudButton({ helpRequest }: AsignarSolicitud
     },
   });
 
-  async function handleSubmit(e: MouseEvent) {
+  async function handleAcceptanceSubmit(e: MouseEvent) {
     e.preventDefault();
+    toggleModal(MODAL_NAME, false);
     assignMutation.mutate();
   }
+  async function handleSubmit(e: MouseEvent) {
+    e.preventDefault();
+    toggleModal(MODAL_NAME, true);
+  }
   async function handleCancel(e: MouseEvent) {
     e.preventDefault();
     unassignMutation.mutate();
@@ -105,6 +115,26 @@ export default function AsignarSolicitudButton({ helpRequest }: AsignarSolicitud
           Quiero ayudar
         </button>
       )}
+      <Modal id={MODAL_NAME} allowClose={false}>
+        <div className="bg-yellow-50 p-4 rounded">
+          <h2 className="text-yellow-800 font-semibold mb-4">Quiero ayudar</h2>
+          <p className="text-yellow-800">¿Te comprometes a atender esta solicitud?</p>
+          <div className="mt-4 flex justify-end space-x-4">
+            <button
+              onClick={() => toggleModal(MODAL_NAME, false)}
+              className="flex-1 bg-red-500 text-white py-3 px-4 rounded-lg font-semibold"
+            >
+              Rechazar
+            </button>
+            <button
+              onClick={handleAcceptanceSubmit}
+              className="flex-1 bg-green-500 text-white py-3 px-4 rounded-lg font-semibold"
+            >
+              Aceptar
+            </button>
+          </div>
+        </div>
+      </Modal>
     </>
   );
 }

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 = 'ajudaDanaCookieConsentAccepted';
+
+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;

src/components/Modal.js → 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>

src/components/OfferCard.js

@@ -59,7 +59,8 @@ export default function OfferCard({
             <div className="flex items-start gap-2">
               <MapPinned className="h-4 w-4 text-gray-500 flex-shrink-0 mt-1" />
               <span className="break-words">
-                <span className="font-semibold">Pueblo:</span> {towns[caso.town_id - 1]?.name || ''}
+                <span className="font-semibold">Pueblo:</span>{' '}
+                {towns.find((town) => town.id === caso.town_id)?.name || ''}
               </span>
             </div>
           )}

src/components/PhoneInfo.js

@@ -21,7 +21,11 @@ export default function PhoneInfo({ caseInfo }) {
   return (
     <span className="break-words">
       <span className="font-semibold">Contacto:</span>{' '}
-      {!!userAssignment ? caseInfo.contact_info : 'Ayuda a esta persona para ver sus datos de contacto'}
+      {session && session.user
+        ? !!userAssignment
+          ? caseInfo.contact_info
+          : 'Dale al botón "Quiero ayudar" para ver sus datos de contacto.'
+        : 'Inicia sesion para ver este dato'}
     </span>
   );
 }