idmission-web-sdk 0.0.50 → 0.0.52

package/README.md

@@ -90,14 +90,8 @@ Render a fullscreen ID capture component that instructs the user to photograph b
 
 **ID Capture Colors**
 <table>
-<tr><td><code>loadingContinueBtnBackgroundColor</code></td><td>Default: mint</td></tr>
-<tr><td><code>loadingContinueBtnTextColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guideBoxUnsatisfiedColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guideBoxSatisfiedColor</code></td><td>Default: green</td></tr>
-<tr><td><code>successDoneBtnBackgroundColor</code></td><td>Default: mint</td></tr>
-<tr><td><code>successDoneBtnTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>successRetryBtnBackgroundColor</code></td><td>Default: orange</td></tr>
-<tr><td><code>successRetryBtnTextColor</code></td><td>Default: white</td></tr>
 </table>
 
 **ID Capture Verbiage**
@@ -184,22 +178,12 @@ Render a fullscreen capture component that analyzes frames from the user's front
 **Face Liveness Colors**
 
 <table>
-<tr><td><code>loadingContinueBtnBackgroundColor</code></td><td>Default: mint</td></tr>
-<tr><td><code>loadingContinueBtnTextColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guidesUnsatisfiedColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guidesSatisfiedColor</code></td><td>Default: green</td></tr>
 <tr><td><code>guidanceMessagesSatisfiedBackgroundColor</code></td><td>Default: green</td></tr>
 <tr><td><code>guidanceMessagesUnsatisfiedBackgroundColor</code></td><td>Default: red</td></tr>
 <tr><td><code>guidanceMessagesSatisfiedTextColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guidanceMessagesUnsatisfiedTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>successDoneBtnBackgroundColor</code></td><td>Default: mint</td></tr>
-<tr><td><code>successDoneBtnTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>successRetryBtnBackgroundColor</code></td><td>Default: orange</td></tr>
-<tr><td><code>successRetryBtnTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>failureRetryBtnBackgroundColor</code></td><td>Default: orange</td></tr>
-<tr><td><code>failureRetryBtnTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>failureExitBtnBackgroundColor</code></td><td>Default: darkgray</td></tr>
-<tr><td><code>failureExitBtnTextColor</code></td><td>Default: white</td></tr>
 </table>
 
 **Face Liveness Verbiage**
@@ -470,22 +454,12 @@ Render a fullscreen capture component that analyzes frames from the user's front
 **Customer Identification Colors**
 
 <table>
-<tr><td><code>loadingContinueBtnBackgroundColor</code></td><td>Default: mint</td></tr>
-<tr><td><code>loadingContinueBtnTextColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guidesUnsatisfiedColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guidesSatisfiedColor</code></td><td>Default: green</td></tr>
 <tr><td><code>guidanceMessagesSatisfiedBackgroundColor</code></td><td>Default: green</td></tr>
 <tr><td><code>guidanceMessagesUnsatisfiedBackgroundColor</code></td><td>Default: red</td></tr>
 <tr><td><code>guidanceMessagesSatisfiedTextColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guidanceMessagesUnsatisfiedTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>successDoneBtnBackgroundColor</code></td><td>Default: mint</td></tr>
-<tr><td><code>successDoneBtnTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>successRetryBtnBackgroundColor</code></td><td>Default: orange</td></tr>
-<tr><td><code>successRetryBtnTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>failureRetryBtnBackgroundColor</code></td><td>Default: orange</td></tr>
-<tr><td><code>failureRetryBtnTextColor</code></td><td>Default: white</td></tr>
-<tr><td><code>failureExitBtnBackgroundColor</code></td><td>Default: darkgray</td></tr>
-<tr><td><code>failureExitBtnTextColor</code></td><td>Default: white</td></tr>
 </table>
 
 **Customer Identification Verbiage**

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/components/id_capture/IdCaptureLoadingOverlay.d.ts

@@ -6,11 +6,8 @@ export type IdCaptureLoadingOverlayProps = {
     cameraInitializingText?: string;
     cameraAccessBlockedText?: string;
     continueText?: string;
-    continueBtnDisabledBackgroundColor?: string;
-    continueBtnBackgroundColor?: string;
-    continueBtnTextColor?: string;
     instructionImageUrl?: string;
     accessBlockedImageUrl?: string;
     onDismissed?: () => void;
 };
-export declare const IdCaptureLoadingOverlay: ({ headingText, useContinuityCameraText, modelsWarmingUpText, cameraInitializingText, cameraAccessBlockedText, continueText, continueBtnDisabledBackgroundColor, continueBtnBackgroundColor, continueBtnTextColor, instructionImageUrl, accessBlockedImageUrl, onDismissed, }: IdCaptureLoadingOverlayProps) => ReactElement;
+export declare const IdCaptureLoadingOverlay: ({ headingText, useContinuityCameraText, modelsWarmingUpText, cameraInitializingText, cameraAccessBlockedText, continueText, instructionImageUrl, accessBlockedImageUrl, onDismissed, }: IdCaptureLoadingOverlayProps) => ReactElement;

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

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { IdCaptureColors } from './IdCapture';
 export type IdCaptureAssets = {
     documentDetectionModelUrl?: string;
     focusModelUrl?: string;
@@ -10,16 +11,6 @@ export type IdCaptureAssets = {
     passportPortraitGuidesImageUrl?: string;
     passportLandscapeGuidesImageUrl?: string;
 };
-export type IdCaptureColors = {
-    loadingContinueBtnBackgroundColor?: string;
-    loadingContinueBtnTextColor?: string;
-    guideBoxUnsatisfiedColor?: string;
-    guideBoxSatisfiedColor?: string;
-    successDoneBtnBackgroundColor?: string;
-    successDoneBtnTextColor?: string;
-    successRetryBtnBackgroundColor?: string;
-    successRetryBtnTextColor?: string;
-};
 export type IdCaptureVerbiage = {
     loadingOverlayHeadingText?: string;
     loadingOverlayUseContinuityCameraText?: string;

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

@@ -8855,9 +8855,6 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
     cameraInitializingText = _a.cameraInitializingText,
     cameraAccessBlockedText = _a.cameraAccessBlockedText,
     continueText = _a.continueText,
-    continueBtnDisabledBackgroundColor = _a.continueBtnDisabledBackgroundColor,
-    continueBtnBackgroundColor = _a.continueBtnBackgroundColor,
-    continueBtnTextColor = _a.continueBtnTextColor,
     _b = _a.instructionImageUrl,
     instructionImageUrl = _b === void 0 ? DEFAULT_CDN_URL + '/WebSDK-Instruction-DL-Capture-3-Portrait.png' : _b,
     _c = _a.accessBlockedImageUrl,
@@ -8875,15 +8872,6 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
   var _e = React.useState(false),
     dismissed = _e[0],
     setDismissed = _e[1];
-  headingText || (headingText = t('Use your device camera to capture your ID'));
-  useContinuityCameraText || (useContinuityCameraText = t('Use your iPhone as a webcam'));
-  modelsWarmingUpText || (modelsWarmingUpText = t('Models warming up...'));
-  cameraInitializingText || (cameraInitializingText = t('Camera initializing...'));
-  cameraAccessBlockedText || (cameraAccessBlockedText = t('Camera access blocked'));
-  continueText || (continueText = t('Continue'));
-  continueBtnDisabledBackgroundColor || (continueBtnDisabledBackgroundColor = 'gray');
-  continueBtnBackgroundColor || (continueBtnBackgroundColor = 'mint');
-  continueBtnTextColor || (continueBtnTextColor = 'white');
   React.useEffect(function () {
     if (!buttonRef.current) return;
     laddaRef.current = Ladda__namespace.create(buttonRef.current);
@@ -8922,6 +8910,12 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
       accessBlockedImageUrl: accessBlockedImageUrl
     });
   }
+  headingText = headingText || t('Use your device camera to capture your ID');
+  useContinuityCameraText = useContinuityCameraText || t('Use your iPhone as a webcam');
+  modelsWarmingUpText = modelsWarmingUpText || t('Models warming up...');
+  cameraInitializingText = cameraInitializingText || t('Camera initializing...');
+  cameraAccessBlockedText = cameraAccessBlockedText || t('Camera access blocked');
+  continueText = continueText || t('Continue');
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("h3", null, headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageWrapper, {
     style: {
       pointerEvents: 'none'
@@ -8945,14 +8939,11 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
   }), /*#__PURE__*/React__default['default'].createElement("label", {
     htmlFor: "use-continuity-camera"
   }, useContinuityCameraText))), /*#__PURE__*/React__default['default'].createElement("button", {
-    ref: buttonRef,
     className: "ladda-button",
     "data-style": "expand-right",
+    "data-color": "mint",
     disabled: !cameraReady || !modelsReady,
-    style: {
-      color: continueBtnTextColor,
-      backgroundColor: !cameraReady || !modelsReady ? continueBtnDisabledBackgroundColor : continueBtnBackgroundColor
-    },
+    ref: buttonRef,
     onClick: function onClick() {
       setDismissed(true);
       onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
@@ -9636,8 +9627,6 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     cameraInitializingText: verbiage.loadingOverlayCameraInitializingText,
     cameraAccessBlockedText: verbiage.loadingOverlayCameraAccessBlockedText,
     continueText: verbiage.loadingOverlayContinueText,
-    continueBtnBackgroundColor: colors.loadingContinueBtnBackgroundColor,
-    continueBtnTextColor: colors.loadingContinueBtnTextColor,
     instructionImageUrl: assets.loadingOverlayInstructionImageUrl,
     onDismissed: function onDismissed() {
       setOverlayDismissed(true);
@@ -9945,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,
@@ -10136,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,
@@ -10227,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,
@@ -10396,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...'));
@@ -10437,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,
@@ -12669,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',
@@ -12681,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]);
@@ -12736,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) {
@@ -12861,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];
@@ -12869,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];
@@ -13000,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,
@@ -13102,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',
@@ -13116,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]);
@@ -13171,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) {
@@ -13296,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];
@@ -13304,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];