Skip to content
ConversionIQ Docs

Component: Channel Card

Component

Section titled “Component”

Purpose / responsibility

Section titled “Purpose / responsibility”

Represent a single channel connector/configuration entry with:

  • channel identity (type/provider) and current connection status
  • primary actions (connect, disconnect, configure) with permission/plan gating
  • health/degraded status communication (when applicable)
  • a bottom section that shows the App name that will be used for this channel (e.g., Comment Responder or Chatti Live) (assignment rules TBD)

Structure (visual contract):

  • Main body: channel icon + name + short description (TBD), plus status (connected/pending/degraded) and primary action(s)
  • Bottom section: App name (app label + optional icon)

Props / inputs / outputs

Section titled “Props / inputs / outputs”
  • Inputs:
    • channel type + provider metadata (icon, name, description) (TBD exact fields)
    • connection state (not connected / pending / connected / degraded)
    • health signals and error summaries (optional)
    • gating reasons (permission/plan/contract) (optional)
    • app surface assignment for the channel (label + optional icon) (TBD how assigned)
  • Outputs (events/callbacks):
    • onConnect(channelType)
    • onDisconnect(channelType)
    • onConfigure(channelType) (optional)
    • onOpenApp(appSurface) (optional; if footer is interactive) (TBD)
  • Side effects: none directly; actions must be executed by domain services / API clients

Variants

Section titled “Variants”
  • Default (expanded): icon + label + description + status + primary action
  • Compact: reduced text for dense lists (TBD)
  • Selectable: used in step-based onboarding flows (TBD)
  • With health: shows degraded/pending indicators and troubleshooting affordances (TBD)

States

Section titled “States”
  • Default: renders connector details + current state
  • Loading: skeleton card while connector catalog or status is loading
  • Empty: N/A (list responsibility, not card responsibility)
  • Error: renders a safe error state (no secrets) with retry guidance (TBD)
  • Disabled: actions disabled with explicit reason (permission/plan)

Accessibility requirements

Section titled “Accessibility requirements”
  • If the card is clickable, use correct semantics (button/link) rather than a generic div.
  • All actions must be keyboard accessible with clear focus styles.
  • Status changes should be perceivable (text + icon, not color-only).
  • Bottom “App name” section must be labeled and readable by screen readers; if interactive, announce destination.

Security & privacy considerations (if applicable)

Section titled “Security & privacy considerations (if applicable)”
  • Never display credentials, tokens, webhook secrets, or full identifiers that are considered sensitive.
  • Do not leak cross-workspace connection metadata; all data must be scoped to active org/workspace.
  • Action availability must align with backend permission enforcement (no UI-only security).

Analytics hooks (if applicable)

Section titled “Analytics hooks (if applicable)”
  • channel.connected
  • channel.disconnected
  • Connector configuration events are TBD (must not emit secrets/PII)

Reference: Analytics Events (MVP)

Dependencies

Section titled “Dependencies”