idmission-web-sdk 2.2.100 → 2.2.101

package/dist/sdk2.cjs.development.js

@@ -11,10 +11,11 @@ var useResizeObserver = require('use-resize-observer');
 var tasksVision = require('@mediapipe/tasks-vision');
 var zustand = require('zustand');
 var useDebounce = require('use-debounce');
+var middleware = require('zustand/middleware');
+var shallow = require('zustand/react/shallow');
 var reactDom = require('react-dom');
 var LanguageDetector = require('i18next-browser-languagedetector');
 var i18n = require('i18next');
-var shallow = require('zustand/react/shallow');
 var SignatureCanvas = require('react-signature-canvas');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -234,7 +235,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.2.100';
+var webSdkVersion = '2.2.101';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -4450,31 +4451,35 @@ var initialState$4 = {
   requestedDocumentType: 'idCardFront',
   allowSinglePageIdCapture: false,
   allowIdCardBackToFrontCapture: false,
+  allowUploadingDocumentsFromStorage: false,
   isUploadingDocumentsFromStorage: false,
   uploadingDocumentsType: null,
   operationStartedAt: null,
-  captureStartedAt: null
+  captureStartedAt: null,
+  dispatch: function dispatch() {
+    return null;
+  }
 };
-var IdCaptureStateContext = /*#__PURE__*/React.createContext(initialState$4);
-var IdCaptureDispatchContext = /*#__PURE__*/React.createContext(function () {});
 var _reducer = function reducer(state, action) {
-  var _a, _b;
+  var _a;
   switch (action.type) {
     case 'configureWizard':
       {
-        var _c = action.payload,
-          captureRequirement = _c.captureRequirement,
-          precapturedDocuments = _c.precapturedDocuments,
-          allowSinglePageIdCapture = _c.allowSinglePageIdCapture,
-          allowIdCardBackToFrontCapture = _c.allowIdCardBackToFrontCapture,
-          enableOverrideWrongDocumentTypeDialog = _c.enableOverrideWrongDocumentTypeDialog,
-          allowOverrideWrongDocumentTypeAfterMs = _c.allowOverrideWrongDocumentTypeAfterMs;
+        var _b = action.payload,
+          captureRequirement = _b.captureRequirement,
+          precapturedDocuments = _b.precapturedDocuments,
+          allowSinglePageIdCapture = _b.allowSinglePageIdCapture,
+          allowIdCardBackToFrontCapture = _b.allowIdCardBackToFrontCapture,
+          enableOverrideWrongDocumentTypeDialog = _b.enableOverrideWrongDocumentTypeDialog,
+          allowOverrideWrongDocumentTypeAfterMs = _b.allowOverrideWrongDocumentTypeAfterMs,
+          allowUploadingDocumentsFromStorage = _b.allowUploadingDocumentsFromStorage;
         var newState = _assign(_assign({}, state), {
           captureRequirement: captureRequirement,
           allowSinglePageIdCapture: allowSinglePageIdCapture !== null && allowSinglePageIdCapture !== void 0 ? allowSinglePageIdCapture : false,
           allowIdCardBackToFrontCapture: allowIdCardBackToFrontCapture !== null && allowIdCardBackToFrontCapture !== void 0 ? allowIdCardBackToFrontCapture : false,
           enableOverrideWrongDocumentTypeDialog: enableOverrideWrongDocumentTypeDialog,
-          allowOverrideWrongDocumentTypeAfterMs: allowOverrideWrongDocumentTypeAfterMs
+          allowOverrideWrongDocumentTypeAfterMs: allowOverrideWrongDocumentTypeAfterMs,
+          allowUploadingDocumentsFromStorage: allowUploadingDocumentsFromStorage
         });
         if (captureRequirement === 'idCardBack') newState.requestedDocumentType = 'idCardBack';
         if (captureRequirement === 'passport') newState.requestedDocumentType = 'passport';
@@ -4492,7 +4497,7 @@ var _reducer = function reducer(state, action) {
           }
         }
         newState.operationStartedAt = new Date();
-        if (!action.payload.allowUploadingDocumentsFromStorage) {
+        if (!allowUploadingDocumentsFromStorage) {
           newState.captureState = 'capturing';
         }
         return newState;
@@ -4532,26 +4537,26 @@ var _reducer = function reducer(state, action) {
       });
     case 'objectsDetected':
       {
-        var _d = action.payload.prediction,
-          detectedObjects = _d.detectedObjects,
-          detectionThresholdMet = _d.detectionThresholdMet,
-          detectedDocumentType = _d.detectedDocumentType,
-          idCardFrontDetectionScore = _d.idCardFrontDetectionScore,
-          idCardFrontDetectionThresholdMet = _d.idCardFrontDetectionThresholdMet,
-          idCardBackDetectionScore = _d.idCardBackDetectionScore,
-          idCardBackDetectionThresholdMet = _d.idCardBackDetectionThresholdMet,
-          passportDetectionScore = _d.passportDetectionScore,
-          passportDetectionThresholdMet = _d.passportDetectionThresholdMet,
-          singlePageDetectionScore = _d.singlePageDetectionScore,
-          singlePageDetectionThresholdMet = _d.singlePageDetectionThresholdMet,
-          bestDocument = _d.bestDocument,
-          documentInBounds = _d.documentInBounds,
-          documentTooClose = _d.documentTooClose,
-          documentIsStable = _d.documentIsStable,
-          focusScore = _d.focusScore,
-          focusThresholdMet = _d.focusThresholdMet,
-          frameWidth = _d.frameWidth,
-          frameHeight = _d.frameHeight;
+        var _c = action.payload.prediction,
+          detectedObjects = _c.detectedObjects,
+          detectionThresholdMet = _c.detectionThresholdMet,
+          detectedDocumentType = _c.detectedDocumentType,
+          idCardFrontDetectionScore = _c.idCardFrontDetectionScore,
+          idCardFrontDetectionThresholdMet = _c.idCardFrontDetectionThresholdMet,
+          idCardBackDetectionScore = _c.idCardBackDetectionScore,
+          idCardBackDetectionThresholdMet = _c.idCardBackDetectionThresholdMet,
+          passportDetectionScore = _c.passportDetectionScore,
+          passportDetectionThresholdMet = _c.passportDetectionThresholdMet,
+          singlePageDetectionScore = _c.singlePageDetectionScore,
+          singlePageDetectionThresholdMet = _c.singlePageDetectionThresholdMet,
+          bestDocument = _c.bestDocument,
+          documentInBounds = _c.documentInBounds,
+          documentTooClose = _c.documentTooClose,
+          documentIsStable = _c.documentIsStable,
+          focusScore = _c.focusScore,
+          focusThresholdMet = _c.focusThresholdMet,
+          frameWidth = _c.frameWidth,
+          frameHeight = _c.frameHeight;
         var frameCapturedAt = new Date();
         var frameCaptureRate = 0;
         var goodFramesThreshold = state.goodFramesThreshold;
@@ -4684,7 +4689,9 @@ var _reducer = function reducer(state, action) {
         } else {
           newState.requestedDocumentType = remainingRequirements[0];
           if (state.requestedDocumentType === 'idCardFront' && newState.requestedDocumentType === 'idCardBack' || state.requestedDocumentType === 'idCardBack' && newState.requestedDocumentType === 'idCardFront') {
-            newState.captureState = 'requestingFlip';
+            if (!newState.isUploadingDocumentsFromStorage) {
+              newState.captureState = 'requestingFlip';
+            }
             newState.idCardFrontDetectionThresholdMet = false;
             newState.idCardBackDetectionThresholdMet = false;
             newState.passportDetectionThresholdMet = false;
@@ -4694,28 +4701,23 @@ var _reducer = function reducer(state, action) {
         return newState;
       }
     case 'documentCapturedManually':
+      return _reducer(state, {
+        type: 'documentCaptured',
+        payload: _assign(_assign({}, action.payload), {
+          documentType: state.requestedDocumentType,
+          width: 0,
+          height: 0
+        })
+      });
+    case 'documentsCaptured':
       {
-        var newState = _assign(_assign({}, state), {
-          capturedDocuments: _assign(_assign({}, state.capturedDocuments), (_b = {}, _b[state.requestedDocumentType] = _assign(_assign({}, action.payload), {
-            documentType: state.requestedDocumentType,
-            width: 0,
-            height: 0
-          }), _b))
-        });
-        var remainingRequirements = remainingIdCaptureRequirements(state.captureRequirement, newState.capturedDocuments, state.requestedDocumentType);
-        if (remainingRequirements.length === 0) {
-          newState.captureState = 'complete';
-        } else {
-          newState.requestedDocumentType = remainingRequirements[0];
-          if (state.requestedDocumentType === 'idCardFront' && newState.requestedDocumentType === 'idCardBack' || state.requestedDocumentType === 'idCardBack' && newState.requestedDocumentType === 'idCardFront') {
-            if (!newState.isUploadingDocumentsFromStorage) {
-              newState.captureState = 'requestingFlip';
-            }
-            newState.idCardFrontDetectionThresholdMet = false;
-            newState.idCardBackDetectionThresholdMet = false;
-            newState.passportDetectionThresholdMet = false;
-            newState.wrongDocumentTypePredictions = 0;
-          }
+        var newState = _assign({}, state);
+        for (var _d = 0, _e = action.payload; _d < _e.length; _d++) {
+          var doc = _e[_d];
+          newState = _reducer(newState, {
+            type: 'documentCaptured',
+            payload: doc
+          });
         }
         return newState;
       }
@@ -4752,6 +4754,9 @@ var _reducer = function reducer(state, action) {
       }
     case 'resetWizard':
       return _assign(_assign({}, initialState$4), {
+        dispatch: state.dispatch,
+        allowUploadingDocumentsFromStorage: state.allowUploadingDocumentsFromStorage,
+        captureState: state.allowUploadingDocumentsFromStorage ? 'initializing' : 'capturing',
         captureRequirement: state.captureRequirement,
         allowIdCardBackToFrontCapture: state.allowIdCardBackToFrontCapture
       });
@@ -4759,13 +4764,26 @@ var _reducer = function reducer(state, action) {
       return state;
   }
 };
-var IdCaptureStateProvider = function IdCaptureStateProvider(_a) {
+var useIdCaptureStore = zustand.create()(middleware.devtools(function (set) {
+  return _assign(_assign({}, initialState$4), {
+    dispatch: function dispatch(action) {
+      return set(function (state) {
+        return _reducer(state, action);
+      }, undefined, action);
+    }
+  });
+}));
+function IdCaptureStateProvider(_a) {
   var children = _a.children;
-  var _b = React.useReducer(_reducer, initialState$4),
-    state = _b[0],
-    dispatch = _b[1];
+  var overrideWrongDocumentTypeGuidance = useIdCaptureStore(shallow.useShallow(function (state) {
+    return state.overrideWrongDocumentTypeGuidance;
+  }));
+  var setRequiredDocumentType = React.useContext(IdCaptureModelsContext).setRequiredDocumentType;
+  React.useEffect(function () {
+    if (overrideWrongDocumentTypeGuidance) setRequiredDocumentType('none');
+  }, [overrideWrongDocumentTypeGuidance, setRequiredDocumentType]);
   var onResize = useDebounce.useDebouncedCallback(function () {
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'redrawRequested'
     });
   }, 500);
@@ -4773,26 +4791,13 @@ var IdCaptureStateProvider = function IdCaptureStateProvider(_a) {
     if (typeof window === 'undefined') return;
     window.addEventListener('resize', onResize);
     return function () {
-      window.removeEventListener('resize', onResize);
+      return window.removeEventListener('resize', onResize);
     };
   }, [onResize]);
-  var setRequiredDocumentType = React.useContext(IdCaptureModelsContext).setRequiredDocumentType;
-  React.useEffect(function () {
-    if (state.overrideWrongDocumentTypeGuidance) {
-      setRequiredDocumentType('none');
-    }
-  }, [state.overrideWrongDocumentTypeGuidance, setRequiredDocumentType]);
-  return /*#__PURE__*/React__namespace.default.createElement(IdCaptureStateContext.Provider, {
-    value: state
-  }, /*#__PURE__*/React__namespace.default.createElement(IdCaptureDispatchContext.Provider, {
-    value: dispatch
-  }, children));
-};
-var useIdCaptureState = function useIdCaptureState() {
-  var state = React.useContext(IdCaptureStateContext);
-  var dispatch = React.useContext(IdCaptureDispatchContext);
-  if (!state || !dispatch) throw new Error('useIdCaptureState cannot be used without IdCaptureStateProvider');
-  return [state, dispatch];
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, children);
+}
+var dispatchIdCaptureAction = function dispatchIdCaptureAction(action) {
+  return useIdCaptureStore.getState().dispatch(action);
 };
 
 function DebugStatsPane(_a) {
@@ -4867,7 +4872,7 @@ var DebugBoundingBoxOverlay = function DebugBoundingBoxOverlay(_a) {
   var scaling = _a.scaling,
     $flipX = _a.$flipX,
     children = _a.children;
-  var _b = useIdCaptureState()[0],
+  var _b = useIdCaptureStore(),
     guideRectWidth = _b.guideRectWidth,
     guideRectHeight = _b.guideRectHeight,
     guideRectX = _b.guideRectX,
@@ -6032,14 +6037,14 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
     classNames = _b === void 0 ? {} : _b,
     _c = _a.verbiage,
     rawVerbiage = _c === void 0 ? {} : _c;
-  var _d = useIdCaptureState(),
-    state = _d[0],
-    dispatch = _d[1];
+  var _d = useIdCaptureStore(),
+    allowOverrideWrongDocumentTypeGuidance = _d.allowOverrideWrongDocumentTypeGuidance,
+    dispatch = _d.dispatch;
   var verbiage = useTranslations(rawVerbiage, {
     messageText: 'We are having trouble identifying the correct side of your id, do you want to continue with capture anyway?',
     buttonText: 'OK'
   });
-  if (!state.allowOverrideWrongDocumentTypeGuidance) return null;
+  if (!allowOverrideWrongDocumentTypeGuidance) return null;
   return /*#__PURE__*/React__namespace.default.createElement(Container$2, {
     className: classNames.container
   }, /*#__PURE__*/React__namespace.default.createElement(InnerContainer, {
@@ -6093,52 +6098,50 @@ var IdCapture = function IdCapture(_a) {
     width = _q === void 0 ? 1 : _q,
     _r = _p.height,
     height = _r === void 0 ? 1 : _r;
-  var _s = useIdCaptureState(),
-    state = _s[0],
-    dispatch = _s[1];
-  var _t = useCameraStore(),
-    camera = _t.camera,
-    isRearFacing = _t.isRearFacing;
-  var _u = React.useContext(IdCaptureModelsContext),
-    modelsReady = _u.ready,
-    setThresholds = _u.setThresholds,
-    detectionTime = _u.detectionTime,
-    focusPredictionTime = _u.focusPredictionTime,
-    getBestFrame = _u.getBestFrame;
+  var state = useIdCaptureStore();
+  var _s = useCameraStore(),
+    camera = _s.camera,
+    isRearFacing = _s.isRearFacing;
+  var _t = React.useContext(IdCaptureModelsContext),
+    modelsReady = _t.ready,
+    setThresholds = _t.setThresholds,
+    detectionTime = _t.detectionTime,
+    focusPredictionTime = _t.focusPredictionTime,
+    getBestFrame = _t.getBestFrame;
   React.useEffect(function () {
-    return dispatch({
+    return dispatchIdCaptureAction({
       type: 'captureInitialized'
     });
-  }, [dispatch]);
+  }, []);
   React.useEffect(function () {
     setThresholds(thresholds);
   }, [thresholds, setThresholds]);
   React.useEffect(function () {
     if (!requiredDocumentType) return;
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'setRequiredDocumentType',
       payload: requiredDocumentType
     });
-  }, [dispatch, requiredDocumentType]);
+  }, [requiredDocumentType]);
   React.useEffect(function () {
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'pageRendered',
       payload: {
         pageWidth: width,
         pageHeight: height
       }
     });
-  }, [dispatch, height, width]);
+  }, [height, width]);
   var shouldCapture = state.goodFramesThresholdMet && !state.capturing && timeSince(state.captureStartedAt) >= 3000;
   React.useEffect(function () {
     if (!shouldCapture) return;
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'capturing'
     });
     var bestFrame = getBestFrame();
     if (!bestFrame) {
       log('uh oh, i did not get a photo');
-      dispatch({
+      dispatchIdCaptureAction({
         type: 'captureFailed'
       });
       return;
@@ -6151,7 +6154,7 @@ var IdCapture = function IdCapture(_a) {
     var width = canvas.width,
       height = canvas.height;
     var imageUrl = canvas.toDataURL('image/jpeg', 0.95);
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'frameCaptured',
       payload: {
         imageUrl: imageUrl
@@ -6169,11 +6172,11 @@ var IdCapture = function IdCapture(_a) {
         bestFocusScore: focusScore
       };
       onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageUrl, width, height, capturedDocumentType, metadata);
-      dispatch({
+      dispatchIdCaptureAction({
         type: 'captured'
       });
     }, 0);
-  }, [dispatch, getBestFrame, onCapture, shouldCapture, state.captureStartedAt, state.requestedDocumentType]);
+  }, [getBestFrame, onCapture, shouldCapture, state.captureStartedAt, state.requestedDocumentType]);
   var theme = styled.useTheme();
   colors.guideBoxUnsatisfiedColor || (colors.guideBoxUnsatisfiedColor = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.unsatisfiedColor) !== null && _d !== void 0 ? _d : 'white');
   colors.guideBoxSatisfiedColor || (colors.guideBoxSatisfiedColor = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.satisfiedColor) !== null && _g !== void 0 ? _g : 'green');
@@ -6899,12 +6902,6 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
   var _q = React.useState(false),
     dismissed = _q[0],
     setDismissed = _q[1];
-  var dispatch = useIdCaptureState()[1];
-  React.useEffect(function () {
-    return dispatch({
-      type: 'captureInitialized'
-    });
-  }, [dispatch]);
   assets.instructionImageUrl || (assets.instructionImageUrl = legacyInstructionImageUrl$1);
   var verbiage = useTranslations(rawVerbiage, {
     headingText: 'Use your device camera to capture your ID',
@@ -7889,9 +7886,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     wrapperAspectRatio = _1.wrapperAspectRatio,
     guideOrientationOnImageLoaded = _1.onImageLoaded,
     setDimensions = _1.setDimensions;
-  var _2 = useIdCaptureState(),
-    state = _2[0],
-    dispatch = _2[1];
+  var state = useIdCaptureStore();
   var theme = styled.useTheme();
   if (borderWidth === undefined) borderWidth = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
   React.useEffect(function () {
@@ -7917,14 +7912,14 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     var imageByUrl = imagesByUrl[img.src];
     var width = (_a = imageByUrl === null || imageByUrl === void 0 ? void 0 : imageByUrl.width) !== null && _a !== void 0 ? _a : img.naturalWidth;
     var height = (_b = imageByUrl === null || imageByUrl === void 0 ? void 0 : imageByUrl.height) !== null && _b !== void 0 ? _b : img.naturalHeight;
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'guideImageLoaded',
       payload: {
         width: width,
         height: height
       }
     });
-  }, [dispatch, guideOrientationOnImageLoaded, imagesByUrl]);
+  }, [guideOrientationOnImageLoaded, imagesByUrl]);
   return /*#__PURE__*/React__namespace.default.createElement(StyledPageContainer, {
     ref: wrapperRef,
     onClick: onClick,
@@ -8054,19 +8049,17 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     images = _w === void 0 ? defaultIdCaptureGuideImages : _w,
     _x = _a.classNames,
     classNames = _x === void 0 ? {} : _x;
-  var _y = useIdCaptureState(),
-    _z = _y[0],
-    redrawing = _z.redrawing,
-    guideImageWidth = _z.guideImageWidth,
-    guideImageHeight = _z.guideImageHeight,
-    dispatch = _y[1];
+  var _y = useIdCaptureStore(),
+    redrawing = _y.redrawing,
+    guideImageWidth = _y.guideImageWidth,
+    guideImageHeight = _y.guideImageHeight;
   var canvasRef = React.useRef(null);
-  var _0 = useResizeObserver__default.default(),
-    wrapperRef = _0.ref,
-    _1 = _0.width,
-    wrapperWidth = _1 === void 0 ? 1 : _1,
-    _2 = _0.height,
-    wrapperHeight = _2 === void 0 ? 1 : _2;
+  var _z = useResizeObserver__default.default(),
+    wrapperRef = _z.ref,
+    _0 = _z.width,
+    wrapperWidth = _0 === void 0 ? 1 : _0,
+    _1 = _z.height,
+    wrapperHeight = _1 === void 0 ? 1 : _1;
   var theme = styled.useTheme();
   if (borderWidth === undefined) borderWidth = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
   if (padding === undefined) {
@@ -8084,7 +8077,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     if (redrawing) {
       resetCanvasDimensions(canvas);
       var timer_1 = setTimeout(function () {
-        dispatch({
+        dispatchIdCaptureAction({
           type: 'redrawInProgress'
         });
       }, 10);
@@ -8134,7 +8127,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
     // reset composite mode to default
     ctx.globalCompositeOperation = 'source-over';
     var rectOffsetTop = canvas.offsetTop;
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'redrawCompleted',
       payload: {
         guideRectX: rectX,
@@ -8145,7 +8138,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
       }
     });
     return function () {};
-  }, [aspectRatio, borderColor, borderRadius, borderWidth, dispatch, maskColor, padding, redrawing, wrapperHeight, wrapperWidth]);
+  }, [aspectRatio, borderColor, borderRadius, borderWidth, maskColor, padding, redrawing, wrapperHeight, wrapperWidth]);
   return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(CanvasWrapper$1, {
     ref: wrapperRef,
     "$maskColor": maskColor !== null && maskColor !== void 0 ? maskColor : '',
@@ -8195,7 +8188,7 @@ function IdCaptureGuides(_a) {
     colors = _k === void 0 ? {} : _k,
     _l = _a.verbiage,
     rawVerbiage = _l === void 0 ? {} : _l;
-  var state = useIdCaptureState()[0];
+  var state = useIdCaptureStore();
   var isRearFacing = useCameraStore(function (state) {
     return state.isRearFacing;
   });
@@ -9158,7 +9151,7 @@ var StyledButtonsRow$8 = styled__default.default(ButtonsRow)(templateObject_6$5
 var templateObject_1$m, templateObject_2$k, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5;
 
 function ScalingCameraFeed() {
-  var _a = React.useContext(IdCaptureStateContext),
+  var _a = useIdCaptureStore(),
     captureState = _a.captureState,
     guideRectX = _a.guideRectX,
     guideRectY = _a.guideRectY,
@@ -9184,14 +9177,12 @@ function IdCaptureOrUploadScreen(_a) {
     classNames = _b === void 0 ? {} : _b,
     _c = _a.verbiage,
     rawVerbiage = _c === void 0 ? {} : _c;
-  var _d = useIdCaptureState(),
-    state = _d[0],
-    dispatch = _d[1];
+  var state = useIdCaptureStore();
   var requestCameraAccess = useCameraStore().requestCameraAccess;
   var loadModels = React.useContext(IdCaptureModelsContext).load;
-  var _e = React.useState(false),
-    selectIdTypeModalOpen = _e[0],
-    setSelectIdTypeModalOpen = _e[1];
+  var _d = React.useState(false),
+    selectIdTypeModalOpen = _d[0],
+    setSelectIdTypeModalOpen = _d[1];
   var verbiage = useTranslations(rawVerbiage, {
     captureWithCameraText: 'Capture with Camera',
     orText: 'OR',
@@ -9223,7 +9214,7 @@ function IdCaptureOrUploadScreen(_a) {
     onClick: function onClick() {
       loadModels();
       void requestCameraAccess();
-      dispatch({
+      state.dispatch({
         type: 'setUploadingDocumentsFromStorage',
         payload: false
       });
@@ -9240,19 +9231,19 @@ function IdCaptureOrUploadScreen(_a) {
     className: classNames.uploadFromStorageButton,
     colors: buttonColors,
     onClick: function onClick() {
-      dispatch({
+      state.dispatch({
         type: 'setUploadingDocumentsFromStorage',
         payload: true
       });
       if (state.captureRequirement === 'idCardOrPassport') {
         setSelectIdTypeModalOpen(true);
       } else if (state.captureRequirement === 'passport') {
-        dispatch({
+        state.dispatch({
           type: 'setUploadingDocumentsType',
           payload: 'passport'
         });
       } else {
-        dispatch({
+        state.dispatch({
           type: 'setUploadingDocumentsType',
           payload: 'idCard'
         });
@@ -9272,7 +9263,7 @@ function IdCaptureOrUploadScreen(_a) {
     className: classNames.selectPassportTypeButton,
     colors: buttonColors,
     onClick: function onClick() {
-      return dispatch({
+      return state.dispatch({
         type: 'setUploadingDocumentsType',
         payload: 'passport'
       });
@@ -9285,7 +9276,7 @@ function IdCaptureOrUploadScreen(_a) {
     className: classNames.selectIdCardTypeButton,
     colors: buttonColors,
     onClick: function onClick() {
-      return dispatch({
+      return state.dispatch({
         type: 'setUploadingDocumentsType',
         payload: 'idCard'
       });
@@ -9336,20 +9327,18 @@ function PassportUploadScreen(_a) {
   }, verbiage.continueText)));
 }
 function IdDocumentUploadScreen(_a) {
+  var _this = this;
   var _b = _a.classNames,
     classNames = _b === void 0 ? {} : _b,
     _c = _a.verbiage,
     rawVerbiage = _c === void 0 ? {} : _c;
-  var _d = useIdCaptureState(),
-    state = _d[0],
-    dispatch = _d[1];
+  var state = useIdCaptureStore();
+  var _d = React.useState(null),
+    idFrontFile = _d[0],
+    setIdFrontFile = _d[1];
   var _e = React.useState(null),
-    idFrontFile = _e[0],
-    setIdFrontFile = _e[1];
-  var _f = React.useState(null),
-    idBackFile = _f[0],
-    setIdBackFile = _f[1];
-  var onCapturedManually = useOnCapturedManually();
+    idBackFile = _e[0],
+    setIdBackFile = _e[1];
   var verbiage = useTranslations(rawVerbiage, {
     uploadIdFrontText: 'Upload ID Front',
     uploadIdBackText: 'Upload ID Back',
@@ -9389,25 +9378,56 @@ function IdDocumentUploadScreen(_a) {
     disabled: !idFrontFile || !state.allowSinglePageIdCapture && !idBackFile,
     colors: buttonColors,
     onClick: function onClick() {
-      if (!idBackFile && state.allowSinglePageIdCapture) {
-        dispatch({
-          type: 'setUploadingDocumentsType',
-          payload: 'singlePage'
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a, _b, _c, _d, _e;
+        var _f, _g, _h, _j, _k;
+        return __generator(this, function (_l) {
+          switch (_l.label) {
+            case 0:
+              if (!(!idBackFile && state.allowSinglePageIdCapture)) return [3 /*break*/, 2];
+              state.dispatch({
+                type: 'setUploadingDocumentsType',
+                payload: 'singlePage'
+              });
+              _b = (_a = state).dispatch;
+              _f = {
+                type: 'documentCaptured'
+              };
+              _g = {};
+              return [4 /*yield*/, readFile(idFrontFile)];
+            case 1:
+              _b.apply(_a, [(_f.payload = (_g.imageData = _l.sent(), _g.documentType = 'singlePage', _g.width = 0, _g.height = 0, _g), _f)]);
+              return [3 /*break*/, 5];
+            case 2:
+              _d = (_c = state).dispatch;
+              _h = {
+                type: 'documentsCaptured'
+              };
+              _j = {};
+              return [4 /*yield*/, readFile(idFrontFile)];
+            case 3:
+              _e = [(_j.imageData = _l.sent(), _j.documentType = 'idCardFront', _j.width = 0, _j.height = 0, _j)];
+              _k = {};
+              return [4 /*yield*/, readFile(idBackFile)];
+            case 4:
+              _d.apply(_c, [(_h.payload = _e.concat([(_k.imageData = _l.sent(), _k.documentType = 'idCardBack', _k.width = 0, _k.height = 0, _k)]), _h)]);
+              _l.label = 5;
+            case 5:
+              return [2 /*return*/];
+          }
         });
-      }
-      void onCapturedManually(idFrontFile, idBackFile);
+      });
     }
   }, verbiage.continueText)));
 }
 function CancelUploadTypeButton(_a) {
   var children = _a.children,
     className = _a.className;
-  var dispatch = useIdCaptureState()[1];
   return /*#__PURE__*/React__namespace.default.createElement(Button, {
     className: className,
     colors: buttonColors,
     onClick: function onClick() {
-      return dispatch({
+      return dispatchIdCaptureAction({
         type: 'setUploadingDocumentsType',
         payload: null
       });
@@ -9415,7 +9435,6 @@ function CancelUploadTypeButton(_a) {
   }, children);
 }
 function useOnCapturedManually() {
-  var dispatch = useIdCaptureState()[1];
   return React.useCallback(function () {
     var files = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -9424,7 +9443,7 @@ function useOnCapturedManually() {
     return Promise.all(files.filter(Boolean).map(readFile)).then(function (f) {
       for (var _i = 0, f_1 = f; _i < f_1.length; _i++) {
         var imageData = f_1[_i];
-        dispatch({
+        dispatchIdCaptureAction({
           type: 'documentCapturedManually',
           payload: {
             imageData: imageData
@@ -9432,7 +9451,7 @@ function useOnCapturedManually() {
         });
       }
     });
-  }, [dispatch]);
+  }, []);
 }
 function readFile(file) {
   return new Promise(function (resolve, reject) {
@@ -9836,32 +9855,30 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     verbiage = _3 === void 0 ? {} : _3,
     _4 = _a.debugMode,
     debugMode = _4 === void 0 ? false : _4;
-  var _5 = useIdCaptureState(),
-    state = _5[0],
-    dispatch = _5[1];
-  var _6 = useCameraStore(),
-    cameraAccessDenied = _6.cameraAccessDenied,
-    requestCameraAccess = _6.requestCameraAccess,
-    releaseCameraAccess = _6.releaseCameraAccess;
-  var _7 = React.useState(false),
-    overlayDismissed = _7[0],
-    setOverlayDismissed = _7[1];
-  var _8 = React.useContext(SubmissionContext),
-    submissionStatus = _8.submissionStatus,
-    setIdFrontImage = _8.setIdFrontImage,
-    setIdBackImage = _8.setIdBackImage,
-    setPassportImage = _8.setPassportImage,
-    logIdFrontCaptureAttempt = _8.logIdFrontCaptureAttempt,
-    logIdBackCaptureAttempt = _8.logIdBackCaptureAttempt;
-  var _9 = React.useContext(IdCaptureModelsContext),
-    start = _9.start,
-    stop = _9.stop,
-    onPredictionMade = _9.onPredictionMade,
-    setRequiredDocumentType = _9.setRequiredDocumentType,
-    modelError = _9.modelError,
-    resetBestFrame = _9.resetBestFrame;
+  var state = useIdCaptureStore();
+  var _5 = useCameraStore(),
+    cameraAccessDenied = _5.cameraAccessDenied,
+    requestCameraAccess = _5.requestCameraAccess,
+    releaseCameraAccess = _5.releaseCameraAccess;
+  var _6 = React.useState(false),
+    overlayDismissed = _6[0],
+    setOverlayDismissed = _6[1];
+  var _7 = React.useContext(SubmissionContext),
+    submissionStatus = _7.submissionStatus,
+    setIdFrontImage = _7.setIdFrontImage,
+    setIdBackImage = _7.setIdBackImage,
+    setPassportImage = _7.setPassportImage,
+    logIdFrontCaptureAttempt = _7.logIdFrontCaptureAttempt,
+    logIdBackCaptureAttempt = _7.logIdBackCaptureAttempt;
+  var _8 = React.useContext(IdCaptureModelsContext),
+    start = _8.start,
+    stop = _8.stop,
+    onPredictionMade = _8.onPredictionMade,
+    setRequiredDocumentType = _8.setRequiredDocumentType,
+    modelError = _8.modelError,
+    resetBestFrame = _8.resetBestFrame;
   React.useEffect(function () {
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'configureWizard',
       payload: {
         captureRequirement: captureRequirement,
@@ -9873,7 +9890,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
         allowUploadingDocumentsFromStorage: allowUploadingDocumentsFromStorage
       }
     });
-  }, [allowIdCardBackToFrontCapture, allowOverrideWrongDocumentTypeAfterMs, allowSinglePageIdCapture, allowUploadingDocumentsFromStorage, captureRequirement, dispatch, enableOverrideWrongDocumentTypeDialog, precapturedDocuments]);
+  }, [allowIdCardBackToFrontCapture, allowOverrideWrongDocumentTypeAfterMs, allowSinglePageIdCapture, allowUploadingDocumentsFromStorage, captureRequirement, enableOverrideWrongDocumentTypeDialog, precapturedDocuments]);
   var documentCount = Object.keys(state.capturedDocuments).length;
   React.useEffect(function () {
     if (documentCount) resetBestFrame();
@@ -9889,15 +9906,15 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
   }, [logIdBackCaptureAttempt, logIdFrontCaptureAttempt, state.operationStartedAt, state.requestedDocumentType]);
   React.useEffect(function startModelsWhenCapturing() {
     if (!overlayDismissed || state.captureState !== 'capturing') return;
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'captureStarted'
     });
     start();
-  }, [dispatch, overlayDismissed, start, state.captureState]);
+  }, [overlayDismissed, start, state.captureState]);
   React.useEffect(function () {
     onPredictionMade(function (prediction) {
       if (state.captureState === 'capturing') {
-        dispatch({
+        dispatchIdCaptureAction({
           type: 'objectsDetected',
           payload: {
             prediction: prediction
@@ -9906,19 +9923,19 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
       } else if (state.captureState === 'requestingFlip') {
         if (state.requestedDocumentType !== 'selfie' && prediction["".concat(state.requestedDocumentType, "DetectionThresholdMet")]) {
           resetBestFrame();
-          dispatch({
+          dispatchIdCaptureAction({
             type: 'flipRequestCompleted'
           });
         }
       }
     });
-  }, [dispatch, onPredictionMade, resetBestFrame, state.captureState, state.requestedDocumentType]);
+  }, [onPredictionMade, resetBestFrame, state.captureState, state.requestedDocumentType]);
   React.useEffect(function () {
     if (state.captureState === 'complete') stop();
   }, [state.captureState, stop]);
   var onCapture = React.useCallback(function (imageData, width, height, documentType, metadata) {
     logCaptureMetadata(metadata);
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'documentCaptured',
       payload: {
         imageData: imageData,
@@ -9930,7 +9947,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
         focusScore: metadata.bestFocusScore
       }
     });
-  }, [dispatch, logCaptureMetadata]);
+  }, [logCaptureMetadata]);
   var onSubmitClick = React.useCallback(function () {
     var _a = state.capturedDocuments,
       idCardFront = _a.idCardFront,
@@ -9956,25 +9973,25 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
   }, [onSuccess, releaseCameraAccess, releaseCameraAccessOnExit, setIdBackImage, setIdFrontImage, setPassportImage, state.capturedDocuments]);
   var showSuccessScreen = useShowSuccessScreen(skipSuccessScreen, state.captureState === 'complete', onSubmitClick);
   var onRetryClick = React.useCallback(function () {
-    dispatch({
+    return dispatchIdCaptureAction({
       type: 'resetWizard'
     });
-  }, [dispatch]);
-  var _10 = React.useState(0),
-    attempt = _10[0],
-    setAttempt = _10[1];
+  }, []);
+  var _9 = React.useState(0),
+    attempt = _9[0],
+    setAttempt = _9[1];
   var onExit = React.useCallback(function () {
     releaseCameraAccess();
     setOverlayDismissed(false);
     setAttempt(function (n) {
       return n + 1;
     });
-    dispatch({
+    dispatchIdCaptureAction({
       type: 'resetWizard'
     });
     onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
     void requestCameraAccess();
-  }, [dispatch, onExitCapture, releaseCameraAccess, requestCameraAccess]);
+  }, [onExitCapture, releaseCameraAccess, requestCameraAccess]);
   React.useEffect(function () {
     if (submissionStatus !== SubmissionStatus.READY) {
       if (releaseCameraAccessOnExit) releaseCameraAccess();
@@ -10007,14 +10024,14 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     if (state.captureState !== 'requestingFlip') return;
     var t = setTimeout(function () {
       resetBestFrame();
-      dispatch({
+      dispatchIdCaptureAction({
         type: 'flipRequestCompleted'
       });
     }, 6000);
     return function () {
       clearTimeout(t);
     };
-  }, [dispatch, resetBestFrame, separateIdCardCaptureSequence, state.captureState]);
+  }, [resetBestFrame, separateIdCardCaptureSequence, state.captureState]);
   React.useEffect(function () {
     if (state.requestedDocumentType === 'idCardFront') {
       if (captureRequirement === 'idCardOrPassport') {
@@ -10042,7 +10059,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
             return [4 /*yield*/, dataUrlToBase64(imageData)];
           case 1:
             base64ImageData = _a.sent();
-            dispatch({
+            dispatchIdCaptureAction({
               type: 'documentCapturedManually',
               payload: {
                 imageData: base64ImageData
@@ -10052,10 +10069,10 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
         }
       });
     });
-  }, [dispatch]);
-  var _11 = React.useState(false),
-    progressStarted = _11[0],
-    setProgressStarted = _11[1];
+  }, []);
+  var _10 = React.useState(false),
+    progressStarted = _10[0],
+    setProgressStarted = _10[1];
   React.useEffect(function () {
     if (state.captureState === 'capturing') {
       setProgressStarted(false);
@@ -10135,7 +10152,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     capturedDocuments: state.capturedDocuments,
     classNames: classNames.success,
     onSubmitClick: function onSubmitClick() {
-      dispatch({
+      return dispatchIdCaptureAction({
         type: 'flipRequestCompleted'
       });
     },