Navigation

API Reference

TreatmentConsultant props

Prop	Type	Default	Description
`config`	`DeepPartial<TreatmentConsultantConfig>`	`{}`	Overrides merged with the defaults — see Configuration
`styleClassPassthrough`	`string \| string[]`	`[]`	Extra classes added to the widget's root element

TreatmentConsultant emits

Event	Payload	Fires when
`change`	`ConsultationSelections`	Any selection changes
`complete`	`ConsultationSelections`	The client reaches the Results step

createHairTreatments()

A Vue plugin factory. Installing it provides a default config to every TreatmentConsultant in the app — instance-level config props are merged on top of this.

function createHairTreatments(config?: DeepPartial<TreatmentConsultantConfig>): Plugin

TextConfig

Every user-facing string, grouped by where it's shown.

interface TextConfig {
  navigation: {
    steps: string[]
    back: string
    next: string
    viewResults: string
    backToResults: string
  }
  progress: {
    /** Format string for the step counter. Use {step}, {total}, {label} as placeholders. */
    stepFormat: string
  }
  steps: {
    hairType: string
    naturalColour: string
    desiredColour: string
    desiredColourSkipSublabel: string
    treatments: string
    treatmentsSubtitle: string
    applicationType: string
    applicationTypeSubtitle: string
    cut: string
    cutSubtitle: string
  }
  results: {
    title: string
    colourSection: string
    treatmentsSection: string
    processesRequired: string
    noColour: { label: string; note: string }
    noTreatment: { label: string; note: string }
    compatOk: string
    compatWarning: string
    suitability: Record<Suitability, { icon: string; label: string }>
  }
  summary: {
    hairType: string
    naturalColour: string
    dreamColour: string
    treatments: string
    noTreatment: string
    applicationType: string
    cut: string
  }
  cta: {
    disclaimer: string
    bookLabel: string
    bookHref: string
    resetLabel: string
  }
}

Option types

The shapes behind each option array in TreatmentConsultantConfig.

type HairTypeId = "straight" | "wavy" | "curly" | "coily"

interface HairTypeOption {
  id: HairTypeId
  label: string
  pattern: string
  image?: string
}

type NaturalColourId =
  | "light-blonde" | "dark-blonde" | "light-brown" | "dark-brown"
  | "red" | "black" | "grey-white"

interface ColourOption {
  id: NaturalColourId
  label: string
  colour: string
  image?: string
  textDark?: boolean
}

type DesiredColourId =
  | "none" | "blonde" | "brown" | "red" | "black" | "grey-silver" | "vivid" | "balayage"

interface DesiredColourOption {
  id: DesiredColourId
  label: string
  colour?: string
  image?: string
  textDark?: boolean
}

type ApplicationTypeId = "all-over" | "balayage" | "highlights" | "lowlights" | "t-section"

interface ApplicationTypeOption {
  id: ApplicationTypeId
  label: string
  description?: string
  icon: string
}

type CutId = "none" | "trim" | "restyle" | "layers" | "fringe"

interface CutOption {
  id: CutId
  label: string
  description?: string
  icon: string
  excludedByHairTypes?: HairTypeId[]
  warnForHairTypes?: HairTypeId[]
  warnings?: Partial<Record<HairTypeId, { note: string; detail: string }>>
}

type TreatmentId =
  | "none" | "keratin-smoothing" | "brazilian-blowout" | "perm" | "relaxer"
  | "japanese-straightening" | "deep-conditioning" | "bond-repair" | "gloss"
  | "scalp-treatment" | "blowdry"

interface Treatment {
  id: TreatmentId
  label: string
  icon: string
  description?: string
  notes: string[]
  /** Show a colour-compatibility badge on the results screen */
  compatibility?: boolean
  /** "ok" = compatible same-day; "warning" = not same-day as colour */
  colourCompatibility?: "ok" | "warning"
  excludes?: TreatmentId[]
  /** Set to false to hide this treatment from the treatments step */
  display?: boolean
}

ConsultationSelections

The payload shape for both the change and complete events.

interface ConsultationSelections {
  hairType: HairTypeId | null
  naturalColour: NaturalColourId | null
  desiredColour: DesiredColourId | null
  applicationType: ApplicationTypeId | null
  cut: CutId | null
  treatments: TreatmentId[]
}

Suitability

type Suitability = "great" | "possible" | "difficult" | "not-recommended"