idmission-web-sdk 0.0.51 → 0.0.53

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,
@@ -12573,7 +12570,7 @@ var initialState$1 = {
   frame: null,
   face: null,
   imageUrl: null,
-  requestState: 'NOT_READY',
+  requestState: 'CAPTURING',
   requestError: null,
   unverifiedTimes: 0
 };
@@ -12581,10 +12578,10 @@ var reducer$1 = function reducer(state, action) {
   switch (action.type) {
     case 'verificationReady':
       {
-        var allowedStates = ['NOT_READY', 'ERROR'];
+        var allowedStates = ['CAPTURING', 'ERROR'];
         if (allowedStates.includes(state.requestState)) {
           return tslib.__assign(tslib.__assign({}, state), {
-            requestState: 'READY',
+            requestState: 'CAPTURED',
             frame: action.payload.frame,
             face: action.payload.face
           });
@@ -12594,7 +12591,7 @@ var reducer$1 = function reducer(state, action) {
       }
     case 'verifying':
       return tslib.__assign(tslib.__assign({}, state), {
-        requestState: 'IN_PROGRESS',
+        requestState: 'VERIFYING',
         imageUrl: action.payload.imageUrl
       });
     case 'verificationCompleted':
@@ -12613,14 +12610,14 @@ var reducer$1 = function reducer(state, action) {
         }
         var requestState = state.requestState,
           unverifiedTimes = state.unverifiedTimes;
-        var customerMatched = resultData.verificationResultCode === '46';
+        var customerMatched = resultData.verificationResultCode === '00';
         if (customerMatched) {
-          requestState = 'FOUND';
+          requestState = 'VERIFIED';
         } else if (unverifiedTimes < 2) {
-          requestState = 'READY';
+          requestState = 'CAPTURING';
           unverifiedTimes += 1;
         } else {
-          requestState = 'NOT_FOUND';
+          requestState = 'REJECTED';
         }
         return tslib.__assign(tslib.__assign({}, state), {
           requestState: requestState,
@@ -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',
@@ -12667,11 +12667,12 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
       }
     });
   }, []);
-  var isReady = state.requestState === 'READY';
+  var isReady = state.requestState === 'CAPTURED';
   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]);
@@ -12719,21 +12720,23 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
   }, [isReady, onCustomerMatched, onCustomerNotMatched, selfieImage, state.requestState, submit]);
   React.useEffect(function () {
     if (!submissionResponse) return;
-    if (state.requestState === 'FOUND') {
+    if (state.requestState === 'VERIFIED') {
       onCustomerMatched === null || onCustomerMatched === void 0 ? void 0 : onCustomerMatched(submissionResponse);
-    } else if (state.requestState === 'NOT_FOUND') {
+    } else if (state.requestState === 'REJECTED') {
       onCustomerNotMatched === null || onCustomerNotMatched === void 0 ? void 0 : onCustomerNotMatched(submissionResponse);
     }
   }, [onCustomerMatched, onCustomerNotMatched, state.requestState, submissionResponse]);
-  return /*#__PURE__*/React__default['default'].createElement(SelfieCapture, {
+  useTimeout(captureGuidanceTimeoutDurationMs, onCaptureGuidanceTimeout, ['VERIFIED', 'REJECTED'].includes(state.requestState), state.requestState === 'VERIFYING');
+  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,41 +12853,32 @@ 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];
+  var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
   var onCustomerMatchedCallback = React.useCallback(function (response) {
     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];
@@ -12898,6 +12892,7 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
     switch (captureState) {
       case 'CAPTURING':
         return /*#__PURE__*/React__default['default'].createElement(CustomerVerificationCapture, {
+          key: attempt,
           onCustomerMatched: onCustomerMatchedCallback,
           onCustomerNotMatched: onCustomerNotMatchedCallback,
           onCaptureGuidanceTimeout: onCaptureGuidanceTimeoutCallback,
@@ -12914,6 +12909,7 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
           doneBtnText: verbiage.successDoneBtnText,
           imageUrl: "data:image/png;base64, ".concat(selfieImage),
           onDoneClick: function onDoneClick() {
+            releaseCameraAccess();
             submissionResponse && (onComplete === null || onComplete === void 0 ? void 0 : onComplete(submissionResponse));
           },
           onRetryClick: function onRetryClick() {
@@ -12927,7 +12923,10 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
           exitBtnText: verbiage === null || verbiage === void 0 ? void 0 : verbiage.failureExitBtnText,
           imageUrl: assets.failureImageUrl,
           canRetry: false,
-          onExitClick: onExitAfterFailure
+          onExitClick: function onExitClick() {
+            releaseCameraAccess();
+            onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure();
+          }
         });
       default:
         return null;
@@ -12989,9 +12988,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,
@@ -13008,7 +13007,7 @@ var initialState = {
   frame: null,
   face: null,
   imageUrl: null,
-  requestState: 'NOT_READY',
+  requestState: 'CAPTURING',
   requestError: null,
   notFoundTimes: 0
 };
@@ -13016,10 +13015,10 @@ var reducer = function reducer(state, action) {
   switch (action.type) {
     case 'identificationReady':
       {
-        var allowedStates = ['NOT_READY', 'ERROR'];
+        var allowedStates = ['CAPTURING', 'ERROR'];
         if (allowedStates.includes(state.requestState)) {
           return tslib.__assign(tslib.__assign({}, state), {
-            requestState: 'READY',
+            requestState: 'CAPTURED',
             frame: action.payload.frame,
             face: action.payload.face
           });
@@ -13029,7 +13028,7 @@ var reducer = function reducer(state, action) {
       }
     case 'identifying':
       return tslib.__assign(tslib.__assign({}, state), {
-        requestState: 'IN_PROGRESS',
+        requestState: 'IDENTIFYING',
         imageUrl: action.payload.imageUrl
       });
     case 'identificationCompleted':
@@ -13052,7 +13051,7 @@ var reducer = function reducer(state, action) {
         if (customerMatched) {
           requestState = 'FOUND';
         } else if (notFoundTimes < 2) {
-          requestState = 'READY';
+          requestState = 'CAPTURING';
           notFoundTimes += 1;
         } else {
           requestState = 'NOT_FOUND';
@@ -13091,6 +13090,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',
@@ -13102,11 +13104,12 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
   }, []);
   var frame = state.frame,
     face = state.face;
-  var isReady = state.requestState === 'READY';
+  var isReady = state.requestState === 'CAPTURED';
   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 +13163,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 === 'IDENTIFYING');
+  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,41 +13290,32 @@ 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];
+  var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
   var onCustomerMatchedCallback = React.useCallback(function (response) {
     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];
@@ -13333,6 +13329,7 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
     switch (captureState) {
       case 'CAPTURING':
         return /*#__PURE__*/React__default['default'].createElement(CustomerIdentificationCapture, {
+          key: attempt,
           onCustomerMatched: onCustomerMatchedCallback,
           onCustomerNotMatched: onCustomerNotMatchedCallback,
           onCaptureGuidanceTimeout: onCaptureGuidanceTimeoutCallback,
@@ -13349,6 +13346,7 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
           doneBtnText: verbiage.successDoneBtnText,
           imageUrl: "data:image/png;base64, ".concat(selfieImage),
           onDoneClick: function onDoneClick() {
+            releaseCameraAccess();
             submissionResponse && (onComplete === null || onComplete === void 0 ? void 0 : onComplete(submissionResponse));
           },
           onRetryClick: function onRetryClick() {
@@ -13363,7 +13361,10 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
           exitBtnText: verbiage === null || verbiage === void 0 ? void 0 : verbiage.failureExitBtnText,
           imageUrl: assets.failureImageUrl,
           canRetry: false,
-          onExitClick: onExitAfterFailure
+          onExitClick: function onExitClick() {
+            releaseCameraAccess();
+            onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure();
+          }
         });
       default:
         return null;