idmission-web-sdk 0.0.51 → 0.0.52

package/dist/components/common/SelfieProgressPreview.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SelfieProgressPreview: ({ imageUrl }: {
+    imageUrl: string;
+}) => JSX.Element;

package/dist/components/face_liveness/FaceLivenessCapture.d.ts

@@ -17,6 +17,3 @@ export type FaceLivenessCaptureProps = {
     debugMode?: boolean;
 };
 export declare const FaceLivenessCapture: ({ onCapture, onSuccess, onTimeout, onExit, timeoutDurationMs, colors, verbiage, debugMode, }: FaceLivenessCaptureProps) => ReactElement;
-export declare const SelfieProgressPreview: ({ imageUrl }: {
-    imageUrl: string;
-}) => JSX.Element;

package/dist/lib/utils/useTimeout.d.ts

@@ -0,0 +1,4 @@
+export declare const useTimeout: (durationMs?: number, onTimeout?: () => void, timeoutAverted?: boolean, shouldWaitLonger?: boolean) => {
+    timedOut: boolean;
+    timeoutStartedAt: Date | null | undefined;
+};

package/dist/sdk2.cjs.development.js

@@ -9934,6 +9934,42 @@ var GuidanceMessage = styled__default['default'].div(templateObject_2$2 || (temp
 });
 var templateObject_1$4, templateObject_2$2;
 
+var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger) {
+  var _a = React.useState(false),
+    timedOut = _a[0],
+    setTimedOut = _a[1];
+  var _b = React.useState(),
+    timeoutStartedAt = _b[0],
+    setTimeoutStartedAt = _b[1];
+  React.useEffect(function () {
+    if (!durationMs) return;
+    setTimeoutStartedAt(new Date());
+    var timer = setTimeout(function () {
+      setTimedOut(true);
+    }, durationMs);
+    return function () {
+      if (timer) clearTimeout(timer);
+    };
+  }, [durationMs]);
+  React.useEffect(function () {
+    if (!timedOut || timeoutAverted) return;
+    if (!shouldWaitLonger) {
+      onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
+      return;
+    }
+    var t = setTimeout(function () {
+      onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
+    }, 10000);
+    return function () {
+      clearTimeout(t);
+    };
+  }, [onTimeout, shouldWaitLonger, timedOut, timeoutAverted]);
+  return {
+    timedOut: timedOut,
+    timeoutStartedAt: timeoutStartedAt
+  };
+};
+
 var initialState$3 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -10125,25 +10161,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       });
     })();
   }, [captureReady, onSelfieCaptured, state.faces, takePhoto]);
-  var _p = React.useState(),
-    timeoutStartedAt = _p[0],
-    setTimeoutStartedAt = _p[1];
-  var _q = React.useState(false),
-    timedOut = _q[0],
-    setTimedOut = _q[1];
-  React.useEffect(function () {
-    if (!timeoutDurationMs) return;
-    setTimeoutStartedAt(new Date());
-    var timer = setTimeout(function () {
-      setTimedOut(true);
-    }, timeoutDurationMs);
-    return function () {
-      if (timer) clearTimeout(timer);
-    };
-  }, [timeoutDurationMs]);
-  React.useEffect(function () {
-    if (timedOut) onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
-  }, [onTimeout, timedOut]);
+  var _p = useTimeout(timeoutDurationMs, onTimeout),
+    timedOut = _p.timedOut,
+    timeoutStartedAt = _p.timeoutStartedAt;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -10216,6 +10236,28 @@ var Spinner = styled__default['default'].div(templateObject_1$3 || (templateObje
 });
 var templateObject_1$3;
 
+var SelfieProgressPreview = function SelfieProgressPreview(_a) {
+  var imageUrl = _a.imageUrl;
+  return /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(SelfieProgressText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
+    "$size": 24,
+    "$color": "white",
+    "$thickness": 3,
+    style: {
+      position: 'relative',
+      top: 4,
+      left: -3,
+      margin: '0 3px 0 -12px'
+    }
+  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(SelfiePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: imageUrl,
+    alt: ""
+  })));
+};
+var SelfieProgressPreviewWrapper = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
+var SelfieProgressText = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
+var SelfiePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
+var templateObject_1$2, templateObject_2$1, templateObject_3$1;
+
 var initialState$2 = {
   frame: null,
   face: null,
@@ -10385,31 +10427,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
       onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
     }
   }, [onTimeout, state.timesLivenessCheckFailed]);
-  var _g = React.useState(false),
-    timedOut = _g[0],
-    setTimedOut = _g[1];
-  React.useEffect(function () {
-    if (!timeoutDurationMs) return;
-    var timer = setTimeout(function () {
-      setTimedOut(true);
-    }, timeoutDurationMs);
-    return function () {
-      if (timer) clearTimeout(timer);
-    };
-  }, [timeoutDurationMs]);
-  React.useEffect(function () {
-    if (!timedOut || state.requestState === 'PASSED') return;
-    if (state.requestState !== 'IN_PROGRESS') {
-      onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
-      return;
-    }
-    var t = setTimeout(function () {
-      onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
-    }, 10000);
-    return function () {
-      clearTimeout(t);
-    };
-  }, [onTimeout, state.requestState, timedOut]);
+  useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED', state.requestState === 'IN_PROGRESS');
   verbiage.guidanceRemoveEyeCoveringsText || (verbiage.guidanceRemoveEyeCoveringsText = t('Please remove your eye coverings (sunglasses, eye patch, etc.)...'));
   verbiage.guidanceRemoveHeadCoveringsText || (verbiage.guidanceRemoveHeadCoveringsText = t('Please remove your head coverings (hat, scarf, etc.)...'));
   verbiage.guidanceRemoveMaskText || (verbiage.guidanceRemoveMaskText = t('Please remove your mask...'));
@@ -10426,27 +10444,6 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     imageUrl: imageUrl
   }));
 };
-var SelfieProgressPreview = function SelfieProgressPreview(_a) {
-  var imageUrl = _a.imageUrl;
-  return /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(SelfieProgressText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
-    "$size": 24,
-    "$color": "white",
-    "$thickness": 3,
-    style: {
-      position: 'relative',
-      top: 4,
-      left: -3,
-      margin: '0 3px 0 -12px'
-    }
-  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(SelfiePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
-    src: imageUrl,
-    alt: ""
-  })));
-};
-var SelfieProgressPreviewWrapper = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
-var SelfieProgressText = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
-var SelfiePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
-var templateObject_1$2, templateObject_2$1, templateObject_3$1;
 
 var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
   var headingText = _a.headingText,
@@ -12658,6 +12655,9 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
     submissionResponse = _f.submissionResponse,
     selfieImage = _f.selfieImage,
     setSelfieImage = _f.setSelfieImage;
+  var _g = React.useState(null),
+    imageUrl = _g[0],
+    setImageUrl = _g[1];
   var onSelfieCaptured = React.useCallback(function (frame, face) {
     dispatch({
       type: 'verificationReady',
@@ -12670,8 +12670,9 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
   var isReady = state.requestState === 'READY';
   React.useEffect(function () {
     if (!frame || !face) return;
-    dataUrlToBase64(cropToShoulders(frame, face)).then(function (img) {
-      console.log('setting selfie image', img);
+    var imageUrl = cropToShoulders(frame, face);
+    setImageUrl(imageUrl);
+    dataUrlToBase64(imageUrl).then(function (img) {
       setSelfieImage(img);
     });
   }, [face, frame, setSelfieImage]);
@@ -12725,15 +12726,17 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
       onCustomerNotMatched === null || onCustomerNotMatched === void 0 ? void 0 : onCustomerNotMatched(submissionResponse);
     }
   }, [onCustomerMatched, onCustomerNotMatched, state.requestState, submissionResponse]);
-  return /*#__PURE__*/React__default['default'].createElement(SelfieCapture, {
+  useTimeout(captureGuidanceTimeoutDurationMs, onCaptureGuidanceTimeout, ['FOUND', 'NOT_FOUND'].includes(state.requestState), state.requestState === 'IN_PROGRESS');
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(SelfieCapture, {
     onSelfieCaptured: onSelfieCaptured,
-    onTimeout: onCaptureGuidanceTimeout,
     onExit: onExit,
     timeoutDurationMs: captureGuidanceTimeoutDurationMs,
     colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
-  });
+  }), imageUrl && /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
+    imageUrl: imageUrl
+  }));
 };
 
 var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
@@ -12850,7 +12853,6 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
   var _f = React.useContext(SubmissionContext),
     submissionResponse = _f.submissionResponse,
     selfieImage = _f.selfieImage;
-  var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
   var _g = React.useState('LOADING'),
     captureState = _g[0],
     setCaptureState = _g[1];
@@ -12858,33 +12860,24 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
       return tslib.__generator(this, function (_a) {
         setCaptureState('MATCHED');
-        releaseCameraAccess();
-        setTimeout(function () {
-          onCustomerMatched === null || onCustomerMatched === void 0 ? void 0 : onCustomerMatched(response);
-        }, 0);
+        onCustomerMatched === null || onCustomerMatched === void 0 ? void 0 : onCustomerMatched(response);
         return [2];
       });
     });
-  }, [onCustomerMatched, releaseCameraAccess]);
+  }, [onCustomerMatched]);
   var onCustomerNotMatchedCallback = React.useCallback(function (response) {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
       return tslib.__generator(this, function (_a) {
         setCaptureState('NOT_MATCHED');
-        releaseCameraAccess();
-        setTimeout(function () {
-          onCustomerNotMatched === null || onCustomerNotMatched === void 0 ? void 0 : onCustomerNotMatched(response);
-        }, 0);
+        onCustomerNotMatched === null || onCustomerNotMatched === void 0 ? void 0 : onCustomerNotMatched(response);
         return [2];
       });
     });
-  }, [onCustomerNotMatched, releaseCameraAccess]);
+  }, [onCustomerNotMatched]);
   var onCaptureGuidanceTimeoutCallback = React.useCallback(function () {
     setCaptureState('FAILED');
-    releaseCameraAccess();
-    setTimeout(function () {
-      onCaptureGuidanceTimeout === null || onCaptureGuidanceTimeout === void 0 ? void 0 : onCaptureGuidanceTimeout();
-    }, 0);
-  }, [onCaptureGuidanceTimeout, releaseCameraAccess]);
+    onCaptureGuidanceTimeout === null || onCaptureGuidanceTimeout === void 0 ? void 0 : onCaptureGuidanceTimeout();
+  }, [onCaptureGuidanceTimeout]);
   var _h = React.useState(0),
     attempt = _h[0],
     setAttempt = _h[1];
@@ -12989,9 +12982,9 @@ var CustomerVerification = function CustomerVerification(_a) {
     onBeforeSubmit: onBeforeSubmit,
     geolocationEnabled: geolocationEnabled,
     geolocationRequired: geolocationRequired
-  }, /*#__PURE__*/React__default['default'].createElement(HighPerformanceSelfieGuidanceModelsProvider, null, /*#__PURE__*/React__default['default'].createElement(CameraProvider, {
+  }, /*#__PURE__*/React__default['default'].createElement(CameraProvider, {
     preferFrontFacingCamera: true
-  }, /*#__PURE__*/React__default['default'].createElement(CustomerVerificationWizard, {
+  }, /*#__PURE__*/React__default['default'].createElement(HighPerformanceSelfieGuidanceModelsProvider, null, /*#__PURE__*/React__default['default'].createElement(CustomerVerificationWizard, {
     onComplete: onComplete,
     onCustomerMatched: onCustomerMatched,
     onCustomerNotMatched: onCustomerNotMatched,
@@ -13091,6 +13084,9 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
     submissionResponse = _f.submissionResponse,
     selfieImage = _f.selfieImage,
     setSelfieImage = _f.setSelfieImage;
+  var _g = React.useState(null),
+    imageUrl = _g[0],
+    setImageUrl = _g[1];
   var onSelfieCaptured = React.useCallback(function (frame, face) {
     dispatch({
       type: 'identificationReady',
@@ -13105,8 +13101,9 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
   var isReady = state.requestState === 'READY';
   React.useEffect(function () {
     if (!frame || !face) return;
-    dataUrlToBase64(cropToShoulders(frame, face)).then(function (img) {
-      console.log('setting selfie image', img);
+    var imageUrl = cropToShoulders(frame, face);
+    setImageUrl(imageUrl);
+    dataUrlToBase64(imageUrl).then(function (img) {
       setSelfieImage(img);
     });
   }, [face, frame, setSelfieImage]);
@@ -13160,15 +13157,17 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
       onCustomerNotMatched === null || onCustomerNotMatched === void 0 ? void 0 : onCustomerNotMatched(submissionResponse);
     }
   }, [onCustomerMatched, onCustomerNotMatched, state.requestState, submissionResponse]);
-  return /*#__PURE__*/React__default['default'].createElement(SelfieCapture, {
+  useTimeout(captureGuidanceTimeoutDurationMs, onCaptureGuidanceTimeout, ['FOUND', 'NOT_FOUND'].includes(state.requestState), state.requestState === 'IN_PROGRESS');
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(SelfieCapture, {
     onSelfieCaptured: onSelfieCaptured,
-    onTimeout: onCaptureGuidanceTimeout,
     onExit: onExit,
     timeoutDurationMs: captureGuidanceTimeoutDurationMs,
     colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
-  });
+  }), imageUrl && /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
+    imageUrl: imageUrl
+  }));
 };
 
 var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
@@ -13285,7 +13284,6 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
   var _f = React.useContext(SubmissionContext),
     submissionResponse = _f.submissionResponse,
     selfieImage = _f.selfieImage;
-  var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
   var _g = React.useState('LOADING'),
     captureState = _g[0],
     setCaptureState = _g[1];
@@ -13293,33 +13291,24 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
       return tslib.__generator(this, function (_a) {
         setCaptureState('FOUND');
-        releaseCameraAccess();
-        setTimeout(function () {
-          onCustomerMatched === null || onCustomerMatched === void 0 ? void 0 : onCustomerMatched(response);
-        }, 0);
+        onCustomerMatched === null || onCustomerMatched === void 0 ? void 0 : onCustomerMatched(response);
         return [2];
       });
     });
-  }, [onCustomerMatched, releaseCameraAccess]);
+  }, [onCustomerMatched]);
   var onCustomerNotMatchedCallback = React.useCallback(function (response) {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
       return tslib.__generator(this, function (_a) {
         setCaptureState('NOT_FOUND');
-        releaseCameraAccess();
-        setTimeout(function () {
-          onCustomerNotMatched === null || onCustomerNotMatched === void 0 ? void 0 : onCustomerNotMatched(response);
-        }, 0);
+        onCustomerNotMatched === null || onCustomerNotMatched === void 0 ? void 0 : onCustomerNotMatched(response);
         return [2];
       });
     });
-  }, [onCustomerNotMatched, releaseCameraAccess]);
+  }, [onCustomerNotMatched]);
   var onCaptureGuidanceTimeoutCallback = React.useCallback(function () {
     setCaptureState('FAILED');
-    releaseCameraAccess();
-    setTimeout(function () {
-      onCaptureGuidanceTimeout === null || onCaptureGuidanceTimeout === void 0 ? void 0 : onCaptureGuidanceTimeout();
-    }, 0);
-  }, [onCaptureGuidanceTimeout, releaseCameraAccess]);
+    onCaptureGuidanceTimeout === null || onCaptureGuidanceTimeout === void 0 ? void 0 : onCaptureGuidanceTimeout();
+  }, [onCaptureGuidanceTimeout]);
   var _h = React.useState(0),
     attempt = _h[0],
     setAttempt = _h[1];