Migrate Committee interface patterns

webui/src/features/committee/CommitteeBallotDialog.tsx

@@ -1,9 +1,14 @@
 import { useEffect, useState } from "react";
 import {
   Button,
+  ConfirmDialog,
   Dialog,
+  DocumentationHelpLink,
   DismissibleAlert,
   FormField,
+  i18nMessage,
+  useUnsavedChanges,
+  useUnsavedDraftGuard,
   type ApiSettings
 } from "@govoplan/core-webui";
 import {
@@ -11,6 +16,10 @@ import {
   finalizeVotingBallot,
   type CommitteeRecord
 } from "../../api/committee";
+import {
+  COMMITTEE_FIELD_DOCUMENTATION,
+  COMMITTEE_INTERFACE_I18N
+} from "./interfacePatterns";
 
 
 export default function CommitteeBallotDialog({
@@ -31,6 +40,8 @@ export default function CommitteeBallotDialog({
   const [changeReason, setChangeReason] = useState("Imported verified ballot aggregate.");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
+  const [confirming, setConfirming] = useState(false);
+  const { requestDiscard } = useUnsavedChanges();
 
   useEffect(() => {
     if (!open) return;
@@ -38,9 +49,12 @@ export default function CommitteeBallotDialog({
     setApprovalId("");
     setChangeReason("Imported verified ballot aggregate.");
     setError("");
+    setConfirming(false);
   }, [open, record.object_id]);
 
-  async function finalize() {
+  const dirty = Boolean(providerBallotRef || approvalId || changeReason !== "Imported verified ballot aggregate.");
+
+  async function finalize(closeAfter = true): Promise<boolean> {
     setBusy(true);
     setError("");
     try {
@@ -52,31 +66,54 @@ export default function CommitteeBallotDialog({
           changeReason
         });
       onSaved(saved);
-      onClose();
+      if (closeAfter) onClose();
+      return true;
     } catch (reason) {
       setError(reason instanceof Error ? reason.message : "Ballot result could not be imported.");
+      return false;
     } finally {
       setBusy(false);
     }
   }
 
+  useUnsavedDraftGuard({
+    dirty: open && dirty,
+    onSave: () => finalize(false),
+    onDiscard: () => {
+      setProviderBallotRef("");
+      setApprovalId("");
+      setChangeReason("Imported verified ballot aggregate.");
+    },
+    title: "i18n:govoplan-committee.unsaved_title",
+    message: "i18n:govoplan-committee.unsaved_message"
+  });
+
+  function requestClose() {
+    if (busy) return;
+    if (dirty) requestDiscard(onClose);
+    else onClose();
+  }
+
   const providerId = String(record.attributes.provider_id ?? "");
   const votingBallotId = String(record.attributes.voting_ballot_id ?? "").trim();
+  const incomplete = (!votingBallotId && !providerBallotRef.trim()) || !approvalId.trim() || !changeReason.trim();
   return (
+    <>
     <Dialog
       open={open}
       title={votingBallotId ? "Finalize Voting ballot" : "Finalize provider ballot"}
-      onClose={onClose}
+      onClose={requestClose}
       closeDisabled={busy}
       portal
       className="committee-ballot-dialog"
       footer={
         <>
-          <Button disabled={busy} onClick={onClose}>Cancel</Button>
+          <Button disabled={busy} disabledReason={busy ? COMMITTEE_INTERFACE_I18N.busy : undefined} onClick={requestClose}>Cancel</Button>
           <Button
             variant="primary"
-            disabled={busy || (!votingBallotId && !providerBallotRef.trim()) || !approvalId.trim() || !changeReason.trim()}
-            onClick={() => void finalize()}
+            disabled={busy || incomplete}
+            disabledReason={busy ? COMMITTEE_INTERFACE_I18N.busy : incomplete ? COMMITTEE_INTERFACE_I18N.incomplete : undefined}
+            onClick={() => setConfirming(true)}
           >
             {busy ? "Importing" : "Finalize"}
           </Button>
@@ -84,22 +121,36 @@ export default function CommitteeBallotDialog({
       }
     >
       <div className="committee-record-form">
+        <div className="committee-dialog-help"><DocumentationHelpLink reference={COMMITTEE_FIELD_DOCUMENTATION} /></div>
         {error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
         <p className="committee-dialog-note">
           {votingBallotId
             ? <>Voting ballot <strong>{votingBallotId}</strong> will be closed and its aggregate result recorded in the Committee minutes.</>
             : <>Provider <strong>{providerId}</strong> returns only the verified aggregate result, receipt hash and evidence.</>}
         </p>
-        {!votingBallotId ? <FormField label="Provider ballot reference">
+        {!votingBallotId ? <FormField label="Provider ballot reference" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
           <input value={providerBallotRef} disabled={busy} onChange={(event) => setProviderBallotRef(event.target.value)} />
         </FormField> : null}
-        <FormField label="Approval ID">
+        <FormField label="Approval ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
           <input value={approvalId} disabled={busy} onChange={(event) => setApprovalId(event.target.value)} />
         </FormField>
-        <FormField label="Change reason">
+        <FormField label="Change reason" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
           <input value={changeReason} maxLength={1000} disabled={busy} onChange={(event) => setChangeReason(event.target.value)} />
         </FormField>
       </div>
     </Dialog>
+    <ConfirmDialog
+      open={confirming}
+      title="i18n:govoplan-committee.finalize_title"
+      message={i18nMessage("i18n:govoplan-committee.confirm_ballot_finalization", { title: record.title })}
+      confirmLabel="Finalize"
+      busy={busy}
+      onConfirm={() => {
+        setConfirming(false);
+        void finalize();
+      }}
+      onCancel={() => setConfirming(false)}
+    />
+    </>
   );
 }