76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import { useRef } from "preact/hooks";
|
|
import { useFocusTrap } from "../utils/useFocusTrap.ts";
|
|
|
|
export type ConfirmAction = "approve" | "reject";
|
|
|
|
interface LeaseApprovalConfirmDialogProps {
|
|
open: boolean;
|
|
action: ConfirmAction;
|
|
leaseId: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const MESSAGES: Record<ConfirmAction, string> = {
|
|
approve:
|
|
"Are you sure you want to approve this lease? This will make the lease active and the tenant will be able to access the property.",
|
|
reject: "Are you sure you want to reject this lease request?",
|
|
};
|
|
|
|
const CONFIRM_LABELS: Record<ConfirmAction, string> = {
|
|
approve: "Approve",
|
|
reject: "Reject",
|
|
};
|
|
|
|
export default function LeaseApprovalConfirmDialog({
|
|
open,
|
|
action,
|
|
onConfirm,
|
|
onCancel,
|
|
}: LeaseApprovalConfirmDialogProps) {
|
|
const modalRef = useRef<HTMLDivElement>(null);
|
|
useFocusTrap(open, modalRef);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={modalRef}
|
|
class="theme-dialog-overlay"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="lease-confirm-title"
|
|
>
|
|
<div
|
|
class="theme-dialog-container flex flex-col gap-4"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h2 id="lease-confirm-title" class="theme-dialog-title">
|
|
{action === "approve" ? "Approve lease" : "Reject lease request"}
|
|
</h2>
|
|
<p class="text-sm opacity-90" style={{ color: "var(--theme-muted)" }}>
|
|
{MESSAGES[action]}
|
|
</p>
|
|
<div class="flex gap-3 justify-end mt-2">
|
|
<button
|
|
type="button"
|
|
class="theme-dialog-cancel-button"
|
|
onClick={onCancel}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class={action === "reject"
|
|
? "theme-dialog-submit-button theme-dialog-submit-button--danger"
|
|
: "theme-dialog-submit-button"}
|
|
onClick={onConfirm}
|
|
>
|
|
{CONFIRM_LABELS[action]}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|