Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 93x 71x 70x 104x | import { XIcon } from "lucide-react";
import { UserRole } from "shared-types/events/legacy-user";
import { getApprovingRole, userRoleMap } from "shared-utils";
import { CardWithTopBorder } from "@/components";
import { convertStateAbbrToFullName, stateAccessStatus } from "@/utils";
export type StateAccessProps = {
role: UserRole;
onClick?: () => void;
access: {
territory: string;
role: string;
status: string;
doneByName: string;
doneByEmail: string;
approverList?: { fullName: string; email: string }[];
};
};
export const StateAccessCard = ({ role, onClick, access }: StateAccessProps) => {
if (!access) return null;
const hideAprovers = role === "norole" && access.status !== "pending";
return (
<CardWithTopBorder key={`${access.territory}-${access.role}`}>
<div className="p-8 min-h-36">
<div className="flex justify-between">
<h3 className="text-xl font-bold">{convertStateAbbrToFullName(access.territory)}</h3>
{role === "statesubmitter" && (
<button
className="text-blue-700 disabled:text-gray-200"
disabled={!onClick}
data-testid="self-revoke"
title="Self Revoke Access"
onClick={onClick}
>
<XIcon size={30} />
</button>
)}
</div>
<p className="italic">{stateAccessStatus[access.status]}</p>
{!hideAprovers && (
<p className="block lg:mt-8 lg:mb-2">
<span className="font-semibold">
{userRoleMap[getApprovingRole(access.role)]}
{": "}
</span>
{access.approverList && access.approverList.length
? access.approverList.map((approver, index) => (
<a
className="text-blue-600"
href={`mailto:${approver.email}`}
key={`${approver.fullName}-${index}`}
>
{approver.fullName}
{index !== access.approverList.length - 1 && ", "}
</a>
))
: "N/A"}
</p>
)}
</div>
</CardWithTopBorder>
);
};
|