App Extended Components
The qnr-framework provides a generic rendering engine for questionnaire questions. The Feather app extends this with custom components that handle Feather-specific functionality like Stripe payments, backend policy creation, and enhanced input experiences.
These components are registered in the app codebase and are not configurable from Strapi (their behavior is code-driven). However, the CMS controls when they appear via question type selection and screen configuration.
GenericCheckout (GENERIC_CHECKOUT_V2)
Section titled “GenericCheckout (GENERIC_CHECKOUT_V2)”Stripe payment integration page.
| Aspect | Details |
|---|---|
| Question type | GENERIC_CHECKOUT_V2 |
| Layout | Standalone |
Features:
| Feature | Description |
|---|---|
| Policy details | Displays a summary of the user’s selections (key-value pairs from policyDetails) |
| Product card | Shows the product with icon, name, and pricing (from productCardDetails) |
| Additional details | Extra information below the main summary (from additionalPolicyDetails) |
| Price breakdown | Itemized price display (from priceBreakdown) |
| Billing config | Supports yearly or monthly contract cycles (from billingConfig.contractCycle) |
| Stripe Elements | Embeds Stripe payment form for card or SEPA collection |
| Icon | Product icon displayed in the checkout header (from icon) |
GenericSubmission (GENERIC_SUBMISSION)
Section titled “GenericSubmission (GENERIC_SUBMISSION)”Non-payment form submission endpoint. Used for flows that collect information without requiring payment (e.g., claims, lead generation).
| Aspect | Details |
|---|---|
| Question type | GENERIC_SUBMISSION |
| Layout | Standalone |
Features:
| Feature | Description |
|---|---|
| Policy details | Summary display of collected answers |
| Product card | Product information card |
| Backend submission | Sends collected data to the backend API |
Processing
Section titled “Processing”Loading state shown while the backend processes a signup.
| Aspect | Details |
|---|---|
| Question type | PROCESSING |
| Layout | Standalone |
Features:
| Feature | Description |
|---|---|
| Text rotation | Cycles through messages from textList during the loading animation |
| Backend polling | Polls the backend until policy creation is confirmed |
| Auto-advance | Automatically navigates to the next question (typically SUCCESS) when processing completes |
ClaimProcessing (CLAIM_PROCESSING)
Section titled “ClaimProcessing (CLAIM_PROCESSING)”Claims-specific processing state.
| Aspect | Details |
|---|---|
| Question type | CLAIM_PROCESSING |
| Layout | Standalone |
Features:
Same as Processing but submits claim data instead of signup data. Handles claim-specific backend API calls and error states.
CancelPolicyProcessing (CANCEL_POLICY_PROCESSING)
Section titled “CancelPolicyProcessing (CANCEL_POLICY_PROCESSING)”Cancellation processing state.
| Aspect | Details |
|---|---|
| Question type | CANCEL_POLICY_PROCESSING |
| Layout | Standalone |
Features:
| Feature | Description |
|---|---|
| Text rotation | Cycles through messages from textList |
| Submit keys | Sends specific answer values (identified by submitKeys) with the cancellation request |
| Backend call | Submits the cancellation to the backend API |
EffectiveDateDropdown (EFFECTIVE_DATE_DROPDOWN)
Section titled “EffectiveDateDropdown (EFFECTIVE_DATE_DROPDOWN)”Dropdown for selecting when coverage should begin.
| Aspect | Details |
|---|---|
| Question type | EFFECTIVE_DATE_DROPDOWN |
| Layout | Centered |
Features:
| Feature | Description |
|---|---|
| Date generation | Automatically generates available start dates based on product-specific rules |
| Formatting | Displays dates in the user’s locale |
BooleanForm (BOOLEAN — extended)
Section titled “BooleanForm (BOOLEAN — extended)”Enhanced yes/no component with app-specific styling.
| Aspect | Details |
|---|---|
| Question type | BOOLEAN |
| Layout | Centered |
Features:
| Feature | Description |
|---|---|
| Card-style buttons | Renders yes/no as large card-style buttons instead of a simple toggle |
| Feather styling | Uses Feather’s design system colors and spacing |
EmailBasic (EMAIL_BASIC)
Section titled “EmailBasic (EMAIL_BASIC)”Simple email collection input.
| Aspect | Details |
|---|---|
| Question type | EMAIL_BASIC |
| Layout | Centered |
Features:
| Feature | Description |
|---|---|
| Email validation | Built-in email format validation |
| Simple UI | Single email field without additional contact fields |
AddressForm (ADDRESS — extended)
Section titled “AddressForm (ADDRESS — extended)”Enhanced address input with Google Maps autocomplete.
| Aspect | Details |
|---|---|
| Question type | ADDRESS |
| Layout | Centered |
Features:
| Feature | Description |
|---|---|
| Google Maps autocomplete | Suggests addresses as the user types |
| Manual entry fallback | Option to switch to manual field-by-field entry |
| Country-aware | Adapts fields based on countryCode or dynamicCountryCode |
| Field customization | Placeholder text configurable via placeholders prop |
CustomIntro (INTRO — extended)
Section titled “CustomIntro (INTRO — extended)”App-specific intro screen with Feather branding.
| Aspect | Details |
|---|---|
| Question type | INTRO |
| Layout | Standalone |
Features:
| Feature | Description |
|---|---|
| Info cards | Renders infoCards as styled cards with icons |
| Feather branding | Uses vertical-specific colors and imagery |
| CTA button | Prominent “Get started” button |
SignatureUpload (SIGNATURE_UPLOAD)
Section titled “SignatureUpload (SIGNATURE_UPLOAD)”Digital signature capture with consent checkboxes.
| Aspect | Details |
|---|---|
| Question type | SIGNATURE_UPLOAD |
| Layout | Centered |
Features:
| Feature | Description |
|---|---|
| Canvas signature | Touch/mouse drawing area for digital signature |
| Checkbox consent | Required consent checkboxes from checkboxOptions must be checked before submission |
| Upload | Captures the signature as an image and uploads it |
QuotePage (QUOTE_CUSTOM — extended)
Section titled “QuotePage (QUOTE_CUSTOM — extended)”Full quote page rendering engine. This is one of the most complex app components.
| Aspect | Details |
|---|---|
| Question type | QUOTE_CUSTOM |
| Layout | Standalone |
| Key files | Quote.container.tsx, Quote.view.tsx |
Features:
| Feature | Description |
|---|---|
| CMS-driven layout | Renders all components from the linked quote-page content type |
| Plan selection | Displays available plans with pricing |
| Customization controls | Renders switches, sliders, and toggles from quoteOptions |
| Coverage table | Side-by-side plan comparison from the linked Table |
| Addons | Selectable add-on items |
| Conditional visibility | Evaluates quote-page rules to show/hide/disable components |
| Price recalculation | Updates pricing in real-time as the user changes selections |
| Footer | Renders the CTA footer (with optional overrides) |
Component Registration
Section titled “Component Registration”These components are registered in the app’s questionnaire configuration, mapping question types to React components. The qnr-framework calls the registered component when it encounters the corresponding question type during rendering.
| Question Type | App Component | Framework provides base? |
|---|---|---|
GENERIC_CHECKOUT_V2 |
GenericCheckout | No (app-only) |
GENERIC_SUBMISSION |
GenericSubmission | No (app-only) |
PROCESSING |
Processing | No (app-only) |
CLAIM_PROCESSING |
ClaimProcessing | No (app-only) |
CANCEL_POLICY_PROCESSING |
CancelPolicyProcessing | No (app-only) |
EFFECTIVE_DATE_DROPDOWN |
EffectiveDateDropdown | No (app-only) |
BOOLEAN |
BooleanForm | Yes (extended) |
EMAIL_BASIC |
EmailBasic | No (app-only) |
ADDRESS |
AddressForm | Yes (extended) |
INTRO |
CustomIntro | Yes (extended) |
SIGNATURE_UPLOAD |
SignatureUpload | No (app-only) |
QUOTE_CUSTOM |
QuotePage | No (app-only) |
See also
Section titled “See also”- Component Overview – full mapping of all question types to components (core and app-extended)
- Configure Checkout – how to set up GenericCheckout in Strapi
- Architecture Overview – how the app layer extends qnr-framework