idmission-web-sdk 2.3.73 → 2.3.75

package/dist/sdk2.esm.js

@@ -205,7 +205,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.73';
+var webSdkVersion = '2.3.75';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -10891,10 +10891,10 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     imageUrl: state.imageUrl
   })), state.captureState !== 'complete' && ( /*#__PURE__*/React__default.createElement("div", {
     id: "idmission-above-guides-content"
-  })), /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
+  })), (!customOverlayContent || !!customOverlayContent && overlayDismissed) && ( /*#__PURE__*/React__default.createElement(ExitCaptureButton, {
     onClick: onExit,
     className: (_f = classNames.capture) === null || _f === void 0 ? void 0 : _f.exitCaptureBtn
-  }), !overlayDismissed && ( /*#__PURE__*/React__default.createElement(IdCaptureLoadingOverlay, {
+  })), !overlayDismissed && ( /*#__PURE__*/React__default.createElement(IdCaptureLoadingOverlay, {
     key: "loading".concat(attempt),
     mode: loadingOverlayMode,
     customOverlayContent: customOverlayContent,
@@ -13975,9 +13975,7 @@ function VideoSignaturePad(_a) {
     clearSignatureBtnText: 'Clear',
     acceptSignatureBtnText: 'Accept'
   });
-  return /*#__PURE__*/React__default.createElement(SignaturePadContainer, {
-    className: classNames.signaturePadContainer
-  }, /*#__PURE__*/React__default.createElement(SignatureCanvasContainer, {
+  return /*#__PURE__*/React__default.createElement(SignatureCanvasContainer, {
     className: cn(classNames.signatureCanvasContainer, disabled && classNames.signatureCanvasContainerDisabled),
     "$disabled": disabled,
     "$headTrackingUnsatisfied": !headTrackingSatisfied
@@ -14027,21 +14025,20 @@ function VideoSignaturePad(_a) {
     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,
@@ -14058,12 +14055,29 @@ function VideoSignatureGuides(_a) {
     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 = useState(guideToDisplay ? 'face' : 'both'),
+    mode = _g[0],
+    setMode = _g[1];
+  useEffect(function () {
+    var delayedTransition = setTimeout(function () {
+      if (guideToDisplay) setMode(guideToDisplay);
+    }, 2000);
+    return function () {
+      return clearTimeout(delayedTransition);
+    };
+  }, [guideToDisplay]);
   return /*#__PURE__*/React__default.createElement(Container$3, {
     className: classNames.container
   }, /*#__PURE__*/React__default.createElement(Inner$1, {
     className: classNames.inner
   }, /*#__PURE__*/React__default.createElement(FaceGuideContainer$1, {
+    style: {
+      opacity: mode === 'both' || mode === 'face' ? 1 : 0,
+      transitionDelay: '2s',
+      transition: 'opacity 500ms ease-in-out'
+    },
     className: classNames.faceGuideContainer
   }, /*#__PURE__*/React__default.createElement(StyledSelfieCaptureAnimatedMask, {
     className: classNames.faceGuide,
@@ -14071,7 +14085,14 @@ function VideoSignatureGuides(_a) {
     borderWidth: faceGuideBorderWidth,
     borderColor: faceGuideBorderColor,
     verticalAlign: "bottom"
-  })), /*#__PURE__*/React__default.createElement(VideoSignaturePad, {
+  })), /*#__PURE__*/React__default.createElement(SignaturePadContainer, {
+    style: {
+      opacity: mode === 'both' || mode === 'signature' ? 1 : 0,
+      transitionDelay: '2s',
+      transition: 'opacity 500ms ease-in-out'
+    },
+    className: classNames.signaturePadContainer
+  }, /*#__PURE__*/React__default.createElement(VideoSignaturePad, {
     onAcceptBtnClicked: onAcceptBtnClicked,
     onClearBtnClicked: onClearBtnClicked,
     disabled: requestedAction !== 'CAPTURE_SIGNATURE',
@@ -14079,7 +14100,7 @@ function VideoSignatureGuides(_a) {
     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;
@@ -14088,7 +14109,8 @@ var Container$3 = styled.div(templateObject_1$a || (templateObject_1$a = __makeT
 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;
@@ -14530,37 +14552,39 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     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 = useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
-    captureState = _u[0],
-    setCaptureState = _u[1];
+  var _v = useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
+    captureState = _v[0],
+    setCaptureState = _v[1];
   var operationStartedAt = useRef();
   var captureStartedAt = useRef();
   var captureEndedAt = useRef();
-  var _v = useSelfieGuidanceModelsContext(),
-    start = _v.start,
-    stop = _v.stop;
+  var _w = useSelfieGuidanceModelsContext(),
+    start = _w.start,
+    stop = _w.stop;
   useEffect(function () {
     operationStartedAt.current = new Date();
   }, []);
@@ -14610,17 +14634,17 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     setCaptureState('SUCCESS');
     onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
   }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
-  var _w = useState(true),
-    showLoadingOverlay = _w[0],
-    setShowLoadingOverlay = _w[1];
+  var _x = useState(true),
+    showLoadingOverlay = _x[0],
+    setShowLoadingOverlay = _x[1];
   var onSignatureCaptureFacesNotDetected = useCallback(function () {
     setShowLoadingOverlay(false);
     setCaptureState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS');
     useVideoSignatureStore.getState().clearRecordedData();
   }, [skipLivenessValidation]);
-  var _x = useState(0),
-    attempt = _x[0],
-    setAttempt = _x[1];
+  var _y = useState(0),
+    attempt = _y[0],
+    setAttempt = _y[1];
   var onRetry = useCallback(function () {
     onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
     setAttempt(function (n) {
@@ -14651,7 +14675,8 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
       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;
@@ -14760,7 +14785,9 @@ function VideoSignatureWizardGuides(_a) {
     _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 = useCallback(function () {
     var signaturePad = useVideoSignatureStore.getState().signaturePad;
@@ -14792,7 +14819,8 @@ function VideoSignatureWizardGuides(_a) {
     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) {
@@ -18573,15 +18601,17 @@ var SignatureKYC = function SignatureKYC(_a) {
     _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__default.createElement(AuthProvider, {
@@ -18642,6 +18672,7 @@ var SignatureKYC = function SignatureKYC(_a) {
         skipLivenessValidation: skipLivenessValidation,
         allowManualSelfieCaptureOnLoadingError: allowManualSelfieCaptureOnLoadingError,
         guidesComponent: guidesComponent,
+        showFaceGuideThenSignaturePad: showFaceGuideThenSignaturePad,
         classNames: classNames,
         colors: colors,
         debugMode: debugMode,
@@ -18649,7 +18680,7 @@ var SignatureKYC = function SignatureKYC(_a) {
         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])
   })))));
 };