idmission-web-sdk 0.0.31 → 0.0.33

package/dist/components/customer_flows/SignatureKYC.d.ts

@@ -10,5 +10,6 @@ export type SignatureKYCProps = {
     onComplete?: (submissionResponse: SubmissionResponse) => void;
     geolocationEnabled?: boolean;
     geolocationRequired?: boolean;
+    debugMode?: boolean;
 };
-export declare const SignatureKYC: ({ submissionToken, submissionEnvironment, submissionUrl, onBeforeSubmit, onComplete, geolocationEnabled, geolocationRequired, }: SignatureKYCProps) => ReactElement;
+export declare const SignatureKYC: ({ submissionToken, submissionEnvironment, submissionUrl, onBeforeSubmit, onComplete, geolocationEnabled, geolocationRequired, debugMode, }: SignatureKYCProps) => ReactElement;

package/dist/components/signature_capture/VideoSignatureCapture.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 import { SignatureData } from './data';
 import { SignatureCaptureVerbiage } from './SignatureCapture';
 export type VideoSignatureCaptureProps = {
-    onComplete?: (signatureData: SignatureData, imageData: string) => void;
+    onComplete?: (signatureData: SignatureData, imageData: string, videoData: Blob) => void;
     onFaceNotDetected?: () => void;
     verbiage?: SignatureCaptureVerbiage;
+    debugMode?: boolean;
 };
-export declare const VideoSignatureCapture: ({ onComplete, onFaceNotDetected, verbiage, }: VideoSignatureCaptureProps) => React.ReactElement;
+export declare const VideoSignatureCapture: ({ onComplete, onFaceNotDetected, verbiage, debugMode, }: VideoSignatureCaptureProps) => React.ReactElement;

package/dist/components/signature_kyc/SignatureKYCSuccess.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export type SignatureKYCSuccessProps = {
+    videoUrl: string;
+    headingText?: string;
+    retryBtnText?: string;
+    doneBtnText?: string;
+    onDoneClick?: () => void;
+    onRetryClick?: () => void;
+};
+export declare const SignatureKYCSuccess: ({ videoUrl, headingText, retryBtnText, doneBtnText, onDoneClick, onRetryClick, }: SignatureKYCSuccessProps) => ReactElement;

package/dist/components/signature_kyc/SignatureKYCWizard.d.ts

@@ -1,5 +1,7 @@
 import { ReactElement } from 'react';
 export type SignatureKYCWizardProps = {
     onComplete?: () => void;
+    onRetryClicked?: () => void;
+    debugMode?: boolean;
 };
-export declare const SignatureKYCWizard: ({ onComplete, }: SignatureKYCWizardProps) => ReactElement;
+export declare const SignatureKYCWizard: ({ onComplete, onRetryClicked, debugMode, }: SignatureKYCWizardProps) => ReactElement;

package/dist/contexts/SubmissionContext.d.ts

@@ -157,12 +157,14 @@ export type SubmissionState = {
     passportImage: string | null;
     selfieImage: string | null;
     signatureData: SignatureData | null;
+    signatureVideo: string | null;
     additionalDocuments: UploadedDocument[] | null;
     setIdFrontImage: (image: string) => void;
     setIdBackImage: (image: string) => void;
     setPassportImage: (image: string) => void;
     setSelfieImage: (image: string) => void;
     setSignatureData: (signatureData: SignatureData) => void;
+    setSignatureVideo: (videoB64: string) => void;
     setAdditionalDocuments: (uploadedDocuments: UploadedDocument[]) => void;
     logIdFrontCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
     logIdBackCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;

package/dist/sdk2.cjs.development.js

@@ -86,6 +86,7 @@ var SubmissionContext = /*#__PURE__*/React.createContext({
   passportImage: null,
   selfieImage: null,
   signatureData: null,
+  signatureVideo: null,
   additionalDocuments: null,
   setIdFrontImage: function setIdFrontImage() {
     return null;
@@ -102,6 +103,9 @@ var SubmissionContext = /*#__PURE__*/React.createContext({
   setSignatureData: function setSignatureData() {
     return null;
   },
+  setSignatureVideo: function setSignatureVideo() {
+    return null;
+  },
   setAdditionalDocuments: function setAdditionalDocuments() {
     return null;
   },
@@ -191,7 +195,7 @@ function contentDispositionFromDataUrl(url) {
   return (_b = (_a = url.match(/^(data:.*;base64),/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
 }
 
-var PageContainerDiv = styled__default['default'].div(templateObject_1$7 || (templateObject_1$7 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
+var PageContainerDiv = styled__default['default'].div(templateObject_1$7 || (templateObject_1$7 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
   var $heightOffset = _a.$heightOffset;
   return $heightOffset !== null && $heightOffset !== void 0 ? $heightOffset : 0;
 });
@@ -202,7 +206,11 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     heightOffset = _b === void 0 ? 0 : _b,
     style = _a.style,
     onClick = _a.onClick;
+  var _c = React.useState(false),
+    dimensionsCalculated = _c[0],
+    setDimensionsCalculated = _c[1];
   React.useEffect(function () {
+    setDimensionsCalculated(false);
     var calcAppDimensions = function calcAppDimensions() {
       var doc = document.documentElement;
       doc.style.setProperty('--app-width', "".concat(window.innerWidth, "px"));
@@ -210,6 +218,7 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     };
     window.addEventListener('resize', calcAppDimensions);
     calcAppDimensions();
+    setDimensionsCalculated(true);
     return function () {
       window.removeEventListener('resize', calcAppDimensions);
     };
@@ -220,7 +229,7 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onClick: onClick,
     className: className,
     "$heightOffset": heightOffset
-  }, children);
+  }, dimensionsCalculated && children);
 });
 PageContainer.displayName = 'PageContainer';
 var templateObject_1$7;
@@ -346,26 +355,29 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     signatureData = _t[0],
     setSignatureData = _t[1];
   var _u = React.useState(null),
-    additionalDocuments = _u[0],
-    setAdditionalDocuments = _u[1];
+    signatureVideo = _u[0],
+    setSignatureVideo = _u[1];
   var _v = React.useState(null),
-    geolocationResult = _v[0],
-    setGeolocationResult = _v[1];
-  var _w = React.useState(0),
-    geolocationAttempts = _w[0],
-    setGeolocationAttempts = _w[1];
-  var _x = React.useState(false),
-    geolocationBlocked = _x[0],
-    setGeolocationBlocked = _x[1];
-  var _y = React.useState([]),
-    idFrontCaptureAttempts = _y[0],
-    setIdFrontCaptureAttempts = _y[1];
+    additionalDocuments = _v[0],
+    setAdditionalDocuments = _v[1];
+  var _w = React.useState(null),
+    geolocationResult = _w[0],
+    setGeolocationResult = _w[1];
+  var _x = React.useState(0),
+    geolocationAttempts = _x[0],
+    setGeolocationAttempts = _x[1];
+  var _y = React.useState(false),
+    geolocationBlocked = _y[0],
+    setGeolocationBlocked = _y[1];
   var _z = React.useState([]),
-    idBackCaptureAttempts = _z[0],
-    setIdBackCaptureAttempts = _z[1];
+    idFrontCaptureAttempts = _z[0],
+    setIdFrontCaptureAttempts = _z[1];
   var _0 = React.useState([]),
-    selfieCaptureAttempts = _0[0],
-    setSelfieCaptureAttempts = _0[1];
+    idBackCaptureAttempts = _0[0],
+    setIdBackCaptureAttempts = _0[1];
+  var _1 = React.useState([]),
+    selfieCaptureAttempts = _1[0],
+    setSelfieCaptureAttempts = _1[1];
   var logIdFrontCaptureAttempt = React.useCallback(function (attempt) {
     setIdFrontCaptureAttempts(function (attempts) {
       return tslib.__spreadArray(tslib.__spreadArray([], attempts, true), [attempt], false);
@@ -610,12 +622,14 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     passportImage: passportImage,
     selfieImage: selfieImage,
     signatureData: signatureData,
+    signatureVideo: signatureVideo,
     additionalDocuments: additionalDocuments,
     setIdFrontImage: setIdFrontImage,
     setIdBackImage: setIdBackImage,
     setPassportImage: setPassportImage,
     setSelfieImage: setSelfieImage,
     setSignatureData: setSignatureData,
+    setSignatureVideo: setSignatureVideo,
     setAdditionalDocuments: setAdditionalDocuments,
     logIdFrontCaptureAttempt: logIdFrontCaptureAttempt,
     logIdBackCaptureAttempt: logIdBackCaptureAttempt,
@@ -11363,25 +11377,24 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var onComplete = _a.onComplete,
     onFaceNotDetected = _a.onFaceNotDetected,
     _d = _a.verbiage,
-    verbiage = _d === void 0 ? {} : _d;
+    verbiage = _d === void 0 ? {} : _d,
+    _e = _a.debugMode,
+    debugMode = _e === void 0 ? false : _e;
   var t = reactI18next.useTranslation().t;
-  var _e = React.useContext(CameraStateContext),
-    cameraRef = _e.cameraRef,
-    videoRef = _e.videoRef;
-  var _f = useResizeObserver__default['default'](),
-    ref = _f.ref,
-    width = _f.width,
-    height = _f.height;
+  var _f = React.useContext(CameraStateContext),
+    cameraRef = _f.cameraRef,
+    videoRef = _f.videoRef;
+  var _g = useResizeObserver__default['default'](),
+    ref = _g.ref,
+    width = _g.width,
+    height = _g.height;
   var signaturePad = React.useRef(null);
   var signatureRecorder = React.useRef(null);
   var recordedChunks = React.useRef([]);
-  var _g = React.useState(null),
-    signatureVideoUrl = _g[0],
-    setSignatureVideoUrl = _g[1];
-  var _h = React.useContext(HighPerformanceSelfieGuidanceModelsContext),
-    start = _h.start,
-    stop = _h.stop,
-    onPredictionMade = _h.onPredictionMade;
+  var _h = React.useState(null),
+    signatureVideoUrl = _h[0],
+    setSignatureVideoUrl = _h[1];
+  var onPredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
   var _j = useVideoRecorder(cameraRef.current),
     isRecording = _j.isRecording,
     startRecording = _j.startRecording,
@@ -11393,63 +11406,65 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var _l = React.useState(null),
     signatureDataUrl = _l[0],
     setSignatureDataUrl = _l[1];
-  verbiage.acceptBtnText = verbiage.acceptBtnText || t('Accept');
-  verbiage.clearBtnText = verbiage.clearBtnText || t('Clear');
+  var _m = React.useState(null),
+    signatureVideoData = _m[0],
+    setSignatureVideoData = _m[1];
+  verbiage.acceptBtnText || (verbiage.acceptBtnText = t('Accept'));
+  verbiage.clearBtnText || (verbiage.clearBtnText = t('Clear'));
   var outputCanvas = React.useRef(null);
   React.useEffect(function () {
-    if (isRecording && onFaceNotDetected) {
-      start();
-    }
-    return function () {
-      stop();
-    };
-  }, [isRecording, onFaceNotDetected, start, stop]);
-  React.useEffect(function () {
-    if (!isRecording && !videoUrl && !!outputCanvas.current) {
-      startRecording();
-      var stream = outputCanvas.current.captureStream(25);
-      signatureRecorder.current = new MediaRecorder(stream, {});
-      signatureRecorder.current.start();
-      signatureRecorder.current.ondataavailable = function (event) {
-        var _a;
-        recordedChunks.current.push(event.data);
-        if (((_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.state) === 'recording') {
-          signatureRecorder.current.stop();
-        }
-      };
-      signatureRecorder.current.onstop = function () {
-        var blob = new Blob(recordedChunks.current, {
-          type: 'video/mp4'
-        });
-        var url = URL.createObjectURL(blob);
-        setSignatureVideoUrl(url);
-      };
-    }
+    setTimeout(function () {
+      if (!isRecording && !videoUrl && !!outputCanvas.current) {
+        startRecording();
+        var stream = outputCanvas.current.captureStream(25);
+        signatureRecorder.current = new MediaRecorder(stream, {});
+        signatureRecorder.current.start();
+        signatureRecorder.current.ondataavailable = function (event) {
+          var _a;
+          recordedChunks.current.push(event.data);
+          if (((_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.state) === 'recording') {
+            signatureRecorder.current.stop();
+          }
+        };
+        signatureRecorder.current.onstop = function () {
+          var blob = new Blob(recordedChunks.current, {
+            type: 'video/mp4'
+          });
+          setSignatureVideoData(blob);
+          var url = URL.createObjectURL(blob);
+          setSignatureVideoUrl(url);
+        };
+      }
+    }, 100);
   }, [isRecording, startRecording, videoUrl]);
   React.useEffect(function () {
-    if (signatureVideoUrl && signatureData && signatureDataUrl) {
-      onComplete === null || onComplete === void 0 ? void 0 : onComplete(signatureData, signatureDataUrl);
+    if (signatureVideoData && signatureData && signatureDataUrl) {
+      onComplete === null || onComplete === void 0 ? void 0 : onComplete(signatureData, signatureDataUrl, signatureVideoData);
     }
-  }, [onComplete, signatureData, signatureDataUrl, signatureVideoUrl]);
+  }, [onComplete, signatureData, signatureDataUrl, signatureVideoData]);
   var animationFrame = React.useRef(0);
   React.useEffect(function () {
+    var _a;
     if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !cameraRef.current || !isRecording) return;
-    outputCanvas.current.width = cameraRef.current.width;
-    outputCanvas.current.height = cameraRef.current.height;
+    var _b = [cameraRef.current.width, cameraRef.current.height],
+      w = _b[0],
+      h = _b[1];
+    var isPortrait = window.innerWidth < window.innerHeight;
+    var cameraIsLandscape = w > h;
+    if (isPortrait && cameraIsLandscape) _a = [h, w], w = _a[0], h = _a[1];
+    outputCanvas.current.width = w;
+    outputCanvas.current.height = h;
     var ctx = outputCanvas.current.getContext('2d');
     if (!ctx) return;
     animationFrame.current = requestAnimationFrame(function runFrame() {
       return tslib.__awaiter(this, void 0, void 0, function () {
-        var isMobile, w, h, rect;
+        var rect;
         return tslib.__generator(this, function (_a) {
           if (!signaturePad.current || !videoRef.current || !outputCanvas.current) {
             cancelAnimationFrame(animationFrame.current);
             return [2];
           }
-          isMobile = window.innerWidth <= 800;
-          w = outputCanvas.current.width;
-          h = outputCanvas.current.height;
-          rect = [w * (isMobile ? 0.02 : 0.15), h * (isMobile ? 0.15 : 0.25), w * (isMobile ? 0.96 : 0.7), h * (isMobile ? 0.7 : 0.5)];
+          rect = [w * (isPortrait ? 0.02 : 0.15), h * (isPortrait ? 0.15 : 0.25), w * (isPortrait ? 0.96 : 0.7), h * (isPortrait ? 0.7 : 0.5)];
           ctx.drawImage(videoRef.current, 0, 0, w, h);
           ctx.beginPath();
           ctx.fillStyle = 'rgba(255,255,255,0.5)';
@@ -11465,9 +11480,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       cancelAnimationFrame(animationFrame.current);
     };
   }, [cameraRef, isRecording, onFaceNotDetected, videoRef]);
-  var _m = React.useState(0),
-    numFramesWithoutFaces = _m[0],
-    setNumFramesWithoutFaces = _m[1];
+  var _o = React.useState(0),
+    numFramesWithoutFaces = _o[0],
+    setNumFramesWithoutFaces = _o[1];
   React.useEffect(function () {
     onPredictionMade(function (faces) {
       setNumFramesWithoutFaces(function (n) {
@@ -11530,16 +11545,12 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       stopRecording();
       (_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.stop();
     }
-  }, verbiage.acceptBtnText))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, verbiage.acceptBtnText))), debugMode && /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, "Video: ", (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.width, "x", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.height), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       display: 'none'
     }
   }, /*#__PURE__*/React__default['default'].createElement("canvas", {
-    ref: outputCanvas,
-    style: {
-      width: (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth,
-      height: (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.videoHeight
-    }
+    ref: outputCanvas
   })));
 };
 
@@ -11564,26 +11575,66 @@ var SignatureKYCLoadingOverlay = function SignatureKYCLoadingOverlay(_a) {
   });
 };
 
+var SignatureKYCSuccess = function SignatureKYCSuccess(_a) {
+  var videoUrl = _a.videoUrl,
+    headingText = _a.headingText,
+    retryBtnText = _a.retryBtnText,
+    doneBtnText = _a.doneBtnText,
+    onDoneClick = _a.onDoneClick,
+    onRetryClick = _a.onRetryClick;
+  var t = reactI18next.useTranslation().t;
+  headingText || (headingText = t('Signature KYC Successful'));
+  retryBtnText || (retryBtnText = t('Retry'));
+  doneBtnText || (doneBtnText = t('Done'));
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h1", null, headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("video", {
+    src: videoUrl,
+    controls: true,
+    style: {
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("button", {
+    className: "ladda-button",
+    "data-style": "expand-right",
+    "data-color": "red",
+    onClick: onRetryClick
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "ladda-label"
+  }, retryBtnText)), /*#__PURE__*/React__default['default'].createElement("button", {
+    className: "ladda-button",
+    "data-style": "expand-right",
+    "data-color": "mint",
+    onClick: onDoneClick,
+    style: {
+      marginLeft: 15
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "ladda-label"
+  }, doneBtnText)))));
+};
+
 var SignatureKYCWizard = function SignatureKYCWizard(_a) {
-  var onComplete = _a.onComplete;
-  var _b = React.useContext(SubmissionContext),
-    selfieImage = _b.selfieImage,
-    setSelfieImage = _b.setSelfieImage,
-    setSignatureData = _b.setSignatureData,
-    logSelfieCaptureAttempt = _b.logSelfieCaptureAttempt;
-  var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
-  var _c = React.useState('LOADING'),
-    captureState = _c[0],
-    setCaptureState = _c[1];
+  var onComplete = _a.onComplete,
+    onRetryClicked = _a.onRetryClicked,
+    _b = _a.debugMode,
+    debugMode = _b === void 0 ? false : _b;
+  var _c = React.useContext(SubmissionContext),
+    submit = _c.submit,
+    selfieImage = _c.selfieImage,
+    signatureVideo = _c.signatureVideo,
+    setSelfieImage = _c.setSelfieImage,
+    setSignatureData = _c.setSignatureData,
+    setSignatureVideo = _c.setSignatureVideo,
+    logSelfieCaptureAttempt = _c.logSelfieCaptureAttempt;
+  var _d = React.useState('LOADING'),
+    captureState = _d[0],
+    setCaptureState = _d[1];
   var operationStartedAt = React.useRef();
   var captureStartedAt = React.useRef();
   var captureEndedAt = React.useRef();
   React.useEffect(function () {
     operationStartedAt.current = new Date();
-    return function () {
-      releaseCameraAccess();
-    };
-  }, [releaseCameraAccess]);
+  }, []);
   React.useEffect(function () {
     if (captureState === 'CHECKING_LIVENESS') {
       captureStartedAt.current = new Date();
@@ -11621,8 +11672,10 @@ var SignatureKYCWizard = function SignatureKYCWizard(_a) {
       });
     });
   }, [logCaptureMetadata, selfieImage, setSelfieImage]);
-  var onSignatureCaptureCompleted = React.useCallback(function (signatureData) {
+  var onSignatureCaptureCompleted = React.useCallback(function (signatureData, _, videoData) {
     setSignatureData(signatureData);
+    setSignatureVideo(URL.createObjectURL(videoData));
+    setCaptureState('SUCCESS');
     onComplete === null || onComplete === void 0 ? void 0 : onComplete();
   }, [onComplete, setSignatureData]);
   var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
@@ -11634,12 +11687,20 @@ var SignatureKYCWizard = function SignatureKYCWizard(_a) {
     switch (captureState) {
       case 'CHECKING_LIVENESS':
         return /*#__PURE__*/React__default['default'].createElement(FaceLivenessCapture, {
-          onSuccess: onFaceCaptureSuccess
+          onSuccess: onFaceCaptureSuccess,
+          debugMode: debugMode
         });
       case 'CAPTURING_SIGNATURE':
         return /*#__PURE__*/React__default['default'].createElement(VideoSignatureCapture, {
           onComplete: onSignatureCaptureCompleted,
-          onFaceNotDetected: onSignatureCaptureFacesNotDetected
+          onFaceNotDetected: onSignatureCaptureFacesNotDetected,
+          debugMode: debugMode
+        });
+      case 'SUCCESS':
+        return /*#__PURE__*/React__default['default'].createElement(SignatureKYCSuccess, {
+          videoUrl: signatureVideo !== null && signatureVideo !== void 0 ? signatureVideo : '',
+          onDoneClick: submit,
+          onRetryClick: onRetryClicked
         });
       default:
         return null;
@@ -13290,7 +13351,11 @@ var SignatureKYC = function SignatureKYC(_a) {
     onBeforeSubmit = _a.onBeforeSubmit,
     onComplete = _a.onComplete,
     geolocationEnabled = _a.geolocationEnabled,
-    geolocationRequired = _a.geolocationRequired;
+    geolocationRequired = _a.geolocationRequired,
+    debugMode = _a.debugMode;
+  var _b = React.useState(0),
+    attempt = _b[0],
+    setAttempt = _b[1];
   return /*#__PURE__*/React__default['default'].createElement(SubmissionProvider, {
     action: SubmissionAction.NONE,
     environment: submissionEnvironment,
@@ -13301,10 +13366,18 @@ var SignatureKYC = function SignatureKYC(_a) {
     geolocationEnabled: geolocationEnabled,
     geolocationRequired: geolocationRequired
   }, /*#__PURE__*/React__default['default'].createElement(CameraProvider, {
+    key: attempt,
     preferContinuityCamera: false,
     preferFrontFacingCamera: true,
     requestMicrophoneAccess: true
-  }, /*#__PURE__*/React__default['default'].createElement(SignatureKYCWizard, null)));
+  }, /*#__PURE__*/React__default['default'].createElement(SignatureKYCWizard, {
+    debugMode: debugMode,
+    onRetryClicked: function onRetryClicked() {
+      setAttempt(function (n) {
+        return n + 1;
+      });
+    }
+  })));
 };
 
 i18n__default['default'].use(LanguageDetector__default['default']).use(reactI18next.initReactI18next).init({