idmission-web-sdk 1.0.322 → 1.0.324

package/dist/components/read_text_prompt/ReadTextPrompt.d.ts

@@ -20,4 +20,4 @@ export type ReadTextPromptProps = {
     classNames?: ReadTextPromptClassNames;
     verbiage?: ReadTextPromptVerbiage;
 };
-export declare const ReadTextPrompt: ({ text, onComplete, startedAt, durationMs, classNames, verbiage: rawVerbiage, }: ReadTextPromptProps) => React.JSX.Element;
+export declare const ReadTextPrompt: ({ text, onComplete, durationMs, classNames, verbiage: rawVerbiage, }: ReadTextPromptProps) => React.JSX.Element;

package/dist/sdk2.cjs.development.js

@@ -50,7 +50,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.322';
+var webSdkVersion = '1.0.324';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -65,6 +65,30 @@ function getPlatform() {
 function dataUrlToBase64(url) {
   return tslib.__awaiter(this, void 0, void 0, function () {
     return tslib.__generator(this, function (_a) {
+      if (url.indexOf('blob:') >= 0) {
+        return [2 /*return*/, new Promise(function (resolve, reject) {
+          // Fetch the Blob content
+          fetch(url).then(function (response) {
+            if (!response.ok) {
+              throw new Error('Failed to fetch Blob content');
+            }
+            return response.blob();
+          }).then(function (blob) {
+            var reader = new FileReader();
+            reader.onload = function () {
+              var base64String = reader.result ? reader.result.split(',')[1] : '';
+              resolve(base64String);
+            };
+            reader.onerror = function () {
+              reader.abort();
+              reject(new Error('Error converting blob to base64'));
+            };
+            reader.readAsDataURL(blob);
+          })["catch"](function (error) {
+            reject(error);
+          });
+        })];
+      }
       return [2 /*return*/, url.replace(/^data:image\/(png|jpeg);base64,/, '')];
     });
   });
@@ -9881,13 +9905,13 @@ var initialState$4 = {
 var IdCaptureStateContext = /*#__PURE__*/React.createContext(initialState$4);
 var IdCaptureDispatchContext = /*#__PURE__*/React.createContext(function () {});
 var reducer$4 = function reducer(state, action) {
-  var _a;
+  var _a, _b;
   switch (action.type) {
     case 'configureWizard':
       {
-        var _b = action.payload,
-          captureRequirement = _b.captureRequirement,
-          precapturedDocuments = _b.precapturedDocuments;
+        var _c = action.payload,
+          captureRequirement = _c.captureRequirement,
+          precapturedDocuments = _c.precapturedDocuments;
         var newState = tslib.__assign(tslib.__assign({}, state), {
           captureRequirement: captureRequirement
         });
@@ -9944,26 +9968,26 @@ var reducer$4 = function reducer(state, action) {
         guideImageHeight: action.payload.height
       });
     case 'objectsDetected':
-      var _c = action.payload.prediction,
-        detectedObjects = _c.detectedObjects,
-        detectionScore = _c.detectionScore,
-        detectionThresholdMet = _c.detectionThresholdMet,
-        detectedDocumentType = _c.detectedDocumentType,
-        passportDetectionScore = _c.passportDetectionScore,
-        passportDetectionThresholdMet = _c.passportDetectionThresholdMet,
-        mrzDetectionScore = _c.mrzDetectionScore,
-        mrzDetectionThresholdMet = _c.mrzDetectionThresholdMet,
-        pdf417DetectionScore = _c.pdf417DetectionScore,
-        pdf417DetectionThresholdMet = _c.pdf417DetectionThresholdMet,
-        bestDocumentOrPassport = _c.bestDocumentOrPassport,
-        bestMrz = _c.bestMrz,
-        bestPdf417 = _c.bestPdf417,
-        documentInBounds = _c.documentInBounds,
-        documentTooClose = _c.documentTooClose,
-        focusScore = _c.focusScore,
-        focusThresholdMet = _c.focusThresholdMet,
-        frameWidth = _c.frameWidth,
-        frameHeight = _c.frameHeight;
+      var _d = action.payload.prediction,
+        detectedObjects = _d.detectedObjects,
+        detectionScore = _d.detectionScore,
+        detectionThresholdMet = _d.detectionThresholdMet,
+        detectedDocumentType = _d.detectedDocumentType,
+        passportDetectionScore = _d.passportDetectionScore,
+        passportDetectionThresholdMet = _d.passportDetectionThresholdMet,
+        mrzDetectionScore = _d.mrzDetectionScore,
+        mrzDetectionThresholdMet = _d.mrzDetectionThresholdMet,
+        pdf417DetectionScore = _d.pdf417DetectionScore,
+        pdf417DetectionThresholdMet = _d.pdf417DetectionThresholdMet,
+        bestDocumentOrPassport = _d.bestDocumentOrPassport,
+        bestMrz = _d.bestMrz,
+        bestPdf417 = _d.bestPdf417,
+        documentInBounds = _d.documentInBounds,
+        documentTooClose = _d.documentTooClose,
+        focusScore = _d.focusScore,
+        focusThresholdMet = _d.focusThresholdMet,
+        frameWidth = _d.frameWidth,
+        frameHeight = _d.frameHeight;
       var frameCapturedAt = new Date();
       var frameCaptureRate = 0;
       var goodFramesThreshold = state.goodFramesThreshold;
@@ -10012,9 +10036,9 @@ var reducer$4 = function reducer(state, action) {
       });
     case 'predictionMade':
       {
-        var _d = action.payload,
-          detectedDocumentType_1 = _d.detectedDocumentType,
-          passportDetectionScore_1 = _d.passportDetectionScore;
+        var _e = action.payload,
+          detectedDocumentType_1 = _e.detectedDocumentType,
+          passportDetectionScore_1 = _e.passportDetectionScore;
         var requestedDocumentType = state.requestedDocumentType;
         var newState = tslib.__assign(tslib.__assign({}, state), {
           detectedDocumentType: detectedDocumentType_1
@@ -10104,19 +10128,35 @@ var reducer$4 = function reducer(state, action) {
       }
     case 'documentCapturedManually':
       {
-        var newState = tslib.__assign({}, state);
-        var capturedDocument = tslib.__assign(tslib.__assign({}, action.payload), {
-          width: 0,
-          height: 0
+        var newState_2 = tslib.__assign(tslib.__assign({}, state), {
+          capturedDocuments: tslib.__assign(tslib.__assign({}, state.capturedDocuments), (_b = {}, _b[state.requestedDocumentType] = tslib.__assign(tslib.__assign({}, action.payload), {
+            width: 0,
+            height: 0
+          }), _b))
+        });
+        var remainingRequirements = requiredDocumentsForOption[state.captureRequirement].filter(function (v) {
+          return !(v in newState_2.capturedDocuments);
         });
-        if (Object.keys(state.capturedDocuments).length === 0) {
-          newState.capturedDocuments.passport = capturedDocument;
+        if (state.captureRequirement === 'idCardOrPassport') {
+          if (state.requestedDocumentType === 'passport') {
+            remainingRequirements = [];
+          } else {
+            remainingRequirements = remainingRequirements.filter(function (v) {
+              return v !== 'passport';
+            });
+          }
+        }
+        if (remainingRequirements.length === 0) {
+          newState_2.captureState = 'complete';
         } else {
-          newState.capturedDocuments = {};
-          newState.capturedDocuments.idCardFront = state.capturedDocuments.passport;
-          newState.capturedDocuments.idCardBack = capturedDocument;
+          newState_2.requestedDocumentType = remainingRequirements[0];
+          if (state.requestedDocumentType === 'idCardFront' && newState_2.requestedDocumentType === 'idCardBack') {
+            newState_2.captureState = 'requestingFlip';
+            newState_2.documentDetectionThresholdMet = false;
+            newState_2.passportPageDetectionThresholdMet = false;
+          }
         }
-        return newState;
+        return newState_2;
       }
     case 'flipRequestCompleted':
       return tslib.__assign(tslib.__assign({}, state), {
@@ -13451,11 +13491,23 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       idCaptureRequirement: captureRequirement,
       onFinished: onSubmitClick,
       onCapture: function onCapture(imageData) {
-        dispatch({
-          type: 'documentCapturedManually',
-          payload: {
-            imageData: imageData
-          }
+        return tslib.__awaiter(void 0, void 0, void 0, function () {
+          var base64ImageData;
+          return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                return [4 /*yield*/, dataUrlToBase64(imageData)];
+              case 1:
+                base64ImageData = _a.sent();
+                dispatch({
+                  type: 'documentCapturedManually',
+                  payload: {
+                    imageData: base64ImageData
+                  }
+                });
+                return [2 /*return*/];
+            }
+          });
         });
       },
       classNames: classNames.fallback,
@@ -14162,32 +14214,32 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
   }, [checkLiveness, face, frame, isReady, submissionError]);
   var onFallbackImageCaptured = React.useCallback(function (imageUrl) {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
-      var response, _a, e_2;
-      return tslib.__generator(this, function (_b) {
-        switch (_b.label) {
+      var imageData, response, e_2;
+      return tslib.__generator(this, function (_a) {
+        switch (_a.label) {
           case 0:
             dispatch({
               type: 'livenessChecking'
             });
-            _b.label = 1;
+            _a.label = 1;
           case 1:
-            _b.trys.push([1, 4,, 5]);
-            _a = checkLiveness;
+            _a.trys.push([1, 4,, 5]);
             return [4 /*yield*/, dataUrlToBase64(imageUrl)];
           case 2:
-            return [4 /*yield*/, _a.apply(void 0, [_b.sent()])];
+            imageData = _a.sent();
+            return [4 /*yield*/, checkLiveness(imageData)];
           case 3:
-            response = _b.sent();
+            response = _a.sent();
             dispatch({
               type: 'livenessChecked',
               payload: {
-                imageUrl: imageUrl,
+                imageUrl: imageData,
                 response: response
               }
             });
             return [3 /*break*/, 5];
           case 4:
-            e_2 = _b.sent();
+            e_2 = _a.sent();
             dispatch({
               type: 'livenessCheckFailed',
               payload: {
@@ -16072,7 +16124,6 @@ var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4
 var ReadTextPrompt = function ReadTextPrompt(_a) {
   var text = _a.text,
     onComplete = _a.onComplete,
-    startedAt = _a.startedAt,
     _b = _a.durationMs,
     durationMs = _b === void 0 ? 15000 : _b,
     _c = _a.classNames,
@@ -16080,11 +16131,32 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
     _d = _a.verbiage,
     rawVerbiage = _d === void 0 ? {} : _d;
   text = useVerbiage(text, '');
+  var countdownTimeoutRef = React.useRef(undefined);
+  var _e = React.useState(durationMs / 1000),
+    countdownRemaining = _e[0],
+    setCountdownRemaining = _e[1];
   var verbiage = useTranslations(rawVerbiage, {
     headingText: 'Please read the following text aloud',
     doneBtnText: 'Done'
   });
-  var timeRemaining = msToTime(Math.max(0, durationMs - (new Date().getTime() - (startedAt !== null && startedAt !== void 0 ? startedAt : new Date()).getTime())));
+  var manualCountdown = function manualCountdown(remainingTime) {
+    if (remainingTime > 0) {
+      var nextCycle_1 = remainingTime - 1;
+      setCountdownRemaining(nextCycle_1);
+      countdownTimeoutRef.current = setTimeout(function () {
+        return manualCountdown(nextCycle_1);
+      }, 1000);
+    }
+  };
+  React.useEffect(function () {
+    setCountdownRemaining(countdownRemaining);
+    countdownTimeoutRef.current = setTimeout(function () {
+      return manualCountdown(countdownRemaining);
+    }, 1000);
+    return function () {
+      clearTimeout(countdownTimeoutRef.current);
+    };
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(ReadTextPromptContainer, {
     className: classNames.container
   }, /*#__PURE__*/React__default['default'].createElement(ReadTextPromptHeading, {
@@ -16095,22 +16167,13 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
     className: classNames.buttonsRow
   }, /*#__PURE__*/React__default['default'].createElement(ReadTextPromptTimeRemaining, {
     className: classNames.timeRemaining
-  }, timeRemaining), /*#__PURE__*/React__default['default'].createElement(DoneButton, {
+  }, countdownRemaining), /*#__PURE__*/React__default['default'].createElement(DoneButton, {
     variant: "positive",
     className: classNames.doneBtn,
     onClick: onComplete,
     finished: true
   }, verbiage.doneBtnText)));
 };
-function msToTime(s) {
-  var ms = s % 1000;
-  s = (s - ms) / 1000;
-  var secs = s % 60;
-  s = (s - secs) / 60;
-  var mins = s % 60;
-  secs += 1;
-  return mins + ':' + ('00' + secs).slice(-2);
-}
 var ReadTextPromptContainer = styled__default['default'].div(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n"])));
 var ReadTextPromptHeading = styled__default['default'].div(templateObject_2$6 || (templateObject_2$6 = tslib.__makeTemplateObject(["\n  padding: 20px;\n  font-weight: bold;\n  margin: auto auto 32px;\n\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  padding: 20px;\n  font-weight: bold;\n  margin: auto auto 32px;\n\n  ", ";\n  ", ";\n  ", ";\n"])), function (props) {
   var _a, _b, _c, _d, _e, _f;
@@ -16236,6 +16299,10 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     stopRecordingAudio = _21.stopRecordingAudio,
     videoUrl = _21.videoUrl,
     audioUrl = _21.audioUrl;
+  var countdownTimeoutRef = React.useRef(undefined);
+  var _22 = React.useState(0),
+    countdownRemaining = _22[0],
+    setCountdownRemaining = _22[1];
   React.useEffect(function () {
     if (!isRecordingVideo && !videoUrl) {
       startRecordingVideo();
@@ -16251,9 +16318,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   React.useEffect(function () {
     shouldCaptureFrames.current = videoLoaded && cameraReady && idModelsReady && (!readTextPrompt || microphoneReady);
   }, [cameraReady, idModelsReady, microphoneReady, readTextPrompt, videoLoaded]);
-  var _22 = React.useState('SHOW_ID_FRONT'),
-    requestedAction = _22[0],
-    setRequestedAction = _22[1];
+  var _23 = React.useState('SHOW_ID_FRONT'),
+    requestedAction = _23[0],
+    setRequestedAction = _23[1];
   React.useEffect(function () {
     if (requestedAction !== 'SHOW_ID_FRONT' && requestedAction !== 'SHOW_ID_BACK') return;
     if (!idCaptureModelsEnabled || !idModelsReady || !cameraReady || !videoLoaded) return;
@@ -16281,15 +16348,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       }
     });
   }, [idCardBackDetectionThreshold, idCardBackFocusThreshold, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, requestedAction, setThresholds]);
-  var _23 = React.useState(0),
-    currentDetectionScore = _23[0],
-    setCurrentDetectionScore = _23[1];
   var _24 = React.useState(0),
-    currentFocusScore = _24[0],
-    setCurrentFocusScore = _24[1];
+    currentDetectionScore = _24[0],
+    setCurrentDetectionScore = _24[1];
   var _25 = React.useState(0),
-    goodFramesCount = _25[0],
-    setGoodFramesCount = _25[1];
+    currentFocusScore = _25[0],
+    setCurrentFocusScore = _25[1];
+  var _26 = React.useState(0),
+    goodFramesCount = _26[0],
+    setGoodFramesCount = _26[1];
   var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? goodIdCardFrontFramesThreshold : goodIdCardBackFramesThreshold;
   var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
   React.useEffect(function () {
@@ -16307,9 +16374,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       }
     });
   }, [idCaptureModelsEnabled, idCardFrontDetectionThreshold, onIdPredictionMade]);
-  var _26 = React.useState(null),
-    idFrontCaptureStartedAt = _26[0],
-    setFirstGoodFrameTime = _26[1];
+  var _27 = React.useState(null),
+    idFrontCaptureStartedAt = _27[0],
+    setFirstGoodFrameTime = _27[1];
   React.useEffect(function () {
     if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
   }, [goodFramesCount]);
@@ -16330,9 +16397,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
   var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
   var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
-  var _27 = React.useState(),
-    countdownStartedAt = _27[0],
-    setCountdownStartedAt = _27[1];
+  var _28 = React.useState(),
+    countdownStartedAt = _28[0],
+    setCountdownStartedAt = _28[1];
   var frameLock = React.useRef(false);
   var captureFrame = React.useCallback(function () {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
@@ -16421,18 +16488,38 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       setCountdownStartedAt(new Date());
     }
   }, [countdownStartedAt, satisfied]);
+  React.useEffect(function () {
+    return function () {
+      clearTimeout(countdownTimeoutRef.current);
+    };
+  }, []);
+  var manualCountdown = function manualCountdown(remainingTime) {
+    if (remainingTime > 0) {
+      var nextCycle_1 = remainingTime - 1;
+      setCountdownRemaining(nextCycle_1);
+      countdownTimeoutRef.current = setTimeout(function () {
+        return manualCountdown(nextCycle_1);
+      }, 1000);
+      return;
+    }
+    if (countdownStartedAt) {
+      captureFrame();
+    }
+  };
   React.useEffect(function () {
     if (!countdownStartedAt) return;
-    var remainingTime = new Date().getTime() + captureCountdownSeconds * 1000.0 - countdownStartedAt.getTime();
-    var timeout = setTimeout(captureFrame, remainingTime);
+    setCountdownRemaining(captureCountdownSeconds);
+    countdownTimeoutRef.current = setTimeout(function () {
+      return manualCountdown(captureCountdownSeconds);
+    }, 1000);
     return function () {
-      clearTimeout(timeout);
+      clearTimeout(countdownTimeoutRef.current);
     };
   }, [captureCountdownSeconds, captureFrame, countdownStartedAt]);
   var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, stopRecording, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
-  var _28 = React.useState(0),
-    numFramesWithoutFaces = _28[0],
-    setNumFramesWithoutFaces = _28[1];
+  var _29 = React.useState(0),
+    numFramesWithoutFaces = _29[0],
+    setNumFramesWithoutFaces = _29[1];
   React.useEffect(function () {
     onSelfiePredictionMade(function (faces) {
       setFaces(faces);
@@ -16448,14 +16535,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     }
   }, [numFramesWithoutFaces, onFaceNotDetected]);
   var theme = styled.useTheme();
-  var _29 = useTranslations(rawVerbiage, {
+  var _30 = useTranslations(rawVerbiage, {
       faceNotCenteredText: 'Please move your face to the center...',
       searchingForIdCardText: 'Searching for ID card...',
       captureBtnText: 'Capture'
     }),
-    captureBtnText = _29.captureBtnText,
-    faceNotCenteredText = _29.faceNotCenteredText,
-    searchingForIdCardText = _29.searchingForIdCardText;
+    captureBtnText = _30.captureBtnText,
+    faceNotCenteredText = _30.faceNotCenteredText,
+    searchingForIdCardText = _30.searchingForIdCardText;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -16464,7 +16551,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
   });
   var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
-  var countdownRemaining = !!countdownStartedAt && Math.max(0, captureCountdownSeconds - Math.floor((new Date().getTime() - countdownStartedAt.getTime()) / 1000.0));
   var searchingForIdCard = idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet;
   var guidanceText = !faceCentered ? faceNotCenteredText : searchingForIdCard ? searchingForIdCardText : undefined;
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
@@ -16502,7 +16588,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       face: face,
       scaling: debugScalingDetails
     });
-  })))))), guidanceText && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
+  })))))), guidanceText && idCaptureModelsEnabled && !modelError && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
     className: classNames.guidanceMessageContainer
   }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
     className: classNames.guidanceMessage,