Approval Component

Live Mockup

Approval Payload Schema

interface ApprovalPayload {
  /** Main context message shown at the top */
  context: string;

  /** Key-value fields shown in the detail table */
  fields?: Array<{
    key: string;
    label: string;
    value: string;
  }>;

  /** Whether to show the comment input (default: true) */
  showComment?: boolean;

  /** Label for the comment field (default: "Add a comment") */
  commentLabel?: string;

  /** Labels for the action buttons */
  approveLabel?: string;  // default: "Approve"
  rejectLabel?: string;   // default: "Reject"
  abstainLabel?: string;  // default: "Abstain"

  /** Whether to show the Abstain button (default: true) */
  allowAbstain?: boolean;
}

Response Schema

interface ApprovalResponseData {
  comment?: string;
}

// Outcomes: "approved" | "rejected" | "abstained"
// respond("approved", { comment: "Looks good." })
// respond("rejected", { comment: "Budget exceeded." })
// respond("abstained") // no data required

Usage Example

import { ApprovalComponent } from 'edge-interact-ui';

// Direct usage (outside InteractionContainer)
function MyApprovalCard({ interaction, respond }) {
  return (
    <ApprovalComponent
      interaction={interaction}
      respond={respond}
      className="my-custom-approval-card"
    />
  );
}

// The payload on the server:
const request = new InteractionRequest {
  Type = InteractionTypes.Approval,
  TargetUserId = managerId,
  Title = "Invoice Approval Required",
  Payload = new ApprovalPayload {
    Context = "Invoice #INV-2026-0042 requires your authorization before payment is processed.",
    Fields = [
      new ("vendor",    "Vendor",       "Acme Corp"),
      new ("amount",    "Amount",       "$45,000.00"),
      new ("category",  "Category",     "Hardware"),
      new ("requestedBy", "Requested by", "Jane Smith")
    ],
    ApproveLabel = "Approve Payment",
    RejectLabel = "Reject Payment"
  },
  TimeoutMs = 86_400_000
};

Component Props