idmission-web-sdk 1.0.76 → 1.0.78

package/dist/sdk2.esm.js

@@ -1,6 +1,6 @@
 import { __awaiter, __generator, __makeTemplateObject, __extends, __spreadArray, __assign } from 'tslib';
 import * as React from 'react';
-import React__default, { createContext, forwardRef, useState, useEffect, useRef, useContext, useCallback, useMemo, useReducer } from 'react';
+import React__default, { forwardRef, useState, useEffect, useRef, useContext, createContext, useCallback, useMemo, useReducer } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import styled, { useTheme, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { useTranslation, initReactI18next } from 'react-i18next';
@@ -12,7 +12,7 @@ import i18n from 'i18next';
 import { FaceDetector, FilesetResolver } from '@mediapipe/tasks-vision';
 import SignatureCanvas from 'react-signature-canvas';
 
-var webSdkVersion = '1.0.76';
+var webSdkVersion = '1.0.78';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -54,72 +54,6 @@ var submissionHosts = {
   prod: 'https://api.idmission.com',
   demo: 'https://apidemo.idmission.com'
 };
-var SubmissionContext = /*#__PURE__*/createContext({
-  submit: function submit() {
-    return __awaiter(void 0, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        return [2 /*return*/, null];
-      });
-    });
-  },
-  submissionStatus: SubmissionStatus.READY,
-  submissionRequest: null,
-  submissionResponse: null,
-  submissionError: null,
-  submissionEnvironment: 'prod',
-  idFrontImage: null,
-  idBackImage: null,
-  passportImage: null,
-  selfieImage: null,
-  signatureData: null,
-  signatureVideoUrl: null,
-  idCaptureVideoUrl: null,
-  additionalDocuments: null,
-  setIdFrontImage: function setIdFrontImage() {
-    return null;
-  },
-  setIdBackImage: function setIdBackImage() {
-    return null;
-  },
-  setPassportImage: function setPassportImage() {
-    return null;
-  },
-  setSelfieImage: function setSelfieImage() {
-    return null;
-  },
-  setSignatureData: function setSignatureData() {
-    return null;
-  },
-  setSignatureVideoUrl: function setSignatureVideoUrl() {
-    return null;
-  },
-  setIdCaptureVideoUrl: function setIdCaptureVideoUrl() {
-    return null;
-  },
-  setAdditionalDocuments: function setAdditionalDocuments() {
-    return null;
-  },
-  logIdFrontCaptureAttempt: function logIdFrontCaptureAttempt() {
-    return null;
-  },
-  logIdBackCaptureAttempt: function logIdBackCaptureAttempt() {
-    return null;
-  },
-  logSelfieCaptureAttempt: function logSelfieCaptureAttempt() {
-    return null;
-  },
-  livenessCheckRequest: null,
-  checkLiveness: function checkLiveness() {
-    return __awaiter(void 0, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        throw new Error('checkLiveness is not implemented');
-      });
-    });
-  },
-  retryLocationAccess: function retryLocationAccess() {
-    return null;
-  }
-});
 function parseJwt(token) {
   var base64Url = token.split('.')[1];
   var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
@@ -608,6 +542,80 @@ var TokenPublicKeyErrorOverlay = function TokenPublicKeyErrorOverlay(_a) {
   }, "support@idmission.com"), ".")));
 };
 
+var SubmissionContext = /*#__PURE__*/createContext({
+  submit: function submit() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        return [2 /*return*/, null];
+      });
+    });
+  },
+  submissionStatus: SubmissionStatus.READY,
+  submissionRequest: null,
+  submissionResponse: null,
+  submissionError: null,
+  submissionEnvironment: 'prod',
+  idFrontImage: null,
+  idBackImage: null,
+  passportImage: null,
+  selfieImage: null,
+  signatureData: null,
+  signatureVideoUrl: null,
+  idCaptureVideoUrl: null,
+  idCaptureVideoIdFrontImage: null,
+  idCaptureVideoIdBackImage: null,
+  additionalDocuments: null,
+  setIdFrontImage: function setIdFrontImage() {
+    return null;
+  },
+  setIdBackImage: function setIdBackImage() {
+    return null;
+  },
+  setPassportImage: function setPassportImage() {
+    return null;
+  },
+  setSelfieImage: function setSelfieImage() {
+    return null;
+  },
+  setSignatureData: function setSignatureData() {
+    return null;
+  },
+  setSignatureVideoUrl: function setSignatureVideoUrl() {
+    return null;
+  },
+  setIdCaptureVideoUrl: function setIdCaptureVideoUrl() {
+    return null;
+  },
+  setIdCaptureVideoIdFrontImage: function setIdCaptureVideoIdFrontImage() {
+    return null;
+  },
+  setIdCaptureVideoIdBackImage: function setIdCaptureVideoIdBackImage() {
+    return null;
+  },
+  setAdditionalDocuments: function setAdditionalDocuments() {
+    return null;
+  },
+  logIdFrontCaptureAttempt: function logIdFrontCaptureAttempt() {
+    return null;
+  },
+  logIdBackCaptureAttempt: function logIdBackCaptureAttempt() {
+    return null;
+  },
+  logSelfieCaptureAttempt: function logSelfieCaptureAttempt() {
+    return null;
+  },
+  livenessCheckRequest: null,
+  checkLiveness: function checkLiveness() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        throw new Error('checkLiveness is not implemented');
+      });
+    });
+  },
+  retryLocationAccess: function retryLocationAccess() {
+    return null;
+  }
+});
 var SubmissionProvider = function SubmissionProvider(_a) {
   var action = _a.action,
     children = _a.children,
@@ -697,26 +705,32 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     idCaptureVideoUrl = _6[0],
     setIdCaptureVideoUrl = _6[1];
   var _7 = useState(null),
-    additionalDocuments = _7[0],
-    setAdditionalDocuments = _7[1];
+    idCaptureVideoIdFrontImage = _7[0],
+    setIdCaptureVideoIdFrontImage = _7[1];
   var _8 = useState(null),
-    geolocationResult = _8[0],
-    setGeolocationResult = _8[1];
-  var _9 = useState(0),
-    geolocationAttempts = _9[0],
-    setGeolocationAttempts = _9[1];
-  var _10 = useState(false),
-    geolocationBlocked = _10[0],
-    setGeolocationBlocked = _10[1];
-  var _11 = useState([]),
-    idFrontCaptureAttempts = _11[0],
-    setIdFrontCaptureAttempts = _11[1];
-  var _12 = useState([]),
-    idBackCaptureAttempts = _12[0],
-    setIdBackCaptureAttempts = _12[1];
+    idCaptureVideoIdBackImage = _8[0],
+    setIdCaptureVideoIdBackImage = _8[1];
+  var _9 = useState(null),
+    additionalDocuments = _9[0],
+    setAdditionalDocuments = _9[1];
+  var _10 = useState(null),
+    geolocationResult = _10[0],
+    setGeolocationResult = _10[1];
+  var _11 = useState(0),
+    geolocationAttempts = _11[0],
+    setGeolocationAttempts = _11[1];
+  var _12 = useState(false),
+    geolocationBlocked = _12[0],
+    setGeolocationBlocked = _12[1];
   var _13 = useState([]),
-    selfieCaptureAttempts = _13[0],
-    setSelfieCaptureAttempts = _13[1];
+    idFrontCaptureAttempts = _13[0],
+    setIdFrontCaptureAttempts = _13[1];
+  var _14 = useState([]),
+    idBackCaptureAttempts = _14[0],
+    setIdBackCaptureAttempts = _14[1];
+  var _15 = useState([]),
+    selfieCaptureAttempts = _15[0],
+    setSelfieCaptureAttempts = _15[1];
   var logIdFrontCaptureAttempt = useCallback(function (attempt) {
     setIdFrontCaptureAttempts(function (attempts) {
       return __spreadArray(__spreadArray([], attempts, true), [attempt], false);
@@ -1062,12 +1076,12 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     setSubmissionStatus(SubmissionStatus.READY);
     retrySubmission();
   }, [retrySubmission]);
-  var _14 = useState('NOT_PARSED'),
-    tokenState = _14[0],
-    setTokenState = _14[1];
-  var _15 = useState(null),
-    tokenError = _15[0],
-    setTokenError = _15[1];
+  var _16 = useState('NOT_PARSED'),
+    tokenState = _16[0],
+    setTokenState = _16[1];
+  var _17 = useState(null),
+    tokenError = _17[0],
+    setTokenError = _17[1];
   useEffect(function () {
     (function () {
       return __awaiter(void 0, void 0, void 0, function () {
@@ -1150,6 +1164,8 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     signatureData: signatureData,
     signatureVideoUrl: signatureVideoUrl,
     idCaptureVideoUrl: idCaptureVideoUrl,
+    idCaptureVideoIdFrontImage: idCaptureVideoIdFrontImage,
+    idCaptureVideoIdBackImage: idCaptureVideoIdBackImage,
     additionalDocuments: additionalDocuments,
     setIdFrontImage: setIdFrontImage,
     setIdBackImage: setIdBackImage,
@@ -1158,6 +1174,8 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     setSignatureData: setSignatureData,
     setSignatureVideoUrl: setSignatureVideoUrl,
     setIdCaptureVideoUrl: setIdCaptureVideoUrl,
+    setIdCaptureVideoIdFrontImage: setIdCaptureVideoIdFrontImage,
+    setIdCaptureVideoIdBackImage: setIdCaptureVideoIdBackImage,
     setAdditionalDocuments: setAdditionalDocuments,
     logIdFrontCaptureAttempt: logIdFrontCaptureAttempt,
     logIdBackCaptureAttempt: logIdBackCaptureAttempt,
@@ -10578,7 +10596,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
     accept: "image/*",
     onChange: onFileSelected,
     hidden: true
-  }), /*#__PURE__*/React__default.createElement(StyledButtonsRow$6, {
+  }), /*#__PURE__*/React__default.createElement(StyledButtonsRow$7, {
     className: classNames.buttonsRow
   }, images.length < 2 && ( /*#__PURE__*/React__default.createElement(LoaderButton, {
     variant: images.length > 0 ? 'secondary' : 'positive',
@@ -10604,7 +10622,7 @@ var Heading$7 = styled.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemp
 var Description$2 = styled.p(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
 var Instruction = styled.p(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
 var ImageCol = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"])));
-var StyledButtonsRow$6 = styled(ButtonsRow)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+var StyledButtonsRow$7 = styled(ButtonsRow)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
 var templateObject_1$f, templateObject_2$9, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6;
 
 var CaptureState;
@@ -11337,7 +11355,7 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
     accept: "image/*",
     onChange: onFileSelected,
     hidden: true
-  }), /*#__PURE__*/React__default.createElement(StyledButtonsRow$5, {
+  }), /*#__PURE__*/React__default.createElement(StyledButtonsRow$6, {
     className: classNames.buttonsRow
   }, !image && ( /*#__PURE__*/React__default.createElement(LoaderButton, {
     variant: "positive",
@@ -11364,7 +11382,7 @@ var StyledOverlayInner = styled(OverlayInner)(templateObject_1$d || (templateObj
 var Heading$6 = styled.h3(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
 var Description$1 = styled.p(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
 var ImageContainer$5 = styled(OverlayImageContainer)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-var StyledButtonsRow$5 = styled(ButtonsRow)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+var StyledButtonsRow$6 = styled(ButtonsRow)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
 var templateObject_1$d, templateObject_2$7, templateObject_3$6, templateObject_4$2, templateObject_5;
 
 var initialState$3 = {
@@ -11905,17 +11923,17 @@ var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
     className: classNames.container
   }, /*#__PURE__*/React__default.createElement(OverlayInner, {
     className: classNames.inner
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classNames.headingContainer
   }, /*#__PURE__*/React__default.createElement("h3", {
     className: classNames.heading
-  }, verbiage.headingText), /*#__PURE__*/React__default.createElement(StyledGuidanceMessage, null, verbiage.removeEyeCoveringsText, /*#__PURE__*/React__default.createElement("br", null), verbiage.avoidExcessiveBacklightingText)), /*#__PURE__*/React__default.createElement(OverlayImageContainer, {
+  }, verbiage.headingText), /*#__PURE__*/React__default.createElement(StyledGuidanceMessage, null, verbiage.removeEyeCoveringsText, /*#__PURE__*/React__default.createElement("br", null), verbiage.avoidExcessiveBacklightingText), /*#__PURE__*/React__default.createElement(OverlayImageContainer, {
     className: classNames.imageContainer
-  }, /*#__PURE__*/React__default.createElement(StyledImage, {
+  }, /*#__PURE__*/React__default.createElement("img", {
     className: classNames.image,
     alt: verbiage.headingText,
     src: assets.instructionImageUrl
-  })), /*#__PURE__*/React__default.createElement(LoaderButton, {
+  })), /*#__PURE__*/React__default.createElement(StyledButtonsRow$5, {
+    className: classNames.buttonsRow
+  }, /*#__PURE__*/React__default.createElement(LoaderButton, {
     variant: "positive",
     disabled: !cameraReady || !modelsReady,
     finished: cameraReady && modelsReady,
@@ -11925,14 +11943,14 @@ var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
       setDismissed(true);
       onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
     }
-  }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : verbiage.modelsWarmingUpText), /*#__PURE__*/React__default.createElement("div", {
+  }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : verbiage.modelsWarmingUpText)), /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'none'
     }
   }, /*#__PURE__*/React__default.createElement(CameraVideoTag, null))));
 };
-var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  max-width: 280px;\n  margin: 18px auto 12px;\n  line-height: 1.5;\n  padding: 12px 24px;\n"], ["\n  max-width: 280px;\n  margin: 18px auto 12px;\n  line-height: 1.5;\n  padding: 12px 24px;\n"])));
-var StyledImage = styled.img(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  position: relative;\n  top: 5%;\n"], ["\n  position: relative;\n  top: 5%;\n"])));
+var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"], ["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"])));
+var StyledButtonsRow$5 = styled(ButtonsRow)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: 25px;\n"], ["\n  flex-direction: column;\n  padding-top: 25px;\n"])));
 var templateObject_1$c, templateObject_2$6;
 
 var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
@@ -13252,6 +13270,8 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
 var IdVideoCapture = function IdVideoCapture(_a) {
   var _b, _c, _d, _e, _f, _g;
   var onComplete = _a.onComplete,
+    onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
+    onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
     _h = _a.idCardFrontDetectionThreshold,
     idCardFrontDetectionThreshold = _h === void 0 ? 0.48 : _h,
@@ -13356,6 +13376,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       }
     });
   }, [idCardFrontDetectionThreshold, onIdPredictionMade]);
+  var captureCanvas = useRef(null);
+  var captureFrame = useCallback(function () {
+    if (!captureCanvas.current || !videoRef.current) return;
+    drawToCanvas(captureCanvas.current, videoRef.current);
+    var imageUrl = captureCanvas.current.toDataURL('image/jpeg', 0.98);
+    clearCanvas(captureCanvas.current);
+    return imageUrl;
+  }, [videoRef]);
   var onIdBackCaptureComplete = useCallback(function () {
     if (readTextPrompt) {
       setRequestedAction('READ_TEXT');
@@ -13366,10 +13394,17 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   useEffect(function () {
     (function () {
       return __awaiter(void 0, void 0, void 0, function () {
+        var frame;
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
               if (!(goodFramesThresholdMet && requestedAction == 'SHOW_ID_FRONT')) return [3 /*break*/, 4];
+              if (onIdFrontImageCaptured) {
+                console.log('capturing front frame!');
+                frame = captureFrame();
+                console.log(frame);
+                frame && onIdFrontImageCaptured(frame);
+              }
               if (!skipShowIdCardBack) return [3 /*break*/, 3];
               if (!(skipShowIdCardBack === true)) return [3 /*break*/, 1];
               return [2 /*return*/, onIdBackCaptureComplete()];
@@ -13384,6 +13419,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
               setRequestedAction('FLIP_ID');
               setTimeout(function () {
                 setRequestedAction('SHOW_ID_BACK');
+                setTimeout(function () {
+                  if (onIdBackImageCaptured) {
+                    console.log('capturing rear frame!');
+                    var frame = captureFrame();
+                    console.log(frame);
+                    frame && onIdBackImageCaptured(frame);
+                  }
+                }, showIdCardBackDurationMs - 1000);
               }, 3500);
               _a.label = 4;
             case 4:
@@ -13392,7 +13435,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
         });
       });
     })();
-  }, [goodFramesThresholdMet, onIdBackCaptureComplete, requestedAction, skipShowIdCardBack]);
+  }, [captureFrame, goodFramesThresholdMet, onIdBackCaptureComplete, onIdBackImageCaptured, onIdFrontImageCaptured, requestedAction, showIdCardBackDurationMs, skipShowIdCardBack]);
   useTimeout(showIdCardBackDurationMs, onIdBackCaptureComplete, requestedAction !== 'SHOW_ID_BACK', false, requestedAction === 'SHOW_ID_BACK');
   var onReadTextTimeout = useCallback(function () {
     stopRecording();
@@ -13433,7 +13476,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   return /*#__PURE__*/React__default.createElement(PageContainer, {
     ref: ref,
     className: "flex"
-  }, /*#__PURE__*/React__default.createElement(CameraVideoTag, null), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(CameraVideoTag, null), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
+    ref: captureCanvas
+  }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       width: '100%',
@@ -13475,9 +13520,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     }
   }, timeRemaining), /*#__PURE__*/React__default.createElement(LoaderButton, {
     variant: "positive",
-    finished: true,
     onClick: stopRecording,
-    colors: colors.readTextDoneBtn
+    colors: colors.readTextDoneBtn,
+    finished: true
   }, verbiage.readTextDoneBtnText)))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IdVideoCaptureGuides, {
     assets: assets.guides,
     verbiage: rawVerbiage.guides,
@@ -13582,7 +13627,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
   var _q = useContext(SubmissionContext),
     submissionStatus = _q.submissionStatus,
     idCaptureVideoUrl = _q.idCaptureVideoUrl,
-    setIdCaptureVideoUrl = _q.setIdCaptureVideoUrl;
+    setIdCaptureVideoUrl = _q.setIdCaptureVideoUrl,
+    setIdCaptureVideoIdFrontImage = _q.setIdCaptureVideoIdFrontImage,
+    setIdCaptureVideoIdBackImage = _q.setIdCaptureVideoIdBackImage;
   var _r = useState('CAPTURING_ID'),
     captureState = _r[0],
     setCaptureState = _r[1];
@@ -13684,6 +13731,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
         return /*#__PURE__*/React__default.createElement(IdVideoCapture, {
           key: "id-video-capture-".concat(attempt),
           onComplete: onVideoCaptureComplete,
+          onIdFrontImageCaptured: setIdCaptureVideoIdFrontImage,
+          onIdBackImageCaptured: setIdCaptureVideoIdBackImage,
           onFaceNotDetected: onVideoCaptureFaceNotDetected,
           idCardFrontDetectionThreshold: idCardFrontDetectionThreshold,
           idCardFrontFocusThreshold: idCardFrontFocusThreshold,