idmission-web-sdk 1.0.13 → 1.0.14

package/dist/sdk2.esm.js

@@ -14,7 +14,7 @@ import { FaceDetector, FilesetResolver } from '@mediapipe/tasks-vision';
 import SignatureCanvas from 'react-signature-canvas';
 import ReactDOM, { createPortal } from 'react-dom';
 
-var webSdkVersion = '1.0.13';
+var webSdkVersion = '1.0.14';
 
 function getPlatform() {
   return window.platform;
@@ -10415,7 +10415,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
             imageData: imageData
           }
         });
-      }
+      },
+      colors: colors.fallback,
+      verbiage: verbiage.fallback
     });
   }
   return /*#__PURE__*/React__default.createElement(PageContainer, {
@@ -10534,23 +10536,6 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
   }));
 };
 
-var ModelLoadingErrorOverlay = function ModelLoadingErrorOverlay(_a) {
-  var error = _a.error;
-  return /*#__PURE__*/React__default.createElement(OverlayContainer, null, /*#__PURE__*/React__default.createElement(OverlayInner, {
-    style: {
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement("h3", {
-    style: {
-      marginBottom: 8
-    }
-  }, "We're sorry, an unexpected error has occurred."), /*#__PURE__*/React__default.createElement("p", {
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/React__default.createElement("code", null, error.message))));
-};
-
 var NUM_KEYPOINTS = 6;
 var GREEN = '#32EEDB';
 var RED = '#FF2C35';
@@ -10627,7 +10612,8 @@ var HighPerformanceSelfieGuidanceModelsContext = /*#__PURE__*/createContext({
   canvasRef: {
     current: null
   },
-  ready: false
+  ready: false,
+  error: null
 });
 var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfieGuidanceModelsProvider(_a) {
   var _b = _a.autoStart,
@@ -10650,8 +10636,8 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   var rafId = useRef(0);
   var loopId = useRef(0);
   var _f = useState(null),
-    loadingError = _f[0],
-    setLoadingError = _f[1];
+    error = _f[0],
+    setError = _f[1];
   useEffect(function () {
     (function () {
       return __awaiter(void 0, void 0, void 0, function () {
@@ -10670,7 +10656,7 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
               return [3, 4];
             case 3:
               e_1 = _b.sent();
-              setLoadingError(e_1);
+              setError(e_1);
               return [3, 4];
             case 4:
               setReady(true);
@@ -10803,14 +10789,13 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
       stop: stop,
       ready: ready,
       canvasRef: canvasRef,
-      onPredictionMade: onPredictionMade
+      onPredictionMade: onPredictionMade,
+      error: error
     };
-  }, [onPredictionMade, ready, start, stop]);
+  }, [error, onPredictionMade, ready, start, stop]);
   return /*#__PURE__*/React.createElement(HighPerformanceSelfieGuidanceModelsContext.Provider, {
     value: value
-  }, loadingError ? /*#__PURE__*/React.createElement(ModelLoadingErrorOverlay, {
-    error: loadingError
-  }) : children);
+  }, children);
 };
 
 var GuidanceMessageContainer = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
@@ -10862,6 +10847,89 @@ var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shou
   };
 };
 
+var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
+  var onFinished = _a.onFinished,
+    onCapture = _a.onCapture,
+    _b = _a.colors,
+    colors = _b === void 0 ? {} : _b,
+    _c = _a.verbiage,
+    rawVerbiage = _c === void 0 ? {} : _c;
+  var _d = useState(null),
+    image = _d[0],
+    setImage = _d[1];
+  var fileInput = useRef(null);
+  var _e = useState(false),
+    loading = _e[0],
+    setLoading = _e[1];
+  var verbiage = useTranslations(rawVerbiage, {
+    headingText: "We're having some trouble.",
+    descriptionText: 'On-device capture guidance failed, please capture a selfie manually.',
+    captureBtnText: 'Capture',
+    doneBtnText: 'Done',
+    doneBtnLoadingText: 'Verifying...'
+  });
+  return /*#__PURE__*/React__default.createElement(OverlayContainer, null, /*#__PURE__*/React__default.createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default.createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, verbiage.headingText), /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, verbiage.descriptionText), image && /*#__PURE__*/React__default.createElement(OverlayImageWrapper, {
+    style: {
+      marginTop: 32
+    }
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: image,
+    alt: ""
+  })), /*#__PURE__*/React__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;
+        setImage(imageData);
+        onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageData);
+      });
+      reader.readAsDataURL(file);
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginTop: 32
+    }
+  }, !image && /*#__PURE__*/React__default.createElement(LoaderButton, {
+    colors: colors.captureBtn,
+    finished: true,
+    onClick: function onClick() {
+      var _a;
+      (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+    }
+  }, verbiage.captureBtnText), image && /*#__PURE__*/React__default.createElement(LoaderButton, {
+    key: loading ? 'loading-btn' : 'ready-btn',
+    colors: colors.doneBtn,
+    finished: !loading,
+    onClick: function onClick() {
+      setLoading(true);
+      onFinished === null || onFinished === void 0 ? void 0 : onFinished(image);
+    },
+    style: {
+      marginLeft: 12
+    }
+  }, loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText))));
+};
+
 var initialState$3 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -10986,7 +11054,9 @@ var SelfieCapture = function SelfieCapture(_a) {
     cameraRef = _l.cameraRef,
     cameraReady = _l.cameraReady,
     videoRef = _l.videoRef;
-  var onPredictionMade = useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
+  var _m = useContext(HighPerformanceSelfieGuidanceModelsContext),
+    onPredictionMade = _m.onPredictionMade,
+    guidanceError = _m.error;
   useEffect(function () {
     if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
       dispatch({
@@ -11008,9 +11078,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     });
   }, [onPredictionMade]);
-  var _m = useState(false),
-    captureReady = _m[0],
-    setCaptureReady = _m[1];
+  var _o = useState(false),
+    captureReady = _o[0],
+    setCaptureReady = _o[1];
   useEffect(function () {
     var timer;
     if (state.faceReady) {
@@ -11043,9 +11113,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     })();
   }, [captureReady, onSelfieCaptured, state.faces, videoRef]);
-  var _o = useTimeout(timeoutDurationMs, onTimeout),
-    timedOut = _o.timedOut,
-    timeoutStartedAt = _o.timeoutStartedAt;
+  var _p = useTimeout(timeoutDurationMs, onTimeout),
+    timedOut = _p.timedOut,
+    timeoutStartedAt = _p.timeoutStartedAt;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -11069,6 +11139,9 @@ var SelfieCapture = function SelfieCapture(_a) {
   guidanceMessage || (guidanceMessage = state.faceReady ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
   var satisfied = state.faceReady;
   if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
+  if (guidanceError) {
+    return /*#__PURE__*/React__default.createElement(SelfieCaptureFallback, null);
+  }
   return /*#__PURE__*/React__default.createElement(PageContainer, {
     ref: ref,
     className: "flex"
@@ -11109,6 +11182,7 @@ var initialState$2 = {
   timesLivenessCheckFailed: 0
 };
 var reducer$2 = function reducer(state, action) {
+  var _a, _b;
   switch (action.type) {
     case 'livenessReady':
       {
@@ -11129,12 +11203,12 @@ var reducer$2 = function reducer(state, action) {
       });
     case 'livenessChecked':
       {
-        var _a = action.payload.response,
-          _b = _a.status,
-          statusCode = _b.statusCode,
-          statusMessage = _b.statusMessage,
-          errorData = _b.errorData,
-          resultData = _a.resultData;
+        var _c = action.payload.response,
+          _d = _c.status,
+          statusCode = _d.statusCode,
+          statusMessage = _d.statusMessage,
+          errorData = _d.errorData,
+          resultData = _c.resultData;
         if (statusCode !== '000') {
           return __assign(__assign({}, state), {
             requestState: 'ERROR',
@@ -11155,8 +11229,8 @@ var reducer$2 = function reducer(state, action) {
           timesLivenessCheckFailed += 1;
         }
         return __assign(__assign({}, state), {
-          frame: action.payload.frame,
-          face: action.payload.face,
+          frame: (_a = action.payload.frame) !== null && _a !== void 0 ? _a : null,
+          face: (_b = action.payload.face) !== null && _b !== void 0 ? _b : null,
           imageUrl: action.payload.imageUrl,
           requestState: requestState,
           faceLive: faceLive,
@@ -11191,6 +11265,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
   var _e = useContext(SubmissionContext),
     checkLiveness = _e.checkLiveness,
     submissionError = _e.submissionError;
+  var modelsError = useContext(HighPerformanceSelfieGuidanceModelsContext).error;
   var _f = useReducer(reducer$2, initialState$2),
     state = _f[0],
     dispatch = _f[1];
@@ -11259,21 +11334,68 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
       });
     })();
   }, [checkLiveness, face, frame, isReady, submissionError]);
+  var onFallbackImageCaptured = useCallback(function (imageUrl) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var response, _a, e_2;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            dispatch({
+              type: 'livenessChecking'
+            });
+            _b.label = 1;
+          case 1:
+            _b.trys.push([1, 4,, 5]);
+            _a = checkLiveness;
+            return [4, dataUrlToBase64(imageUrl)];
+          case 2:
+            return [4, _a.apply(void 0, [_b.sent()])];
+          case 3:
+            response = _b.sent();
+            dispatch({
+              type: 'livenessChecked',
+              payload: {
+                imageUrl: imageUrl,
+                response: response
+              }
+            });
+            return [3, 5];
+          case 4:
+            e_2 = _b.sent();
+            dispatch({
+              type: 'livenessCheckFailed',
+              payload: {
+                error: e_2
+              }
+            });
+            return [3, 5];
+          case 5:
+            return [2];
+        }
+      });
+    });
+  }, [checkLiveness]);
   useEffect(function () {
     if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
   }, [onSuccess, state.imageUrl, isPassed]);
   useEffect(function () {
-    if (state.timesLivenessCheckFailed >= 2) {
+    var allowedFailures = modelsError ? 1 : 2;
+    if (state.timesLivenessCheckFailed >= allowedFailures) {
       onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
     }
-  }, [onTimeout, state.timesLivenessCheckFailed]);
-  useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED', state.requestState === 'IN_PROGRESS');
+  }, [modelsError, onTimeout, state.timesLivenessCheckFailed]);
+  useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelsError, state.requestState === 'IN_PROGRESS');
   var verbiage = useTranslations(rawVerbiage, {
     guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
     guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
     guidanceRemoveMaskText: 'Please remove your mask...'
   });
   var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
+  if (modelsError) {
+    return /*#__PURE__*/React__default.createElement(SelfieCaptureFallback, {
+      onFinished: onFallbackImageCaptured
+    });
+  }
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
     ref: rawCanvas
   }), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {