Escalation

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/escalation

Brings in: bidi, button, heading-level, heading-scope, input, locale, locked, textarea, tokens, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { Escalation, type EscalationRoute, type EscalationSent } from "@/components/candor/escalation"

const routes: EscalationRoute[] = [
  {
    id: "payments-oncall",
    kind: "page",
    label: "Payments on-call",
    to: ["Priya Shah (on call until 18:00)"],
    via: "the paging service",
    note: "Repeats every 5 minutes until someone acknowledges.",
  },
  { id: "billing", kind: "email", label: "Billing team", to: ["billing@example.com"], via: "email from support@example.com" },
  { id: "payments-queue", kind: "ticket", label: "Payments queue", to: ["Payments team"], via: "the team’s ticket queue" },
]

export default function Example() {
  const [sent, setSent] = React.useState<EscalationSent>()
  return (
    <Escalation
      className="max-w-xl"
      title="Refund stuck for order 4411"
      routes={routes}
      message={{
        subject: "Refund stuck for order 4411",
        body: "The refund for order 4411 has failed three times since 09:10 with “card issuer unavailable”.\n\nThe customer has asked twice today. Can someone check the issuer status and retry by hand?",
        attachments: ["Order 4411’s timeline", "The three failed refund attempts"],
      }}
      draftedBy="Support agent"
      notSent={["The customer’s card details", "The rest of the conversation"]}
      meanwhile="The agent tells the customer a person is looking into it, and stops replying."
      onSend={async (routeId, message) => {
        await new Promise((r) => setTimeout(r, 800))
        const route = routes.find((r) => r.id === routeId)!
        setSent({
          route,
          message,
          by: "You",
          at: new Date().toISOString(),
          reference: route.kind === "ticket" ? "PAY-1182" : route.kind === "page" ? "PG-2291" : undefined,
          acknowledged: route.kind === "email" ? undefined : null,
        })
      }}
      onCancel={() => {}}
      sent={sent}
    />
  )
}

<Escalation>

Strings

Types

EscalationRoute

A way to hand a case off outside the app, as your app knows it right now.

{ id: string; /** How it goes out: a page to someone on call, an email, or a ticket in another team's queue. */ kind: "page" | "email" | "ticket"; /** The route's name: "Platform on-call", "Billing team", "Ops queue". */ label: string; /** Who gets it, as your app resolves them now: "Priya Shah (on call until 18:00)", "billing@example.com". `[]` when nobody would. */ to: string[]; /** What it goes through, in your words: "the paging service", "the Ops ticket queue". */ via?: string | undefined; /** One more line about the route, e.g. "Pages repeat every 5 minutes until someone acknowledges." */ note?: string | undefined; }

EscalationMessage

What is sent: the subject, the message and what's attached, as plain text.

{ subject: string; /** The message, as plain text. It's shown as text, never as markup. */ body: string; /** What goes with it, named: "The last 50 log lines", "Order 4411’s timeline". */ attachments?: string[] | undefined; }

EscalationSent

What was sent, as your server recorded it after sending.

{ /** The route it went by, as it was when sent. */ route: EscalationRoute; /** The message exactly as sent. */ message: EscalationMessage; /** Who sent it, named by the app. */ by: string; /** When it was sent (ISO). */ at: string; /** The other system's reference for it: a ticket number, a page id. */ reference?: string | undefined; /** Who acknowledged it and when, as the other system reports it. `null` when that system reports acknowledgements and none has come; leave out when it doesn't report them. */ acknowledged?: { by: string; at: string; } | null | undefined; }

Types from other items

The props above take these. Each is defined by another item; import it from the path shown.

HeadingLevel from @/lib/candor/heading-level

A heading's level in the page's outline: `1` is `<h1>`, `6` is `<h6>`. Every Candor item that draws a heading takes its `headingLevel` as this type; the level is where the heading sits in the outline, never how large it looks.

1 | 2 | 3 | 4 | 5 | 6