idmission-web-sdk 1.0.12 → 1.0.13

package/dist/components/fallback_flows/IdCapture.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+import { CustomerSuppliedVerbiage } from '../../lib/locales';
+import { LoaderButtonColors } from '../common/LoaderButton';
+export type IdCaptureFallbackColors = {
+    captureBtn?: LoaderButtonColors;
+    captureMoreBtn?: LoaderButtonColors;
+    doneBtn?: LoaderButtonColors;
+};
+export type IdCaptureFallbackVerbiage = {
+    headingText?: CustomerSuppliedVerbiage;
+    descriptionText?: CustomerSuppliedVerbiage;
+    firstInstructionText?: CustomerSuppliedVerbiage;
+    secondInstructionText?: CustomerSuppliedVerbiage;
+    captureBtnText?: CustomerSuppliedVerbiage;
+    captureMoreBtnText?: CustomerSuppliedVerbiage;
+    doneBtnText?: CustomerSuppliedVerbiage;
+};
+export type IdCaptureFallbackProps = {
+    onCapture?: (imageData: string) => void;
+    onFinished?: (images: string[]) => void;
+    colors?: IdCaptureFallbackColors;
+    verbiage?: IdCaptureFallbackVerbiage;
+};
+export declare const IdCaptureFallback: ({ onCapture, onFinished, colors, verbiage: rawVerbiage, }: IdCaptureFallbackProps) => ReactElement;

package/dist/components/id_capture/IdCaptureModelsProvider.d.ts

@@ -21,6 +21,7 @@ export type IdCapturePrediction = {
     focusPredictionTime: number;
     frameWidth: number;
     frameHeight: number;
+    allZero: boolean;
 };
 export type IdCaptureThresholds = {
     document?: number;
@@ -37,6 +38,7 @@ export declare const PREDICTION_POSITIONS: {
 export type IdCaptureModelsState = {
     ready: boolean;
     working: MutableRefObject<boolean>;
+    error: Error | null;
     thresholds: IdCaptureThresholds;
     setThresholds: (value: IdCaptureThresholds) => void;
     makePrediction: (frame: Frame) => void;

package/dist/sdk2.cjs.development.js

@@ -50,7 +50,7 @@ var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObs
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var webSdkVersion = '1.0.12';
+var webSdkVersion = '1.0.13';
 
 function getPlatform() {
   return window.platform;
@@ -8369,23 +8369,6 @@ function cropToBoundingBox(frame, bbox) {
   return canvas;
 }
 
-var ModelLoadingErrorOverlay = function ModelLoadingErrorOverlay(_a) {
-  var error = _a.error;
-  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
-    style: {
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("h3", {
-    style: {
-      marginBottom: 8
-    }
-  }, "We're sorry, an unexpected error has occurred."), /*#__PURE__*/React__default['default'].createElement("p", {
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("code", null, error.message))));
-};
-
 var PREDICTION_POSITIONS = {
   boxes: 0,
   scores: 7,
@@ -8396,6 +8379,7 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
   working: {
     current: false
   },
+  error: null,
   thresholds: {},
   setThresholds: function setThresholds() {
     return null;
@@ -8502,13 +8486,11 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
         });
       });
     }
-    try {
-      loadModels().then(function () {
-        setReady(true);
-      });
-    } catch (e) {
+    loadModels().then(function () {
+      setReady(true);
+    })["catch"](function (e) {
       setLoadingError(e);
-    }
+    });
     var webGLCanvas = getWebGLContext(2).canvas;
     webGLCanvas.addEventListener('webglcontextlost', reloadModels);
     return function () {
@@ -8532,6 +8514,9 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
     if (thresholds.pdf417) setPdf417DetectionThreshold(thresholds.pdf417);
     if (thresholds.focus) setFocusThreshold(thresholds.focus);
   }, []);
+  var _m = React.useState(0),
+    timesAllZero = _m[0],
+    setTimesAllZero = _m[1];
   var bestPredictionCanvas = React.useRef(null);
   var bestFocusScore = React.useRef(0);
   var makePrediction = React.useCallback(function (frame) {
@@ -8553,6 +8538,9 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
                 bestFocusScore.current = prediction.focusScore;
                 drawToCanvas(bestPredictionCanvas.current, frame);
               }
+              if (prediction.allZero) setTimesAllZero(function (n) {
+                return n + 1;
+              });
               (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, prediction);
               working.current = false;
               return [2];
@@ -8561,6 +8549,11 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
       });
     })();
   }, [logPredictions, thresholds]);
+  React.useEffect(function () {
+    if (timesAllZero >= 2) {
+      setLoadingError(new Error('model is returning all zeroes'));
+    }
+  }, [timesAllZero]);
   var onPredictionMade = React.useCallback(function (handler) {
     onPredictionHandler.current = handler;
   }, []);
@@ -8597,14 +8590,13 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
       detectionTime: detectionTime,
       focusPredictionTime: focusPredictionTime,
       getBestFrame: getBestFrame,
-      resetBestFrame: resetBestFrame
+      resetBestFrame: resetBestFrame,
+      error: loadingError
     };
-  }, [detectionTime, focusPredictionTime, getBestFrame, makePrediction, onPredictionMade, ready, resetBestFrame, setThresholds, thresholds]);
+  }, [detectionTime, focusPredictionTime, getBestFrame, loadingError, makePrediction, onPredictionMade, ready, resetBestFrame, setThresholds, thresholds]);
   return /*#__PURE__*/React__default['default'].createElement(IdCaptureModelsContext.Provider, {
     value: value
-  }, loadingError ? /*#__PURE__*/React__default['default'].createElement(ModelLoadingErrorOverlay, {
-    error: loadingError
-  }) : children, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
+  }, children, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
     ref: lastPredictionCanvas
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
     ref: bestPredictionCanvas
@@ -8616,7 +8608,7 @@ function makePredictions(frame, lastPredictionCanvas, thresholds, logPredictions
     logPredictions = false;
   }
   return tslib.__awaiter(this, void 0, void 0, function () {
-    var _l, frameWidth, frameHeight, _o, boxes, scores, labels, time, detectedObjects, bestDocument, bestPassportPage, bestDocumentScore, passportDetectionScore, passportDetectionThresholdMet, bestDocumentOrPassport, detectionScore, detectionThresholdMet, detectedDocumentType, bestMrz, mrzDetectionScore, mrzDetectionThresholdMet, bestPdf417, pdf417DetectionScore, pdf417DetectionThresholdMet, focusPrediction, focusPredictionTime, focusScore, focusThresholdMet;
+    var _l, frameWidth, frameHeight, _o, boxes, scores, labels, time, allZero, detectedObjects, bestDocument, bestPassportPage, bestDocumentScore, passportDetectionScore, passportDetectionThresholdMet, bestDocumentOrPassport, detectionScore, detectionThresholdMet, detectedDocumentType, bestMrz, mrzDetectionScore, mrzDetectionThresholdMet, bestPdf417, pdf417DetectionScore, pdf417DetectionThresholdMet, focusPrediction, focusPredictionTime, focusScore, focusThresholdMet;
     var _p;
     return tslib.__generator(this, function (_q) {
       switch (_q.label) {
@@ -8626,6 +8618,11 @@ function makePredictions(frame, lastPredictionCanvas, thresholds, logPredictions
           return [4, makeDocumentDetectionPredictions(frame, logPredictions)];
         case 1:
           _o = _q.sent(), boxes = _o.boxes, scores = _o.scores, labels = _o.labels, time = _o.time;
+          allZero = boxes.length > 0 && !boxes.some(function (box) {
+            return box.some(function (n) {
+              return n > 0;
+            });
+          });
           detectedObjects = applyNonMaxSuppression(boxes.map(function (box, i) {
             return bboxToDetectedObjectUnscaled(box, scores[i], labels[i]);
           }));
@@ -8685,7 +8682,8 @@ function makePredictions(frame, lastPredictionCanvas, thresholds, logPredictions
             focusThresholdMet: focusThresholdMet,
             focusPredictionTime: focusPredictionTime,
             frameWidth: frameWidth,
-            frameHeight: frameHeight
+            frameHeight: frameHeight,
+            allZero: allZero
           }];
       }
     });
@@ -10123,6 +10121,101 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
   return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
 }
 
+var IdCaptureFallback = function IdCaptureFallback(_a) {
+  var onCapture = _a.onCapture,
+    onFinished = _a.onFinished,
+    _b = _a.colors,
+    colors = _b === void 0 ? {} : _b,
+    _c = _a.verbiage,
+    rawVerbiage = _c === void 0 ? {} : _c;
+  var fileInput = React.useRef(null);
+  var _d = React.useState([]),
+    images = _d[0],
+    setImages = _d[1];
+  colors.captureMoreBtn || (colors.captureMoreBtn = {
+    backgroundColor: '#666'
+  });
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: "We're having some trouble.",
+    descriptionText: 'On-device capture guidance failed, please capture photos of your ID card or passport manually.',
+    firstInstructionText: 'Please capture the front of your ID card, or the ID page of your passport.',
+    secondInstructionText: 'Please capture the back of your ID card, or click Done if submitting a passport.',
+    captureBtnText: 'Capture',
+    captureMoreBtnText: 'Capture back of ID Card',
+    doneBtnText: 'Done'
+  });
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, verbiage.descriptionText), images.length > 0 && /*#__PURE__*/React__default['default'].createElement(OverlayImageMultiContainer, null, images.map(function (image, i) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: i,
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexGrow: 1,
+        flexBasis: 0
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("img", {
+      src: image,
+      alt: ""
+    }));
+  })), images.length < 2 && /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, images.length === 0 ? verbiage.firstInstructionText : verbiage.secondInstructionText), /*#__PURE__*/React__default['default'].createElement("input", {
+    ref: fileInput,
+    type: "file",
+    accept: "image/*",
+    hidden: true,
+    onChange: function onChange(e) {
+      var _a;
+      var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+      if (!file) return;
+      var reader = new FileReader();
+      reader.addEventListener('load', function (e) {
+        var _a;
+        var imageData = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+        setImages(function (images) {
+          return tslib.__spreadArray(tslib.__spreadArray([], images, true), [imageData], false);
+        });
+        onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageData);
+      });
+      reader.readAsDataURL(file);
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      marginTop: 32
+    }
+  }, images.length < 2 && /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    colors: images.length > 0 ? colors.captureMoreBtn : colors.captureBtn,
+    finished: true,
+    onClick: function onClick() {
+      var _a;
+      (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+    }
+  }, images.length > 0 ? verbiage.captureMoreBtnText : verbiage.captureBtnText), images.length > 0 && /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    colors: colors.doneBtn,
+    finished: true,
+    onClick: function onClick() {
+      onFinished === null || onFinished === void 0 ? void 0 : onFinished(images);
+    },
+    style: {
+      marginLeft: 12
+    }
+  }, verbiage.doneBtnText))));
+};
+
 var CaptureState;
 (function (CaptureState) {
   CaptureState["CAPTURING"] = "CAPTURING";
@@ -10174,6 +10267,22 @@ var reducer$4 = function reducer(state, action) {
         }
         return newState;
       }
+    case 'imageCapturedManually':
+      {
+        var newState = tslib.__assign({}, state);
+        var capturedDocument = tslib.__assign(tslib.__assign({}, action.payload), {
+          width: 0,
+          height: 0
+        });
+        if (Object.keys(state.capturedDocuments).length === 0) {
+          newState.capturedDocuments[DocumentType.PASSPORT] = capturedDocument;
+        } else {
+          newState.capturedDocuments = {};
+          newState.capturedDocuments[DocumentType.ID_CARD_FRONT] = state.capturedDocuments[DocumentType.PASSPORT];
+          newState.capturedDocuments[DocumentType.ID_CARD_BACK] = capturedDocument;
+        }
+        return newState;
+      }
     case 'reset':
       return tslib.__assign({}, initialState$4);
   }
@@ -10224,6 +10333,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     setPassportImage = _3.setPassportImage,
     logIdFrontCaptureAttempt = _3.logIdFrontCaptureAttempt,
     logIdBackCaptureAttempt = _3.logIdBackCaptureAttempt;
+  var modelsError = React.useContext(IdCaptureModelsContext).error;
   var operationStartedAt = React.useRef();
   React.useEffect(function () {
     operationStartedAt.current = new Date();
@@ -10261,53 +10371,23 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     });
   }, [logCaptureMetadata]);
   var onSubmitClick = React.useCallback(function () {
-    return tslib.__awaiter(void 0, void 0, void 0, function () {
-      var idFrontDocument, idBackDocument, passportDocument, idFrontImage, _a, idBackImage, _b, passportImage, _c;
-      return tslib.__generator(this, function (_d) {
-        switch (_d.label) {
-          case 0:
-            idFrontDocument = state.capturedDocuments['ID_CARD_FRONT'];
-            idBackDocument = state.capturedDocuments['ID_CARD_BACK'];
-            passportDocument = state.capturedDocuments['PASSPORT'];
-            _a = idFrontDocument;
-            if (!_a) return [3, 2];
-            return [4, dataUrlToBase64(idFrontDocument.imageData)];
-          case 1:
-            _a = _d.sent();
-            _d.label = 2;
-          case 2:
-            idFrontImage = _a;
-            _b = idBackDocument;
-            if (!_b) return [3, 4];
-            return [4, dataUrlToBase64(idBackDocument.imageData)];
-          case 3:
-            _b = _d.sent();
-            _d.label = 4;
-          case 4:
-            idBackImage = _b;
-            _c = passportDocument;
-            if (!_c) return [3, 6];
-            return [4, dataUrlToBase64(passportDocument.imageData)];
-          case 5:
-            _c = _d.sent();
-            _d.label = 6;
-          case 6:
-            passportImage = _c;
-            setIdFrontImage(idFrontImage);
-            setIdBackImage(idBackImage);
-            setPassportImage(passportImage);
-            releaseCameraAccess();
-            setTimeout(function () {
-              onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({
-                idFrontImage: idFrontImage,
-                idBackImage: idBackImage,
-                passportImage: passportImage
-              });
-            }, 0);
-            return [2];
-        }
+    var idFrontDocument = state.capturedDocuments['ID_CARD_FRONT'];
+    var idBackDocument = state.capturedDocuments['ID_CARD_BACK'];
+    var passportDocument = state.capturedDocuments['PASSPORT'];
+    var idFrontImage = idFrontDocument && dataUrlToBase64Sync(idFrontDocument.imageData);
+    var idBackImage = idBackDocument && dataUrlToBase64Sync(idBackDocument.imageData);
+    var passportImage = passportDocument && dataUrlToBase64Sync(passportDocument.imageData);
+    setIdFrontImage(idFrontImage);
+    setIdBackImage(idBackImage);
+    setPassportImage(passportImage);
+    releaseCameraAccess();
+    setTimeout(function () {
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({
+        idFrontImage: idFrontImage,
+        idBackImage: idBackImage,
+        passportImage: passportImage
       });
-    });
+    }, 0);
   }, [onSuccess, releaseCameraAccess, setIdBackImage, setIdFrontImage, setPassportImage, state.capturedDocuments]);
   var showSuccessScreen = useShowSuccessScreen(skipSuccessScreen, state.captureState === CaptureState.COMPLETE, onSubmitClick);
   var onRetryClick = React.useCallback(function () {
@@ -10361,6 +10441,19 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       className: "padded"
     }, /*#__PURE__*/React__default['default'].createElement("h1", null, "Submission completed!"), /*#__PURE__*/React__default['default'].createElement("pre", null, JSON.stringify(submissionResponse, null, 2)));
   }
+  if (modelsError) {
+    return /*#__PURE__*/React__default['default'].createElement(IdCaptureFallback, {
+      onFinished: onSubmitClick,
+      onCapture: function onCapture(imageData) {
+        dispatch({
+          type: 'imageCapturedManually',
+          payload: {
+            imageData: imageData
+          }
+        });
+      }
+    });
+  }
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     className: "flex"
   }, state.captureState !== CaptureState.COMPLETE && /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), overlayDismissed && function () {
@@ -10477,6 +10570,23 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
   }));
 };
 
+var ModelLoadingErrorOverlay = function ModelLoadingErrorOverlay(_a) {
+  var error = _a.error;
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, "We're sorry, an unexpected error has occurred."), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("code", null, error.message))));
+};
+
 var NUM_KEYPOINTS = 6;
 var GREEN = '#32EEDB';
 var RED = '#FF2C35';