"dependencies": {
    "@innovatrics/dot-multi-range-liveness": "file:innovatrics-dot-multi-range-liveness-[VERSION].tgz"
},

import type {
  Configuration,
  HTMLMultiRangeLivenessElement,
  OnCompleteCallbackImage
} from "@innovatrics/dot-multi-range-liveness";

import { useEffect } from "react";
import "@innovatrics/dot-multi-range-liveness";

const MultiRangeLiveness = (configuration: Configuration) => {
  useEffect(() => {
    const multiRangeHTMLElement = document.getElementById(
        "x-dot-multi-range-liveness"
    ) as HTMLMultiRangeLivenessElement | null;

    if (multiRangeHTMLElement) {
      multiRangeHTMLElement.configuration = configuration;
    }
  });

  return <x-dot-multi-range-liveness id="x-dot-multi-range-liveness" />;
};

const Page = () => {

  const handleOnComplete = (imageData: OnCompleteCallbackImage, content: Uint8Array) => {
    // ...
  };

  const handleError = (error: Error) => {
    alert(error);
  };

  return (
    <MultiRangeLiveness
      onComplete={handleOnComplete}
      onError={handleError}
      sessionToken="1111-222-333-4444"
      transactionCountingToken="provide-the-token-here"
      challengeSequence={["ONE", "THREE", "FIVE", "ZERO"]} // Challenge needs to be obtained from the API call to the Digital Identity Service
    />
  );
};

import type {
  Configuration,
  HTMLMultiRangeLivenessElement
} from "@innovatrics/dot-multi-range-liveness";

import { useLayoutEffect, useRef } from "react";
import "@innovatrics/dot-multi-range-liveness";

const MultiRangeLiveness = (configuration: Configuration) => {
  const ref = useRef<HTMLMultiRangeLivenessElement | null>(null);

  useLayoutEffect(() => {
    const element = ref.current;

    if (element) {
      element.configuration = configuration;
    }
  }, [configuration]);

  return <x-dot-multi-range-liveness id="x-dot-multi-range-liveness" ref={ref} />;
};

import type { OnCompleteCallback, Configuration } from "@innovatrics/dot-multi-range-liveness";

{
  name: "AutoCaptureError",
  message: "The webcam is already in use by another application",
  cause: DOMException: Could not start video source // Original error thrown by browser MediaDevices API
}

<div style={{position: "relative", overflow: "hidden"}}>
  <MultiRangeLivenessUi showCameraButtons/>
  <MultiRangeLiveness
      onComplete={handleOnComplete}
      onError={handleError}
      challengeSequence={["ONE", "THREE", "FIVE", "ZERO"]} // Challenge needs to be obtained from the API call to the Digital Identity Service
      transactionCountingToken="provide-the-token-here"
  />
</div>

"dependencies": {
    "@innovatrics/dot-auto-capture-ui": "file:innovatrics-dot-auto-capture-ui-[VERSION].tgz",
}

import type {
  MultiRangeUiProps,
  HTMLMultiRangeLivenessUiElement
} from "@innovatrics/dot-auto-capture-ui/multi-range";

import { useEffect } from "react";
import "@innovatrics/dot-auto-capture-ui/multi-range";

const MultiRangeLivenessUi = (props: MultiRangeUiProps) => {
  useEffect(() => {
    const uiElement = document.getElementById(
      "x-dot-multi-range-liveness-ui"
    ) as HTMLMultiRangeLivenessUiElement | null;

    if (uiElement) {
      uiElement.props = props;
    }
  });

  return <x-dot-multi-range-liveness-ui id="x-dot-multi-range-liveness-ui" />;
};

import type {
  MultiRangeUiProps,
  HTMLMultiRangeLivenessUiElement
} from "@innovatrics/dot-auto-capture-ui/multi-range";

import { useLayoutEffect, useRef } from "react";
import "@innovatrics/dot-auto-capture-ui/multi-range";

const MultiRangeLivenessUi = (props: MultiRangeUiProps) => {
  const ref = useRef<HTMLMultiRangeLivenessUiElement | null>(null);

  useLayoutEffect(() => {
    const element = ref.current;

    if (element) {
      element.props = props;
    }
  }, [props]);

  return <x-dot-multi-range-liveness-ui id="x-dot-multi-range-liveness-ui" ref={ref} />
};

<MultiRangeLivenessUi
  theme={{ colors: { placeholderColor: "green" }, font: { style: 'italic' } }}
  backdropColor="rgba(10, 10, 10, 0.5)"
  instructions={{ candidate_selection: "Candidate selection" }}
  escalatedInstructions={{
    face_too_close: "Please step back from the camera",
    face_too_far: "Please move closer to the camera"
  }}
  appStateInstructions={{ loading: { text: "Component is loading", visible: true } }}
  showCameraButtons
/>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <!-- import font in the head -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <!------->
  </head>
</html>

import { MultiRangeCustomEvent } from '@innovatrics/dot-multi-range-liveness/events';
import { useEffect, useState } from 'react';

const Events = () => {
  const [multiRangePhase, setMultiRangePhase] = useState<string | undefined>();
  const [instruction, setInstruction] = useState<string | undefined>();
  const [isInstructionEscalated, setIsInstructionEscalated] = useState<boolean>(false);

  useEffect(() => {
    const handlePhaseChanged = (event: CustomEvent) => {
      setMultiRangePhase(event.detail.phase);
    };

    const handleInstructionChanged = (event: CustomEvent) => {
      setInstruction(event.detail.instructionCode);
      setIsInstructionEscalated(event.detail.isEscalated || false);
    };

    // Or you can listen to the event directly
    const handleInstructionEscalated = (event: CustomEvent) => {
      console.log('Instruction escalated:', event.detail.instructionCode);
      setIsInstructionEscalated(true);
    };

    document.addEventListener(MultiRangeCustomEvent.PHASE_CHANGED, handlePhaseChanged);
    document.addEventListener(MultiRangeCustomEvent.INSTRUCTION_CHANGED, handleInstructionChanged);
    document.addEventListener(MultiRangeCustomEvent.INSTRUCTION_ESCALATED, handleInstructionEscalated);

    return () => {
      document.removeEventListener(MultiRangeCustomEvent.PHASE_CHANGED, handlePhaseChanged);
      document.removeEventListener(MultiRangeCustomEvent.INSTRUCTION_CHANGED, handleInstructionChanged);
      document.removeEventListener(MultiRangeCustomEvent.INSTRUCTION_ESCALATED, handleInstructionEscalated);
    };
  }, []);
};

const phaseChangeEvent = "multi-range-auto-capture:phase-changed";
const instructionChangeEvent = "multi-range-auto-capture:instruction-changed";
const instructionEscalatedEvent = "multi-range-auto-capture:instruction-escalated";

function handlePhaseChange(event) {
  console.log(event.detail.phase)
}

function handleInstructionChange(event) {
  console.log(event.detail.instructionCode)
  console.log('Is escalated:', event.detail.isEscalated)
}

function handleInstructionEscalated(event) {
  console.log('Instruction escalated:', event.detail.instructionCode)
}

document.addEventListener(phaseChangeEvent, handlePhaseChange);
document.addEventListener(instructionChangeEvent, handleInstructionChange);
document.addEventListener(instructionEscalatedEvent, handleInstructionEscalated);

/**
 * remove event listeners when you're done
 */
document.removeEventListener(phaseChangeEvent, handlePhaseChange);
document.removeEventListener(instructionChangeEvent, handleInstructionChange);
document.removeEventListener(instructionEscalatedEvent, handleInstructionEscalated);