@ixo/editor 6.32.1 → 6.34.0

package/dist/XeroPaymentCreateFlowDetail-CF35MVIM.js

@@ -0,0 +1,573 @@
+import {
+  parseXeroPaymentCreateInputs
+} from "./chunk-RWUZOB62.js";
+import {
+  CollapsibleSection
+} from "./chunk-CGFAICUE.js";
+import {
+  useXeroWorkItems
+} from "./chunk-TMONHFE3.js";
+import {
+  ListItemContainer
+} from "./chunk-EYKZIZ5J.js";
+import "./chunk-YN4CEKCF.js";
+import {
+  DataInput
+} from "./chunk-4PONO4US.js";
+import "./chunk-XPBKU3JX.js";
+import "./chunk-4NAFQF6V.js";
+import {
+  useRunRuntimeReader
+} from "./chunk-FFYZXA75.js";
+import "./chunk-NZ7AXA7B.js";
+import {
+  FLOW_CONNECTION_BINDINGS_MAP_KEY,
+  markXeroWorkApprovedForEditor,
+  markXeroWorkCompletedForEditor,
+  markXeroWorkFailedForEditor,
+  readFlowXeroBinding,
+  updateXeroWorkReviewPayloadForEditor
+} from "./chunk-F4PTFXZH.js";
+import "./chunk-IH4T7V4C.js";
+import "./chunk-PYNDJDWZ.js";
+import "./chunk-NIXT2SBH.js";
+import "./chunk-JIDTNKKL.js";
+import {
+  resolveReferences
+} from "./chunk-JVROGQ7Q.js";
+import "./chunk-IIIZZ4E4.js";
+import "./chunk-HT6L7A5M.js";
+import "./chunk-N3ORMGAI.js";
+import "./chunk-NCSGIRRQ.js";
+import {
+  DismissibleAlert
+} from "./chunk-IFWKRCFF.js";
+import {
+  actionAlertStyles
+} from "./chunk-6GKJR52N.js";
+import "./chunk-EBFFDDAS.js";
+import {
+  useBlocknoteHandlers,
+  useTranslate
+} from "./chunk-4DGCCXD6.js";
+import "./chunk-7W7UUUIE.js";
+import "./chunk-TS2LNBF2.js";
+
+// src/mantine/blocks/action/actionTypes/xero/paymentCreate/XeroPaymentCreateFlowDetail.tsx
+import React2, { useCallback, useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
+import { ActionIcon, Badge, Button, Group as Group2, Stack as Stack2, Text as Text2 } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+
+// src/mantine/blocks/action/actionTypes/xero/_shared/useFlowXeroBinding.ts
+import { useEffect, useState } from "react";
+function useFlowXeroBinding(editor) {
+  const yDoc = editor?._yDoc;
+  const [binding, setBinding] = useState(() => readFlowXeroBinding(yDoc));
+  useEffect(() => {
+    if (!yDoc) {
+      setBinding(void 0);
+      return;
+    }
+    const map = yDoc.getMap(FLOW_CONNECTION_BINDINGS_MAP_KEY);
+    const sync = () => setBinding(readFlowXeroBinding(yDoc));
+    map.observeDeep(sync);
+    sync();
+    return () => map.unobserveDeep(sync);
+  }, [yDoc]);
+  return binding;
+}
+
+// src/mantine/blocks/action/actionTypes/xero/_shared/workItemReview.tsx
+import React, { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+function timeAgo(input) {
+  if (!input) return "";
+  try {
+    const date = new Date(input);
+    const diffMs = Date.now() - date.getTime();
+    const diffMins = Math.floor(diffMs / 6e4);
+    if (diffMins < 1) return "just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 30) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
+    const diffMonths = Math.floor(diffDays / 30);
+    return `${diffMonths} month${diffMonths > 1 ? "s" : ""} ago`;
+  } catch {
+    return String(input);
+  }
+}
+function truncateId(value, start = 8, end = 6) {
+  if (!value) return "";
+  if (value.length <= start + end + 3) return value;
+  return `${value.slice(0, start)}...${value.slice(-end)}`;
+}
+function formatMoney(amount, currency) {
+  const n = Number(amount);
+  const value = Number.isFinite(n) ? n.toFixed(2) : String(amount || "0.00");
+  const code = String(currency || "").trim();
+  return code ? `${value} ${code}` : value;
+}
+function formatDay(dateString) {
+  if (!dateString) return "";
+  try {
+    const [y, m, d] = dateString.slice(0, 10).split("-").map(Number);
+    if (!y || !m || !d) return dateString;
+    return new Date(y, m - 1, d).toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+  } catch {
+    return dateString;
+  }
+}
+function useClaimantProfiles(dids) {
+  const handlers = useBlocknoteHandlers();
+  const handlersRef = useRef(handlers);
+  handlersRef.current = handlers;
+  const attemptedRef = useRef(/* @__PURE__ */ new Set());
+  const [profiles, setProfiles] = useState2({});
+  const key = useMemo(
+    () => Array.from(new Set(dids.filter((did) => !!did))).sort().join("|"),
+    [dids.join("|")]
+  );
+  useEffect2(() => {
+    let mounted = true;
+    const missing = (key ? key.split("|") : []).filter((did) => !attemptedRef.current.has(did));
+    if (missing.length === 0) {
+      return () => {
+        mounted = false;
+      };
+    }
+    missing.forEach((did) => attemptedRef.current.add(did));
+    void (async () => {
+      const results = await Promise.all(
+        missing.map(async (did) => {
+          try {
+            const profile = await handlersRef.current.getMatrixInfoPerDid(did);
+            return [did, profile];
+          } catch {
+            return [did, null];
+          }
+        })
+      );
+      if (!mounted) return;
+      setProfiles((prev) => {
+        const next = { ...prev };
+        results.forEach(([did, profile]) => {
+          if (profile) next[did] = profile;
+        });
+        return next;
+      });
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, [key]);
+  return profiles;
+}
+function claimantDidOf(item) {
+  return String(item.provenance?.claimSnapshot?.agentDid || "");
+}
+function claimantNameOf(item, profiles, fallbackContactName) {
+  const did = claimantDidOf(item);
+  return profiles[did]?.displayname || String(fallbackContactName || "").trim() || did || String(item.provenance?.claimSnapshot?.agentAddress || "") || `Claim ${truncateId(item.source.claimId)}`;
+}
+function workItemStatusInfo(item, t) {
+  switch (item.status) {
+    case "pending":
+      return { label: t("actionTypes.xero.work.status.toApprove", { defaultValue: "To approve" }), color: "blue" };
+    case "approved":
+      return { label: t("actionTypes.xero.work.status.settling", { defaultValue: "Settling" }), color: "teal" };
+    case "completed":
+      return {
+        label: item.kind === "payment.create" ? t("actionTypes.xero.work.status.paid", { defaultValue: "Paid" }) : t("actionTypes.xero.work.status.completed", { defaultValue: "Completed" }),
+        color: "green.5",
+        showCheck: true
+      };
+    case "failed":
+      return { label: t("actionTypes.xero.work.status.failed", { defaultValue: "Failed" }), color: "red" };
+    case "cancelled":
+    default:
+      return { label: t("actionTypes.xero.work.status.cancelled", { defaultValue: "Cancelled" }), color: "dimmed" };
+  }
+}
+function ClaimantAvatar({ profile, label, size = 32 }) {
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: "var(--mantine-color-neutralColor-4)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        fontSize: size >= 40 ? 16 : 14,
+        fontWeight: 500,
+        color: "var(--mantine-color-dimmed)",
+        backgroundImage: profile?.avatarUrl ? `url(${profile.avatarUrl})` : void 0,
+        backgroundSize: "cover",
+        backgroundPosition: "center"
+      }
+    },
+    profile?.avatarUrl ? null : (label || "?")[0]?.toUpperCase()
+  );
+}
+function WorkItemRow({
+  item,
+  profile,
+  name,
+  summary,
+  t,
+  onOpen
+}) {
+  const status = workItemStatusInfo(item, t);
+  return /* @__PURE__ */ React.createElement(ListItemContainer, { isChecked: false, onClick: onOpen }, /* @__PURE__ */ React.createElement(Group, { gap: 16, align: "center", style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(ClaimantAvatar, { profile, label: name }), /* @__PURE__ */ React.createElement(Stack, { gap: 0, style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(Text, { fw: 500, size: "md", truncate: true, style: { lineHeight: 1.5 } }, name), summary && /* @__PURE__ */ React.createElement(Text, { size: "xs", c: "dimmed", truncate: true }, summary))), /* @__PURE__ */ React.createElement(Stack, { gap: 0, align: "flex-end", style: { flexShrink: 0, minWidth: 80 } }, /* @__PURE__ */ React.createElement(Text, { fw: 500, size: "md", c: status.color, style: { lineHeight: 1.5, whiteSpace: "nowrap" } }, status.showCheck && /* @__PURE__ */ React.createElement(IconCheck, { size: 14, style: { verticalAlign: "middle", marginRight: 2 } }), status.label), /* @__PURE__ */ React.createElement(Text, { size: "xs", c: "dimmed" }, timeAgo(item.completedAt || item.provenance?.createdAt))));
+}
+function DetailField({ label, children }) {
+  return /* @__PURE__ */ React.createElement(Group, { justify: "space-between", align: "center", gap: "md", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Text, { size: "sm", c: "dimmed", style: { flexShrink: 0 } }, label), typeof children === "string" ? /* @__PURE__ */ React.createElement(Text, { size: "sm", fw: 500, truncate: true, style: { minWidth: 0 }, ta: "right" }, children) : children);
+}
+function MoreField({ label, value }) {
+  if (!value) return null;
+  return /* @__PURE__ */ React.createElement(Stack, { gap: 2 }, /* @__PURE__ */ React.createElement(Text, { size: "xs", c: "dimmed" }, label), typeof value === "string" ? /* @__PURE__ */ React.createElement(Text, { size: "xs", style: { wordBreak: "break-all", userSelect: "all" } }, value) : value);
+}
+
+// src/mantine/blocks/action/actionTypes/xero/paymentCreate/XeroPaymentCreateFlowDetail.tsx
+var STATUS_ORDER = { pending: 0, failed: 1, approved: 2, completed: 3, cancelled: 4 };
+function shortId(value, length = 10) {
+  const text = String(value || "");
+  return text.length > length ? text.slice(0, length) : text;
+}
+var XeroPaymentCreateFlowDetail = ({
+  inputs,
+  editor,
+  block,
+  runtime,
+  isDisabled,
+  provideSigningHandler,
+  unlockSigning,
+  registerRuntimeInputs,
+  executeAction
+}) => {
+  const t = useTranslate();
+  const handlers = useBlocknoteHandlers();
+  const actorDid = useMemo2(() => {
+    try {
+      return handlers?.getCurrentUser?.()?.address || "";
+    } catch {
+      return "";
+    }
+  }, [handlers]);
+  const entityDid = useMemo2(() => handlers?.getEntityDid?.() || "", [handlers]);
+  const editorDocument = editor?.document || [];
+  const liveInputs = editorDocument.find((b) => b?.id === block.id)?.props?.inputs;
+  const effectiveInputs = typeof liveInputs === "string" && liveInputs ? liveInputs : inputs;
+  const parsed = useMemo2(() => parseXeroPaymentCreateInputs(effectiveInputs), [effectiveInputs]);
+  const runtimeReader = useRunRuntimeReader(editor);
+  const resolveOpts = useMemo2(() => ({ yRuntime: runtimeReader }), [runtimeReader]);
+  const seedFromTemplate = useCallback(
+    (field) => {
+      const v = parsed[field];
+      if (typeof v !== "string") return "";
+      const doc = editor?.document || [];
+      return resolveReferences(v, doc, resolveOpts);
+    },
+    [parsed, editor, resolveOpts]
+  );
+  const [local, setLocal] = useState3(() => ({
+    InvoiceID: seedFromTemplate("InvoiceID"),
+    Amount: seedFromTemplate("Amount"),
+    Date: seedFromTemplate("Date"),
+    Reference: seedFromTemplate("Reference")
+  }));
+  useEffect3(() => {
+    setLocal((prev) => {
+      const next = {
+        InvoiceID: prev.InvoiceID || seedFromTemplate("InvoiceID"),
+        Amount: prev.Amount || seedFromTemplate("Amount"),
+        Date: prev.Date || seedFromTemplate("Date"),
+        Reference: prev.Reference || seedFromTemplate("Reference")
+      };
+      if (next.InvoiceID === prev.InvoiceID && next.Amount === prev.Amount && next.Date === prev.Date && next.Reference === prev.Reference) {
+        return prev;
+      }
+      return next;
+    });
+  }, [parsed]);
+  const update = useCallback((patch) => {
+    setLocal((prev) => ({ ...prev, ...patch }));
+  }, []);
+  const managedByOracle = parsed.managedByOracle;
+  const workItems = useXeroWorkItems(editor, { kind: "payment.create", assignedBlockId: block.id, statuses: ["pending", "approved", "failed", "completed"] });
+  const [selectedWorkItemId, setSelectedWorkItemId] = useState3("");
+  const selectedWorkItem = useMemo2(() => workItems.find((item) => item.id === selectedWorkItemId) || null, [workItems, selectedWorkItemId]);
+  const selectedWorkItemCompleted = selectedWorkItem?.status === "completed";
+  const invoiceItems = useXeroWorkItems(editor, { kind: "invoice.create" });
+  const invoiceItemById = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    invoiceItems.forEach((item) => map.set(item.id, item));
+    return map;
+  }, [invoiceItems]);
+  const invoiceItemFor = useCallback(
+    (item) => {
+      const invoiceWorkItemId = item?.source?.invoiceWorkItemId;
+      return invoiceWorkItemId ? invoiceItemById.get(invoiceWorkItemId) || null : null;
+    },
+    [invoiceItemById]
+  );
+  const attachedInvoice = useMemo2(() => invoiceItemFor(selectedWorkItem), [invoiceItemFor, selectedWorkItem]);
+  const attachedInvoiceResult = attachedInvoice?.result || {};
+  const attachedInvoicePayload = attachedInvoiceResult.submittedPayload || attachedInvoice?.submittedPayload || attachedInvoice?.reviewPayload || {};
+  const attachedInvoiceLineItems = Array.isArray(attachedInvoicePayload.LineItems) ? attachedInvoicePayload.LineItems : [];
+  const profiles = useClaimantProfiles(workItems.map(claimantDidOf));
+  useEffect3(() => {
+    if (!selectedWorkItem) return;
+    const payload = selectedWorkItem.reviewPayload || {};
+    setLocal({
+      InvoiceID: String(payload.InvoiceID || ""),
+      Amount: String(payload.Amount || ""),
+      Date: String(payload.Date || ""),
+      Reference: String(payload.Reference || "")
+    });
+  }, [selectedWorkItem?.id]);
+  const binding = useFlowXeroBinding(editor);
+  const hasConnection = !!binding?.connectedAccountId;
+  const bankAccountId = (binding?.bankAccountId || "").trim();
+  const entityMismatch = hasConnection && entityDid && binding.entityDid && binding.entityDid !== entityDid;
+  const isCompleted = runtime.state === "completed" && !selectedWorkItem;
+  const amountNumber = useMemo2(() => {
+    const trimmed = local.Amount.trim();
+    if (!trimmed) return NaN;
+    return Number(trimmed);
+  }, [local.Amount]);
+  const amountValid = Number.isFinite(amountNumber) && amountNumber > 0;
+  const selectedApprovable = !!selectedWorkItem && (selectedWorkItem.status === "pending" || selectedWorkItem.status === "failed");
+  const readyToSign = managedByOracle ? false : hasConnection && !entityMismatch && !!bankAccountId && !!local.InvoiceID.trim() && amountValid && !isCompleted && !selectedWorkItemCompleted;
+  useEffect3(() => {
+    unlockSigning?.(readyToSign);
+  }, [unlockSigning, readyToSign]);
+  useEffect3(() => {
+    registerRuntimeInputs?.({
+      ...local,
+      __xeroHasQueuedWork: workItems.length > 0,
+      // Oracle mode owns its whole detail page (including the Approve action),
+      // so never ask the panel for the diff + slider; manual mode still signs
+      // through the panel's slide-to-sign.
+      __xeroSelectedWorkItemId: !managedByOracle && selectedWorkItem && !selectedWorkItemCompleted ? selectedWorkItem.id : ""
+    });
+  }, [registerRuntimeInputs, local, managedByOracle, selectedWorkItem?.id, selectedWorkItemCompleted, workItems.length]);
+  const [error, setError] = useState3(null);
+  const [approving, setApproving] = useState3(false);
+  const execute = useCallback(async () => {
+    if (selectedWorkItemCompleted) {
+      return;
+    }
+    if (managedByOracle) {
+      if (!selectedWorkItem || !selectedApprovable) return;
+      if (!bankAccountId) {
+        setError(
+          t("actionTypes.xero.payment.errors.bankAccountBeforeApprove", { defaultValue: "Pick the bank account in this flow's Xero connection before approving payments." })
+        );
+        return;
+      }
+      const approvedTenantId = parsed.tenant_id.trim() || (binding?.tenantId || "").trim();
+      const approvedPayload = {
+        ...selectedWorkItem.reviewPayload || {},
+        AccountID: bankAccountId,
+        ...approvedTenantId ? { tenant_id: approvedTenantId } : {}
+      };
+      setApproving(true);
+      try {
+        updateXeroWorkReviewPayloadForEditor(editor, selectedWorkItem.id, approvedPayload);
+        markXeroWorkApprovedForEditor(editor, selectedWorkItem.id, { byDid: actorDid });
+        setError(null);
+      } finally {
+        setApproving(false);
+      }
+      return;
+    }
+    if (!hasConnection) {
+      setError("Connect Xero in this flow's connections before running this action.");
+      return;
+    }
+    if (!bankAccountId) {
+      setError("Pick the bank account in this flow's Xero connection before running this action.");
+      return;
+    }
+    if (!amountValid) {
+      setError("Amount must be a positive number.");
+      return;
+    }
+    const submittedPayload = {
+      ...selectedWorkItem?.reviewPayload || {},
+      InvoiceID: local.InvoiceID,
+      AccountID: bankAccountId,
+      Date: local.Date,
+      Amount: amountNumber,
+      Reference: local.Reference
+    };
+    if (selectedWorkItem) updateXeroWorkReviewPayloadForEditor(editor, selectedWorkItem.id, submittedPayload);
+    setError(null);
+    try {
+      if (!executeAction) {
+        throw new Error("Shared action executor is unavailable");
+      }
+      const editorDoc = editor?.document || [];
+      const resolveTemplate = (v) => resolveReferences(v || "", editorDoc, resolveOpts);
+      const currencyRateRaw = resolveTemplate(parsed.CurrencyRate).trim();
+      const currencyRate = currencyRateRaw ? Number(currencyRateRaw) : void 0;
+      const runtimeInputs = {
+        ...submittedPayload,
+        CurrencyRate: typeof currencyRate === "number" && Number.isFinite(currencyRate) ? currencyRate : void 0
+      };
+      const outcome = await executeAction({ runtimeInputs });
+      if (!outcome.success) {
+        throw new Error(outcome.error || "Xero payment creation failed");
+      }
+      const output = outcome.output || {};
+      if (selectedWorkItem) {
+        markXeroWorkCompletedForEditor(editor, selectedWorkItem.id, { byDid: actorDid, payload: runtimeInputs, result: output });
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to record Xero payment";
+      setError(message);
+      if (selectedWorkItem) markXeroWorkFailedForEditor(editor, selectedWorkItem.id, { byDid: actorDid, payload: submittedPayload, error: message });
+    }
+  }, [
+    actorDid,
+    amountNumber,
+    amountValid,
+    bankAccountId,
+    binding?.tenantId,
+    editor,
+    executeAction,
+    hasConnection,
+    local,
+    managedByOracle,
+    parsed.CurrencyRate,
+    parsed.tenant_id,
+    resolveOpts,
+    selectedApprovable,
+    selectedWorkItem,
+    selectedWorkItemCompleted,
+    t
+  ]);
+  useEffect3(() => {
+    if (!provideSigningHandler) return;
+    provideSigningHandler(execute);
+  }, [provideSigningHandler, execute]);
+  const sortedItems = useMemo2(
+    () => [...workItems].sort((a, b) => {
+      const rank = (STATUS_ORDER[a.status] ?? 9) - (STATUS_ORDER[b.status] ?? 9);
+      if (rank !== 0) return rank;
+      return (b.provenance?.createdAt || 0) - (a.provenance?.createdAt || 0);
+    }),
+    [workItems]
+  );
+  const connectionWarnings = !selectedWorkItemCompleted && /* @__PURE__ */ React2.createElement(React2.Fragment, null, (!hasConnection || !bankAccountId) && /* @__PURE__ */ React2.createElement(DismissibleAlert, { color: "yellow", styles: actionAlertStyles }, hasConnection ? t("actionTypes.xero.payment.warnings.pickBankAccount", {
+    defaultValue: "Pick the bank account in this flow's Xero connection \u2014 every payment from this block debits it."
+  }) : t("actionTypes.xero.payment.warnings.connectXero", { defaultValue: "Connect Xero in this flow's connections before payments can be recorded." })), entityMismatch && /* @__PURE__ */ React2.createElement(DismissibleAlert, { color: "yellow", styles: actionAlertStyles }, t("actionTypes.xero.payment.warnings.entityMismatch", { defaultValue: "This flow was connected in a different workspace. Reconnect Xero to use it here." })));
+  const errorAlert = error && /* @__PURE__ */ React2.createElement(DismissibleAlert, { color: "red", styles: actionAlertStyles }, error);
+  const disabledNote = isDisabled && !isCompleted && /* @__PURE__ */ React2.createElement(Text2, { size: "xs", c: "dimmed" }, t("actionTypes.xero.payment.blockDisabled", { defaultValue: "This block is currently disabled." }));
+  if (selectedWorkItem) {
+    const item = selectedWorkItem;
+    const status = workItemStatusInfo(item, t);
+    const profile = profiles[claimantDidOf(item)];
+    const name = claimantNameOf(item, profiles, attachedInvoicePayload.ContactName);
+    const currency = attachedInvoiceResult.currencyCode || attachedInvoicePayload.CurrencyCode || "";
+    const paymentDate = String(item.reviewPayload?.Date || "");
+    const invoiceStatus = String(attachedInvoiceResult.status || attachedInvoicePayload.Status || "DRAFT").toUpperCase();
+    return /* @__PURE__ */ React2.createElement(Stack2, { gap: "md" }, /* @__PURE__ */ React2.createElement(Group2, { gap: "xs", align: "center" }, /* @__PURE__ */ React2.createElement(
+      ActionIcon,
+      {
+        variant: "subtle",
+        color: "gray",
+        size: "sm",
+        onClick: () => setSelectedWorkItemId(""),
+        "aria-label": t("actionTypes.xero.payment.backToList", { defaultValue: "Back to payments" })
+      },
+      /* @__PURE__ */ React2.createElement(IconArrowLeft, { size: 16 })
+    ), /* @__PURE__ */ React2.createElement(Text2, { fw: 500, size: "sm", title: item.source.claimId, truncate: true, style: { flex: 1, minWidth: 0 } }, t("actionTypes.claim.flow.claimNumber", { id: truncateId(item.source.claimId), defaultValue: `Claim #${truncateId(item.source.claimId)}` })), /* @__PURE__ */ React2.createElement(Text2, { fw: 500, size: "sm", c: status.color, style: { flexShrink: 0 } }, status.label)), /* @__PURE__ */ React2.createElement(
+      Stack2,
+      {
+        gap: 12,
+        p: 16,
+        style: {
+          borderRadius: 16,
+          border: "1px solid color-mix(in srgb, var(--mantine-color-text) 6%, transparent)",
+          background: "var(--mantine-color-neutralColor-5)"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(DetailField, { label: t("actionTypes.xero.payment.detail.who", { defaultValue: "Who" }) }, /* @__PURE__ */ React2.createElement(Group2, { gap: 8, align: "center", wrap: "nowrap", style: { minWidth: 0 } }, /* @__PURE__ */ React2.createElement(ClaimantAvatar, { profile, label: name, size: 24 }), /* @__PURE__ */ React2.createElement(Text2, { size: "sm", fw: 500, truncate: true, style: { minWidth: 0 } }, name))),
+      /* @__PURE__ */ React2.createElement(DetailField, { label: t("actionTypes.xero.payment.detail.amount", { defaultValue: "Amount" }) }, formatMoney(item.reviewPayload?.Amount, currency)),
+      /* @__PURE__ */ React2.createElement(DetailField, { label: t("actionTypes.xero.payment.detail.when", { defaultValue: "When" }) }, formatDay(paymentDate) || timeAgo(item.provenance?.createdAt))
+    ), /* @__PURE__ */ React2.createElement(CollapsibleSection, { title: t("actionTypes.xero.payment.detail.more", { defaultValue: "More" }) }, /* @__PURE__ */ React2.createElement(Stack2, { gap: "sm" }, /* @__PURE__ */ React2.createElement(MoreField, { label: t("actionTypes.xero.payment.more.claimId", { defaultValue: "Claim ID" }), value: String(item.source.claimId || "") }), attachedInvoice ? /* @__PURE__ */ React2.createElement(
+      MoreField,
+      {
+        label: t("actionTypes.xero.payment.more.invoice", { defaultValue: "Invoice" }),
+        value: /* @__PURE__ */ React2.createElement(Stack2, { gap: 4 }, /* @__PURE__ */ React2.createElement(Group2, { gap: "xs", align: "center" }, /* @__PURE__ */ React2.createElement(Text2, { size: "xs", style: { wordBreak: "break-all" } }, String(attachedInvoiceResult.invoiceNumber || attachedInvoiceResult.invoiceId || item.reviewPayload?.InvoiceID || "")), /* @__PURE__ */ React2.createElement(Badge, { size: "xs", variant: "light", color: invoiceStatus === "AUTHORISED" ? "green" : "yellow" }, invoiceStatus)), attachedInvoiceLineItems.map((line, index) => /* @__PURE__ */ React2.createElement(Group2, { key: index, justify: "space-between", gap: "md", wrap: "nowrap" }, /* @__PURE__ */ React2.createElement(Text2, { size: "xs", c: "dimmed", truncate: true, style: { minWidth: 0, flex: 1 } }, String(line?.Description || `Line ${index + 1}`)), /* @__PURE__ */ React2.createElement(Text2, { size: "xs", c: "dimmed", style: { whiteSpace: "nowrap" } }, String(line?.Quantity ?? 1), " \xD7 ", formatMoney(line?.UnitAmount)))))
+      }
+    ) : /* @__PURE__ */ React2.createElement(MoreField, { label: t("actionTypes.xero.payment.more.invoiceId", { defaultValue: "Invoice ID" }), value: String(item.reviewPayload?.InvoiceID || "") }), /* @__PURE__ */ React2.createElement(MoreField, { label: t("actionTypes.xero.payment.more.reference", { defaultValue: "Reference (tx hash)" }), value: String(item.reviewPayload?.Reference || "") }), /* @__PURE__ */ React2.createElement(
+      MoreField,
+      {
+        label: t("actionTypes.xero.payment.more.bankAccount", { defaultValue: "Bank account" }),
+        value: bankAccountId || String(item.reviewPayload?.AccountID || "")
+      }
+    ), /* @__PURE__ */ React2.createElement(
+      MoreField,
+      {
+        label: t("actionTypes.xero.payment.more.xeroOrg", { defaultValue: "Xero organisation" }),
+        value: String(item.reviewPayload?.tenant_id || binding?.tenantId || "")
+      }
+    ), item.status === "completed" && /* @__PURE__ */ React2.createElement(MoreField, { label: t("actionTypes.xero.payment.more.paymentId", { defaultValue: "Payment ID" }), value: String(item.result?.paymentId || "") }))), item.status === "approved" && /* @__PURE__ */ React2.createElement(DismissibleAlert, { color: "blue", styles: actionAlertStyles }, t("actionTypes.xero.payment.approvedSettling", {
+      defaultValue: "Approved \u2014 the Xero oracle is settling this payment. It will show as Paid once the payment is recorded."
+    })), item.status === "completed" && /* @__PURE__ */ React2.createElement(DismissibleAlert, { color: "green", styles: actionAlertStyles }, t("actionTypes.xero.payment.recorded", { defaultValue: "Payment recorded" }), item.result?.paymentId ? ` \u2014 ${String(item.result.paymentId)}` : "", "."), item.status === "failed" && item.error?.message && /* @__PURE__ */ React2.createElement(DismissibleAlert, { color: "red", styles: actionAlertStyles }, item.error.message), errorAlert, !managedByOracle && !selectedWorkItemCompleted && /* @__PURE__ */ React2.createElement(Stack2, { gap: "sm" }, /* @__PURE__ */ React2.createElement(DataInput, { label: "Invoice ID", value: local.InvoiceID, onChange: (value) => update({ InvoiceID: value }), editorDocument, currentBlockId: block.id }), /* @__PURE__ */ React2.createElement(DataInput, { label: "Amount", value: local.Amount, onChange: (value) => update({ Amount: value }), editorDocument, currentBlockId: block.id }), /* @__PURE__ */ React2.createElement(DataInput, { label: "Date", value: local.Date, onChange: (value) => update({ Date: value }), editorDocument, currentBlockId: block.id }), /* @__PURE__ */ React2.createElement(
+      DataInput,
+      {
+        label: "Reference (tx hash)",
+        value: local.Reference,
+        onChange: (value) => update({ Reference: value }),
+        editorDocument,
+        currentBlockId: block.id
+      }
+    )), managedByOracle && selectedApprovable && /* @__PURE__ */ React2.createElement(Stack2, { gap: "xs" }, !bankAccountId ? /* @__PURE__ */ React2.createElement(DismissibleAlert, { color: "yellow", styles: actionAlertStyles }, t("actionTypes.xero.payment.warnings.bankAccountBeforeApprove", {
+      defaultValue: "Pick the bank account in this flow's Xero connection before approving \u2014 it applies to every payment in this flow."
+    })) : /* @__PURE__ */ React2.createElement(Text2, { size: "xs", c: "dimmed" }, t("actionTypes.xero.payment.approveHint", { defaultValue: "Approving authorises the invoice in Xero and records this payment against it." })), /* @__PURE__ */ React2.createElement(Button, { fullWidth: true, size: "md", onClick: () => void execute(), disabled: isDisabled || approving || !bankAccountId, loading: approving }, item.status === "failed" ? t("actionTypes.xero.payment.approveRetry", { defaultValue: "Approve & retry" }) : t("actionTypes.xero.payment.approve", { defaultValue: "Approve" }))), disabledNote);
+  }
+  if (managedByOracle || workItems.length > 0) {
+    return /* @__PURE__ */ React2.createElement(Stack2, { gap: "md" }, connectionWarnings, sortedItems.length === 0 ? /* @__PURE__ */ React2.createElement(Text2, { size: "sm", c: "dimmed", ta: "center", py: "md" }, t("actionTypes.xero.payment.emptyList", { defaultValue: "No payments yet. Approved claims that queue a payment will appear here." })) : /* @__PURE__ */ React2.createElement(Stack2, { gap: 12 }, sortedItems.map((item) => {
+      const invoice = invoiceItemFor(item);
+      const invoicePayload = invoice?.result?.submittedPayload || invoice?.submittedPayload || invoice?.reviewPayload || {};
+      const currency = invoice?.result?.currencyCode || invoicePayload.CurrencyCode || "";
+      const name = claimantNameOf(item, profiles, invoicePayload.ContactName);
+      return /* @__PURE__ */ React2.createElement(
+        WorkItemRow,
+        {
+          key: item.id,
+          item,
+          profile: profiles[claimantDidOf(item)],
+          name,
+          summary: formatMoney(item.reviewPayload?.Amount, currency),
+          t,
+          onOpen: () => setSelectedWorkItemId(item.id)
+        }
+      );
+    })), errorAlert, disabledNote);
+  }
+  return /* @__PURE__ */ React2.createElement(Stack2, { gap: "md" }, connectionWarnings, hasConnection && bankAccountId && /* @__PURE__ */ React2.createElement(Text2, { size: "xs", c: "dimmed" }, t("actionTypes.xero.payment.debitsAccount", { account: shortId(bankAccountId), defaultValue: `Debits the flow's Xero bank account ${shortId(bankAccountId)}.` })), !isCompleted && /* @__PURE__ */ React2.createElement(Stack2, { gap: "sm" }, /* @__PURE__ */ React2.createElement(DataInput, { label: "Invoice ID", value: local.InvoiceID, onChange: (value) => update({ InvoiceID: value }), editorDocument, currentBlockId: block.id }), /* @__PURE__ */ React2.createElement(DataInput, { label: "Amount", value: local.Amount, onChange: (value) => update({ Amount: value }), editorDocument, currentBlockId: block.id }), /* @__PURE__ */ React2.createElement(DataInput, { label: "Date", value: local.Date, onChange: (value) => update({ Date: value }), editorDocument, currentBlockId: block.id }), /* @__PURE__ */ React2.createElement(
+    DataInput,
+    {
+      label: "Reference (tx hash)",
+      value: local.Reference,
+      onChange: (value) => update({ Reference: value }),
+      editorDocument,
+      currentBlockId: block.id
+    }
+  )), isCompleted && /* @__PURE__ */ React2.createElement(DismissibleAlert, { color: "green", styles: actionAlertStyles }, t("actionTypes.xero.payment.recorded", { defaultValue: "Payment recorded" }), runtime.output?.paymentId ? ` \u2014 ${runtime.output.paymentId}` : "", "."), errorAlert, disabledNote);
+};
+export {
+  XeroPaymentCreateFlowDetail
+};
+//# sourceMappingURL=XeroPaymentCreateFlowDetail-CF35MVIM.js.map