Quote Page V2 Architecture

The Quote Page V2 is the CMS-driven pricing page where users compare plans, see pricing, select add-ons, and customize their coverage. It is configured entirely in Strapi — no code changes needed. It sits at the intersection of several content types, and understanding how they connect is essential for configuring it correctly.

How the Pieces Fit Together

flowchart TD
    V["<b>Vertical</b><br/>e.g., Household<br/>(insurance product)"]
    Q["<b>Questionnaire</b><br/>Flow definition<br/>(questions + rules)"]
    QP["<b>Quote-Page</b><br/>UI configuration<br/>(sliders, cards, FAQ)"]
    QPR["<b>Quote-Price</b><br/>Pricing engine<br/>(calculations)"]
    T["<b>Table</b><br/>Coverage comparison<br/>table data"]

    Q -->|"metadata.vertical"| V
    Q -->|"quote question →<br/>props.cmsQuote"| QP
    QPR -->|"metadata.vertical"| V
    QP -->|"coverageTable link"| T

There are four content types involved:

Content type	What it defines	Linked via
Vertical	The insurance product (Household, Dental, etc.)	Central entity — others point to it
Questionnaire	The flow of questions	`metadata.vertical` points to a Vertical
Quote-Page	The UI of the pricing screen	Referenced by a `quote` or `quote_custom` question in the Questionnaire
Quote-Price	The pricing calculation logic	`metadata.vertical` points to the same Vertical

The Connection Chain

A Vertical (e.g., “Household”) is created as the product definition
A Questionnaire is created and linked to that vertical via its metadata.vertical field
Within the questionnaire, a question with type quote or quote_custom is added. This question’s props.cmsQuote relation points to a Quote-Page
A Quote-Price is created with metadata.vertical linking to the same vertical. This is where the pricing math lives
At runtime, when the user reaches the quote question, the app loads both the Quote-Page (for UI) and the Quote-Price (for calculations) and combines them into the pricing screen

What the Quote-Page Defines

The Quote-Page content type controls the visual experience of the pricing screen. In V2, all components live in a single content array:

Component	What it configures
header	Page title and optional price display
range-input / choice / boolean	Customization controls — sliders, checkbox selectors, and toggles that let users adjust their plan
plan-cards	Plan selection cards with feature comparison
addons	Optional extras the user can add to their plan (e.g., glass coverage), with optional slider sub-component
table	Coverage comparison table (linked to a Table content type)
covered	Visual cards highlighting what is included
faq-collection	Frequently asked questions shown on the pricing page
title	Section headings to organize the page
footer-override	Conditional footer replacement based on user answers

The footer (with bookACallUrl, secondaryAction, secondaryActionLink) is a separate top-level field, not part of the content array.

How Pricing Works (Quote-Price)

The Quote-Price entity contains the pricing calculation engine. It defines how to compute the premium based on the user’s answers and selected options.

There are two pricing approaches:

Approach	Used for	How it works
json-builder	Most verticals	A declarative calculation defined as JSON — constants, math operations, and references to user answers combined into a formula
private-pengine	Private health insurance	A dedicated pricing engine package (`private-health-insurance-pricing-engine`) for complex actuarial calculations

The json-builder approach lets Product teams define pricing logic in the CMS without code changes. It supports arithmetic operations, conditionals, lookups from constants, and references to user answers.

Quote-Page Component Rules

While questionnaire rules control which question appears next, quote-page component rules control the visibility and behavior of elements within the quote page itself. For example:

Show a slider only when a specific plan is selected
Disable an add-on when a certain answer was given earlier
Hide an information box based on the user’s region

The quote-page rule system supports 11 operators and evaluates conditions against the user’s current answers and selected plan via the ruleGroups field on each component. This is a simpler system than the full questionnaire rule engine, focused specifically on controlling the quote page UI.

Common Configurations

Simple Vertical (e.g., Liability)

One plan, no customization options
Quote page shows price, coverage table, and FAQ
Quote-Price uses json-builder with straightforward premium calculation

Multi-Plan Vertical (e.g., Dental)

Multiple plan tiers (Basic, Comfort, Premium)
Coverage table compares plans side-by-side
Quote-Price calculates different premiums per plan
Plan selection drives which coverage details are shown

Complex Vertical (e.g., Household)

Multiple plans with customization (coverage amount slider, deductible toggle)
Add-ons (glass coverage, bicycle coverage)
Component rules show/hide options based on selections
Quote-Price uses json-builder with multiple calculation branches

Debugging Quote Page Issues

Issue	Where to check
Quote page not showing	Questionnaire has no `quote`/`quote_custom` question, or `props.cmsQuote` not linked
Wrong pricing	Quote-Price for the vertical — check json-builder constants and formulas
Missing plan options	Quote-Page customization options or Vertical’s `planMapping`
Add-on not appearing	Quote-Page add-ons section, check component rules if conditional
Coverage table empty	Quote-Page → Table link missing or Table content not populated