Form Screens

form:{screen_id}:{stage}

{
  componentName?: string;     // Module name
  provider?: string;          // Provider name ('react')
  inputInfo: {
    name?: string;            // Screen ID (e.g., 'welcome', 'review')
    type?: string;            // Config type ('ocr', 'manual', 'doc_upload')
    documentType?: string;    // Document type if applicable
    index?: number;           // Document index if applicable
  }
}

const welcome = sdk.component('form', {
  name: 'WELCOME',
  type: 'manual'
});

welcome.on('form:welcome:loaded', (payload) => {
  console.log('Welcome screen shown');
});

await welcome.mount('#form-container');

const consent = sdk.component('form', {
  name: 'CONSENT',
  type: 'manual'
});

consent.on('form:consent:loaded', (payload) => {
  console.log('Consent screen displayed');
});

await consent.mount('#form-container');

const document = sdk.component('form', {
  name: 'DOCUMENT',
  type: 'manual',
  numberOfIDs: 2
});

document.on('form:document:loaded', (payload) => {
  console.log('Document selection screen displayed');
});

document.on('form:document:navigate', (payload) => {
  console.log('User selected:', payload.inputInfo.documentType);
});

await document.mount('#form-container');

const personal = sdk.component('form', {
  name: 'PERSONAL',
  type: 'manual'
});

personal.on('form:personal:loaded', (payload) => {
  console.log('Personal details form displayed');
});

await personal.mount('#form-container');

const review = sdk.component('form', {
  name: 'REVIEW',
  type: 'manual',
  verify: true,
  customResult: true
});

review.on('form:review:loaded', (payload) => {
  console.log('Review screen displayed');
});

review.on('form:review:success', (payload) => {
  console.log('Verification passed — show custom success UI');
});

review.on('form:review:partial', (payload) => {
  console.log('Partial match — show retry or custom UI');
});

review.on('form:review:pending', (payload) => {
  console.log('Verification pending — show custom pending UI');
});

review.on('form:review:failed', (payload) => {
  console.log('Verification failed — show custom failure UI');
});

await review.mount('#form-container');

const resultSuccess = sdk.component('form', {
  name: 'RESULT',
  type: 'manual',
  state: 'SUCCESS',
  title: { label: 'Complete' },
  descriptions: [{ label: 'Process is now complete.' }],
  cta: { label: 'Done' }
});

resultSuccess.on('form:result:success', (payload) => {
  console.log('User dismissed the success screen');
});

await resultSuccess.mount('#form-container');

const retry = sdk.component('form', {
  name: 'RETRY',
  type: 'manual'
});

retry.on('form:retry:loaded', (payload) => {
  console.log('Retry screen displayed - user can correct data');
});

await retry.mount('#form-container');

const retry = sdk.component('form', {
  name: 'RETRY',
  type: 'manual'
});

const resultFail = sdk.component('form', {
  name: 'RESULT',
  type: 'manual',
  state: 'FAIL',
  title: { label: 'Max attempts reached' },
  descriptions: [
    { label: 'You have reached the maximum number of attempts.' }
  ],
  cta: { label: 'Close' }
});

let retryCount = 0;

// Fires when user presses CTA on PARTIAL result screen
review.on('form:result:partial', async () => {
  if (retryCount < 2) {
    retry.mount('#form-container');
    retryCount += 1;
  } else {
    resultFail.mount('#form-container');
  }
});

retry.on('form:retry:loaded', (payload) => {
  console.log('Retry screen displayed - attempt', retryCount);
});

const docUpload = sdk.component('form', {
  name: 'DOC_UPLOAD',
  type: 'doc_upload'
});

docUpload.on('form:doc_upload:success', (payload) => {
  console.log('Document uploaded successfully');
});

docUpload.on('form:doc_upload:failed', (payload) => {
  console.log('Upload failed');
});

await docUpload.mount('#form-container');

[IDV Capture] → Review (type: 'ocr') → Result

Welcome → Consent → Personal Details → Document Selection → Review → Loading → Result → [Retry if failed]

Welcome → Consent → Required Uploads → Partial Uploads → Optional Uploads → Review → Result

const sdk = await OneSdk({
  session: { token: 'your-token' },
  recipe: {
    form: {
      provider: {
        name: 'react',
        googleApiKey: 'your-google-api-key'
      }
    }
  }
});

const formComponent = sdk.component('form', {
  name: 'WELCOME',
  mode: 'individual',
  type: 'manual'
});

// Track every screen transition
const screens = [
  'welcome', 'start', 'consent', 'document',
  'personal', 'review', 'loading', 'result', 'retry',
  'doc_upload', 'required_document_upload',
  'partial_document_upload', 'optional_document_upload'
];

screens.forEach(screen => {
  formComponent.on(`form:${screen}:ready`, (payload) => {
    console.log(`[${screen}] ready`);
  });

  formComponent.on(`form:${screen}:loaded`, (payload) => {
    console.log(`[${screen}] loaded`);
  });

  formComponent.on(`form:${screen}:failed`, (payload) => {
    console.error(`[${screen}] failed`);
  });
});

// Handle verification outcomes
// Review-level result events (only with customResult: true in manual mode)
formComponent.on('form:review:success', () => {
  console.log('Verification passed — handle custom result UI');
});

// Result screen CTA events (fired when user presses CTA on result screens)
formComponent.on('form:result:success', () => {
  console.log('User pressed CTA on SUCCESS result screen');
});

formComponent.on('form:result:partial', () => {
  console.log('User pressed CTA on PARTIAL result screen');
});

formComponent.on('form:result:pending', () => {
  console.log('User pressed CTA on PENDING result screen');
});

await formComponent.mount('#form-container');