refactor(campaign): split review and recipient boundaries

webui/src/features/campaigns/review/DeliveryJobDetailOverlay.tsx

@@ -0,0 +1,136 @@
+import { Button, Dialog, i18nMessage } from "@govoplan/core-webui";
+
+import { asArray, asRecord, formatDateTime, humanize } from "../utils/campaignView";
+import { formatAddressList } from "./reviewFormatters";
+
+export default function DeliveryJobDetailOverlay({
+  detail,
+  onClose
+}: {
+  detail: Record<string, unknown>;
+  onClose: () => void;
+}) {
+  const job = asRecord(detail.job);
+  const attempts = asRecord(detail.attempts);
+  const smtpAttempts = asArray(attempts.smtp).map(asRecord);
+  const imapAttempts = asArray(attempts.imap).map(asRecord);
+  const issues = asArray(job.issues).map(asRecord);
+
+  return (
+    <Dialog
+      open
+      title="i18n:govoplan-campaign.delivery_job_details.0d9c5b1f"
+      className="template-preview-modal"
+      onClose={onClose}
+      footer={
+        <Button variant="primary" onClick={onClose}>
+          i18n:govoplan-campaign.close.bbfa773e
+        </Button>
+      }
+    >
+      <dl className="detail-list">
+        <div>
+          <dt>i18n:govoplan-campaign.recipient.90343260</dt>
+          <dd>
+            {formatAddressList(asRecord(job.resolved_recipients).to) ||
+              String(job.recipient_email ?? "-")}
+          </dd>
+        </div>
+        <div>
+          <dt>i18n:govoplan-campaign.subject.8d183dbd</dt>
+          <dd>{String(job.subject ?? "-")}</dd>
+        </div>
+        <div>
+          <dt>i18n:govoplan-campaign.smtp_status.6211cb2b</dt>
+          <dd>{humanize(String(job.send_status ?? "-"))}</dd>
+        </div>
+        <div>
+          <dt>i18n:govoplan-campaign.imap_status.dbc2e430</dt>
+          <dd>{humanize(String(job.imap_status ?? "-"))}</dd>
+        </div>
+        {job.last_error ? (
+          <div>
+            <dt>i18n:govoplan-campaign.last_error.5e4df866</dt>
+            <dd>{String(job.last_error)}</dd>
+          </div>
+        ) : null}
+      </dl>
+      {issues.length > 0 && (
+        <AttemptList
+          title="i18n:govoplan-campaign.message_issues.9092a7db"
+          rows={issues}
+        />
+      )}
+      <AttemptList
+        title="i18n:govoplan-campaign.smtp_attempts.eb0a9ca6"
+        rows={smtpAttempts}
+        emptyText="i18n:govoplan-campaign.no_smtp_attempts_were_recorded.ff5b4c5d"
+      />
+      <AttemptList
+        title="i18n:govoplan-campaign.imap_attempts.e815f0c2"
+        rows={imapAttempts}
+        emptyText="i18n:govoplan-campaign.no_imap_append_attempts_were_recorded_if_status_.12279f7e"
+      />
+    </Dialog>
+  );
+}
+
+function AttemptList({
+  title,
+  rows,
+  emptyText = "i18n:govoplan-campaign.no_rows.fdbeab75"
+}: {
+  title: string;
+  rows: Record<string, unknown>[];
+  emptyText?: string;
+}) {
+  return (
+    <section className="review-flow-data-section">
+      <h3>{title}</h3>
+      {rows.length === 0 ? (
+        <p className="muted small-note">{emptyText}</p>
+      ) : (
+        <dl className="detail-list">
+          {rows.map((row, index) => (
+            <div key={`${String(row.id ?? row.code ?? index)}:${index}`}>
+              <dt>
+                {String(
+                  row.status ??
+                    row.severity ??
+                    row.code ??
+                    i18nMessage("i18n:govoplan-campaign.value.44b8c76f", {
+                      value0: index + 1
+                    })
+                )}
+              </dt>
+              <dd>
+                <strong>
+                  {String(
+                    row.message ??
+                      row.error_message ??
+                      row.smtp_response ??
+                      row.folder ??
+                      row.path ??
+                      "-"
+                  )}
+                </strong>
+                {row.started_at || row.created_at ? (
+                  <span className="muted">
+                    {" · "}
+                    {formatDateTime(String(row.started_at ?? row.created_at))}
+                  </span>
+                ) : null}
+                {row.finished_at || row.updated_at ? (
+                  <span className="muted">
+                    {" → "}
+                    {formatDateTime(String(row.finished_at ?? row.updated_at))}
+                  </span>
+                ) : null}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      )}
+    </section>
+  );
+}