feat(crm-status): Edit crm status with moderator role

src/components/ChangeCRMStatus.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { supabase } from '@/lib/supabase/client';
+import { useState } from 'react';
+import { CRMStatus, CrmStatusActive, CrmStatusFinished } from '@/helpers/constants';
+
+type ChangeCRMStatusRequestButtonProps = {
+  helpRequestId: number;
+  onStatusUpdate: (status: string) => void;
+  currentStatus: string | null;
+  currentCrmStatus: string | null;
+};
+
+export default function ChangeCRMStatus({
+  helpRequestId,
+  onStatusUpdate,
+  currentStatus,
+  currentCrmStatus,
+}: ChangeCRMStatusRequestButtonProps) {
+  const [crmStatus, setCrmStatus] = useState<string>(currentCrmStatus || CrmStatusActive);
+  const [error, setError] = useState({});
+
+  const updateStatusRequest = async (newCrmStatus: string) => {
+    var status = currentStatus || 'active';
+    if (newCrmStatus === CrmStatusFinished) {
+      status = 'finished';
+    } else if (newCrmStatus !== CrmStatusFinished && status == 'finished') {
+      status = 'active';
+    }
+    const { data, error } = await supabase
+      .from('help_requests')
+      .update({ status, crm_status: newCrmStatus })
+      .eq('id', helpRequestId)
+      .select();
+
+    onStatusUpdate(status);
+
+    return { data, error };
+  };
+
+  async function handleUpdateSubmit(newStatus: string) {
+    const { data, error } = await updateStatusRequest(newStatus);
+    if (error) {
+      setError(error);
+      return;
+    }
+  }
+
+  if (error === undefined) return <></>;
+
+  return (
+    <>
+      <select
+        name="urgencia"
+        id="urgencia"
+        value={crmStatus}
+        onChange={(e) => {
+          setCrmStatus(e.target.value);
+          handleUpdateSubmit(e.target.value);
+        }}
+        className="w-full text-center rounded-xl px-4 py-2 font-semibold text-white sm:w-auto transition-all bg-purple-500"
+      >
+        {Object.entries(CRMStatus).map(([key, value]) => (
+          <option key={key} value={key}>
+            {value}
+          </option>
+        ))}
+      </select>
+    </>
+  );
+}

src/components/SolicitudCard.tsx

@@ -13,6 +13,8 @@ import { useRole } from '@/context/RoleProvider';
 import { useState } from 'react';
 import ChangeUrgencyHelpRequest from './ChangeUrgencyHelpRequest';
 import ChangeStatusButton from './ChangeStatusButton';
+import ChangeCRMStatus from './ChangeCRMStatus';
+import { UserRoles } from '@/helpers/constants';
 
 type SolicitudCardProps = {
   caso: HelpRequestData;
@@ -32,7 +34,8 @@ export default function SolicitudCard({
   const { getTownById } = useTowns();
   const additionalInfo = caso.additional_info as HelpRequestAdditionalInfo;
   const special_situations = 'special_situations' in additionalInfo ? additionalInfo.special_situations : undefined;
-  const isAdmin = role === 'admin';
+  const isAdmin = role === UserRoles.admin;
+  const isCrmUser = role === UserRoles.moderator;
   const [deleted, setDeleted] = useState(false);
   const isMyRequest = session.user?.id && session.user.id === caso.user_id;
   const [updateUrgency, setUpdateUrgency] = useState(caso.urgency);
@@ -194,14 +197,22 @@ export default function SolicitudCard({
                 Ver solicitud
               </Link>
             )}
-            <AsignarSolicitudButton helpRequest={caso} />
+            {!isCrmUser && <AsignarSolicitudButton helpRequest={caso} />}
             {isAdmin && (
               <ChangeUrgencyHelpRequest
                 onUpdate={setUpdateUrgency}
                 currentUrgency={updateUrgency!}
                 helpRequestId={caso.id}
               />
             )}
+            {isCrmUser && (
+              <ChangeCRMStatus
+                onStatusUpdate={setUpdateStatus}
+                currentStatus={updateStatus}
+                currentCrmStatus={caso.crm_status}
+                helpRequestId={caso.id}
+              />
+            )}
             {isAdmin && <DeleteHelpRequest helpRequestId={caso.id} onDelete={() => setDeleted(true)} />}
           </div>
         </div>

src/helpers/constants.ts

@@ -24,3 +24,22 @@ export const tiposAyudaArray: TipoAyudaOption[] = Object.entries(tiposAyudaOptio
   id: id as TipoAyudaId,
   label,
 }));
+
+export const CrmStatusActive = 'active';
+export const CrmStatusFollowUp = 'followup';
+export const CrmStatusAssigned = 'assigned';
+export const CrmStatusProgress = 'progress';
+export const CrmStatusFinished = 'finished';
+
+export const CRMStatus = {
+  [CrmStatusActive]: 'Activo',
+  [CrmStatusFollowUp]: 'Volver a llamar',
+  [CrmStatusAssigned]: 'Asignado',
+  [CrmStatusProgress]: 'En Progreso',
+  [CrmStatusFinished]: 'Hecho',
+};
+
+export const UserRoles = {
+  admin: 'admin',
+  moderator: 'moderator',
+};

src/types/database.ts

@@ -190,6 +190,7 @@ export type Database = {
           town_id: number | null;
           type: string | null;
           urgency: string | null;
+          crm_status: string | null;
           user_id: string | null;
         };
         Insert: {