Field Comparison Module

Warning

This guide is specific to Web SDK 2.x. For Web SDK 1.x, you can find documentation here.

Do not attempt to upgrade or implement without support. Contact your Incode representative to check if you are a candidate for this upgrade.

The Field Comparison module collects the user's first and last name and submits them for backend verification against data already on file for the session.

This module follows the form-based pattern. See the patterns page for the shared lifecycle.

Tag

<incode-field-comparison> is a standard Web Component. Importing the UI subpath registers the custom element; importing the CSS applies the module's styles.

import '@incodetech/web/field-comparison';
import '@incodetech/web/field-comparison/styles.css';

Properties

Property	Type	Required	Description
`config`	`FieldComparisonConfig`	❌	No options
`onFinish`	`() => void`	❌	Called when the module completes
`onError`	`(error: string) => void`	❌	Called when an error occurs

Configuration

The module takes no configuration — the backend sends an empty module configuration for this step:

type FieldComparisonConfig = Record<string, never>;

Which fields the backend compares, and how it scores the result, is configured server-side.

State machine

FieldComparisonState is a discriminated union over status:

Status	Description
`idle`	Initial state, waiting for `load()`.
`inputting`	Form rendered; the user enters their name.
`submitting`	Sending the entered names to the backend.
`success`	Submission accepted.
`finished`	Terminal.
`error`	Submission failed; the user can retry or skip.

When status === 'inputting':

Property	Type	Description
`fields`	`FieldComparisonFields`	Current values: `{ firstName, lastName }`.
`validationErrors`	`FieldComparisonValidationErrors`	Translation keys for fields with displayed errors. Absent before validation and when no errors remain.
`canSubmit`	`boolean`	`true` when no validation errors are displayed. It starts `true` before validation runs.

Field Comparison uses optimistic validation. Continue starts enabled on an empty form. Calling submit() validates both required names. If either name is blank, the state remains inputting, validationErrors contains dynamicForms.fieldRequired for each blank field, and canSubmit becomes false. Calling setField() clears the error for that field.

submitting carries the same fields, frozen at submission time, so you can keep the form visible while the request is in flight.

API methods

Method	Purpose
`load()`	Starts the module. Moves `idle` → `inputting`. Call this first.
`setField(field, value)`	Update one field. `field` is `'firstName'` or `'lastName'`.
`submit()`	Validate both names, then submit them when valid.
`retry()`	Retry after an `error`.
`skip()`	Skip the module and finish without submitting.

Plus the universal lifecycle: subscribe, getState, reset, stop.

Headless example

import { setup } from '@incodetech/core';
import { createFieldComparisonManager } from '@incodetech/core/field-comparison';

const manager = createFieldComparisonManager({ config: {} });

manager.subscribe((state) => {
  if (state.status === 'inputting') {
    renderForm({
      fields: state.fields,
      validationErrors: state.validationErrors,
      canSubmit: state.canSubmit,
    });
  }
  if (state.status === 'finished') {
    console.log('Field comparison complete');
  }
});

manager.load();

// Wire your inputs to setField, then submit.
manager.setField('firstName', 'Ada');
manager.setField('lastName', 'Lovelace');
manager.submit();