idmission-web-sdk 1.0.13 → 1.0.14

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

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import { CustomerSuppliedVerbiage } from '../../lib/locales';
+import { LoaderButtonColors } from '../common/LoaderButton';
+export type SelfieCaptureFallbackColors = {
+    captureBtn?: LoaderButtonColors;
+    doneBtn?: LoaderButtonColors;
+};
+export type SelfieCaptureFallbackVerbiage = {
+    headingText?: CustomerSuppliedVerbiage;
+    descriptionText?: CustomerSuppliedVerbiage;
+    captureBtnText?: CustomerSuppliedVerbiage;
+    doneBtnText?: CustomerSuppliedVerbiage;
+    doneBtnLoadingText?: CustomerSuppliedVerbiage;
+};
+export type SelfieCaptureFallbackProps = {
+    onFinished?: (imageData: string) => void;
+    onCapture?: (imageData: string) => void;
+    colors?: SelfieCaptureFallbackColors;
+    verbiage?: SelfieCaptureFallbackVerbiage;
+};
+export declare const SelfieCaptureFallback: ({ onFinished, onCapture, colors, verbiage: rawVerbiage, }: SelfieCaptureFallbackProps) => ReactElement;

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

@@ -3,6 +3,7 @@ import { IdCaptureAssets, IdCaptureColors, IdCaptureVerbiage } from './IdCapture
 import { IdCaptureLoadingOverlayAssets, IdCaptureLoadingOverlayColors, IdCaptureLoadingOverlayVerbiage } from './IdCaptureLoadingOverlay';
 import { FlipIdPromptAssets, FlipIdPromptVerbiage } from './FlipIdPrompt';
 import { IdCaptureSuccessColors, IdCaptureSuccessVerbiage } from './IdCaptureSuccess';
+import { IdCaptureFallbackColors, IdCaptureFallbackVerbiage } from '../fallback_flows/IdCapture';
 export type IdCaptureWizardAssets = {
     documentDetectionModelUrl?: string;
     focusModelUrl?: string;
@@ -15,6 +16,7 @@ export type IdCaptureWizardAssets = {
 export type IdCaptureWizardColors = IdCaptureColors & {
     loadingOverlay?: IdCaptureLoadingOverlayColors;
     success?: IdCaptureSuccessColors;
+    fallback?: IdCaptureFallbackColors;
 };
 export type IdCaptureWizardVerbiage = {
     loadingOverlay?: IdCaptureLoadingOverlayVerbiage;
@@ -23,6 +25,7 @@ export type IdCaptureWizardVerbiage = {
     passport?: IdCaptureVerbiage;
     flipIdPrompt?: FlipIdPromptVerbiage;
     success?: IdCaptureSuccessVerbiage;
+    fallback?: IdCaptureFallbackVerbiage;
 };
 export type IdCaptureSubmission = {
     idFrontImage: string | null;

package/dist/components/selfie_capture/HighPerformanceSelfieGuidanceModelsProvider.d.ts

@@ -25,6 +25,7 @@ type HighPerformanceSelfieGuidanceModelsState = {
     onPredictionMade: (handler: PredictionHandler) => void;
     canvasRef: MutableRefObject<HTMLCanvasElement | null>;
     ready: boolean;
+    error: Error | null;
 };
 export declare const HighPerformanceSelfieGuidanceModelsContext: React.Context<HighPerformanceSelfieGuidanceModelsState>;
 export declare const HighPerformanceSelfieGuidanceModelsProvider: ({ autoStart, children, throttleMs, }: {

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.13';
+var webSdkVersion = '1.0.14';
 
 function getPlatform() {
   return window.platform;
@@ -10451,7 +10451,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
             imageData: imageData
           }
         });
-      }
+      },
+      colors: colors.fallback,
+      verbiage: verbiage.fallback
     });
   }
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
@@ -10570,23 +10572,6 @@ 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';
@@ -10663,7 +10648,8 @@ var HighPerformanceSelfieGuidanceModelsContext = /*#__PURE__*/React.createContex
   canvasRef: {
     current: null
   },
-  ready: false
+  ready: false,
+  error: null
 });
 var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfieGuidanceModelsProvider(_a) {
   var _b = _a.autoStart,
@@ -10686,8 +10672,8 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   var rafId = React.useRef(0);
   var loopId = React.useRef(0);
   var _f = React.useState(null),
-    loadingError = _f[0],
-    setLoadingError = _f[1];
+    error = _f[0],
+    setError = _f[1];
   React.useEffect(function () {
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
@@ -10706,7 +10692,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);
@@ -10839,14 +10825,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__namespace.createElement(HighPerformanceSelfieGuidanceModelsContext.Provider, {
     value: value
-  }, loadingError ? /*#__PURE__*/React__namespace.createElement(ModelLoadingErrorOverlay, {
-    error: loadingError
-  }) : children);
+  }, children);
 };
 
 var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__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) {
@@ -10898,6 +10883,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 = React.useState(null),
+    image = _d[0],
+    setImage = _d[1];
+  var fileInput = React.useRef(null);
+  var _e = React.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['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), image && /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, {
+    style: {
+      marginTop: 32
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: image,
+    alt: ""
+  })), /*#__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;
+        setImage(imageData);
+        onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageData);
+      });
+      reader.readAsDataURL(file);
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      marginTop: 32
+    }
+  }, !image && /*#__PURE__*/React__default['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['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,
@@ -11022,7 +11090,9 @@ var SelfieCapture = function SelfieCapture(_a) {
     cameraRef = _l.cameraRef,
     cameraReady = _l.cameraReady,
     videoRef = _l.videoRef;
-  var onPredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
+  var _m = React.useContext(HighPerformanceSelfieGuidanceModelsContext),
+    onPredictionMade = _m.onPredictionMade,
+    guidanceError = _m.error;
   React.useEffect(function () {
     if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
       dispatch({
@@ -11044,9 +11114,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     });
   }, [onPredictionMade]);
-  var _m = React.useState(false),
-    captureReady = _m[0],
-    setCaptureReady = _m[1];
+  var _o = React.useState(false),
+    captureReady = _o[0],
+    setCaptureReady = _o[1];
   React.useEffect(function () {
     var timer;
     if (state.faceReady) {
@@ -11079,9 +11149,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,
@@ -11105,6 +11175,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['default'].createElement(SelfieCaptureFallback, null);
+  }
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
@@ -11145,6 +11218,7 @@ var initialState$2 = {
   timesLivenessCheckFailed: 0
 };
 var reducer$2 = function reducer(state, action) {
+  var _a, _b;
   switch (action.type) {
     case 'livenessReady':
       {
@@ -11165,12 +11239,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 tslib.__assign(tslib.__assign({}, state), {
             requestState: 'ERROR',
@@ -11191,8 +11265,8 @@ var reducer$2 = function reducer(state, action) {
           timesLivenessCheckFailed += 1;
         }
         return tslib.__assign(tslib.__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,
@@ -11227,6 +11301,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
   var _e = React.useContext(SubmissionContext),
     checkLiveness = _e.checkLiveness,
     submissionError = _e.submissionError;
+  var modelsError = React.useContext(HighPerformanceSelfieGuidanceModelsContext).error;
   var _f = React.useReducer(reducer$2, initialState$2),
     state = _f[0],
     dispatch = _f[1];
@@ -11295,21 +11370,68 @@ 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) {
+          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]);
   React.useEffect(function () {
     if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
   }, [onSuccess, state.imageUrl, isPassed]);
   React.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['default'].createElement(SelfieCaptureFallback, {
+      onFinished: onFallbackImageCaptured
+    });
+  }
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
     ref: rawCanvas
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {