@voyant-travel/quotes-react

React hooks, query keys, providers, and reusable UI for the Quotes module: pipelines, stages, quotes, quote versions, proposal lifecycle decisions, and quote version lines.

People and organizations are represented by ids on quote records. Use @voyant-travel/relationships-react for person and organization UI.

Install

pnpm add @voyant-travel/quotes-react @voyant-travel/quotes @tanstack/react-query react react-dom zod

Usage

import { QuotesBoard, VoyantProvider, useQuotes, useStages } from "@voyant-travel/quotes-react"

function QuotePipeline({ pipelineId }: { pipelineId: string }) {
  const { data: stages } = useStages({ pipelineId })
  const { data: quotes } = useQuotes({ pipelineId })
  const quotesByStage = new Map(
    (stages?.data ?? []).map((stage) => [
      stage.id,
      (quotes?.data ?? []).filter((quote) => quote.stageId === stage.id),
    ]),
  )

  return <QuotesBoard stages={stages?.data ?? []} quotesByStage={quotesByStage} />
}

Styled components require the optional @voyant-travel/ui peer.

License

Apache-2.0