idmission-web-sdk 0.0.32 → 0.0.33

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

@@ -2,7 +2,7 @@ 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;

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,6 +1,7 @@
 import { ReactElement } from 'react';
 export type SignatureKYCWizardProps = {
     onComplete?: () => void;
+    onRetryClicked?: () => void;
     debugMode?: boolean;
 };
-export declare const SignatureKYCWizard: ({ onComplete, debugMode, }: 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,
@@ -11380,59 +11394,54 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var _h = React.useState(null),
     signatureVideoUrl = _h[0],
     setSignatureVideoUrl = _h[1];
-  var _j = React.useContext(HighPerformanceSelfieGuidanceModelsContext),
-    start = _j.start,
-    stop = _j.stop,
-    onPredictionMade = _j.onPredictionMade;
-  var _k = useVideoRecorder(cameraRef.current),
-    isRecording = _k.isRecording,
-    startRecording = _k.startRecording,
-    stopRecording = _k.stopRecording,
-    videoUrl = _k.videoUrl;
+  var onPredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
+  var _j = useVideoRecorder(cameraRef.current),
+    isRecording = _j.isRecording,
+    startRecording = _j.startRecording,
+    stopRecording = _j.stopRecording,
+    videoUrl = _j.videoUrl;
+  var _k = React.useState(null),
+    signatureData = _k[0],
+    setSignatureData = _k[1];
   var _l = React.useState(null),
-    signatureData = _l[0],
-    setSignatureData = _l[1];
+    signatureDataUrl = _l[0],
+    setSignatureDataUrl = _l[1];
   var _m = React.useState(null),
-    signatureDataUrl = _m[0],
-    setSignatureDataUrl = _m[1];
-  verbiage.acceptBtnText = verbiage.acceptBtnText || t('Accept');
-  verbiage.clearBtnText = verbiage.clearBtnText || t('Clear');
+    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;
@@ -11566,16 +11575,57 @@ 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,
+    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 releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
   var _d = React.useState('LOADING'),
     captureState = _d[0],
     setCaptureState = _d[1];
@@ -11584,10 +11634,7 @@ var SignatureKYCWizard = function SignatureKYCWizard(_a) {
   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();
@@ -11625,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 () {
@@ -11647,6 +11696,12 @@ var SignatureKYCWizard = function SignatureKYCWizard(_a) {
           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;
     }
@@ -13298,6 +13353,9 @@ var SignatureKYC = function SignatureKYC(_a) {
     geolocationEnabled = _a.geolocationEnabled,
     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,
@@ -13308,11 +13366,17 @@ 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, {
-    debugMode: debugMode
+    debugMode: debugMode,
+    onRetryClicked: function onRetryClicked() {
+      setAttempt(function (n) {
+        return n + 1;
+      });
+    }
   })));
 };