Review — FrankieOne | Documentation

The Review Module provides two distinct review screens:

Manual Flow Review: Allows users to review entered details before verification
OCR Review: Enables review and correction of OCR-extracted information

Manual Flow Review

Overview

The Manual Flow Review screen presents two main sections:

Personal Details: Name, date of birth, and address
Document Details: Information for each captured ID

Users can edit information by clicking the respective “Edit” buttons to return to the corresponding input screens.

Implementation Guide

Initialize the Component

1 const manualReview = oneSdk.component('form', {
2   name: "REVIEW",
3   type: "manual"
4 });

Mount the Component

1 manualReview.mount("#form");

Add HTML Container

1 <div id="form"></div>

Configuration Options

Basic Configuration

1 {
2   name: "REVIEW",    // Screen name
3   type: "manual"     // Flow type
4 }

Advanced Configuration

By default, the Review screen only shows submitted form details. To display specific details before submission, pass personal or documents configurations. These settings affect both review and edit screens.

The personal and documents configs follow the same structure as their respective modules. See the Personal Details and Document Upload module documentation for details.

Passing Personal and Documents Config

1 {
2   name: "REVIEW",
3   type: "manual",
4   personal: { /* Personal details config — see Personal Details module */ },
5   documents: { /* Document details config — see Document Upload module */ }
6 }

Details can also be hidden or made read-only

Hide or Make Read Only

1 {
2   name: "REVIEW",
3   type: "manual",
4   readOnlyForms: ['personal', 'DRIVERS_LICENCE', 'PASSPORT', 'NATIONAL_HEALTH_ID'],
5   hiddenForms: ['personal', 'DRIVERS_LICENCE', 'PASSPORT', 'NATIONAL_HEALTH_ID']
6 }

Verification Flow

When verify: true:

User details are saved
Verification check runs automatically
Loading screen appears during check
Result screen displays based on check outcome

To customize the result screen, set customResult: true to prevent default screens from mounting. Then handle these events to show your own screens:

form:review:success
form:review:failed
form:review:partial
form:review:pending

Custom Result Handling

1 // Initialize review component with custom result handling enabled
2 const review = oneSdk.component('form', {
3   name: "REVIEW",
4   type: "manual",
5   customResult: true // Prevents default result screens from mounting
6 });
7 
8 // Create success screen component to show after successful verification
9 const success = oneSdk.component('form', {
10   name: "RESULT",
11   type: "SUCCESS",
12   title: { label: "Complete" },
13   descriptions: [{ label: "Process is now complete. You can close the page" }],
14 })
15 
16 // Listen for successful verification and mount success screen
17 review.on('form:review:success', () => {
18   success.mount("#form"); // Mount success component in place of review screen
19 });

Event Handling

form:review:loaded

Emitted when Review screen initializes

form:review:partial

Triggers when some checks succeed but others fail

form:review:ready

Fires when submit button is clicked

OCR Review

Overview

The OCR Review screen allows users to verify and correct information extracted through OCR or IDV modules.

Implementation Guide

With IDV Flow

With OCR Flow

1 const idv = oneSdkInstance.flow('idv');
2 const review = oneSdkInstance.component("form", {
3   name: "REVIEW",
4   type: "ocr"
5 });
6 
7 idv.mount("#form");
8 
9 idv.on('results', () => {
10   review.mount("#form");
11 });

Document Field Configuration

Configuration Structure

Document fields are configured per document type, with country-specific configurations available.

Document Configuration Example

1 documents: [
2   {
3     type: 'DRIVERS_LICENCE',
4     countries: {
5       default: {
6         default: {
7           fields: [
8             {
9               fieldType: 'select',
10               name: 'region',
11               label: `Driver's Licence State/Territory`,
12               rules: {
13                 required: {
14                   value: true,
15                   message: 'Please select a state/territory'
16                 }
17               }
18             },
19             // Additional fields...
20           ]
21         }
22       }
23     }
24   }
25 ]

Field Configuration Reference

Available Field Types

Driver's License

State/Territory: select
License Number: input
Card Number: input

Medicare Card

Card Color: select
Card Number: input
Position: input
Expiry: date

Field Properties

Property	Description
fieldType	Input type (`select`, `input`, `date`)
dataType	Data format (typically `text`)
label	Display label
name	Field identifier
hide	Toggle field visibility
helperText	Additional guidance text
placeholder	Input placeholder text

Validation Rules

1 rules: {
2   required: {
3     value: true,
4     message: "Field is required"
5   },
6   minLength: {
7     value: 1,
8     message: "Minimum 1 character"
9   },
10   maxLength: {
11     value: 15,
12     message: "Maximum 15 characters"
13   },
14   pattern: {
15     value: /^[a-zA-Z]+$/,
16     message: "Letters only"
17   }
18 }

1	const manualReview = oneSdk.component('form', {
2	name: "REVIEW",
3	type: "manual"
4	});

1	{
2	name: "REVIEW", // Screen name
3	type: "manual" // Flow type
4	}

1	{
2	name: "REVIEW",
3	type: "manual",
4	personal: { /* Personal details config — see Personal Details module */ },
5	documents: { /* Document details config — see Document Upload module */ }
6	}

1	{
2	name: "REVIEW",
3	type: "manual",
4	readOnlyForms: ['personal', 'DRIVERS_LICENCE', 'PASSPORT', 'NATIONAL_HEALTH_ID'],
5	hiddenForms: ['personal', 'DRIVERS_LICENCE', 'PASSPORT', 'NATIONAL_HEALTH_ID']
6	}

1	// Initialize review component with custom result handling enabled
2	const review = oneSdk.component('form', {
3	name: "REVIEW",
4	type: "manual",
5	customResult: true // Prevents default result screens from mounting
6	});
7
8	// Create success screen component to show after successful verification
9	const success = oneSdk.component('form', {
10	name: "RESULT",
11	type: "SUCCESS",
12	title: { label: "Complete" },
13	descriptions: [{ label: "Process is now complete. You can close the page" }],
14	})
15
16	// Listen for successful verification and mount success screen
17	review.on('form:review:success', () => {
18	success.mount("#form"); // Mount success component in place of review screen
19	});

1	const idv = oneSdkInstance.flow('idv');
2	const review = oneSdkInstance.component("form", {
3	name: "REVIEW",
4	type: "ocr"
5	});
6
7	idv.mount("#form");
8
9	idv.on('results', () => {
10	review.mount("#form");
11	});

1	documents: [
2	{
3	type: 'DRIVERS_LICENCE',
4	countries: {
5	default: {
6	default: {
7	fields: [
8	{
9	fieldType: 'select',
10	name: 'region',
11	label: `Driver's Licence State/Territory`,
12	rules: {
13	required: {
14	value: true,
15	message: 'Please select a state/territory'
16	}
17	}
18	},
19	// Additional fields...
20	]
21	}
22	}
23	}
24	}
25	]