feat(notes): Enable notes edition to moderators

src/components/CRMNotes.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { supabase } from '@/lib/supabase/client';
+import { ChangeEvent, MouseEvent, useCallback, useState } from 'react';
+import Modal from '@/components/Modal';
+import { useModal } from '@/context/ModalProvider';
+import { LimitedTextarea } from '@/components/input/LimitedTextarea';
+
+type CRMNotesButtonProps = {
+  helpRequestId: number;
+  currentNotes: string | null;
+};
+
+export default function CRMNotes({ helpRequestId, currentNotes }: CRMNotesButtonProps) {
+  const { toggleModal } = useModal();
+  const [notes, setNotes] = useState<string>(currentNotes || '');
+  const [newNotes, setNewNotes] = useState<string>(currentNotes || '');
+  const [error, setError] = useState({});
+
+  const MODAL_NAME = `Actualizar-Notas-${helpRequestId}`;
+
+  const updateNotesRequest = async (newNotes: string) => {
+    const { data, error } = await supabase
+      .from('help_requests')
+      .update({ notes: newNotes })
+      .eq('id', helpRequestId)
+      .select();
+
+    return { data, error };
+  };
+
+  const handleSubmit = useCallback(
+    async (e: MouseEvent) => {
+      e.preventDefault();
+      const { data, error } = await updateNotesRequest(newNotes);
+      if (error) {
+        setError(error);
+        return;
+      }
+      toggleModal(MODAL_NAME, false);
+      setNotes(newNotes);
+    },
+    [newNotes, setNotes, toggleModal],
+  );
+
+  async function handleOpenModal(e: MouseEvent) {
+    e.preventDefault();
+    toggleModal(MODAL_NAME, true);
+  }
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { value } = e.target;
+    setNewNotes(value);
+  };
+
+  if (error === undefined) return <></>;
+
+  return (
+    <>
+      <button
+        onClick={handleOpenModal}
+        className="w-full text-center rounded-xl px-4 py-2 font-semibold text-white sm:w-auto transition-all bg-lime-500 hover:bg-lime-600"
+      >
+        Notas
+      </button>
+      <Modal id={MODAL_NAME} allowClose={false}>
+        <div className="bg-white p-4 rounded">
+          <LimitedTextarea
+            name="notas"
+            value={newNotes}
+            onChange={handleChange}
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+            rows={4}
+            placeholder="Puedes añadir las notas necesarias para hacer seguimiento"
+            maxLength={5000}
+          />
+          <div className="mt-4 flex justify-end space-x-4">
+            <button
+              onClick={() => {
+                toggleModal(MODAL_NAME, false);
+                setNewNotes(notes);
+              }}
+              className="flex-1 bg-gray-500 text-white py-3 px-4 rounded-lg font-semibold"
+            >
+              Cancelar
+            </button>
+            <button
+              onClick={handleSubmit}
+              className="flex-1 bg-green-500 text-white py-3 px-4 rounded-lg font-semibold"
+            >
+              Guardar
+            </button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}

src/components/SolicitudCard.tsx

@@ -15,6 +15,7 @@ import ChangeUrgencyHelpRequest from './ChangeUrgencyHelpRequest';
 import ChangeStatusButton from './ChangeStatusButton';
 import ChangeCRMStatus from './ChangeCRMStatus';
 import { UserRoles } from '@/helpers/constants';
+import CRMNotes from '@/components/CRMNotes';
 
 type SolicitudCardProps = {
   caso: HelpRequestData;
@@ -205,14 +206,15 @@ export default function SolicitudCard({
                 helpRequestId={caso.id}
               />
             )}
-            {isCrmUser && (
+            {(isCrmUser || isAdmin) && (
               <ChangeCRMStatus
                 onStatusUpdate={setUpdateStatus}
                 currentStatus={updateStatus}
                 currentCrmStatus={caso.crm_status}
                 helpRequestId={caso.id}
               />
             )}
+            {(isCrmUser || isAdmin) && <CRMNotes helpRequestId={caso.id} currentNotes={caso.notes} />}
             {isAdmin && <DeleteHelpRequest helpRequestId={caso.id} onDelete={() => setDeleted(true)} />}
           </div>
         </div>

src/helpers/constants.ts

@@ -31,8 +31,8 @@ export const tiposAyudaArray: TipoAyudaOption[] = Object.entries(tiposAyudaOptio
 }));
 
 export const CrmStatusActive = 'active';
-export const CrmStatusFollowUp = 'followup';
-export const CrmStatusAssigned = 'assigned';
+export const CrmStatusFollowUp = 'volver a llamar';
+export const CrmStatusAssigned = 'asignado';
 export const CrmStatusProgress = 'progress';
 export const CrmStatusFinished = 'finished';