E2E Sample Code

const oneSdk = await OneSdk({
  session: sessionObjectFromBackend,
  //isPreloaded: false,
  mode: "development",
  recipe: {
    ocr: {
      maxDocumentCount: 3,
    },
    form: {
      provider: {
        name: 'react',
      },
    }
  }
});
oneSdk.on('*', console.log);

const form_welcome = oneSdk.component("form", {
  name: "WELCOME",
  type: "ocr",
  /*descriptions: [
          { label: 'This is a sample dynamic page.', style: {} },
          { label: 'It can contain multiple paragraphs.', style: {} },
        ], */
  //cta: {style: {'ff-button':{backgroundColor: "red"}}}
});
const form_consent = oneSdk.component("form", {name: "CONSENT"});
const form_loading1 = oneSdk.component("form", {name: "LOADING", title: {label: "Loading..."}, descriptions: [{label: ""}]});
const form_loading2 = oneSdk.component("form", {name: "LOADING", title: {label: "Extracting data..."}, descriptions: [{label: "Hold tight, this can take up to 30 seconds. Please do not referesh this page or click the 'back' button on your browser."}]});
const form_loading3 = oneSdk.component("form", {name: "LOADING", title: {label: "Hold on..."}, descriptions: [{label: ""}]});

const form_document = oneSdk.component("form", {
  name: "DOCUMENT",
  showPreps: true,
});
const form_review1 = oneSdk.component("form", {
  name: "REVIEW",
  type: "ocr",
});
const form_review2 = oneSdk.component("form", {
  name: "REVIEW",
  type: "ocr",
  personal: {
    countries:{
      default:{
        default:{
          fields:[
            {
              fieldType: 'address',
              name: 'address.fullAddress',
              hide: true
            }
          ]
        }
      }
    }
  }
});
const form_review3 = oneSdk.component("form", {
  name: "REVIEW",
  type: "ocr",
  personal: {
    countries:{
      default:{
        default:{
          fields:[
            {
              fieldType: 'date',
              name: 'dateOfBirth',
              hide: true
            },
            {
              fieldType: 'address',
              name: 'address.fullAddress',
              hide: true
            }
          ]
        }
      }
    }
  }
});
const biometrics = oneSdk.component('biometrics');

form_welcome.mount("<YOUR_CONTAINER>");
form_welcome.on("form:welcome:ready", () => {
  form_consent.mount("<YOUR_CONTAINER>");
});

form_consent.on("form:consent:ready", async () => {
  
  form_document.mount("<YOUR_CONTAINER>");
});

form_welcome.on("form:welcome:failed", () => {
  // display error message
});

form_welcome.on("*", (message) => {
  console.log(message);
});

let docType;

form_document.on("form:document:ready", async ({inputInfo}) => {
  
  form_loading1.mount("<YOUR_CONTAINER>");
  docType = inputInfo.documentType;
  const ocr = oneSdk.component("ocr", {
    documents: [{ type: docType, countries: ["AUS"] }],
  });
  console.log(inputInfo.documentType);
  
  ocr.mount("<YOUR_CONTAINER>");
  ocr.on("ready", () => form_loading1.unmount())

  ocr.on("*", (message) => {
    console.log(message);
  });

  ocr.on("results", ({ document }) => {   
    doSomethingAfterOcr({ document })
  }
        );

  ocr.on("loading", (display)=>{
    if(display){
      form_loading2.mount("<YOUR_CONTAINER>");
    }else{
      form_loading2.unmount() 
    }
  });
});

function doSomethingAfterOcr({ document }) {
  // Present the details of the document that were detected from the uploaded image or images.
  // Decide whether to proceed to the next stage of the onboarding process
  // depending on whether document verification was successful.
  if (document) {
    console.log(document);
    console.log(document.ocrResult.dateOfBirth);
    console.log("trying to load review screen");
    if (docType == "DRIVERS_LICENCE")
      form_review1.mount("<YOUR_CONTAINER>");
    else if (docType == "PASSPORT") {
      form_review2.mount("<YOUR_CONTAINER>");
    }
    else {
      form_review3.mount("<YOUR_CONTAINER>");
    }
  } else {
    console.log("No document returned");
  }
}

form_review1.on("form:review:ready", async () => {
  biometrics.mount("<YOUR_CONTAINER>");
});

biometrics.on("*", (message) => {
  console.log(message);
});

biometrics.on('error', console.error);

let error = false;
biometrics.on('detection_failed', () => (error = true));
biometrics.on('session_closed', () => {
  // If the session was closed due to an error, try running the biometrics component again.
  if (error) biometrics.mount('<YOUR_CONTAINER>');
  error = false;
});

biometrics.on("loading", (display)=>{
  if(display){
    //alert("loading, show now")
    form_loading3.mount("<YOUR_CONTAINER>");
  }else{
    form_loading3.unmount() 
  }
});

biometrics.on('processing', () => alert('We will get back to you with results soon'));
biometrics.on('results', (result) => {
  // Decide whether to proceed to the next stage of the onboarding process
  // depending on whether biometrics verification was successful.
  console.log(result);
});