idmission-web-sdk 2.3.74 → 2.3.75

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.3.74';
+  var webSdkVersion = '2.3.75';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -24057,9 +24057,7 @@
       clearSignatureBtnText: 'Clear',
       acceptSignatureBtnText: 'Accept'
     });
-    return /*#__PURE__*/React.createElement(SignaturePadContainer, {
-      className: classNames.signaturePadContainer
-    }, /*#__PURE__*/React.createElement(SignatureCanvasContainer, {
+    return /*#__PURE__*/React.createElement(SignatureCanvasContainer, {
       className: clsx(classNames.signatureCanvasContainer, disabled && classNames.signatureCanvasContainerDisabled),
       "$disabled": disabled,
       "$headTrackingUnsatisfied": !headTrackingSatisfied
@@ -24109,21 +24107,20 @@
       disabled: !canSubmit,
       onClick: onAcceptBtnClicked,
       finished: true
-    }, verbiage.acceptSignatureBtnText))));
+    }, verbiage.acceptSignatureBtnText)));
   }
-  var SignaturePadContainer = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  position: relative;\n  max-width: 100%;\n  height: 50%;\n  aspect-ratio: 2;\n"], ["\n  position: relative;\n  max-width: 100%;\n  height: 50%;\n  aspect-ratio: 2;\n"])));
-  var SignatureCanvasContainer = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n  ", "\n"])), function (props) {
+  var SignatureCanvasContainer = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 67px);\n  ", "\n  ", "\n"])), function (props) {
     return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
   }, function (props) {
     return props.$headTrackingUnsatisfied ? 'pointer-events: none;' : '';
   });
-  var AcceptBtn = styled(LoaderButton)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-  var SignaturePadContentContainer = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
-  var SignaturePadContentInner = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"])), function (props) {
+  var AcceptBtn = styled(LoaderButton)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+  var SignaturePadContentContainer = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+  var SignaturePadContentInner = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  pointer-events: none;\n  color: ", ";\n"])), function (props) {
     var _a, _b, _c;
     return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.emptyTextColor) !== null && _c !== void 0 ? _c : 'black';
   });
-  var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3;
+  var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$5;
 
   function VideoSignatureGuides(_a) {
     var onAcceptBtnClicked = _a.onAcceptBtnClicked,
@@ -24140,12 +24137,29 @@
       headTrackingSatisfied = _e === void 0 ? true : _e,
       _f = _a.classNames,
       classNames = _f === void 0 ? {} : _f,
-      verbiage = _a.verbiage;
+      verbiage = _a.verbiage,
+      guideToDisplay = _a.guideToDisplay;
+    var _g = React.useState(guideToDisplay ? 'face' : 'both'),
+      mode = _g[0],
+      setMode = _g[1];
+    React.useEffect(function () {
+      var delayedTransition = setTimeout(function () {
+        if (guideToDisplay) setMode(guideToDisplay);
+      }, 2000);
+      return function () {
+        return clearTimeout(delayedTransition);
+      };
+    }, [guideToDisplay]);
     return /*#__PURE__*/React.createElement(Container$3, {
       className: classNames.container
     }, /*#__PURE__*/React.createElement(Inner$1, {
       className: classNames.inner
     }, /*#__PURE__*/React.createElement(FaceGuideContainer$1, {
+      style: {
+        opacity: mode === 'both' || mode === 'face' ? 1 : 0,
+        transitionDelay: '2s',
+        transition: 'opacity 500ms ease-in-out'
+      },
       className: classNames.faceGuideContainer
     }, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask, {
       className: classNames.faceGuide,
@@ -24153,7 +24167,14 @@
       borderWidth: faceGuideBorderWidth,
       borderColor: faceGuideBorderColor,
       verticalAlign: "bottom"
-    })), /*#__PURE__*/React.createElement(VideoSignaturePad, {
+    })), /*#__PURE__*/React.createElement(SignaturePadContainer, {
+      style: {
+        opacity: mode === 'both' || mode === 'signature' ? 1 : 0,
+        transitionDelay: '2s',
+        transition: 'opacity 500ms ease-in-out'
+      },
+      className: classNames.signaturePadContainer
+    }, /*#__PURE__*/React.createElement(VideoSignaturePad, {
       onAcceptBtnClicked: onAcceptBtnClicked,
       onClearBtnClicked: onClearBtnClicked,
       disabled: requestedAction !== 'CAPTURE_SIGNATURE',
@@ -24161,7 +24182,7 @@
       minSignaturePadPoints: minSignaturePadPoints,
       classNames: classNames,
       verbiage: verbiage
-    })));
+    }))));
   }
   var Container$3 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  max-height: 100%;\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  font-family: ", ";\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 40px;\n"], ["\n  display: flex;\n  max-height: 100%;\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  font-family: ", ";\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 40px;\n"])), function (props) {
     var _a;
@@ -24170,7 +24191,8 @@
   var Inner$1 = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  max-height: 1280px;\n  display: flex;\n  margin: auto;\n  align-items: center;\n  flex-direction: column;\n"], ["\n  width: 100%;\n  height: 100%;\n  max-height: 1280px;\n  display: flex;\n  margin: auto;\n  align-items: center;\n  flex-direction: column;\n"])));
   var FaceGuideContainer$1 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: relative;\n  height: 50%;\n"], ["\n  position: relative;\n  height: 50%;\n"])));
   var StyledSelfieCaptureAnimatedMask = styled(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 100%;\n"], ["\n  max-width: 100%;\n  height: 100%;\n"])));
-  var templateObject_1$a, templateObject_2$9, templateObject_3$8, templateObject_4$4;
+  var SignaturePadContainer = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  position: relative;\n  max-width: 100%;\n  height: 50%;\n  aspect-ratio: 2;\n"], ["\n  position: relative;\n  max-width: 100%;\n  height: 50%;\n  aspect-ratio: 2;\n"])));
+  var templateObject_1$a, templateObject_2$9, templateObject_3$8, templateObject_4$4, templateObject_5$3;
 
   var DEFAULT_MIN_SIGNATURE_PAD_POINTS = 10;
   var DEFAULT_HEAD_TRACKING_BOUNDARY_PERCENTAGE = 0.01;
@@ -24612,37 +24634,39 @@
       allowManualSelfieCaptureOnLoadingError = _m === void 0 ? false : _m,
       faceLivenessProps = _a.faceLivenessProps,
       guidesComponent = _a.guidesComponent,
-      _o = _a.assets,
-      assets = _o === void 0 ? {} : _o,
-      _p = _a.classNames,
-      classNames = _p === void 0 ? {} : _p,
-      _q = _a.colors,
-      colors = _q === void 0 ? {} : _q,
-      _r = _a.verbiage,
-      verbiage = _r === void 0 ? {} : _r,
-      _s = _a.debugMode,
-      debugMode = _s === void 0 ? false : _s;
-    var _t = useSubmissionContext(),
-      selfieImage = _t.selfieImage,
-      setSelfieImage = _t.setSelfieImage,
-      setSignatureData = _t.setSignatureData,
-      setSignatureVideoUrl = _t.setSignatureVideoUrl,
-      logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt,
-      uploadDocument = _t.uploadDocument;
+      _o = _a.showFaceGuideThenSignaturePad,
+      showFaceGuideThenSignaturePad = _o === void 0 ? false : _o,
+      _p = _a.assets,
+      assets = _p === void 0 ? {} : _p,
+      _q = _a.classNames,
+      classNames = _q === void 0 ? {} : _q,
+      _r = _a.colors,
+      colors = _r === void 0 ? {} : _r,
+      _s = _a.verbiage,
+      verbiage = _s === void 0 ? {} : _s,
+      _t = _a.debugMode,
+      debugMode = _t === void 0 ? false : _t;
+    var _u = useSubmissionContext(),
+      selfieImage = _u.selfieImage,
+      setSelfieImage = _u.setSelfieImage,
+      setSignatureData = _u.setSignatureData,
+      setSignatureVideoUrl = _u.setSignatureVideoUrl,
+      logSelfieCaptureAttempt = _u.logSelfieCaptureAttempt,
+      uploadDocument = _u.uploadDocument;
     var cameraAccessDenied = useCameraStore(useShallow(function (state) {
       return {
         cameraAccessDenied: state.cameraAccessDenied
       };
     })).cameraAccessDenied;
-    var _u = React.useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
-      captureState = _u[0],
-      setCaptureState = _u[1];
+    var _v = React.useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
+      captureState = _v[0],
+      setCaptureState = _v[1];
     var operationStartedAt = React.useRef();
     var captureStartedAt = React.useRef();
     var captureEndedAt = React.useRef();
-    var _v = useSelfieGuidanceModelsContext(),
-      start = _v.start,
-      stop = _v.stop;
+    var _w = useSelfieGuidanceModelsContext(),
+      start = _w.start,
+      stop = _w.stop;
     React.useEffect(function () {
       operationStartedAt.current = new Date();
     }, []);
@@ -24692,17 +24716,17 @@
       setCaptureState('SUCCESS');
       onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
     }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
-    var _w = React.useState(true),
-      showLoadingOverlay = _w[0],
-      setShowLoadingOverlay = _w[1];
+    var _x = React.useState(true),
+      showLoadingOverlay = _x[0],
+      setShowLoadingOverlay = _x[1];
     var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
       setShowLoadingOverlay(false);
       setCaptureState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS');
       useVideoSignatureStore.getState().clearRecordedData();
     }, [skipLivenessValidation]);
-    var _x = React.useState(0),
-      attempt = _x[0],
-      setAttempt = _x[1];
+    var _y = React.useState(0),
+      attempt = _y[0],
+      setAttempt = _y[1];
     var onRetry = React.useCallback(function () {
       onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
       setAttempt(function (n) {
@@ -24733,7 +24757,8 @@
         verbiage: verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides,
         restartVideoOnSignaturePadCleared: restartVideoOnSignaturePadCleared,
         captureAudio: captureAudio,
-        component: guidesComponent
+        component: guidesComponent,
+        showFaceGuideThenSignaturePad: showFaceGuideThenSignaturePad
       }));
     }, [captureAudio, classNames === null || classNames === void 0 ? void 0 : classNames.guides, guidesComponent, restartVideoOnSignaturePadCleared, verbiage === null || verbiage === void 0 ? void 0 : verbiage.guides]);
     var onExitAfterFailureProp = faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onExitAfterFailure;
@@ -24842,7 +24867,9 @@
       _c = _a.captureAudio,
       captureAudio = _c === void 0 ? false : _c,
       component = _a.component,
-      props = __rest(_a, ["status", "restartVideoOnSignaturePadCleared", "captureAudio", "component"]);
+      _d = _a.showFaceGuideThenSignaturePad,
+      showFaceGuideThenSignaturePad = _d === void 0 ? false : _d,
+      props = __rest(_a, ["status", "restartVideoOnSignaturePadCleared", "captureAudio", "component", "showFaceGuideThenSignaturePad"]);
     var Component = component !== null && component !== void 0 ? component : VideoSignatureGuides;
     var onAcceptBtnClicked = React.useCallback(function () {
       var signaturePad = useVideoSignatureStore.getState().signaturePad;
@@ -24874,7 +24901,8 @@
       faceGuideStatus: status,
       onAcceptBtnClicked: onAcceptBtnClicked,
       onClearBtnClicked: onClearBtnClicked,
-      requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS'
+      requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS',
+      guideToDisplay: !showFaceGuideThenSignaturePad ? undefined : status === 'success' ? 'signature' : 'face'
     }));
   }
   var VideoSignatureWizardWithProviders = function VideoSignatureWizardWithProviders(props) {
@@ -28655,15 +28683,17 @@
       _p = _a.allowManualSelfieCaptureOnLoadingError,
       allowManualSelfieCaptureOnLoadingError = _p === void 0 ? false : _p,
       guidesComponent = _a.guidesComponent,
-      _q = _a.theme,
-      theme = _q === void 0 ? 'default' : _q,
+      _q = _a.showFaceGuideThenSignaturePad,
+      showFaceGuideThenSignaturePad = _q === void 0 ? false : _q,
+      _r = _a.theme,
+      theme = _r === void 0 ? 'default' : _r,
       classNames = _a.classNames,
       colors = _a.colors,
       verbiage = _a.verbiage,
       geolocationEnabled = _a.geolocationEnabled,
       geolocationRequired = _a.geolocationRequired,
-      _r = _a.debugMode,
-      debugMode = _r === void 0 ? false : _r;
+      _s = _a.debugMode,
+      debugMode = _s === void 0 ? false : _s;
     useLanguage(lang);
     useDebugLogging(debugMode);
     return /*#__PURE__*/React.createElement(AuthProvider, {
@@ -28724,6 +28754,7 @@
           skipLivenessValidation: skipLivenessValidation,
           allowManualSelfieCaptureOnLoadingError: allowManualSelfieCaptureOnLoadingError,
           guidesComponent: guidesComponent,
+          showFaceGuideThenSignaturePad: showFaceGuideThenSignaturePad,
           classNames: classNames,
           colors: colors,
           debugMode: debugMode,
@@ -28731,7 +28762,7 @@
           onModelError: onModelError,
           onUserCancel: onUserCancel
         };
-      }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onLoadingFailed, onSelfieCaptured, customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingDisabled, headTrackingBoundaryPercentage, headTrackingBoundaryType, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, skipLivenessValidation, allowManualSelfieCaptureOnLoadingError, guidesComponent, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
+      }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onLoadingFailed, onSelfieCaptured, customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingDisabled, headTrackingBoundaryPercentage, headTrackingBoundaryType, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, skipLivenessValidation, allowManualSelfieCaptureOnLoadingError, guidesComponent, showFaceGuideThenSignaturePad, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
     })))));
   };