idmission-web-sdk 1.0.153 → 1.0.155

package/dist/components/common/GuidanceMessage.d.ts

@@ -1,9 +1,16 @@
-/// <reference types="react" />
+import React, { ReactNode } from 'react';
 export type GuidanceMessageVariant = 'default' | 'positive' | 'negative';
-export declare const GuidanceMessageContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const GuidanceMessageContainerDiv: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $top?: string | undefined;
+    $bottom?: string | undefined;
 }>>;
-export declare const GuidanceMessage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const GuidanceMessageContainer: (props: {
+    $top?: string;
+    $bottom?: string;
+    className?: string;
+    children?: ReactNode;
+}) => React.ReactPortal;
+export declare const GuidanceMessage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $background?: string | undefined;
     $textColor?: string | undefined;
     $variant?: GuidanceMessageVariant | undefined;

package/dist/components/video_id/IdVideoCaptureWizard.d.ts

@@ -50,4 +50,4 @@ export type VideoIdWizardProps = {
     verbiage?: VideoIdWizardVerbiage;
     debugMode?: boolean;
 };
-export declare const VideoIdWizard: ({ onComplete, onExitCapture, onExitAfterFailure, onUserCancel, idCaptureProps, faceLivenessProps, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, showIdCardBackDurationMs, readTextPrompt, readTextTimeoutDurationMs, skipIdCapture, skipShowIdCardBack, assets, classNames, colors, verbiage, debugMode, }: VideoIdWizardProps) => ReactElement;
+export declare const VideoIdWizard: ({ onComplete, onExitCapture, onExitAfterFailure, onUserCancel, idCaptureProps, faceLivenessProps, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, showIdCardBackDurationMs, readTextPrompt, readTextTimeoutDurationMs, skipIdCapture, skipShowIdCardBack, skipSuccessScreen, assets, classNames, colors, verbiage, debugMode, }: VideoIdWizardProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -12,6 +12,7 @@ var tf = require('@tensorflow/tfjs');
 var useDebounce = require('use-debounce');
 var LanguageDetector = require('i18next-browser-languagedetector');
 var i18n = require('i18next');
+var reactDom = require('react-dom');
 var tasksVision = require('@mediapipe/tasks-vision');
 var SignatureCanvas = require('react-signature-canvas');
 
@@ -47,7 +48,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.153';
+var webSdkVersion = '1.0.155';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -9680,10 +9681,16 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$v || (templateObject_1$v = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+var GuidanceMessageContainerDiv = styled__default['default'].div(templateObject_1$v || (templateObject_1$v = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  ", "\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
   var $top = _a.$top;
   return $top !== null && $top !== void 0 ? $top : '10vh';
+}, function (_a) {
+  var $bottom = _a.$bottom;
+  return $bottom ? "bottom: ".concat($bottom, ";") : "";
 });
+var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainerDiv, tslib.__assign({}, props)), document.getElementById('idmission-above-guides-content'));
+};
 var GuidanceMessage = styled__default['default'].div(templateObject_2$k || (templateObject_2$k = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n  z-index: 10001;\n"])), function (props) {
   var _a, _b, _c, _d, _e, _f;
   return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : '#ccc';
@@ -9979,7 +9986,8 @@ var IdCapture = function IdCapture(_a) {
     ref: ref,
     className: "flex ".concat((_j = classNames.container) !== null && _j !== void 0 ? _j : '')
   }, guidanceMessage !== '' && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
-    "$top": "82.5vh",
+    "$top": "",
+    "$bottom": "12.5dvh",
     className: classNames.guidanceMessageContainer
   }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
     "$variant": satisfied ? 'positive' : 'default',
@@ -10538,7 +10546,7 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
 var StyledPageContainer = styled__default['default'](PageContainer)(templateObject_1$m || (templateObject_1$m = tslib.__makeTemplateObject(["\n  z-index: 1000;\n"], ["\n  z-index: 1000;\n"])));
 var GuidesContainer = styled__default['default'].div(templateObject_2$f || (templateObject_2$f = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"])));
 var GuideCenterRow = styled__default['default'].div(templateObject_3$a || (templateObject_3$a = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var GuideRegion = styled__default['default'].div(templateObject_4$6 || (templateObject_4$6 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
+var GuideRegion = styled__default['default'].div(templateObject_4$6 || (templateObject_4$6 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  position: relative;\n  z-index: 1000;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
   var _a, _b, _c, _d, _e;
   return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
 }, function (props) {
@@ -10557,7 +10565,7 @@ var GuideCenterBorder = styled__default['default'].div(templateObject_6$2 || (te
   return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
 });
 var GuideText = styled__default['default'].span(templateObject_7$1 || (templateObject_7$1 = tslib.__makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
-var GuideImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"], ["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), function (props) {
+var GuideImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"], ["\n  position: relative;\n  z-index: 1;\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), function (props) {
   return props.$padding;
 }, function (props) {
   return props.$width ? "width: ".concat(props.$width, "px;\n         max-width: ").concat(props.$width, "px;") : "max-width: none;";
@@ -11497,7 +11505,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     classNames: (_g = classNames.capture) === null || _g === void 0 ? void 0 : _g.imagePreview,
     text: (_h = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _h === void 0 ? void 0 : _h.processingIdCardText,
     imageUrl: imageUrl
-  })), /*#__PURE__*/React__default['default'].createElement(ExitCaptureButton, {
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "idmission-above-guides-content"
+  }), /*#__PURE__*/React__default['default'].createElement(ExitCaptureButton, {
     onClick: onExit,
     className: (_j = classNames.capture) === null || _j === void 0 ? void 0 : _j.exitCaptureBtn
   }), !overlayDismissed && ( /*#__PURE__*/React__default['default'].createElement(IdCaptureLoadingOverlay, {
@@ -14251,25 +14261,27 @@ var VideoIdWizard = function VideoIdWizard(_a) {
     skipIdCapture = _h === void 0 ? false : _h,
     _j = _a.skipShowIdCardBack,
     skipShowIdCardBack = _j === void 0 ? false : _j,
-    _k = _a.assets,
-    assets = _k === void 0 ? {} : _k,
-    _l = _a.classNames,
-    classNames = _l === void 0 ? {} : _l,
-    _m = _a.colors,
-    colors = _m === void 0 ? {} : _m,
-    _o = _a.verbiage,
-    verbiage = _o === void 0 ? {} : _o,
-    _p = _a.debugMode,
-    debugMode = _p === void 0 ? false : _p;
-  var _q = React.useContext(SubmissionContext),
-    submissionStatus = _q.submissionStatus,
-    idCaptureVideoUrl = _q.idCaptureVideoUrl,
-    setIdCaptureVideoUrl = _q.setIdCaptureVideoUrl,
-    setIdCaptureVideoIdFrontImage = _q.setIdCaptureVideoIdFrontImage,
-    setIdCaptureVideoIdBackImage = _q.setIdCaptureVideoIdBackImage;
-  var _r = React.useState('CAPTURING_ID'),
-    captureState = _r[0],
-    setCaptureState = _r[1];
+    _k = _a.skipSuccessScreen,
+    skipSuccessScreen = _k === void 0 ? false : _k,
+    _l = _a.assets,
+    assets = _l === void 0 ? {} : _l,
+    _m = _a.classNames,
+    classNames = _m === void 0 ? {} : _m,
+    _o = _a.colors,
+    colors = _o === void 0 ? {} : _o,
+    _p = _a.verbiage,
+    verbiage = _p === void 0 ? {} : _p,
+    _q = _a.debugMode,
+    debugMode = _q === void 0 ? false : _q;
+  var _r = React.useContext(SubmissionContext),
+    submissionStatus = _r.submissionStatus,
+    idCaptureVideoUrl = _r.idCaptureVideoUrl,
+    setIdCaptureVideoUrl = _r.setIdCaptureVideoUrl,
+    setIdCaptureVideoIdFrontImage = _r.setIdCaptureVideoIdFrontImage,
+    setIdCaptureVideoIdBackImage = _r.setIdCaptureVideoIdBackImage;
+  var _s = React.useState('CAPTURING_ID'),
+    captureState = _s[0],
+    setCaptureState = _s[1];
   React.useEffect(function () {
     if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
   }, [captureState, skipIdCapture]);
@@ -14291,16 +14303,17 @@ var VideoIdWizard = function VideoIdWizard(_a) {
       return tslib.__generator(this, function (_a) {
         setIdCaptureVideoUrl(videoUrl);
         setCaptureState('SUCCESS');
+        if (skipSuccessScreen) onComplete === null || onComplete === void 0 ? void 0 : onComplete();
         return [2 /*return*/];
       });
     });
-  }, [setIdCaptureVideoUrl]);
+  }, [onComplete, setIdCaptureVideoUrl, skipSuccessScreen]);
   var onVideoCaptureFaceNotDetected = React.useCallback(function () {
     setCaptureState('CHECKING_LIVENESS');
   }, []);
-  var _s = React.useState(0),
-    attempt = _s[0],
-    setAttempt = _s[1];
+  var _t = React.useState(0),
+    attempt = _t[0],
+    setAttempt = _t[1];
   var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
   var onFaceCaptureExitAfterFailure = React.useCallback(function (resp, req) {
     userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);