DataScope26/WEB

1import { useState } from "react";2import { useAuth } from "../context/AuthContext.jsx";3import { useInvites } from "../hooks/useInvites.jsx";4import InviteCard from "../components/InviteCard.jsx";5import InviteStats from "../components/InviteStats.jsx";6import InviteTabs from "../components/InviteTabs.jsx";7import CreateInvitePopup from "../components/CreateInvitePopup.jsx";8import ButtonPrimary from "../components/ButtonPrimary.jsx";9import "./Invitaciones.css";10 11export default function Invitaciones() {12  const { selectedCompany } = useAuth();13  const companyId = selectedCompany?.id ?? selectedCompany?.companyId ?? localStorage.getItem("selectedCompanyId");14 15  // Asegúrate de que tu hook useInvites actualice su función deleteInvite para solo recibir el token16  const { invites, loading, error, sendInvite, deleteInvite } = useInvites(companyId);17  const [filter, setFilter] = useState("all");18  const [showInvitePopup, setShowInvitePopup] = useState(false);19  const [deletingInviteTokens, setDeletingInviteTokens] = useState(new Set());20 21  const counts = {22    accepted: invites.filter((i) => i.status === "accepted" || i.estado === "aceptada").length,23    pending: invites.filter((i) => i.status === "pending" || i.estado === "pendiente").length,24    declined: invites.filter((i) => i.status === "declined" || i.estado === "rechazada").length,25  };26 27  const filtered = filter === "all" ? invites : invites.filter((i) => (i.type || "invitation") === filter);28  const companyName = selectedCompany?.name || "empresa";29 30  const token = sessionStorage.getItem("token") || localStorage.getItem("token") || getCookie("datascope_token");31 32  // CAMBIO CLAVE: Revocar usando el token de invitación33  const handleDelete = async (inviteToken) => {34    if (!inviteToken || deletingInviteTokens.has(inviteToken)) return;35 36    setDeletingInviteTokens((prev) => {37      const next = new Set(prev);38      next.add(inviteToken);39      return next;40    });41 42    try {43      await deleteInvite(inviteToken);44    } catch (err) {45      console.error("Error al revocar invitación:", err);46    } finally {47      setDeletingInviteTokens((prev) => {48        const next = new Set(prev);49        next.delete(inviteToken);50        return next;51      });52    }53  };54 55  return (56    <div className="invites">57      <div className="invites__header">58        <div>59          <p className="invites__eyebrow">Gestión de equipo</p>60          <h1 className="invites__title">Invitaciones Enviadas</h1>61          <p className="invites__sub">62            {companyName ? `Gestioná las invitaciones de ${companyName}.` : "Creá invitaciones y seguí quién aceptó y quién sigue pendiente."}63          </p>64        </div>65 66        <div className="invites__header-bottom">67          <ButtonPrimary68            className="header-button"69            onClick={() => setShowInvitePopup(true)}70            disabled={!companyId}71          >72            Crear invitación73          </ButtonPrimary>74          <InviteStats accepted={counts.accepted} pending={counts.pending} declined={counts.declined} />75        </div>76      </div>77 78      {!companyId && (79        <div className="invites__empty">80          <p>Seleccioná una empresa para gestionar sus invitaciones.</p>81        </div>82      )}83 84      {showInvitePopup && companyId && (85        <CreateInvitePopup86          onClose={() => setShowInvitePopup(false)}87          onSubmit={sendInvite}88        />89      )}90 91      {companyId && (92        <div className="invites__grid">93          <div className="invites__card invites__list-card">94            <InviteTabs activeFilter={filter} onChange={setFilter} />95 96            {loading ? (97              <div className="invites__empty"><p>Cargando...</p></div>98            ) : error ? (99              <div className="invites__empty"><p>Ocurrió un error al cargar las invitaciones.</p></div>100            ) : filtered.length === 0 ? (101              <div className="invites__empty"><p>No hay invitaciones en esta categoría.</p></div>102            ) : (103              <div className="invites__list">104                {filtered.map((inv) => (105                  <InviteCard106                    key={inv.id || inv.invite_token}107                    name={inv.user_name || inv.name || "Usuario"}108                    email={inv.user_email || inv.email || "Sin email"}109                    company={inv.company_name || companyName}110                    area={inv.area || "Sin área"}111                    status={inv.status || inv.estado}112                    isDeleting={deletingInviteTokens.has(inv.invite_token)}113                    // CAMBIO CLAVE: Pasamos el token_invitacion a la función114                    onDelete={() => handleDelete(inv.invite_token)}115                  />116                ))}117              </div>118            )}119          </div>120        </div>121      )}122    </div>123  );124}