idmission-web-sdk 2.1.36 → 2.1.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/common/LoaderButton.d.ts +1 -1
- package/dist/components/face_liveness/FaceCaptureGuideOverlay.d.ts +6 -2
- package/dist/components/face_liveness/FaceLivenessCapture.d.ts +8 -2
- package/dist/components/face_liveness/FaceLivenessFailure.d.ts +2 -1
- package/dist/components/face_liveness/FaceLivenessWizard.d.ts +6 -2
- package/dist/components/selfie_capture/SelfieCapture.d.ts +8 -3
- package/dist/components/selfie_capture/SelfieCaptureLoadingGraphic.d.ts +14 -1
- package/dist/components/selfie_capture/SelfieGuidanceModelsProvider.d.ts +2 -2
- package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts +10 -5
- package/dist/components/video_id/IdVideoCaptureGuides.d.ts +11 -3
- package/dist/components/video_id/IdVideoCaptureGuidesCommon.d.ts +20 -0
- package/dist/lib/locales/es/translation.d.ts +2 -0
- package/dist/lib/locales/index.d.ts +2 -0
- package/dist/sdk2.cjs.development.js +1926 -1385
- package/dist/sdk2.cjs.development.js.map +1 -1
- package/dist/sdk2.cjs.production.js +1 -1
- package/dist/sdk2.cjs.production.js.map +1 -1
- package/dist/sdk2.esm.js +1926 -1385
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +1926 -1385
- package/dist/sdk2.umd.development.js.map +1 -1
- package/dist/sdk2.umd.production.js +1 -1
- package/dist/sdk2.umd.production.js.map +1 -1
- package/dist/themes/index.d.ts +5 -0
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
|
@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
234
234
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
235
235
|
};
|
|
236
236
|
|
|
237
|
-
var webSdkVersion = '2.1.
|
|
237
|
+
var webSdkVersion = '2.1.37';
|
|
238
238
|
|
|
239
239
|
function getPlatform() {
|
|
240
240
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -391,7 +391,7 @@ function videoDataUrlToB64(url) {
|
|
|
391
391
|
});
|
|
392
392
|
}
|
|
393
393
|
|
|
394
|
-
var PageContainerDiv = styled__default.default.div(templateObject_1$
|
|
394
|
+
var PageContainerDiv = styled__default.default.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"], ["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"])), function (props) {
|
|
395
395
|
var _a;
|
|
396
396
|
return props.theme.isFullscreen === false ? "" : "\n position: fixed;\n top: 0;\n left: 0;\n width: var(--app-width);\n height: calc(\n var(--app-height) - ".concat((_a = props.$heightOffset) !== null && _a !== void 0 ? _a : 0, "px\n );\n overflow-x: hidden;\n overflow-y: auto;\n ");
|
|
397
397
|
}, function (props) {
|
|
@@ -431,22 +431,22 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
431
431
|
}, dimensionsCalculated && children);
|
|
432
432
|
});
|
|
433
433
|
PageContainer.displayName = 'PageContainer';
|
|
434
|
-
var templateObject_1$
|
|
434
|
+
var templateObject_1$J;
|
|
435
435
|
|
|
436
|
-
var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$
|
|
436
|
+
var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n background: ", ";\n ", "\n z-index: 10000;\n"], ["\n background: ", ";\n ", "\n z-index: 10000;\n"])), function (props) {
|
|
437
437
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
438
438
|
}, function (props) {
|
|
439
439
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
440
440
|
});
|
|
441
|
-
var OverlayInner$2 = styled__default.default.div(templateObject_2$
|
|
441
|
+
var OverlayInner$2 = styled__default.default.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n max-height: var(--app-height);\n height: 100%;\n ", "\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n max-height: var(--app-height);\n height: 100%;\n ", "\n"])), function (props) {
|
|
442
442
|
var _a;
|
|
443
443
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
444
444
|
}, function (props) {
|
|
445
445
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
446
446
|
});
|
|
447
|
-
var OverlayImageContainer = styled__default.default.div(templateObject_3$
|
|
448
|
-
var OverlayImageRow = styled__default.default.div(templateObject_4$
|
|
449
|
-
var templateObject_1$
|
|
447
|
+
var OverlayImageContainer = styled__default.default.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
|
|
448
|
+
var OverlayImageRow = styled__default.default.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
|
|
449
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$p, templateObject_4$i;
|
|
450
450
|
|
|
451
451
|
var LoaderButton = function LoaderButton(_a) {
|
|
452
452
|
var children = _a.children,
|
|
@@ -505,11 +505,11 @@ var LoaderButton = function LoaderButton(_a) {
|
|
|
505
505
|
className: "ladda-label"
|
|
506
506
|
}, children));
|
|
507
507
|
};
|
|
508
|
-
var StyledButton = styled__default.default.button(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
508
|
+
var StyledButton = styled__default.default.button(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
509
509
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
510
510
|
return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n border-radius: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n text-transform: none;\n -webkit-appearance: button;\n \n &:not(:disabled),\n &[type='button']:not(:disabled),\n &[type='reset']:not(:disabled),\n &[type='submit']:not(:disabled) {\n cursor: pointer;\n }\n \n &:focus:not(:focus-visible) {\n outline: 0;\n }\n \n --bs-btn-padding-x: 0.75rem;\n --bs-btn-padding-y: 0.375rem;\n --bs-btn-font-family: ;\n --bs-btn-font-size: 1rem;\n --bs-btn-font-weight: 400;\n --bs-btn-line-height: 1.5;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-bg: transparent;\n --bs-btn-border-width: var(--bs-border-width);\n --bs-btn-border-color: transparent;\n --bs-btn-border-radius: var(--bs-border-radius);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 1px 1px rgba(0, 0, 0, 0.075);\n --bs-btn-disabled-opacity: 0.65;\n --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n display: inline-block;\n padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n font-family: var(--bs-btn-font-family);\n font-size: var(--bs-btn-font-size);\n font-weight: var(--bs-btn-font-weight);\n line-height: var(--bs-btn-line-height);\n color: var(--bs-btn-color);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n border-radius: var(--bs-btn-border-radius);\n background-color: var(--bs-btn-bg);\n //transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n // border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n \n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n \n &:hover {\n filter: brightness(1.15);\n }\n \n &:focus-visible {\n color: var(--bs-btn-hover-color);\n background-color: var(--bs-btn-hover-bg);\n border-color: var(--bs-btn-hover-border-color);\n outline: 0;\n box-shadow: var(--bs-btn-focus-box-shadow);\n }\n \n &:disabled,\n &.disabled,\n fieldset:disabled & {\n color: var(--bs-btn-disabled-color);\n pointer-events: none;\n background-color: var(--bs-btn-disabled-bg);\n border-color: var(--bs-btn-disabled-border-color);\n opacity: var(--bs-btn-disabled-opacity);\n }\n \n --bs-btn-color: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n --bs-btn-border-color: var(--bs-btn-bg);\n --bs-btn-focus-shadow-rgb: 49, 132, 253;\n --bs-btn-active-color: #fff;\n --bs-btn-active-bg: #0a58ca;\n --bs-btn-active-border-color: #0a53be;\n --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --bs-btn-disabled-color: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\n \n --bs-btn-padding-y: 14px;\n --bs-btn-padding-x: 1rem;\n --bs-btn-font-size: 18px;\n --bs-btn-border-radius: 4px;\n ");
|
|
511
511
|
});
|
|
512
|
-
var templateObject_1$
|
|
512
|
+
var templateObject_1$H;
|
|
513
513
|
|
|
514
514
|
var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
|
|
515
515
|
var accessBlockedImageUrl = _a.accessBlockedImageUrl;
|
|
@@ -756,7 +756,7 @@ var SessionValidationErrorOverlay = function SessionValidationErrorOverlay(_a) {
|
|
|
756
756
|
}, retryText)))));
|
|
757
757
|
};
|
|
758
758
|
|
|
759
|
-
var Spinner = styled__default.default.div(templateObject_1$
|
|
759
|
+
var Spinner = styled__default.default.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"], ["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])), function (_a) {
|
|
760
760
|
var $size = _a.$size;
|
|
761
761
|
return $size !== null && $size !== void 0 ? $size : 80;
|
|
762
762
|
}, function (_a) {
|
|
@@ -781,7 +781,7 @@ var Spinner = styled__default.default.div(templateObject_1$E || (templateObject_
|
|
|
781
781
|
var $color = _a.$color;
|
|
782
782
|
return $color !== null && $color !== void 0 ? $color : '#888';
|
|
783
783
|
});
|
|
784
|
-
var templateObject_1$
|
|
784
|
+
var templateObject_1$G;
|
|
785
785
|
|
|
786
786
|
exports.defaultAuthUrl = 'https://portal-api.idmission.com';
|
|
787
787
|
var allowedAuthUrls = ['https://portal-api.idmission.com', 'https://portal-api-uat.idmission.com', 'https://portal-api-demo.idmission.com', 'https://portal-api-dev.idmission.com', 'http://localhost:10000'];
|
|
@@ -1844,7 +1844,7 @@ function getFrameDimensions(frame) {
|
|
|
1844
1844
|
return [frameWidth, frameHeight];
|
|
1845
1845
|
}
|
|
1846
1846
|
|
|
1847
|
-
var InvisibleCanvas = styled__default.default.canvas(templateObject_1$
|
|
1847
|
+
var InvisibleCanvas = styled__default.default.canvas(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
1848
1848
|
function drawToCanvas(canvas, frame, width, height) {
|
|
1849
1849
|
if (!canvas) return;
|
|
1850
1850
|
var ctx = canvas.getContext('2d');
|
|
@@ -1864,7 +1864,7 @@ function clearCanvas(canvas) {
|
|
|
1864
1864
|
var _a;
|
|
1865
1865
|
(_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
|
|
1866
1866
|
}
|
|
1867
|
-
var templateObject_1$
|
|
1867
|
+
var templateObject_1$F;
|
|
1868
1868
|
|
|
1869
1869
|
function listAvailableCameras(facingMode_1) {
|
|
1870
1870
|
return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
|
|
@@ -2486,18 +2486,18 @@ function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quali
|
|
|
2486
2486
|
rawCanvas.width = frame.width;
|
|
2487
2487
|
rawCanvas.height = frame.height;
|
|
2488
2488
|
rawCtx.putImageData(frame, 0, 0);
|
|
2489
|
-
var _a = face.box,
|
|
2490
|
-
xMin = _a.xMin,
|
|
2491
|
-
width = _a.width;
|
|
2492
|
-
var frameHeight = frame.height;
|
|
2493
|
-
var xPadding = frameHeight * 0.6 - width;
|
|
2494
|
-
var xPos = Math.max(0, xMin - xPadding / 2);
|
|
2495
2489
|
if (frame.height > frame.width) {
|
|
2496
2490
|
cropCanvas.width = frame.width;
|
|
2497
2491
|
cropCanvas.height = frame.height;
|
|
2498
2492
|
cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2499
2493
|
} else {
|
|
2500
|
-
|
|
2494
|
+
var _a = face.box,
|
|
2495
|
+
xMin = _a.xMin,
|
|
2496
|
+
width = _a.width;
|
|
2497
|
+
var desiredWidth = frame.height * 0.6;
|
|
2498
|
+
var faceCenterX = xMin + width / 2;
|
|
2499
|
+
var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
|
|
2500
|
+
cropCanvas.width = desiredWidth;
|
|
2501
2501
|
cropCanvas.height = frame.height;
|
|
2502
2502
|
cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2503
2503
|
}
|
|
@@ -6490,12 +6490,12 @@ function DebugStatsPane(_a) {
|
|
|
6490
6490
|
if (!portalLocation) return element;
|
|
6491
6491
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6492
6492
|
}
|
|
6493
|
-
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$
|
|
6494
|
-
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$
|
|
6493
|
+
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n"], ["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n"])));
|
|
6494
|
+
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"], ["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
6495
6495
|
var $flipX = _a.$flipX;
|
|
6496
6496
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6497
6497
|
});
|
|
6498
|
-
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$
|
|
6498
|
+
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n"])), function (_a) {
|
|
6499
6499
|
var $color = _a.$color;
|
|
6500
6500
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
6501
6501
|
}, function (_a) {
|
|
@@ -6505,7 +6505,7 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$l ||
|
|
|
6505
6505
|
var $flipX = _a.$flipX;
|
|
6506
6506
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6507
6507
|
});
|
|
6508
|
-
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$
|
|
6508
|
+
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"], ["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"])), function (_a) {
|
|
6509
6509
|
var $color = _a.$color;
|
|
6510
6510
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
6511
6511
|
}, function (_a) {
|
|
@@ -6696,7 +6696,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
6696
6696
|
}
|
|
6697
6697
|
});
|
|
6698
6698
|
}
|
|
6699
|
-
var templateObject_1$
|
|
6699
|
+
var templateObject_1$E, templateObject_2$u, templateObject_3$o, templateObject_4$h;
|
|
6700
6700
|
|
|
6701
6701
|
var enTranslation = {};
|
|
6702
6702
|
|
|
@@ -6756,6 +6756,8 @@ var esTranslation = {
|
|
|
6756
6756
|
Exit: 'Salir',
|
|
6757
6757
|
'Face liveness has been verified!': 'Se ha verificado la Prueba de Vida en rostro!',
|
|
6758
6758
|
Done: 'Terminar',
|
|
6759
|
+
'Could not verify your face.': 'No se pudo verificar tu rostro.',
|
|
6760
|
+
'An error occurred while verifying your face.': 'Se ha producido un error al verificar tu rostro.',
|
|
6759
6761
|
'Customer has been identified!': '¡Se ha identificado al cliente!',
|
|
6760
6762
|
'Customer not found': 'Cliente no encontrado',
|
|
6761
6763
|
'Additional document capture': 'Captura de otro documento',
|
|
@@ -6866,7 +6868,7 @@ function useTranslations(verbiage, fallbacks) {
|
|
|
6866
6868
|
}, [fallbacks, i18n.language, t, verbiage]);
|
|
6867
6869
|
}
|
|
6868
6870
|
|
|
6869
|
-
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$
|
|
6871
|
+
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
6870
6872
|
var $top = _a.$top;
|
|
6871
6873
|
return $top !== null && $top !== void 0 ? $top : '10vh';
|
|
6872
6874
|
}, function (_a) {
|
|
@@ -6879,14 +6881,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
6879
6881
|
if (!portalLocation) return element;
|
|
6880
6882
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6881
6883
|
};
|
|
6882
|
-
var GuidanceMessage = styled__default.default.div(templateObject_2$
|
|
6884
|
+
var GuidanceMessage = styled__default.default.div(templateObject_2$t || (templateObject_2$t = __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) {
|
|
6883
6885
|
var _a, _b, _c, _d, _e, _f;
|
|
6884
6886
|
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';
|
|
6885
6887
|
}, function (props) {
|
|
6886
6888
|
var _a, _b, _c, _d, _e, _f;
|
|
6887
6889
|
return (_f = (_a = props.$textColor) !== 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.textColor) !== null && _f !== void 0 ? _f : 'black';
|
|
6888
6890
|
});
|
|
6889
|
-
var templateObject_1$
|
|
6891
|
+
var templateObject_1$D, templateObject_2$t;
|
|
6890
6892
|
|
|
6891
6893
|
var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
|
|
6892
6894
|
|
|
@@ -6921,18 +6923,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
6921
6923
|
}
|
|
6922
6924
|
}, verbiage.buttonText))));
|
|
6923
6925
|
}
|
|
6924
|
-
var Container$1 = styled__default.default.div(templateObject_1$
|
|
6926
|
+
var Container$1 = styled__default.default.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100dvw;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100dvw;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
|
|
6925
6927
|
var _a, _b, _c;
|
|
6926
6928
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
|
|
6927
6929
|
}, function (props) {
|
|
6928
6930
|
var _a, _b, _c;
|
|
6929
6931
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
|
|
6930
6932
|
});
|
|
6931
|
-
var InnerContainer = styled__default.default.div(templateObject_2$
|
|
6932
|
-
var Message = styled__default.default.span(templateObject_3$
|
|
6933
|
-
var ButtonContainer = styled__default.default.div(templateObject_4$
|
|
6934
|
-
var Button = styled__default.default(LoaderButton)(templateObject_5$
|
|
6935
|
-
var templateObject_1$
|
|
6933
|
+
var InnerContainer = styled__default.default.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"])));
|
|
6934
|
+
var Message = styled__default.default.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
|
|
6935
|
+
var ButtonContainer = styled__default.default.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
6936
|
+
var Button = styled__default.default(LoaderButton)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
6937
|
+
var templateObject_1$C, templateObject_2$s, templateObject_3$n, templateObject_4$g, templateObject_5$a;
|
|
6936
6938
|
|
|
6937
6939
|
var IdCapture = function IdCapture(_a) {
|
|
6938
6940
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -7128,13 +7130,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7128
7130
|
finished: true
|
|
7129
7131
|
}, verbiage.retryBtnText)));
|
|
7130
7132
|
};
|
|
7131
|
-
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
7132
|
-
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
7133
|
-
var Description$4 = styled__default.default.p(templateObject_3$
|
|
7134
|
-
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$
|
|
7135
|
-
var templateObject_1$
|
|
7133
|
+
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
7134
|
+
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7135
|
+
var Description$4 = styled__default.default.p(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
7136
|
+
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7137
|
+
var templateObject_1$B, templateObject_2$r, templateObject_3$m, templateObject_4$f;
|
|
7136
7138
|
|
|
7137
|
-
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$
|
|
7139
|
+
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 1002;\n border: none;\n border-radius: 4px;\n background: #ccc;\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"], ["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 1002;\n border: none;\n border-radius: 4px;\n background: #ccc;\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"])));
|
|
7138
7140
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7139
7141
|
var onClick = _a.onClick,
|
|
7140
7142
|
className = _a.className;
|
|
@@ -7178,10 +7180,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7178
7180
|
y2: "19.75"
|
|
7179
7181
|
}))));
|
|
7180
7182
|
};
|
|
7181
|
-
var templateObject_1$
|
|
7183
|
+
var templateObject_1$A;
|
|
7182
7184
|
|
|
7183
|
-
var ButtonsRow = styled__default.default.div(templateObject_1$
|
|
7184
|
-
var templateObject_1$
|
|
7185
|
+
var ButtonsRow$1 = styled__default.default.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"])));
|
|
7186
|
+
var templateObject_1$z;
|
|
7185
7187
|
|
|
7186
7188
|
function IdCaptureLoadingGraphic(props) {
|
|
7187
7189
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -7816,25 +7818,25 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
7816
7818
|
}
|
|
7817
7819
|
}, verbiage.continueText))))));
|
|
7818
7820
|
};
|
|
7819
|
-
var OverlayInner$1 = styled__default.default.div(templateObject_1$
|
|
7821
|
+
var OverlayInner$1 = styled__default.default.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"], ["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
7820
7822
|
var _a, _b, _c, _d;
|
|
7821
7823
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
7822
7824
|
}, function (props) {
|
|
7823
7825
|
var _a, _b, _c, _d;
|
|
7824
7826
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
7825
7827
|
});
|
|
7826
|
-
var OverlayHeader$1 = styled__default.default.div(templateObject_2$
|
|
7828
|
+
var OverlayHeader$1 = styled__default.default.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"])), function (props) {
|
|
7827
7829
|
var _a;
|
|
7828
7830
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
7829
7831
|
}, function (props) {
|
|
7830
7832
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
7831
7833
|
});
|
|
7832
|
-
var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
7833
|
-
var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$
|
|
7834
|
-
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$
|
|
7835
|
-
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$
|
|
7836
|
-
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$
|
|
7837
|
-
var StyledButtonsRow$a = styled__default.default(ButtonsRow)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
|
|
7834
|
+
var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
7835
|
+
var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"])));
|
|
7836
|
+
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"], ["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"])));
|
|
7837
|
+
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
7838
|
+
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7839
|
+
var StyledButtonsRow$a = styled__default.default(ButtonsRow$1)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
|
|
7838
7840
|
var _a, _b, _c, _d;
|
|
7839
7841
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
7840
7842
|
}, function (props) {
|
|
@@ -7868,10 +7870,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
|
|
|
7868
7870
|
var _a, _b, _c, _d, _e, _f;
|
|
7869
7871
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
|
|
7870
7872
|
});
|
|
7871
|
-
var templateObject_1$
|
|
7873
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$l, templateObject_4$e, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
|
|
7872
7874
|
|
|
7873
|
-
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$
|
|
7874
|
-
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$
|
|
7875
|
+
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
7876
|
+
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7875
7877
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
7876
7878
|
var _b, _c, _d, _e;
|
|
7877
7879
|
var onDismissed = _a.onDismissed,
|
|
@@ -7982,7 +7984,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
7982
7984
|
}
|
|
7983
7985
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
7984
7986
|
};
|
|
7985
|
-
var templateObject_1$
|
|
7987
|
+
var templateObject_1$x, templateObject_2$p;
|
|
7986
7988
|
|
|
7987
7989
|
var components$1 = {
|
|
7988
7990
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8039,7 +8041,7 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8039
8041
|
});
|
|
8040
8042
|
};
|
|
8041
8043
|
|
|
8042
|
-
var OverlayInstruction = styled__default.default.p(templateObject_1$
|
|
8044
|
+
var OverlayInstruction = styled__default.default.p(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n font-size: 18px;\n margin: 30px 0;\n"], ["\n font-size: 18px;\n margin: 30px 0;\n"])));
|
|
8043
8045
|
var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
8044
8046
|
var capturedDocuments = _a.capturedDocuments,
|
|
8045
8047
|
onSubmitClick = _a.onSubmitClick,
|
|
@@ -8074,7 +8076,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8074
8076
|
className: classNames.imageContainer
|
|
8075
8077
|
}, /*#__PURE__*/React__namespace.default.createElement(ImageRow, {
|
|
8076
8078
|
className: classNames.imageRow
|
|
8077
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
8079
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$a, {
|
|
8078
8080
|
className: classNames.heading
|
|
8079
8081
|
}, verbiage.headingText), idCardFront && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
|
|
8080
8082
|
className: classNames.imageCol
|
|
@@ -8108,7 +8110,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8108
8110
|
alt: verbiage.passportText
|
|
8109
8111
|
})), debugMode && ( /*#__PURE__*/React__namespace.default.createElement("pre", null, "Detection Score: ".concat(passport.detectionScore, "\nFocus Score: ").concat(passport.focusScore, "\nBounding Box: ").concat(JSON.stringify(passport.boundingBox)))))))), /*#__PURE__*/React__namespace.default.createElement(OverlayInstruction, {
|
|
8110
8112
|
className: classNames.instruction
|
|
8111
|
-
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
8113
|
+
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
|
|
8112
8114
|
className: classNames.buttonsRow
|
|
8113
8115
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
8114
8116
|
className: classNames.retryBtn,
|
|
@@ -8125,17 +8127,17 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8125
8127
|
finished: true
|
|
8126
8128
|
}, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
|
|
8127
8129
|
};
|
|
8128
|
-
var Heading$
|
|
8129
|
-
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$
|
|
8130
|
-
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$
|
|
8131
|
-
var ImageCol$1 = styled__default.default.div(templateObject_5$
|
|
8132
|
-
var ImageHeading = styled__default.default.h3(templateObject_6$
|
|
8133
|
-
var CapturedImageWrapper = styled__default.default.div(templateObject_7$
|
|
8130
|
+
var Heading$a = styled__default.default.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
|
|
8131
|
+
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
|
|
8132
|
+
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
|
|
8133
|
+
var ImageCol$1 = styled__default.default.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
|
|
8134
|
+
var ImageHeading = styled__default.default.h3(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n text-align: left;\n margin-top: 24px;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"], ["\n text-align: left;\n margin-top: 24px;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"])));
|
|
8135
|
+
var CapturedImageWrapper = styled__default.default.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"], ["\n border: 1px solid\n ", ";\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"])), function (props) {
|
|
8134
8136
|
var _a, _b, _c;
|
|
8135
8137
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
|
|
8136
8138
|
});
|
|
8137
8139
|
var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
|
|
8138
|
-
var templateObject_1$
|
|
8140
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$k, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2;
|
|
8139
8141
|
|
|
8140
8142
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
8141
8143
|
var _b;
|
|
@@ -8174,10 +8176,10 @@ var CameraVideoTag = function CameraVideoTag(_a) {
|
|
|
8174
8176
|
"$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
|
|
8175
8177
|
});
|
|
8176
8178
|
};
|
|
8177
|
-
var FullscreenVideoTag = styled__default.default.video(templateObject_1$
|
|
8179
|
+
var FullscreenVideoTag = styled__default.default.video(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n transform: ", ";\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"], ["\n transform: ", ";\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"])), function (props) {
|
|
8178
8180
|
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
8179
8181
|
});
|
|
8180
|
-
var templateObject_1$
|
|
8182
|
+
var templateObject_1$v;
|
|
8181
8183
|
|
|
8182
8184
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8183
8185
|
var _this = this;
|
|
@@ -8212,10 +8214,10 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
|
|
|
8212
8214
|
return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
|
|
8213
8215
|
}
|
|
8214
8216
|
|
|
8215
|
-
var CameraFeedWrapper = styled__default.default.div(templateObject_1$
|
|
8217
|
+
var CameraFeedWrapper = styled__default.default.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8216
8218
|
return props.$mode === 'snapToGuides' ? "display: flex;\n position: absolute;\n left: ".concat(props.$x, "px;\n top: ").concat(props.$y, "px;\n width: ").concat(props.$w, "px;\n height: ").concat(props.$h, "px;") : "";
|
|
8217
8219
|
});
|
|
8218
|
-
var templateObject_1$
|
|
8220
|
+
var templateObject_1$u;
|
|
8219
8221
|
|
|
8220
8222
|
function setCanvasDimensions(canvas, width, height) {
|
|
8221
8223
|
var _a;
|
|
@@ -8249,10 +8251,10 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
|
8249
8251
|
}
|
|
8250
8252
|
});
|
|
8251
8253
|
|
|
8252
|
-
var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$
|
|
8253
|
-
var GuidesContainer = styled__default.default.div(templateObject_2$
|
|
8254
|
-
var GuideCenterRow = styled__default.default.div(templateObject_3$
|
|
8255
|
-
var GuideRegion = styled__default.default.div(templateObject_4$
|
|
8254
|
+
var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n z-index: 1000;\n"], ["\n z-index: 1000;\n"])));
|
|
8255
|
+
var GuidesContainer = styled__default.default.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"])));
|
|
8256
|
+
var GuideCenterRow = styled__default.default.div(templateObject_3$j || (templateObject_3$j = __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 min-height: 0;\n flex: 1;\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 min-height: 0;\n flex: 1;\n"])));
|
|
8257
|
+
var GuideRegion = styled__default.default.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\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 position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
|
|
8256
8258
|
var _a, _b, _c, _d, _e;
|
|
8257
8259
|
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)';
|
|
8258
8260
|
}, function (props) {
|
|
@@ -8263,13 +8265,13 @@ var GuideRegion = styled__default.default.div(templateObject_4$b || (templateObj
|
|
|
8263
8265
|
}, function (props) {
|
|
8264
8266
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
8265
8267
|
});
|
|
8266
|
-
var Spacer = styled__default.default(GuideRegion)(templateObject_5$
|
|
8267
|
-
var GuideCenterRegion = styled__default.default.div(templateObject_6$
|
|
8268
|
+
var Spacer = styled__default.default(GuideRegion)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
8269
|
+
var GuideCenterRegion = styled__default.default.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n ", "\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"], ["\n ", "\n ", "\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"])), function (props) {
|
|
8268
8270
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8269
8271
|
}, function (props) {
|
|
8270
8272
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8271
8273
|
});
|
|
8272
|
-
var GuideCenterBorder = styled__default.default.div(templateObject_7$
|
|
8274
|
+
var GuideCenterBorder = styled__default.default.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n position: relative;\n"], ["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n position: relative;\n"])), function (props) {
|
|
8273
8275
|
var _a, _b;
|
|
8274
8276
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
8275
8277
|
});
|
|
@@ -8397,9 +8399,9 @@ var regionClsx$1 = function regionClsx(classNames, which) {
|
|
|
8397
8399
|
return v;
|
|
8398
8400
|
}).join(' ');
|
|
8399
8401
|
};
|
|
8400
|
-
var templateObject_1$
|
|
8402
|
+
var templateObject_1$t, templateObject_2$n, templateObject_3$j, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
|
|
8401
8403
|
|
|
8402
|
-
var FlippingImage = styled__default.default(GuideImage)(templateObject_1$
|
|
8404
|
+
var FlippingImage = styled__default.default(GuideImage)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: absolute;\n height: 100%;\n top: 0;\n left: 50%;\n transition: transform ", "s;\n transform: translateX(-50%) ", ";\n"], ["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: absolute;\n height: 100%;\n top: 0;\n left: 50%;\n transition: transform ", "s;\n transform: translateX(-50%) ", ";\n"])), function (props) {
|
|
8403
8405
|
return props.$transitionTime;
|
|
8404
8406
|
}, function (props) {
|
|
8405
8407
|
return props.$transforms;
|
|
@@ -8544,7 +8546,7 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
8544
8546
|
return v;
|
|
8545
8547
|
}).join(' ');
|
|
8546
8548
|
};
|
|
8547
|
-
var templateObject_1$
|
|
8549
|
+
var templateObject_1$s;
|
|
8548
8550
|
|
|
8549
8551
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
8550
8552
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -8680,11 +8682,11 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
8680
8682
|
imageVisible: imageVisible
|
|
8681
8683
|
})));
|
|
8682
8684
|
};
|
|
8683
|
-
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$
|
|
8685
|
+
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"])), function (props) {
|
|
8684
8686
|
return props.$maskColor;
|
|
8685
8687
|
});
|
|
8686
|
-
var Canvas$1 = styled__default.default.canvas(templateObject_2$
|
|
8687
|
-
var templateObject_1$
|
|
8688
|
+
var Canvas$1 = styled__default.default.canvas(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
8689
|
+
var templateObject_1$r, templateObject_2$m;
|
|
8688
8690
|
|
|
8689
8691
|
function IdCaptureGuides(_a) {
|
|
8690
8692
|
var _b, _c;
|
|
@@ -8829,11 +8831,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
8829
8831
|
onError: onError
|
|
8830
8832
|
})));
|
|
8831
8833
|
};
|
|
8832
|
-
var StyledSpinner = styled__default.default(Spinner)(templateObject_1$
|
|
8833
|
-
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$
|
|
8834
|
-
var ImagePreviewText = styled__default.default.div(templateObject_3$
|
|
8835
|
-
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$
|
|
8836
|
-
var templateObject_1$
|
|
8834
|
+
var StyledSpinner = styled__default.default(Spinner)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"], ["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"])));
|
|
8835
|
+
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
8836
|
+
var ImagePreviewText = styled__default.default.div(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
8837
|
+
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
8838
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$b;
|
|
8837
8839
|
|
|
8838
8840
|
var documentCaptureInitialState = {
|
|
8839
8841
|
documents: [],
|
|
@@ -9189,11 +9191,11 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
9189
9191
|
ref: canvasRef
|
|
9190
9192
|
}));
|
|
9191
9193
|
};
|
|
9192
|
-
var CanvasWrapper = styled__default.default.div(templateObject_1$
|
|
9194
|
+
var CanvasWrapper = styled__default.default.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"], ["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
|
|
9193
9195
|
return props.$maskColor;
|
|
9194
9196
|
});
|
|
9195
|
-
var Canvas = styled__default.default.canvas(templateObject_2$
|
|
9196
|
-
var templateObject_1$
|
|
9197
|
+
var Canvas = styled__default.default.canvas(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9198
|
+
var templateObject_1$p, templateObject_2$k;
|
|
9197
9199
|
|
|
9198
9200
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
9199
9201
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -9297,7 +9299,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9297
9299
|
}, /*#__PURE__*/React__namespace.default.createElement(HeadingRow, {
|
|
9298
9300
|
"$maskColor": maskColor,
|
|
9299
9301
|
className: classNames.headingRow
|
|
9300
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9302
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$9, {
|
|
9301
9303
|
className: classNames.heading
|
|
9302
9304
|
}, verbiage.headingText)), /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureGuideOverlay, {
|
|
9303
9305
|
aspectRatio: aspectRatio,
|
|
@@ -9343,21 +9345,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9343
9345
|
disabled: !cameraReady || capturing
|
|
9344
9346
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
9345
9347
|
};
|
|
9346
|
-
var CaptureContainer = styled__default.default.div(templateObject_1$
|
|
9347
|
-
var HeadingRow = styled__default.default.div(templateObject_2$
|
|
9348
|
+
var CaptureContainer = styled__default.default.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--app-height);\n"], ["\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--app-height);\n"])));
|
|
9349
|
+
var HeadingRow = styled__default.default.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
|
|
9348
9350
|
return props.$maskColor;
|
|
9349
9351
|
});
|
|
9350
|
-
var Heading$
|
|
9351
|
-
var FooterRow = styled__default.default.div(templateObject_4$
|
|
9352
|
+
var Heading$9 = styled__default.default.h1(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
|
|
9353
|
+
var FooterRow = styled__default.default.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"], ["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"])), function (props) {
|
|
9352
9354
|
return props.$maskColor;
|
|
9353
9355
|
});
|
|
9354
|
-
var Instructions = styled__default.default.div(templateObject_5$
|
|
9356
|
+
var Instructions = styled__default.default.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
|
|
9355
9357
|
var _a, _b, _c;
|
|
9356
9358
|
return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
|
|
9357
9359
|
});
|
|
9358
|
-
var StyledButtonsRow$9 = styled__default.default(ButtonsRow)(templateObject_6$
|
|
9359
|
-
var PreviewImage = styled__default.default.img(templateObject_7$
|
|
9360
|
-
var templateObject_1$
|
|
9360
|
+
var StyledButtonsRow$9 = styled__default.default(ButtonsRow$1)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
|
|
9361
|
+
var PreviewImage = styled__default.default.img(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
|
|
9362
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$3;
|
|
9361
9363
|
|
|
9362
9364
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
9363
9365
|
var onSuccess = _a.onSuccess,
|
|
@@ -9577,7 +9579,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9577
9579
|
className: classNames.container
|
|
9578
9580
|
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$2, {
|
|
9579
9581
|
className: classNames.inner
|
|
9580
|
-
}, !silentFallback && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9582
|
+
}, !silentFallback && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$8, {
|
|
9581
9583
|
className: classNames.heading
|
|
9582
9584
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$3, {
|
|
9583
9585
|
className: classNames.description
|
|
@@ -9626,13 +9628,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9626
9628
|
}
|
|
9627
9629
|
}, verbiage.doneBtnText))))));
|
|
9628
9630
|
};
|
|
9629
|
-
var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
9630
|
-
var Heading$
|
|
9631
|
-
var Description$3 = styled__default.default.p(templateObject_3$
|
|
9632
|
-
var Instruction = styled__default.default.p(templateObject_4$
|
|
9633
|
-
var ImageCol = styled__default.default.div(templateObject_5$
|
|
9634
|
-
var StyledButtonsRow$8 = styled__default.default(ButtonsRow)(templateObject_6$
|
|
9635
|
-
var templateObject_1$
|
|
9631
|
+
var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
9632
|
+
var Heading$8 = styled__default.default.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9633
|
+
var Description$3 = styled__default.default.p(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9634
|
+
var Instruction = styled__default.default.p(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
9635
|
+
var ImageCol = styled__default.default.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n flex-basis: 0;\n"], ["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n flex-basis: 0;\n"])));
|
|
9636
|
+
var StyledButtonsRow$8 = styled__default.default(ButtonsRow$1)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
9637
|
+
var templateObject_1$n, templateObject_2$i, templateObject_3$g, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
9636
9638
|
|
|
9637
9639
|
var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
9638
9640
|
var _b, _c, _d, _e, _f, _g;
|
|
@@ -9993,1045 +9995,28 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
9993
9995
|
})));
|
|
9994
9996
|
};
|
|
9995
9997
|
|
|
9996
|
-
|
|
9997
|
-
var
|
|
9998
|
-
|
|
9999
|
-
|
|
10000
|
-
|
|
10001
|
-
|
|
10002
|
-
|
|
10003
|
-
var
|
|
10004
|
-
|
|
10005
|
-
|
|
10006
|
-
_c = _a.variant,
|
|
10007
|
-
variant = _c === void 0 ? 'unsatisfied' : _c,
|
|
10008
|
-
_d = _a.borderWidth,
|
|
10009
|
-
borderWidth = _d === void 0 ? 3 : _d,
|
|
10010
|
-
borderColor = _a.borderColor;
|
|
10011
|
-
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10012
|
-
className: classNames.container
|
|
10013
|
-
}, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOval, {
|
|
10014
|
-
className: classNames.oval,
|
|
10015
|
-
"$variant": variant,
|
|
10016
|
-
"$borderWidth": borderWidth,
|
|
10017
|
-
"$borderColor": borderColor
|
|
10018
|
-
}));
|
|
10019
|
-
};
|
|
10020
|
-
var templateObject_1$k, templateObject_2$e;
|
|
10021
|
-
|
|
10022
|
-
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10023
|
-
start: function start() {
|
|
10024
|
-
return null;
|
|
10025
|
-
},
|
|
10026
|
-
stop: function stop() {
|
|
10027
|
-
return null;
|
|
10028
|
-
},
|
|
10029
|
-
onPredictionMade: function onPredictionMade() {
|
|
10030
|
-
return null;
|
|
10031
|
-
},
|
|
10032
|
-
canvasRef: {
|
|
10033
|
-
current: null
|
|
10034
|
-
},
|
|
10035
|
-
ready: false,
|
|
10036
|
-
error: null,
|
|
10037
|
-
modelDownloadProgress: 0
|
|
10038
|
-
});
|
|
10039
|
-
function SelfieGuidanceModelsProvider(_a) {
|
|
10040
|
-
var _this = this;
|
|
10041
|
-
var _b = _a.autoStart,
|
|
10042
|
-
autoStart = _b === void 0 ? true : _b,
|
|
10043
|
-
children = _a.children,
|
|
10044
|
-
throttleMs = _a.throttleMs,
|
|
10045
|
-
onModelError = _a.onModelError,
|
|
10046
|
-
_c = _a.modelLoadTimeoutMs,
|
|
10047
|
-
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10048
|
-
var _d = React.useContext(CameraStateContext),
|
|
10049
|
-
videoRef = _d.videoRef,
|
|
10050
|
-
videoLoaded = _d.videoLoaded,
|
|
10051
|
-
cameraReady = _d.cameraReady;
|
|
10052
|
-
var canvasRef = React.useRef(null);
|
|
10053
|
-
var onPredictionHandler = React.useRef();
|
|
10054
|
-
var _e = useLoadFaceDetector({
|
|
10055
|
-
onModelError: onModelError,
|
|
10056
|
-
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10057
|
-
}),
|
|
10058
|
-
detector = _e.detector,
|
|
10059
|
-
ready = _e.ready,
|
|
10060
|
-
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10061
|
-
modelError = _e.modelError;
|
|
10062
|
-
var _f = useFrameLoop(React.useCallback(function () {
|
|
10063
|
-
return __awaiter(_this, void 0, void 0, function () {
|
|
10064
|
-
var vw, vh, ctx, faces;
|
|
10065
|
-
var _a;
|
|
10066
|
-
return __generator(this, function (_b) {
|
|
10067
|
-
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10068
|
-
vw = videoRef.current.videoWidth;
|
|
10069
|
-
vh = videoRef.current.videoHeight;
|
|
10070
|
-
ctx = canvasRef.current.getContext('2d');
|
|
10071
|
-
canvasRef.current.width = vw;
|
|
10072
|
-
canvasRef.current.height = vh;
|
|
10073
|
-
if (ctx && videoRef.current.readyState === 4) {
|
|
10074
|
-
ctx.translate(vw, 0);
|
|
10075
|
-
ctx.scale(-1, 1);
|
|
10076
|
-
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10077
|
-
// Detectors can throw errors, for example when using custom URLs that
|
|
10078
|
-
// contain a model that doesn't provide the expected output.
|
|
10079
|
-
try {
|
|
10080
|
-
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10081
|
-
(_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
|
|
10082
|
-
} catch (e) {
|
|
10083
|
-
error('caught face detection error', e);
|
|
10084
|
-
}
|
|
10085
|
-
}
|
|
10086
|
-
return [2 /*return*/];
|
|
10087
|
-
});
|
|
10088
|
-
});
|
|
10089
|
-
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10090
|
-
throttleMs: throttleMs,
|
|
10091
|
-
autoStart: autoStart
|
|
10092
|
-
}),
|
|
10093
|
-
start = _f.start,
|
|
10094
|
-
stop = _f.stop;
|
|
10095
|
-
var onPredictionMade = React.useCallback(function (handler) {
|
|
10096
|
-
onPredictionHandler.current = handler;
|
|
10097
|
-
}, []);
|
|
10098
|
-
var value = React.useMemo(function () {
|
|
10099
|
-
return {
|
|
10100
|
-
start: start,
|
|
10101
|
-
stop: stop,
|
|
10102
|
-
ready: ready,
|
|
10103
|
-
canvasRef: canvasRef,
|
|
10104
|
-
onPredictionMade: onPredictionMade,
|
|
10105
|
-
error: modelError,
|
|
10106
|
-
modelDownloadProgress: modelDownloadProgress
|
|
10107
|
-
};
|
|
10108
|
-
}, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
|
|
10109
|
-
return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
|
|
10110
|
-
value: value
|
|
10111
|
-
}, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
|
|
10112
|
-
ref: canvasRef
|
|
10113
|
-
}), children);
|
|
10114
|
-
}
|
|
10115
|
-
|
|
10116
|
-
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
10117
|
-
if (shouldStart === void 0) {
|
|
10118
|
-
shouldStart = true;
|
|
10119
|
-
}
|
|
10120
|
-
var _a = React.useState(false),
|
|
10121
|
-
timedOut = _a[0],
|
|
10122
|
-
setTimedOut = _a[1];
|
|
10123
|
-
var _b = React.useState(),
|
|
10124
|
-
timeoutStartedAt = _b[0],
|
|
10125
|
-
setTimeoutStartedAt = _b[1];
|
|
10126
|
-
React.useEffect(function () {
|
|
10127
|
-
if (!durationMs || !shouldStart) return;
|
|
10128
|
-
setTimeoutStartedAt(new Date());
|
|
10129
|
-
var timer = setTimeout(function () {
|
|
10130
|
-
setTimedOut(true);
|
|
10131
|
-
}, durationMs);
|
|
10132
|
-
return function () {
|
|
10133
|
-
if (timer) clearTimeout(timer);
|
|
10134
|
-
};
|
|
10135
|
-
}, [durationMs, shouldStart]);
|
|
9998
|
+
function SelfieCaptureLoadingGraphic(_a) {
|
|
9999
|
+
var _b, _c, _d;
|
|
10000
|
+
var _e = _a.width,
|
|
10001
|
+
width = _e === void 0 ? 840 : _e,
|
|
10002
|
+
_f = _a.height,
|
|
10003
|
+
height = _f === void 0 ? 740 : _f,
|
|
10004
|
+
className = _a.className;
|
|
10005
|
+
var _g = React.useState(1),
|
|
10006
|
+
frame = _g[0],
|
|
10007
|
+
setFrame = _g[1];
|
|
10136
10008
|
React.useEffect(function () {
|
|
10137
|
-
|
|
10138
|
-
|
|
10139
|
-
|
|
10140
|
-
|
|
10141
|
-
}
|
|
10142
|
-
var t = setTimeout(function () {
|
|
10143
|
-
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
10144
|
-
}, 120000);
|
|
10145
|
-
return function () {
|
|
10146
|
-
clearTimeout(t);
|
|
10147
|
-
};
|
|
10148
|
-
}, [onTimeout, shouldWaitLonger, timedOut, timeoutAverted]);
|
|
10149
|
-
return {
|
|
10150
|
-
timedOut: timedOut,
|
|
10151
|
-
timeoutStartedAt: timeoutStartedAt
|
|
10152
|
-
};
|
|
10153
|
-
};
|
|
10154
|
-
|
|
10155
|
-
var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
10156
|
-
var onFinished = _a.onFinished,
|
|
10157
|
-
onCapture = _a.onCapture,
|
|
10158
|
-
_b = _a.classNames,
|
|
10159
|
-
classNames = _b === void 0 ? {} : _b,
|
|
10160
|
-
_c = _a.colors,
|
|
10161
|
-
colors = _c === void 0 ? {} : _c,
|
|
10162
|
-
_d = _a.verbiage,
|
|
10163
|
-
rawVerbiage = _d === void 0 ? {} : _d,
|
|
10164
|
-
_e = _a.silentFallback,
|
|
10165
|
-
silentFallback = _e === void 0 ? false : _e,
|
|
10166
|
-
_f = _a.invalidSelfie,
|
|
10167
|
-
invalidSelfie = _f === void 0 ? false : _f,
|
|
10168
|
-
_g = _a.guidanceMessage,
|
|
10169
|
-
guidanceMessage = _g === void 0 ? undefined : _g;
|
|
10170
|
-
var _h = React.useState(null),
|
|
10171
|
-
image = _h[0],
|
|
10172
|
-
setImage = _h[1];
|
|
10173
|
-
var lastResizedFileRef = React.useRef(null);
|
|
10174
|
-
var fileInput = React.useRef(null);
|
|
10175
|
-
var _j = React.useState(false),
|
|
10176
|
-
loading = _j[0],
|
|
10177
|
-
setLoading = _j[1];
|
|
10178
|
-
var _k = React.useState(false),
|
|
10179
|
-
usingDocumentCapture = _k[0],
|
|
10180
|
-
setUsingDocumentCapture = _k[1];
|
|
10181
|
-
var _l = useFileState(),
|
|
10182
|
-
rawFile = _l.rawFile,
|
|
10183
|
-
fileInputOnChange = _l.fileInputOnChange;
|
|
10184
|
-
var resizedImageFile = useResizeMaxEdge({
|
|
10185
|
-
rawFile: rawFile
|
|
10186
|
-
}).resizedImageFile;
|
|
10187
|
-
React.useEffect(function resetAfterCapturingImage() {
|
|
10188
|
-
// we only want to run this IF the file has changed
|
|
10189
|
-
if (resizedImageFile && resizedImageFile !== lastResizedFileRef.current) {
|
|
10190
|
-
lastResizedFileRef.current = resizedImageFile;
|
|
10191
|
-
setImage(resizedImageFile);
|
|
10192
|
-
setLoading(true);
|
|
10193
|
-
onCapture === null || onCapture === void 0 ? void 0 : onCapture(resizedImageFile);
|
|
10194
|
-
onFinished === null || onFinished === void 0 ? void 0 : onFinished(resizedImageFile);
|
|
10195
|
-
}
|
|
10196
|
-
}, [resizedImageFile, onCapture, onFinished, loading]);
|
|
10197
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10198
|
-
headingText: "We're having some trouble.",
|
|
10199
|
-
descriptionText: silentFallback ? 'Use your device camera to capture your face' : 'On-device capture guidance failed, please capture a selfie manually.',
|
|
10200
|
-
captureBtnText: 'Capture',
|
|
10201
|
-
doneBtnText: 'Done',
|
|
10202
|
-
doneBtnLoadingText: 'Verifying...',
|
|
10203
|
-
livenessFailedText: 'Live face not detected, please try again',
|
|
10204
|
-
livenessFailedReasonText: guidanceMessage,
|
|
10205
|
-
retryButtonText: 'Retry',
|
|
10206
|
-
retryCaptureButtonText: 'Retry capture'
|
|
10207
|
-
});
|
|
10208
|
-
React.useEffect(function triggerInputWhenInSilentFallbackMode() {
|
|
10209
|
-
var fallbackTimeout;
|
|
10210
|
-
if (silentFallback) {
|
|
10211
|
-
fallbackTimeout = setTimeout(function () {
|
|
10212
|
-
var _a;
|
|
10213
|
-
// using the input element, we want to click on it "immediately" which is 250ms to allow for even old browsers to finish connecting the input
|
|
10214
|
-
if (isMobile()) {
|
|
10215
|
-
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10216
|
-
} else {
|
|
10217
|
-
setUsingDocumentCapture(true);
|
|
10218
|
-
}
|
|
10219
|
-
}, 250);
|
|
10220
|
-
}
|
|
10009
|
+
var i = setInterval(function () {
|
|
10010
|
+
setFrame(function (n) {
|
|
10011
|
+
return (n + 1) % 10;
|
|
10012
|
+
});
|
|
10013
|
+
}, 750);
|
|
10221
10014
|
return function () {
|
|
10222
|
-
|
|
10223
|
-
};
|
|
10224
|
-
}, [silentFallback]);
|
|
10225
|
-
function onFileSelected(e) {
|
|
10226
|
-
var _a;
|
|
10227
|
-
if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0])) return;
|
|
10228
|
-
setImage('LOADING'); // this is to reduce some of the flicker - it isn't perfect since .readAsDataURL() is slow
|
|
10229
|
-
fileInputOnChange(e);
|
|
10230
|
-
}
|
|
10231
|
-
if (usingDocumentCapture || silentFallback && !!invalidSelfie && !image && !isMobile() // desktop silent fallback - not a very realistic situation
|
|
10232
|
-
) {
|
|
10233
|
-
return /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureWizard, {
|
|
10234
|
-
documents: [{
|
|
10235
|
-
title: invalidSelfie ? verbiage.livenessFailedText : verbiage.descriptionText
|
|
10236
|
-
}],
|
|
10237
|
-
onDocumentCaptured: function onDocumentCaptured(document) {
|
|
10238
|
-
var imageData = document.contentUrl;
|
|
10239
|
-
onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageData);
|
|
10240
|
-
// todo: this a hack to address what is probably some sub-optimal coupling - fix
|
|
10241
|
-
setTimeout(function () {
|
|
10242
|
-
setImage(imageData);
|
|
10243
|
-
setUsingDocumentCapture(false);
|
|
10244
|
-
}, 0);
|
|
10245
|
-
}
|
|
10246
|
-
});
|
|
10247
|
-
}
|
|
10248
|
-
// todo: JN - we might be able to use the media stream instead if we clone it - as it stands today, we hae to use the camera to support iOS 16 devices
|
|
10249
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("input", {
|
|
10250
|
-
ref: fileInput,
|
|
10251
|
-
type: "file",
|
|
10252
|
-
accept: "image/*",
|
|
10253
|
-
capture: "user",
|
|
10254
|
-
onChange: onFileSelected,
|
|
10255
|
-
hidden: true
|
|
10256
|
-
}), /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10257
|
-
className: classNames.container
|
|
10258
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$1, {
|
|
10259
|
-
className: classNames.inner
|
|
10260
|
-
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
10261
|
-
className: classNames.heading
|
|
10262
|
-
}, verbiage.livenessFailedText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10263
|
-
className: classNames.description
|
|
10264
|
-
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
10265
|
-
className: classNames.heading
|
|
10266
|
-
}, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10267
|
-
className: classNames.description
|
|
10268
|
-
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))), image && image !== 'LOADING' && ( /*#__PURE__*/React__namespace.default.createElement(ImageContainer$5, {
|
|
10269
|
-
className: classNames.imageContainer
|
|
10270
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10271
|
-
src: image,
|
|
10272
|
-
alt: "",
|
|
10273
|
-
className: classNames.image
|
|
10274
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(StyledButtonsRow$7, {
|
|
10275
|
-
className: classNames.buttonsRow
|
|
10276
|
-
}, image && !loading && !isMobile() && ( /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10277
|
-
className: classNames.retryCaptureBtn,
|
|
10278
|
-
finished: true,
|
|
10279
|
-
variant: "warning",
|
|
10280
|
-
onClick: function onClick() {
|
|
10281
|
-
var _a;
|
|
10282
|
-
if (isMobile()) {
|
|
10283
|
-
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10284
|
-
} else {
|
|
10285
|
-
setUsingDocumentCapture(true);
|
|
10286
|
-
}
|
|
10287
|
-
}
|
|
10288
|
-
}, verbiage.retryCaptureButtonText)), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10289
|
-
variant: "positive",
|
|
10290
|
-
key: loading ? 'loading-btn' : 'ready-btn',
|
|
10291
|
-
className: !image ? classNames.captureBtn : classNames === null || classNames === void 0 ? void 0 : classNames.doneBtn,
|
|
10292
|
-
colors: !image ? colors.captureBtn : colors === null || colors === void 0 ? void 0 : colors.doneBtn,
|
|
10293
|
-
finished: !image ? true : !loading,
|
|
10294
|
-
onClick: function onClick() {
|
|
10295
|
-
var _a;
|
|
10296
|
-
if (isMobile()) {
|
|
10297
|
-
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10298
|
-
} else {
|
|
10299
|
-
if (!image) {
|
|
10300
|
-
setUsingDocumentCapture(true);
|
|
10301
|
-
} else {
|
|
10302
|
-
setLoading(true);
|
|
10303
|
-
onFinished === null || onFinished === void 0 ? void 0 : onFinished(image);
|
|
10304
|
-
}
|
|
10305
|
-
}
|
|
10306
|
-
}
|
|
10307
|
-
}, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
10308
|
-
};
|
|
10309
|
-
var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
10310
|
-
var Heading$6 = styled__default.default.h3(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10311
|
-
var Description$2 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10312
|
-
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10313
|
-
var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10314
|
-
var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$3;
|
|
10315
|
-
|
|
10316
|
-
var initialState$3 = {
|
|
10317
|
-
videoWidth: 0,
|
|
10318
|
-
videoHeight: 0,
|
|
10319
|
-
frame: null,
|
|
10320
|
-
faces: [],
|
|
10321
|
-
faceNotCentered: false,
|
|
10322
|
-
faceLookingAway: false,
|
|
10323
|
-
faceTooClose: false,
|
|
10324
|
-
faceTooFar: false,
|
|
10325
|
-
faceReady: false,
|
|
10326
|
-
faceReadyAt: null
|
|
10327
|
-
};
|
|
10328
|
-
var reducer$3 = function reducer(state, action) {
|
|
10329
|
-
switch (action.type) {
|
|
10330
|
-
case 'configure':
|
|
10331
|
-
return _assign(_assign({}, state), action.payload);
|
|
10332
|
-
case 'facesDetected':
|
|
10333
|
-
{
|
|
10334
|
-
var faces = action.payload.faces;
|
|
10335
|
-
var face = faces[0];
|
|
10336
|
-
var faceNotCentered = true,
|
|
10337
|
-
faceLookingAway = false,
|
|
10338
|
-
faceTooClose = false,
|
|
10339
|
-
faceTooFar = false,
|
|
10340
|
-
faceReadyAt = state.faceReadyAt;
|
|
10341
|
-
if (face) {
|
|
10342
|
-
// calculate centroids
|
|
10343
|
-
var vCX = state.videoWidth / 2;
|
|
10344
|
-
var vCY = state.videoHeight / 2;
|
|
10345
|
-
var fCX = (face.box.xMin + face.box.xMax) / 2;
|
|
10346
|
-
var fCY = (face.box.yMin + face.box.yMax) / 2;
|
|
10347
|
-
// calculate thresholds
|
|
10348
|
-
var vTX = state.videoWidth * 0.125;
|
|
10349
|
-
var vTY = state.videoHeight * 0.125;
|
|
10350
|
-
var fTW = face.box.width * 0.2;
|
|
10351
|
-
var fTH = face.box.height * 0.2;
|
|
10352
|
-
var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
|
|
10353
|
-
if (nose) {
|
|
10354
|
-
faceNotCentered = Math.abs(vCX - fCX) > vTX || Math.abs(vCY + 50 - fCY) > vTY;
|
|
10355
|
-
faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
|
|
10356
|
-
}
|
|
10357
|
-
var isMobile = state.videoWidth < state.videoHeight;
|
|
10358
|
-
var tooCloseMultiple = isMobile ? 2 : 4.5;
|
|
10359
|
-
var tooFarMultiple = isMobile ? 6 : 7;
|
|
10360
|
-
faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
|
|
10361
|
-
faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
|
|
10362
|
-
}
|
|
10363
|
-
var faceReady = !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
|
|
10364
|
-
if (!faceReady) {
|
|
10365
|
-
faceReadyAt = null;
|
|
10366
|
-
} else if (!state.faceReady) {
|
|
10367
|
-
faceReadyAt = new Date();
|
|
10368
|
-
}
|
|
10369
|
-
return _assign(_assign({}, state), {
|
|
10370
|
-
faces: faces,
|
|
10371
|
-
faceNotCentered: faceNotCentered,
|
|
10372
|
-
faceLookingAway: faceLookingAway,
|
|
10373
|
-
faceTooClose: faceTooClose,
|
|
10374
|
-
faceTooFar: faceTooFar,
|
|
10375
|
-
faceReady: faceReady,
|
|
10376
|
-
faceReadyAt: faceReadyAt
|
|
10377
|
-
});
|
|
10378
|
-
}
|
|
10379
|
-
}
|
|
10380
|
-
};
|
|
10381
|
-
var SelfieCapture = function SelfieCapture(_a) {
|
|
10382
|
-
var _b;
|
|
10383
|
-
var onGuidanceSatisfied = _a.onGuidanceSatisfied,
|
|
10384
|
-
onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
|
|
10385
|
-
onSelfieCaptured = _a.onSelfieCaptured,
|
|
10386
|
-
onTimeout = _a.onTimeout,
|
|
10387
|
-
onExit = _a.onExit,
|
|
10388
|
-
_c = _a.timeoutDurationMs,
|
|
10389
|
-
timeoutDurationMs = _c === void 0 ? 15000 : _c,
|
|
10390
|
-
guidanceMessage = _a.guidanceMessage,
|
|
10391
|
-
guidanceSatisfied = _a.guidanceSatisfied,
|
|
10392
|
-
_d = _a.classNames,
|
|
10393
|
-
classNames = _d === void 0 ? {} : _d,
|
|
10394
|
-
_e = _a.colors,
|
|
10395
|
-
colors = _e === void 0 ? {} : _e,
|
|
10396
|
-
_f = _a.verbiage,
|
|
10397
|
-
rawVerbiage = _f === void 0 ? {} : _f,
|
|
10398
|
-
_g = _a.debugMode,
|
|
10399
|
-
debugMode = _g === void 0 ? false : _g;
|
|
10400
|
-
var _h = useResizeObserver__default.default(),
|
|
10401
|
-
ref = _h.ref,
|
|
10402
|
-
_j = _h.width,
|
|
10403
|
-
width = _j === void 0 ? 1 : _j,
|
|
10404
|
-
_k = _h.height,
|
|
10405
|
-
height = _k === void 0 ? 1 : _k;
|
|
10406
|
-
var _l = React.useReducer(reducer$3, initialState$3),
|
|
10407
|
-
state = _l[0],
|
|
10408
|
-
dispatch = _l[1];
|
|
10409
|
-
var lastPredictionCanvas = React.useRef(null);
|
|
10410
|
-
var _m = React.useContext(CameraStateContext),
|
|
10411
|
-
cameraRef = _m.cameraRef,
|
|
10412
|
-
cameraReady = _m.cameraReady,
|
|
10413
|
-
videoRef = _m.videoRef;
|
|
10414
|
-
var _o = React.useContext(SelfieGuidanceModelsContext),
|
|
10415
|
-
onPredictionMade = _o.onPredictionMade,
|
|
10416
|
-
guidanceError = _o.error;
|
|
10417
|
-
React.useEffect(function () {
|
|
10418
|
-
if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
|
|
10419
|
-
dispatch({
|
|
10420
|
-
type: 'configure',
|
|
10421
|
-
payload: {
|
|
10422
|
-
videoWidth: videoRef.current.videoWidth,
|
|
10423
|
-
videoHeight: videoRef.current.videoHeight
|
|
10424
|
-
}
|
|
10425
|
-
});
|
|
10426
|
-
}
|
|
10427
|
-
}, [cameraReady, videoRef]);
|
|
10428
|
-
onPredictionMade(useDebounce.useThrottledCallback(function (prediction) {
|
|
10429
|
-
dispatch({
|
|
10430
|
-
type: 'facesDetected',
|
|
10431
|
-
payload: {
|
|
10432
|
-
faces: prediction
|
|
10433
|
-
}
|
|
10434
|
-
});
|
|
10435
|
-
}, 16));
|
|
10436
|
-
var _p = React.useState(false),
|
|
10437
|
-
captureReady = _p[0],
|
|
10438
|
-
setCaptureReady = _p[1];
|
|
10439
|
-
React.useEffect(function () {
|
|
10440
|
-
var timer;
|
|
10441
|
-
if (state.faceReady) {
|
|
10442
|
-
onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied();
|
|
10443
|
-
timer = setTimeout(function () {
|
|
10444
|
-
setCaptureReady(true);
|
|
10445
|
-
}, 1000);
|
|
10446
|
-
} else {
|
|
10447
|
-
onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
|
|
10448
|
-
}
|
|
10449
|
-
return function () {
|
|
10450
|
-
if (timer) clearTimeout(timer);
|
|
10451
|
-
};
|
|
10452
|
-
}, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
|
|
10453
|
-
React.useEffect(function () {
|
|
10454
|
-
if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
|
|
10455
|
-
drawToCanvas(lastPredictionCanvas.current, videoRef.current);
|
|
10456
|
-
var ctx = lastPredictionCanvas.current.getContext('2d');
|
|
10457
|
-
if (!ctx) return;
|
|
10458
|
-
var imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
|
|
10459
|
-
onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
|
|
10460
|
-
clearCanvas(lastPredictionCanvas.current);
|
|
10461
|
-
}
|
|
10462
|
-
}, [captureReady, onSelfieCaptured, state.faces, videoRef]);
|
|
10463
|
-
var _q = useTimeout(timeoutDurationMs, onTimeout),
|
|
10464
|
-
timedOut = _q.timedOut,
|
|
10465
|
-
timeoutStartedAt = _q.timeoutStartedAt;
|
|
10466
|
-
var debugScalingDetails = useDebugScalingDetails({
|
|
10467
|
-
enabled: debugMode,
|
|
10468
|
-
pageWidth: width,
|
|
10469
|
-
pageHeight: height,
|
|
10470
|
-
videoWidth: state.videoWidth,
|
|
10471
|
-
videoHeight: state.videoHeight
|
|
10472
|
-
});
|
|
10473
|
-
colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
|
|
10474
|
-
colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
|
|
10475
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10476
|
-
guidanceHoldStillText: 'Hold still for a few seconds...',
|
|
10477
|
-
guidanceLookStraightText: 'Look straight into the camera...',
|
|
10478
|
-
guidanceMoveBackText: 'Move back...',
|
|
10479
|
-
guidanceMoveForwardText: 'Move forward...',
|
|
10480
|
-
guidanceMoveToCenterText: 'Move to the center...'
|
|
10481
|
-
});
|
|
10482
|
-
var satisfied = state.faceReady;
|
|
10483
|
-
if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
|
|
10484
|
-
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
|
|
10485
|
-
if (guidanceError) {
|
|
10486
|
-
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
10487
|
-
classNames: classNames.fallback
|
|
10488
|
-
});
|
|
10489
|
-
}
|
|
10490
|
-
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
10491
|
-
ref: ref,
|
|
10492
|
-
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
10493
|
-
}, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
10494
|
-
ref: lastPredictionCanvas
|
|
10495
|
-
}), /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOverlay, {
|
|
10496
|
-
classNames: classNames.guides,
|
|
10497
|
-
variant: satisfied ? 'satisfied' : 'unsatisfied'
|
|
10498
|
-
}), guidanceMessage !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
|
|
10499
|
-
className: classNames.guidanceMessageContainer
|
|
10500
|
-
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
10501
|
-
"$variant": satisfied ? 'positive' : 'negative',
|
|
10502
|
-
className: classNames.guidanceMessage
|
|
10503
|
-
}, guidanceMessage))), debugMode && state.faces.length > 0 && ( /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, null, state.faces.map(function (face, i) {
|
|
10504
|
-
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
|
|
10505
|
-
key: i,
|
|
10506
|
-
face: face,
|
|
10507
|
-
scaling: debugScalingDetails,
|
|
10508
|
-
color: satisfied ? 'green' : 'red'
|
|
10509
|
-
});
|
|
10510
|
-
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceNotCentered ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceTooClose && !state.faceTooFar ? '✅' : '❌', " Face", ' ', state.faceTooClose ? 'Too Close' : state.faceTooFar ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceLookingAway ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__namespace.default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
|
|
10511
|
-
onClick: onExit,
|
|
10512
|
-
className: classNames.exitCaptureBtn
|
|
10513
|
-
}));
|
|
10514
|
-
};
|
|
10515
|
-
|
|
10516
|
-
var initialState$2 = {
|
|
10517
|
-
frame: null,
|
|
10518
|
-
face: null,
|
|
10519
|
-
requestState: 'CAPTURING',
|
|
10520
|
-
requestError: null,
|
|
10521
|
-
imageUrl: null,
|
|
10522
|
-
faceLive: false,
|
|
10523
|
-
eyeCoveringDetected: false,
|
|
10524
|
-
maskDetected: false,
|
|
10525
|
-
headCoveringDetected: false,
|
|
10526
|
-
phoneDetected: false,
|
|
10527
|
-
timesLivenessCheckFailed: 0
|
|
10528
|
-
};
|
|
10529
|
-
/** todo: JN - this feels like it should be hoisted up to the wizard because these states of failed and error dovetail into those in the wizard.
|
|
10530
|
-
* There may also be some crossing of wires in how error/failed are used.
|
|
10531
|
-
*/
|
|
10532
|
-
var reducer$2 = function reducer(state, action) {
|
|
10533
|
-
var _a, _b;
|
|
10534
|
-
switch (action.type) {
|
|
10535
|
-
case 'livenessReady':
|
|
10536
|
-
{
|
|
10537
|
-
var allowedStates = ['CAPTURING', 'FAILED', 'ERROR'];
|
|
10538
|
-
if (allowedStates.includes(state.requestState)) {
|
|
10539
|
-
return _assign(_assign({}, state), {
|
|
10540
|
-
requestState: 'CAPTURED',
|
|
10541
|
-
frame: action.payload.frame,
|
|
10542
|
-
face: action.payload.face
|
|
10543
|
-
});
|
|
10544
|
-
} else {
|
|
10545
|
-
return state;
|
|
10546
|
-
}
|
|
10547
|
-
}
|
|
10548
|
-
case 'livenessChecking':
|
|
10549
|
-
return _assign(_assign({}, state), {
|
|
10550
|
-
requestState: 'IN_PROGRESS'
|
|
10551
|
-
});
|
|
10552
|
-
case 'livenessChecked':
|
|
10553
|
-
{
|
|
10554
|
-
var _c = action.payload.response,
|
|
10555
|
-
_d = _c.status,
|
|
10556
|
-
statusCode = _d.statusCode,
|
|
10557
|
-
statusMessage = _d.statusMessage,
|
|
10558
|
-
errorData = _d.errorData,
|
|
10559
|
-
resultData = _c.resultData;
|
|
10560
|
-
if (statusCode !== '000') {
|
|
10561
|
-
return _assign(_assign({}, state), {
|
|
10562
|
-
requestState: 'ERROR',
|
|
10563
|
-
requestError: new Error("".concat(statusMessage, ": ").concat(errorData))
|
|
10564
|
-
});
|
|
10565
|
-
}
|
|
10566
|
-
var faceLive = ['Live Face Detected', 'Approved'].includes(resultData.verificationResult);
|
|
10567
|
-
var eyeCoveringDetected = resultData.eyeCovering === 'true';
|
|
10568
|
-
var maskDetected = resultData.faceMask === 'true';
|
|
10569
|
-
var headCoveringDetected = resultData.headCovering === 'true';
|
|
10570
|
-
var phoneDetected = resultData.cellPhone === 'true';
|
|
10571
|
-
var livenessCheckPassed = faceLive && !eyeCoveringDetected && !maskDetected && !headCoveringDetected;
|
|
10572
|
-
var requestState = livenessCheckPassed ? 'PASSED' : 'FAILED';
|
|
10573
|
-
var timesLivenessCheckFailed = state.timesLivenessCheckFailed;
|
|
10574
|
-
if (livenessCheckPassed) {
|
|
10575
|
-
timesLivenessCheckFailed = 0;
|
|
10576
|
-
} else {
|
|
10577
|
-
timesLivenessCheckFailed += 1;
|
|
10578
|
-
}
|
|
10579
|
-
return _assign(_assign({}, state), {
|
|
10580
|
-
frame: (_a = action.payload.frame) !== null && _a !== void 0 ? _a : null,
|
|
10581
|
-
face: (_b = action.payload.face) !== null && _b !== void 0 ? _b : null,
|
|
10582
|
-
imageUrl: action.payload.imageUrl,
|
|
10583
|
-
requestState: requestState,
|
|
10584
|
-
faceLive: faceLive,
|
|
10585
|
-
eyeCoveringDetected: eyeCoveringDetected,
|
|
10586
|
-
maskDetected: maskDetected,
|
|
10587
|
-
headCoveringDetected: headCoveringDetected,
|
|
10588
|
-
phoneDetected: phoneDetected,
|
|
10589
|
-
timesLivenessCheckFailed: timesLivenessCheckFailed
|
|
10590
|
-
});
|
|
10591
|
-
}
|
|
10592
|
-
case 'livenessCheckFailed':
|
|
10593
|
-
return _assign(_assign({}, state), {
|
|
10594
|
-
requestState: 'ERROR',
|
|
10595
|
-
requestError: action.payload.error
|
|
10596
|
-
});
|
|
10597
|
-
default:
|
|
10598
|
-
return state;
|
|
10599
|
-
}
|
|
10600
|
-
};
|
|
10601
|
-
var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
10602
|
-
var _b, _c, _d;
|
|
10603
|
-
var onCapture = _a.onCapture,
|
|
10604
|
-
onSuccess = _a.onSuccess,
|
|
10605
|
-
onTimeout = _a.onTimeout,
|
|
10606
|
-
onExit = _a.onExit,
|
|
10607
|
-
_e = _a.timeoutDurationMs,
|
|
10608
|
-
timeoutDurationMs = _e === void 0 ? 15000 : _e,
|
|
10609
|
-
_f = _a.silentFallback,
|
|
10610
|
-
silentFallback = _f === void 0 ? false : _f,
|
|
10611
|
-
_g = _a.classNames,
|
|
10612
|
-
classNames = _g === void 0 ? {} : _g,
|
|
10613
|
-
_h = _a.colors,
|
|
10614
|
-
colors = _h === void 0 ? {} : _h,
|
|
10615
|
-
_j = _a.verbiage,
|
|
10616
|
-
rawVerbiage = _j === void 0 ? {} : _j,
|
|
10617
|
-
debugMode = _a.debugMode;
|
|
10618
|
-
var _k = React.useContext(SubmissionContext),
|
|
10619
|
-
checkLiveness = _k.checkLiveness,
|
|
10620
|
-
submissionError = _k.submissionError;
|
|
10621
|
-
var modelError = React.useContext(SelfieGuidanceModelsContext).error;
|
|
10622
|
-
var _l = React.useReducer(reducer$2, initialState$2),
|
|
10623
|
-
state = _l[0],
|
|
10624
|
-
dispatch = _l[1];
|
|
10625
|
-
var _m = React.useState(null),
|
|
10626
|
-
imageUrl = _m[0],
|
|
10627
|
-
setImageUrl = _m[1];
|
|
10628
|
-
var rawCanvas = React.useRef(null);
|
|
10629
|
-
var cropCanvas = React.useRef(null);
|
|
10630
|
-
var resizeCanvas = React.useRef(null);
|
|
10631
|
-
var theme = styled.useTheme();
|
|
10632
|
-
var onSelfieCaptured = React.useCallback(function (frame, face) {
|
|
10633
|
-
onCapture === null || onCapture === void 0 ? void 0 : onCapture();
|
|
10634
|
-
dispatch({
|
|
10635
|
-
type: 'livenessReady',
|
|
10636
|
-
payload: {
|
|
10637
|
-
frame: frame,
|
|
10638
|
-
face: face
|
|
10639
|
-
}
|
|
10640
|
-
});
|
|
10641
|
-
}, [onCapture]);
|
|
10642
|
-
var frame = state.frame,
|
|
10643
|
-
face = state.face;
|
|
10644
|
-
var isReady = state.requestState === 'CAPTURED';
|
|
10645
|
-
var isPassed = state.requestState === 'PASSED';
|
|
10646
|
-
React.useEffect(function checkLivenessIfPossible() {
|
|
10647
|
-
var _this = this;
|
|
10648
|
-
if (!frame || !face || !isReady || submissionError) return;
|
|
10649
|
-
dispatch({
|
|
10650
|
-
type: 'livenessChecking'
|
|
10651
|
-
});
|
|
10652
|
-
(function () {
|
|
10653
|
-
return __awaiter(_this, void 0, void 0, function () {
|
|
10654
|
-
var imageUrl_1, response, _a, e_1;
|
|
10655
|
-
return __generator(this, function (_b) {
|
|
10656
|
-
switch (_b.label) {
|
|
10657
|
-
case 0:
|
|
10658
|
-
_b.trys.push([0, 3,, 4]);
|
|
10659
|
-
imageUrl_1 = cropToShoulders(rawCanvas.current, cropCanvas.current, resizeCanvas.current, frame, face, 0.92, 600);
|
|
10660
|
-
setImageUrl(imageUrl_1);
|
|
10661
|
-
_a = checkLiveness;
|
|
10662
|
-
return [4 /*yield*/, dataUrlToBase64(imageUrl_1)];
|
|
10663
|
-
case 1:
|
|
10664
|
-
return [4 /*yield*/, _a.apply(void 0, [_b.sent()])];
|
|
10665
|
-
case 2:
|
|
10666
|
-
response = _b.sent();
|
|
10667
|
-
dispatch({
|
|
10668
|
-
type: 'livenessChecked',
|
|
10669
|
-
payload: {
|
|
10670
|
-
frame: frame,
|
|
10671
|
-
face: face,
|
|
10672
|
-
imageUrl: imageUrl_1,
|
|
10673
|
-
response: response
|
|
10674
|
-
}
|
|
10675
|
-
});
|
|
10676
|
-
return [3 /*break*/, 4];
|
|
10677
|
-
case 3:
|
|
10678
|
-
e_1 = _b.sent();
|
|
10679
|
-
dispatch({
|
|
10680
|
-
type: 'livenessCheckFailed',
|
|
10681
|
-
payload: {
|
|
10682
|
-
error: e_1
|
|
10683
|
-
}
|
|
10684
|
-
});
|
|
10685
|
-
return [3 /*break*/, 4];
|
|
10686
|
-
case 4:
|
|
10687
|
-
return [2 /*return*/];
|
|
10688
|
-
}
|
|
10689
|
-
});
|
|
10690
|
-
});
|
|
10691
|
-
})();
|
|
10692
|
-
}, [checkLiveness, face, frame, isReady, submissionError]);
|
|
10693
|
-
var onFallbackImageCaptured = React.useCallback(function (imageUrl) {
|
|
10694
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
10695
|
-
var imageData, response, e_2;
|
|
10696
|
-
var _a;
|
|
10697
|
-
return __generator(this, function (_b) {
|
|
10698
|
-
switch (_b.label) {
|
|
10699
|
-
case 0:
|
|
10700
|
-
dispatch({
|
|
10701
|
-
type: 'livenessChecking'
|
|
10702
|
-
});
|
|
10703
|
-
_b.label = 1;
|
|
10704
|
-
case 1:
|
|
10705
|
-
_b.trys.push([1, 4,, 5]);
|
|
10706
|
-
return [4 /*yield*/, dataUrlToBase64(imageUrl)];
|
|
10707
|
-
case 2:
|
|
10708
|
-
imageData = _b.sent();
|
|
10709
|
-
return [4 /*yield*/, checkLiveness(imageData)
|
|
10710
|
-
// todo: JN - this feels dirty and is the reason for the todo around line 83 - but is necessary to handle fallback liveness validation
|
|
10711
|
-
];
|
|
10712
|
-
case 3:
|
|
10713
|
-
response = _b.sent();
|
|
10714
|
-
// todo: JN - this feels dirty and is the reason for the todo around line 83 - but is necessary to handle fallback liveness validation
|
|
10715
|
-
if (((_a = response === null || response === void 0 ? void 0 : response.resultData) === null || _a === void 0 ? void 0 : _a.verificationResult) !== 'Live Face Detected') {
|
|
10716
|
-
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
10717
|
-
}
|
|
10718
|
-
dispatch({
|
|
10719
|
-
type: 'livenessChecked',
|
|
10720
|
-
payload: {
|
|
10721
|
-
imageUrl: imageUrl,
|
|
10722
|
-
response: response
|
|
10723
|
-
}
|
|
10724
|
-
});
|
|
10725
|
-
return [3 /*break*/, 5];
|
|
10726
|
-
case 4:
|
|
10727
|
-
e_2 = _b.sent();
|
|
10728
|
-
dispatch({
|
|
10729
|
-
type: 'livenessCheckFailed',
|
|
10730
|
-
payload: {
|
|
10731
|
-
error: e_2
|
|
10732
|
-
}
|
|
10733
|
-
});
|
|
10734
|
-
return [3 /*break*/, 5];
|
|
10735
|
-
case 5:
|
|
10736
|
-
return [2 /*return*/];
|
|
10737
|
-
}
|
|
10738
|
-
});
|
|
10739
|
-
});
|
|
10740
|
-
}, [checkLiveness, onTimeout]);
|
|
10741
|
-
React.useEffect(function callSuccessIfAvailable() {
|
|
10742
|
-
if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
|
|
10743
|
-
}, [onSuccess, state.imageUrl, isPassed]);
|
|
10744
|
-
React.useEffect(function timeoutOnTooManyLivenessCheckFailures() {
|
|
10745
|
-
if (modelError) return;
|
|
10746
|
-
var allowedFailures = 2;
|
|
10747
|
-
if (state.timesLivenessCheckFailed >= allowedFailures) {
|
|
10748
|
-
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
10749
|
-
}
|
|
10750
|
-
}, [modelError, onTimeout, state.timesLivenessCheckFailed]);
|
|
10751
|
-
useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelError, state.requestState === 'IN_PROGRESS');
|
|
10752
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10753
|
-
guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
|
|
10754
|
-
guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
|
|
10755
|
-
guidanceRemoveMaskText: 'Please remove your mask...',
|
|
10756
|
-
progressPreviewText: 'Processing...'
|
|
10757
|
-
});
|
|
10758
|
-
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
|
|
10759
|
-
if (modelError) {
|
|
10760
|
-
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
10761
|
-
key: state.timesLivenessCheckFailed,
|
|
10762
|
-
onFinished: onFallbackImageCaptured,
|
|
10763
|
-
silentFallback: silentFallback,
|
|
10764
|
-
invalidSelfie: !!state.timesLivenessCheckFailed,
|
|
10765
|
-
guidanceMessage: guidanceMessage
|
|
10766
|
-
});
|
|
10767
|
-
}
|
|
10768
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
10769
|
-
ref: rawCanvas
|
|
10770
|
-
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
10771
|
-
ref: cropCanvas
|
|
10772
|
-
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
10773
|
-
ref: resizeCanvas
|
|
10774
|
-
}), /*#__PURE__*/React__namespace.default.createElement(SelfieCapture, {
|
|
10775
|
-
onSelfieCaptured: onSelfieCaptured,
|
|
10776
|
-
onExit: onExit,
|
|
10777
|
-
timeoutDurationMs: timeoutDurationMs,
|
|
10778
|
-
guidanceMessage: guidanceMessage,
|
|
10779
|
-
guidanceSatisfied: guidanceMessage ? false : undefined,
|
|
10780
|
-
classNames: classNames,
|
|
10781
|
-
colors: colors,
|
|
10782
|
-
verbiage: verbiage,
|
|
10783
|
-
debugMode: debugMode
|
|
10784
|
-
}), !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
|
|
10785
|
-
classNames: classNames.imagePreview,
|
|
10786
|
-
imageUrl: imageUrl,
|
|
10787
|
-
text: (_d = verbiage.progressPreviewText) !== null && _d !== void 0 ? _d : ''
|
|
10788
|
-
})));
|
|
10789
|
-
};
|
|
10790
|
-
|
|
10791
|
-
var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
10792
|
-
var imageUrl = _a.imageUrl,
|
|
10793
|
-
onDoneClick = _a.onDoneClick,
|
|
10794
|
-
onRetryClick = _a.onRetryClick,
|
|
10795
|
-
_b = _a.classNames,
|
|
10796
|
-
classNames = _b === void 0 ? {} : _b,
|
|
10797
|
-
_c = _a.colors,
|
|
10798
|
-
colors = _c === void 0 ? {} : _c,
|
|
10799
|
-
_d = _a.verbiage,
|
|
10800
|
-
rawVerbiage = _d === void 0 ? {} : _d;
|
|
10801
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10802
|
-
headingText: 'Face liveness has been verified!',
|
|
10803
|
-
retryBtnText: 'Retry',
|
|
10804
|
-
doneBtnText: 'Done'
|
|
10805
|
-
});
|
|
10806
|
-
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10807
|
-
className: classNames.container
|
|
10808
|
-
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
10809
|
-
className: classNames.inner
|
|
10810
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$5, {
|
|
10811
|
-
className: classNames.heading
|
|
10812
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
10813
|
-
className: classNames.imageContainer
|
|
10814
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10815
|
-
alt: verbiage.headingText,
|
|
10816
|
-
src: imageUrl,
|
|
10817
|
-
className: classNames.image
|
|
10818
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
10819
|
-
className: classNames.buttonsRow
|
|
10820
|
-
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10821
|
-
variant: "warning",
|
|
10822
|
-
onClick: onRetryClick,
|
|
10823
|
-
colors: colors.retryBtn,
|
|
10824
|
-
className: classNames.retryBtn,
|
|
10825
|
-
finished: true
|
|
10826
|
-
}, verbiage.retryBtnText), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10827
|
-
variant: "positive",
|
|
10828
|
-
onClick: onDoneClick,
|
|
10829
|
-
colors: colors.doneBtn,
|
|
10830
|
-
className: classNames.doneBtn,
|
|
10831
|
-
finished: true
|
|
10832
|
-
}, verbiage.doneBtnText))));
|
|
10833
|
-
};
|
|
10834
|
-
var Heading$5 = styled__default.default.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
10835
|
-
var templateObject_1$i;
|
|
10836
|
-
|
|
10837
|
-
var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
10838
|
-
var _b = _a.canRetry,
|
|
10839
|
-
canRetry = _b === void 0 ? true : _b,
|
|
10840
|
-
onRetryClick = _a.onRetryClick,
|
|
10841
|
-
onExitClick = _a.onExitClick,
|
|
10842
|
-
_c = _a.assets,
|
|
10843
|
-
assets = _c === void 0 ? {} : _c,
|
|
10844
|
-
_d = _a.classNames,
|
|
10845
|
-
classNames = _d === void 0 ? {} : _d,
|
|
10846
|
-
_e = _a.colors,
|
|
10847
|
-
colors = _e === void 0 ? {} : _e,
|
|
10848
|
-
_f = _a.verbiage,
|
|
10849
|
-
rawVerbiage = _f === void 0 ? {} : _f;
|
|
10850
|
-
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
|
|
10851
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10852
|
-
headingText: 'Live face not detected, please try again',
|
|
10853
|
-
retryBtnText: 'Retry',
|
|
10854
|
-
exitBtnText: 'Exit'
|
|
10855
|
-
});
|
|
10856
|
-
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10857
|
-
className: classNames.container
|
|
10858
|
-
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
10859
|
-
className: classNames.inner
|
|
10860
|
-
}, /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10861
|
-
className: classNames.heading
|
|
10862
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ImageContainer$4, {
|
|
10863
|
-
className: classNames.imageContainer
|
|
10864
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10865
|
-
alt: verbiage.headingText,
|
|
10866
|
-
src: assets.imageUrl,
|
|
10867
|
-
className: classNames.image
|
|
10868
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
10869
|
-
className: classNames.buttonsRow
|
|
10870
|
-
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10871
|
-
variant: "warning",
|
|
10872
|
-
className: classNames.retryBtn,
|
|
10873
|
-
onClick: onRetryClick,
|
|
10874
|
-
colors: colors.retryBtn,
|
|
10875
|
-
finished: true
|
|
10876
|
-
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10877
|
-
variant: "secondary",
|
|
10878
|
-
className: classNames.exitBtn,
|
|
10879
|
-
onClick: onExitClick,
|
|
10880
|
-
colors: colors.exitBtn,
|
|
10881
|
-
finished: true
|
|
10882
|
-
}, verbiage.exitBtnText))));
|
|
10883
|
-
};
|
|
10884
|
-
var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n margin: 0 24px;\n"], ["\n max-height: calc(100vh - 185px);\n margin: 0 24px;\n"])));
|
|
10885
|
-
var templateObject_1$h;
|
|
10886
|
-
|
|
10887
|
-
var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
10888
|
-
var _b;
|
|
10889
|
-
var _c = _a.assets,
|
|
10890
|
-
assets = _c === void 0 ? {} : _c,
|
|
10891
|
-
_d = _a.classNames,
|
|
10892
|
-
classNames = _d === void 0 ? {} : _d,
|
|
10893
|
-
_e = _a.colors,
|
|
10894
|
-
colors = _e === void 0 ? {} : _e,
|
|
10895
|
-
_f = _a.verbiage,
|
|
10896
|
-
rawVerbiage = _f === void 0 ? {} : _f;
|
|
10897
|
-
var requestMicrophoneAccess = React.useContext(CameraStateContext).requestMicrophoneAccess;
|
|
10898
|
-
assets.imageUrl || (assets.imageUrl = DEFAULT_CDN_URL + '/microphone-disable-icon.svg');
|
|
10899
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10900
|
-
headingText: 'Your microphone permission is disabled',
|
|
10901
|
-
descriptionText: 'This application requires access to your microphone to continue. ' + 'Please accept the permission once prompted by the browser. ' + 'If the browser does not prompt for microphone permissions, you must go to settings ' + 'and provide microphone access to the current browser.',
|
|
10902
|
-
retryBtnText: 'Retry'
|
|
10903
|
-
});
|
|
10904
|
-
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10905
|
-
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
10906
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner, {
|
|
10907
|
-
className: classNames.inner
|
|
10908
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayImageContainer$1, {
|
|
10909
|
-
className: classNames.imageContainer
|
|
10910
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10911
|
-
src: assets.imageUrl,
|
|
10912
|
-
alt: "",
|
|
10913
|
-
className: classNames.image
|
|
10914
|
-
})), /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10915
|
-
className: classNames.heading
|
|
10916
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$1, {
|
|
10917
|
-
className: classNames.description
|
|
10918
|
-
}, verbiage.descriptionText), /*#__PURE__*/React__namespace.default.createElement(RetryButton, {
|
|
10919
|
-
variant: "warning",
|
|
10920
|
-
onClick: requestMicrophoneAccess,
|
|
10921
|
-
colors: colors.retryBtn,
|
|
10922
|
-
className: classNames.retryBtn,
|
|
10923
|
-
finished: true
|
|
10924
|
-
}, verbiage.retryBtnText)));
|
|
10925
|
-
};
|
|
10926
|
-
var StyledOverlayInner = styled__default.default(OverlayInner$2)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
10927
|
-
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
10928
|
-
var Description$1 = styled__default.default.p(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
10929
|
-
var RetryButton = styled__default.default(LoaderButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
10930
|
-
var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$6;
|
|
10931
|
-
|
|
10932
|
-
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
10933
|
-
var onDismissed = _a.onDismissed,
|
|
10934
|
-
onUserCancel = _a.onUserCancel,
|
|
10935
|
-
_b = _a.assets,
|
|
10936
|
-
assets = _b === void 0 ? {} : _b,
|
|
10937
|
-
_c = _a.classNames,
|
|
10938
|
-
classNames = _c === void 0 ? {} : _c,
|
|
10939
|
-
_d = _a.colors,
|
|
10940
|
-
colors = _d === void 0 ? {} : _d,
|
|
10941
|
-
_e = _a.verbiage,
|
|
10942
|
-
rawVerbiage = _e === void 0 ? {} : _e;
|
|
10943
|
-
var _f = React.useContext(CameraStateContext),
|
|
10944
|
-
cameraReady = _f.cameraReady,
|
|
10945
|
-
cameraAccessDenied = _f.cameraAccessDenied,
|
|
10946
|
-
microphoneAccessDenied = _f.microphoneAccessDenied;
|
|
10947
|
-
var _g = React.useContext(SelfieGuidanceModelsContext),
|
|
10948
|
-
modelsReady = _g.ready,
|
|
10949
|
-
modelDownloadProgress = _g.modelDownloadProgress;
|
|
10950
|
-
assets.instructionImageUrl || (assets.instructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png"));
|
|
10951
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10952
|
-
headingText: 'Use your device camera to capture your face',
|
|
10953
|
-
removeEyeCoveringsText: 'Remove Sunglasses & Hat',
|
|
10954
|
-
avoidExcessiveBacklightingText: 'Avoid Excessive Backlighting',
|
|
10955
|
-
continueText: 'Continue',
|
|
10956
|
-
cameraInitializingText: 'Camera initializing...',
|
|
10957
|
-
downloadingText: 'Downloading...',
|
|
10958
|
-
modelsWarmingUpText: 'Models warming up...'
|
|
10959
|
-
});
|
|
10960
|
-
var _h = React.useState(false),
|
|
10961
|
-
dismissed = _h[0],
|
|
10962
|
-
setDismissed = _h[1];
|
|
10963
|
-
if (dismissed) return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null);
|
|
10964
|
-
if (cameraAccessDenied) {
|
|
10965
|
-
return /*#__PURE__*/React__namespace.default.createElement(CameraAccessDeniedOverlay, {
|
|
10966
|
-
assets: assets.cameraAccessDenied,
|
|
10967
|
-
classNames: classNames.cameraAccessDenied,
|
|
10968
|
-
colors: colors.cameraAccessDenied,
|
|
10969
|
-
verbiage: rawVerbiage.cameraAccessDenied
|
|
10970
|
-
});
|
|
10971
|
-
}
|
|
10972
|
-
if (microphoneAccessDenied) {
|
|
10973
|
-
return /*#__PURE__*/React__namespace.default.createElement(MicrophoneAccessDeniedOverlay, {
|
|
10974
|
-
assets: assets.microphoneAccessDenied,
|
|
10975
|
-
classNames: classNames.microphoneAccessDenied,
|
|
10976
|
-
colors: colors.microphoneAccessDenied,
|
|
10977
|
-
verbiage: rawVerbiage.microphoneAccessDenied
|
|
10978
|
-
});
|
|
10979
|
-
}
|
|
10980
|
-
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10981
|
-
className: classNames.container
|
|
10982
|
-
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
10983
|
-
className: classNames.inner
|
|
10984
|
-
}, /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10985
|
-
className: classNames.heading
|
|
10986
|
-
}, verbiage.headingText), onUserCancel && ( /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
|
|
10987
|
-
onClick: onUserCancel,
|
|
10988
|
-
className: classNames.cancelBtn
|
|
10989
|
-
})), /*#__PURE__*/React__namespace.default.createElement(StyledGuidanceMessage$1, null, verbiage.removeEyeCoveringsText, /*#__PURE__*/React__namespace.default.createElement("br", null), verbiage.avoidExcessiveBacklightingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
10990
|
-
className: classNames.imageContainer
|
|
10991
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10992
|
-
className: classNames.image,
|
|
10993
|
-
alt: verbiage.headingText,
|
|
10994
|
-
src: assets.instructionImageUrl
|
|
10995
|
-
})), /*#__PURE__*/React__namespace.default.createElement(StyledButtonsRow$6, {
|
|
10996
|
-
className: classNames.buttonsRow
|
|
10997
|
-
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10998
|
-
variant: "positive",
|
|
10999
|
-
disabled: !cameraReady || !modelsReady,
|
|
11000
|
-
finished: cameraReady && modelsReady,
|
|
11001
|
-
className: classNames.continueBtn,
|
|
11002
|
-
colors: colors.continueBtn,
|
|
11003
|
-
onClick: function onClick() {
|
|
11004
|
-
setDismissed(true);
|
|
11005
|
-
onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
|
|
11006
|
-
}
|
|
11007
|
-
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
11008
|
-
};
|
|
11009
|
-
var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 12px 24px;\n font-weight: normal;\n line-height: 1.5;\n margin-bottom: -30px;\n"], ["\n padding: 12px 24px;\n font-weight: normal;\n line-height: 1.5;\n margin-bottom: -30px;\n"])));
|
|
11010
|
-
var StyledButtonsRow$6 = styled__default.default(ButtonsRow)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n flex-direction: column;\n padding-top: 25px;\n"], ["\n flex-direction: column;\n padding-top: 25px;\n"])));
|
|
11011
|
-
var templateObject_1$f, templateObject_2$b;
|
|
11012
|
-
|
|
11013
|
-
function SelfieCaptureLoadingGraphic(_a) {
|
|
11014
|
-
var _b, _c, _d;
|
|
11015
|
-
var _e = _a.width,
|
|
11016
|
-
width = _e === void 0 ? 840 : _e,
|
|
11017
|
-
_f = _a.height,
|
|
11018
|
-
height = _f === void 0 ? 740 : _f,
|
|
11019
|
-
className = _a.className;
|
|
11020
|
-
var _g = React.useState(1),
|
|
11021
|
-
frame = _g[0],
|
|
11022
|
-
setFrame = _g[1];
|
|
11023
|
-
React.useEffect(function () {
|
|
11024
|
-
var i = setInterval(function () {
|
|
11025
|
-
setFrame(function (n) {
|
|
11026
|
-
return (n + 1) % 10;
|
|
11027
|
-
});
|
|
11028
|
-
}, 750);
|
|
11029
|
-
return function () {
|
|
11030
|
-
clearInterval(i);
|
|
10015
|
+
clearInterval(i);
|
|
11031
10016
|
};
|
|
11032
10017
|
}, []);
|
|
11033
10018
|
var theme = styled.useTheme();
|
|
11034
|
-
var
|
|
10019
|
+
var satisfiedColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c.satisfiedColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
11035
10020
|
return /*#__PURE__*/React__namespace.default.createElement("svg", {
|
|
11036
10021
|
width: width,
|
|
11037
10022
|
height: height,
|
|
@@ -11090,13 +10075,13 @@ function SelfieCaptureLoadingGraphic(_a) {
|
|
|
11090
10075
|
fill: "#525252"
|
|
11091
10076
|
})), frame >= 8 ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11092
10077
|
d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
|
|
11093
|
-
stroke:
|
|
10078
|
+
stroke: satisfiedColor,
|
|
11094
10079
|
strokeWidth: "5"
|
|
11095
10080
|
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11096
10081
|
cx: "518.5",
|
|
11097
10082
|
cy: "438.5",
|
|
11098
10083
|
r: "25.5",
|
|
11099
|
-
fill:
|
|
10084
|
+
fill: satisfiedColor
|
|
11100
10085
|
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11101
10086
|
d: "M504 440.5L512 448L531 427",
|
|
11102
10087
|
stroke: "white",
|
|
@@ -11273,6 +10258,1483 @@ function SelfieCaptureLoadingGraphic(_a) {
|
|
|
11273
10258
|
fill: "white"
|
|
11274
10259
|
}))));
|
|
11275
10260
|
}
|
|
10261
|
+
var HeadGuideSvg = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
10262
|
+
var _b = _a.borderColor,
|
|
10263
|
+
borderColor = _b === void 0 ? 'white' : _b,
|
|
10264
|
+
_c = _a.borderOpacity,
|
|
10265
|
+
borderOpacity = _c === void 0 ? 0.8 : _c,
|
|
10266
|
+
_d = _a.borderWidth,
|
|
10267
|
+
borderWidth = _d === void 0 ? 5 : _d,
|
|
10268
|
+
_e = _a.status,
|
|
10269
|
+
status = _e === void 0 ? 'ready' : _e,
|
|
10270
|
+
props = __rest(_a, ["borderColor", "borderOpacity", "borderWidth", "status"]);
|
|
10271
|
+
return /*#__PURE__*/React__namespace.default.createElement("svg", _assign({}, props, {
|
|
10272
|
+
ref: ref,
|
|
10273
|
+
viewBox: "271 92 297 406",
|
|
10274
|
+
fill: "none",
|
|
10275
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
10276
|
+
}), /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10277
|
+
clipPath: "url(#clip0_428_1188)"
|
|
10278
|
+
}, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10279
|
+
d: "M565.5 295C565.5 350.583 549.016 400.803 522.488 437.067C495.958 473.332 459.517 495.5 419.5 495.5C379.483 495.5 343.042 473.332 316.512 437.067C289.984 400.803 273.5 350.583 273.5 295C273.5 239.417 289.984 189.197 316.512 152.933C343.042 116.668 379.483 94.5 419.5 94.5C459.517 94.5 495.958 116.668 522.488 152.933C549.016 189.197 565.5 239.417 565.5 295Z",
|
|
10280
|
+
stroke: borderColor,
|
|
10281
|
+
strokeOpacity: borderOpacity,
|
|
10282
|
+
strokeWidth: borderWidth
|
|
10283
|
+
}), status === 'success' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10284
|
+
cx: "518.5",
|
|
10285
|
+
cy: "438.5",
|
|
10286
|
+
r: "25.5",
|
|
10287
|
+
fill: borderColor
|
|
10288
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10289
|
+
d: "M504 440.5L512 448L531 427",
|
|
10290
|
+
stroke: "white",
|
|
10291
|
+
strokeWidth: "5",
|
|
10292
|
+
strokeLinecap: "round",
|
|
10293
|
+
strokeLinejoin: "round"
|
|
10294
|
+
}))), status === 'failure' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10295
|
+
cx: "518.5",
|
|
10296
|
+
cy: "438.5",
|
|
10297
|
+
r: "25.5",
|
|
10298
|
+
fill: borderColor
|
|
10299
|
+
}), /*#__PURE__*/React__namespace.default.createElement("image", {
|
|
10300
|
+
href: "https://websdk-cdn-dev.idmission.com/assets/x.svg",
|
|
10301
|
+
x: "507",
|
|
10302
|
+
y: "427",
|
|
10303
|
+
width: "24",
|
|
10304
|
+
height: "24"
|
|
10305
|
+
})))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
10306
|
+
id: "clip0_428_1188"
|
|
10307
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10308
|
+
width: "840",
|
|
10309
|
+
height: "740",
|
|
10310
|
+
fill: "white"
|
|
10311
|
+
}))));
|
|
10312
|
+
});
|
|
10313
|
+
HeadGuideSvg.displayName = 'HeadGuideSvg';
|
|
10314
|
+
var PulsingHeadGuideContainer = styled__default.default.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n position: absolute;\n left: 0;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n & > .pulseOrigin {\n position: relative;\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"], ["\n display: flex;\n position: absolute;\n left: 0;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n & > .pulseOrigin {\n position: relative;\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"])));
|
|
10315
|
+
function HeadGuide(_a) {
|
|
10316
|
+
var _b;
|
|
10317
|
+
var _c = _a.status,
|
|
10318
|
+
status = _c === void 0 ? 'ready' : _c,
|
|
10319
|
+
props = __rest(_a, ["status"]);
|
|
10320
|
+
var ref = React.useRef(null);
|
|
10321
|
+
var parentRef = React.useRef(null);
|
|
10322
|
+
var _d = React.useState(undefined),
|
|
10323
|
+
refBox = _d[0],
|
|
10324
|
+
setRefBox = _d[1];
|
|
10325
|
+
React.useLayoutEffect(function () {
|
|
10326
|
+
if (!ref.current || !parentRef.current) return;
|
|
10327
|
+
var box = ref.current.getBoundingClientRect();
|
|
10328
|
+
var parentBox = parentRef.current.getBoundingClientRect();
|
|
10329
|
+
setRefBox(_assign(_assign({}, box), {
|
|
10330
|
+
top: box.top - parentBox.top,
|
|
10331
|
+
left: box.left - parentBox.left
|
|
10332
|
+
}));
|
|
10333
|
+
}, []);
|
|
10334
|
+
return /*#__PURE__*/React__namespace.default.createElement(PulsingHeadGuideContainer, {
|
|
10335
|
+
ref: parentRef
|
|
10336
|
+
}, status === 'ready' && refBox && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10337
|
+
className: "pulse",
|
|
10338
|
+
borderOpacity: 0.25,
|
|
10339
|
+
borderColor: "#287ec6",
|
|
10340
|
+
style: refBox
|
|
10341
|
+
})), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10342
|
+
className: "pulse",
|
|
10343
|
+
borderOpacity: 0.25,
|
|
10344
|
+
borderColor: "#287ec6",
|
|
10345
|
+
style: refBox
|
|
10346
|
+
})), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10347
|
+
className: "pulse",
|
|
10348
|
+
borderOpacity: 0.25,
|
|
10349
|
+
borderColor: "#287ec6",
|
|
10350
|
+
style: refBox
|
|
10351
|
+
})))), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10352
|
+
ref: ref,
|
|
10353
|
+
borderOpacity: 1,
|
|
10354
|
+
className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
|
|
10355
|
+
status: status
|
|
10356
|
+
})));
|
|
10357
|
+
}
|
|
10358
|
+
var RelativeSvg = styled__default.default.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
10359
|
+
var RelativeSvgContainer = styled__default.default.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"])), function (props) {
|
|
10360
|
+
return props.$verticalAlign;
|
|
10361
|
+
});
|
|
10362
|
+
function SelfieCaptureAnimatedMask(_a) {
|
|
10363
|
+
var _b, _c, _d, _e, _f, _g, _h;
|
|
10364
|
+
var _j = _a.frame,
|
|
10365
|
+
frame = _j === void 0 ? 0 : _j,
|
|
10366
|
+
_k = _a.borderWidth,
|
|
10367
|
+
borderWidth = _k === void 0 ? 5 : _k,
|
|
10368
|
+
_l = _a.borderColor,
|
|
10369
|
+
borderColor = _l === void 0 ? 'white' : _l,
|
|
10370
|
+
_m = _a.borderOpacity,
|
|
10371
|
+
borderOpacity = _m === void 0 ? 0.8 : _m,
|
|
10372
|
+
_o = _a.verticalAlign,
|
|
10373
|
+
verticalAlign = _o === void 0 ? 'center' : _o,
|
|
10374
|
+
_p = _a.status,
|
|
10375
|
+
status = _p === void 0 ? 'ready' : _p,
|
|
10376
|
+
props = __rest(_a, ["frame", "borderWidth", "borderColor", "borderOpacity", "verticalAlign", "status"]);
|
|
10377
|
+
var ref = React.useRef(null);
|
|
10378
|
+
var theme = styled.useTheme();
|
|
10379
|
+
var satisfiedColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c.satisfiedColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
10380
|
+
var negativeColor = (_g = (_f = (_e = theme.selfieCapture) === null || _e === void 0 ? void 0 : _e.guides) === null || _f === void 0 ? void 0 : _f.failureColor) !== null && _g !== void 0 ? _g : 'var(--idm-color-negative-600)';
|
|
10381
|
+
var statusBorderColor = status === 'failure' ? negativeColor : status === 'success' ? satisfiedColor : borderColor;
|
|
10382
|
+
return /*#__PURE__*/React__namespace.default.createElement(RelativeSvgContainer, {
|
|
10383
|
+
"$verticalAlign": verticalAlign
|
|
10384
|
+
}, /*#__PURE__*/React__namespace.default.createElement(HeadGuide, _assign({
|
|
10385
|
+
ref: ref,
|
|
10386
|
+
borderOpacity: borderOpacity,
|
|
10387
|
+
borderWidth: borderWidth,
|
|
10388
|
+
borderColor: statusBorderColor,
|
|
10389
|
+
status: status
|
|
10390
|
+
}, props)), /*#__PURE__*/React__namespace.default.createElement(RelativeSvg, _assign({}, props, {
|
|
10391
|
+
viewBox: "271 92 297 406",
|
|
10392
|
+
fill: "none",
|
|
10393
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10394
|
+
style: _assign(_assign({}, props.style), (_h = ref.current) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect())
|
|
10395
|
+
}), status === 'processing' && ( /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10396
|
+
clipPath: "url(#clip0_428_1188)"
|
|
10397
|
+
}, frame > 1 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, frame > 2 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, frame > 3 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, frame > 4 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10398
|
+
d: "M298.5 182.5L419 164.5L540 182",
|
|
10399
|
+
stroke: "white",
|
|
10400
|
+
strokeWidth: "2",
|
|
10401
|
+
strokeLinecap: "round",
|
|
10402
|
+
strokeLinejoin: "round"
|
|
10403
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10404
|
+
cx: "419",
|
|
10405
|
+
cy: "165",
|
|
10406
|
+
r: "7",
|
|
10407
|
+
fill: "white"
|
|
10408
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10409
|
+
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
10410
|
+
stroke: "white",
|
|
10411
|
+
strokeWidth: "2",
|
|
10412
|
+
strokeLinecap: "round",
|
|
10413
|
+
strokeLinejoin: "round"
|
|
10414
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10415
|
+
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
10416
|
+
stroke: "white",
|
|
10417
|
+
strokeWidth: "2",
|
|
10418
|
+
strokeLinecap: "round",
|
|
10419
|
+
strokeLinejoin: "round"
|
|
10420
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10421
|
+
d: "M298.5 182.5L299.939 262.805",
|
|
10422
|
+
stroke: "white",
|
|
10423
|
+
strokeWidth: "2",
|
|
10424
|
+
strokeLinecap: "round",
|
|
10425
|
+
strokeLinejoin: "round"
|
|
10426
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10427
|
+
d: "M540.001 182L538.501 261.5",
|
|
10428
|
+
stroke: "white",
|
|
10429
|
+
strokeWidth: "2",
|
|
10430
|
+
strokeLinecap: "round",
|
|
10431
|
+
strokeLinejoin: "round"
|
|
10432
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10433
|
+
cx: "299.914",
|
|
10434
|
+
cy: "182",
|
|
10435
|
+
r: "7",
|
|
10436
|
+
fill: "white"
|
|
10437
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10438
|
+
cx: "540",
|
|
10439
|
+
cy: "182",
|
|
10440
|
+
r: "7",
|
|
10441
|
+
fill: "white"
|
|
10442
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10443
|
+
d: "M418.828 230L419 342.5",
|
|
10444
|
+
stroke: "white",
|
|
10445
|
+
strokeWidth: "2",
|
|
10446
|
+
strokeLinecap: "round",
|
|
10447
|
+
strokeLinejoin: "round",
|
|
10448
|
+
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10449
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10450
|
+
d: "M300 263.001L419 342.501",
|
|
10451
|
+
stroke: "white",
|
|
10452
|
+
strokeWidth: "2",
|
|
10453
|
+
strokeLinecap: "round",
|
|
10454
|
+
strokeLinejoin: "round",
|
|
10455
|
+
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10456
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10457
|
+
d: "M538.5 261.5L419 342.5",
|
|
10458
|
+
stroke: "white",
|
|
10459
|
+
strokeWidth: "2",
|
|
10460
|
+
strokeLinecap: "round",
|
|
10461
|
+
strokeLinejoin: "round",
|
|
10462
|
+
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10463
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10464
|
+
d: "M301.5 409L419 342.5",
|
|
10465
|
+
stroke: "white",
|
|
10466
|
+
strokeWidth: "2",
|
|
10467
|
+
strokeLinecap: "round",
|
|
10468
|
+
strokeLinejoin: "round",
|
|
10469
|
+
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10470
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10471
|
+
d: "M536.5 410L419 342.5",
|
|
10472
|
+
stroke: "white",
|
|
10473
|
+
strokeWidth: "2",
|
|
10474
|
+
strokeLinecap: "round",
|
|
10475
|
+
strokeLinejoin: "round",
|
|
10476
|
+
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10477
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10478
|
+
d: "M300 263L419 230",
|
|
10479
|
+
stroke: "white",
|
|
10480
|
+
strokeWidth: "2",
|
|
10481
|
+
strokeLinecap: "round",
|
|
10482
|
+
strokeLinejoin: "round",
|
|
10483
|
+
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10484
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10485
|
+
d: "M538.5 261.5L419 230",
|
|
10486
|
+
stroke: "white",
|
|
10487
|
+
strokeWidth: "2",
|
|
10488
|
+
strokeLinecap: "round",
|
|
10489
|
+
strokeLinejoin: "round",
|
|
10490
|
+
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10491
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10492
|
+
cx: "419",
|
|
10493
|
+
cy: "229.971",
|
|
10494
|
+
r: "7",
|
|
10495
|
+
fill: "white"
|
|
10496
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10497
|
+
cx: "419",
|
|
10498
|
+
cy: "342.4",
|
|
10499
|
+
r: "7",
|
|
10500
|
+
fill: "white"
|
|
10501
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10502
|
+
d: "M538.5 261.5L536.5 410",
|
|
10503
|
+
stroke: "white",
|
|
10504
|
+
strokeWidth: "2",
|
|
10505
|
+
strokeLinecap: "round",
|
|
10506
|
+
strokeLinejoin: "round",
|
|
10507
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10508
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10509
|
+
d: "M419 478.5L536.5 410",
|
|
10510
|
+
stroke: "white",
|
|
10511
|
+
strokeWidth: "2",
|
|
10512
|
+
strokeLinecap: "round",
|
|
10513
|
+
strokeLinejoin: "round",
|
|
10514
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10515
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10516
|
+
cx: "537",
|
|
10517
|
+
cy: "263",
|
|
10518
|
+
r: "7",
|
|
10519
|
+
fill: "white"
|
|
10520
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10521
|
+
cx: "537",
|
|
10522
|
+
cy: "409",
|
|
10523
|
+
r: "7",
|
|
10524
|
+
fill: "white"
|
|
10525
|
+
}))), frame > 0 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10526
|
+
d: "M301.501 409L300.001 263",
|
|
10527
|
+
stroke: "white",
|
|
10528
|
+
strokeWidth: "2",
|
|
10529
|
+
strokeLinecap: "round",
|
|
10530
|
+
strokeLinejoin: "round",
|
|
10531
|
+
strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
|
|
10532
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10533
|
+
d: "M301.501 409L419.001 478.5",
|
|
10534
|
+
stroke: "white",
|
|
10535
|
+
strokeWidth: "2",
|
|
10536
|
+
strokeLinecap: "round",
|
|
10537
|
+
strokeLinejoin: "round",
|
|
10538
|
+
strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
|
|
10539
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10540
|
+
cx: "419",
|
|
10541
|
+
cy: "477.576",
|
|
10542
|
+
r: "7",
|
|
10543
|
+
fill: "white"
|
|
10544
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10545
|
+
cx: "301.914",
|
|
10546
|
+
cy: "263",
|
|
10547
|
+
r: "7",
|
|
10548
|
+
fill: "white"
|
|
10549
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10550
|
+
cx: "301.444",
|
|
10551
|
+
cy: "409",
|
|
10552
|
+
r: "7",
|
|
10553
|
+
fill: "white"
|
|
10554
|
+
}))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
10555
|
+
id: "clip0_428_1188"
|
|
10556
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10557
|
+
width: "840",
|
|
10558
|
+
height: "740",
|
|
10559
|
+
fill: "white"
|
|
10560
|
+
})))));
|
|
10561
|
+
}
|
|
10562
|
+
function SelfieCaptureAnimatedMaskWithStatus(_a) {
|
|
10563
|
+
var _b = _a.status,
|
|
10564
|
+
status = _b === void 0 ? 'ready' : _b,
|
|
10565
|
+
props = __rest(_a, ["status"]);
|
|
10566
|
+
var _c = React.useState(1),
|
|
10567
|
+
frame = _c[0],
|
|
10568
|
+
setFrame = _c[1];
|
|
10569
|
+
React.useEffect(function () {
|
|
10570
|
+
if (status !== 'processing') {
|
|
10571
|
+
setFrame(0);
|
|
10572
|
+
return;
|
|
10573
|
+
}
|
|
10574
|
+
setFrame(1);
|
|
10575
|
+
var interval = setInterval(function () {
|
|
10576
|
+
setFrame(function (n) {
|
|
10577
|
+
return (n + 1) % 6;
|
|
10578
|
+
});
|
|
10579
|
+
}, 250);
|
|
10580
|
+
return function () {
|
|
10581
|
+
clearInterval(interval);
|
|
10582
|
+
};
|
|
10583
|
+
}, [status]);
|
|
10584
|
+
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
|
|
10585
|
+
frame: frame,
|
|
10586
|
+
status: status
|
|
10587
|
+
}));
|
|
10588
|
+
}
|
|
10589
|
+
var templateObject_1$m, templateObject_2$h, templateObject_3$f;
|
|
10590
|
+
|
|
10591
|
+
var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"
|
|
10592
|
+
// const FaceCaptureGuideOval = styled.div<{
|
|
10593
|
+
// $variant: FaceCaptureGuideOverlayVariant
|
|
10594
|
+
// $borderWidth: number
|
|
10595
|
+
// $borderColor?: string
|
|
10596
|
+
// }>`
|
|
10597
|
+
// border-width: ${(props) => props.$borderWidth}px;
|
|
10598
|
+
// border-color: ${(props) =>
|
|
10599
|
+
// props.$borderColor ??
|
|
10600
|
+
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
10601
|
+
// 'white'};
|
|
10602
|
+
// border-style: solid;
|
|
10603
|
+
// border-radius: 50%;
|
|
10604
|
+
// aspect-ratio: 1 / 1.618;
|
|
10605
|
+
// height: 50%;
|
|
10606
|
+
// margin: auto;
|
|
10607
|
+
// `
|
|
10608
|
+
])));
|
|
10609
|
+
// const FaceCaptureGuideOval = styled.div<{
|
|
10610
|
+
// $variant: FaceCaptureGuideOverlayVariant
|
|
10611
|
+
// $borderWidth: number
|
|
10612
|
+
// $borderColor?: string
|
|
10613
|
+
// }>`
|
|
10614
|
+
// border-width: ${(props) => props.$borderWidth}px;
|
|
10615
|
+
// border-color: ${(props) =>
|
|
10616
|
+
// props.$borderColor ??
|
|
10617
|
+
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
10618
|
+
// 'white'};
|
|
10619
|
+
// border-style: solid;
|
|
10620
|
+
// border-radius: 50%;
|
|
10621
|
+
// aspect-ratio: 1 / 1.618;
|
|
10622
|
+
// height: 50%;
|
|
10623
|
+
// margin: auto;
|
|
10624
|
+
// `
|
|
10625
|
+
var StyledSelfieCaptureAnimatedMask$1 = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n max-width: 100%;\n max-height: 100%;\n height: 60%;\n"], ["\n max-width: 100%;\n max-height: 100%;\n height: 60%;\n"])));
|
|
10626
|
+
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10627
|
+
var _b = _a.classNames,
|
|
10628
|
+
classNames = _b === void 0 ? {} : _b,
|
|
10629
|
+
_c = _a.status,
|
|
10630
|
+
status = _c === void 0 ? 'ready' : _c,
|
|
10631
|
+
_d = _a.borderWidth,
|
|
10632
|
+
borderWidth = _d === void 0 ? 5 : _d,
|
|
10633
|
+
_e = _a.borderColor,
|
|
10634
|
+
borderColor = _e === void 0 ? 'white' : _e,
|
|
10635
|
+
_f = _a.borderOpacity,
|
|
10636
|
+
borderOpacity = _f === void 0 ? 0.8 : _f;
|
|
10637
|
+
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10638
|
+
className: classNames.container
|
|
10639
|
+
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$1, {
|
|
10640
|
+
status: status,
|
|
10641
|
+
borderColor: borderColor,
|
|
10642
|
+
borderWidth: borderWidth,
|
|
10643
|
+
borderOpacity: borderOpacity,
|
|
10644
|
+
verticalAlign: "center"
|
|
10645
|
+
}));
|
|
10646
|
+
};
|
|
10647
|
+
var templateObject_1$l, templateObject_2$g;
|
|
10648
|
+
|
|
10649
|
+
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10650
|
+
start: function start() {
|
|
10651
|
+
return null;
|
|
10652
|
+
},
|
|
10653
|
+
stop: function stop() {
|
|
10654
|
+
return null;
|
|
10655
|
+
},
|
|
10656
|
+
onPredictionMade: function onPredictionMade() {
|
|
10657
|
+
return null;
|
|
10658
|
+
},
|
|
10659
|
+
canvasRef: {
|
|
10660
|
+
current: null
|
|
10661
|
+
},
|
|
10662
|
+
ready: false,
|
|
10663
|
+
error: null,
|
|
10664
|
+
modelDownloadProgress: 0
|
|
10665
|
+
});
|
|
10666
|
+
function SelfieGuidanceModelsProvider(_a) {
|
|
10667
|
+
var _this = this;
|
|
10668
|
+
var _b = _a.autoStart,
|
|
10669
|
+
autoStart = _b === void 0 ? true : _b,
|
|
10670
|
+
children = _a.children,
|
|
10671
|
+
throttleMs = _a.throttleMs,
|
|
10672
|
+
onModelError = _a.onModelError,
|
|
10673
|
+
_c = _a.modelLoadTimeoutMs,
|
|
10674
|
+
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10675
|
+
var _d = React.useContext(CameraStateContext),
|
|
10676
|
+
videoRef = _d.videoRef,
|
|
10677
|
+
videoLoaded = _d.videoLoaded,
|
|
10678
|
+
cameraReady = _d.cameraReady;
|
|
10679
|
+
var canvasRef = React.useRef(null);
|
|
10680
|
+
var onPredictionHandler = React.useRef();
|
|
10681
|
+
var _e = useLoadFaceDetector({
|
|
10682
|
+
onModelError: onModelError,
|
|
10683
|
+
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10684
|
+
}),
|
|
10685
|
+
detector = _e.detector,
|
|
10686
|
+
ready = _e.ready,
|
|
10687
|
+
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10688
|
+
modelError = _e.modelError;
|
|
10689
|
+
var _f = useFrameLoop(React.useCallback(function () {
|
|
10690
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
10691
|
+
var vw, vh, ctx, faces, e_1;
|
|
10692
|
+
var _a;
|
|
10693
|
+
return __generator(this, function (_b) {
|
|
10694
|
+
switch (_b.label) {
|
|
10695
|
+
case 0:
|
|
10696
|
+
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10697
|
+
vw = videoRef.current.videoWidth;
|
|
10698
|
+
vh = videoRef.current.videoHeight;
|
|
10699
|
+
ctx = canvasRef.current.getContext('2d');
|
|
10700
|
+
canvasRef.current.width = vw;
|
|
10701
|
+
canvasRef.current.height = vh;
|
|
10702
|
+
if (!(ctx && videoRef.current.readyState === 4)) return [3 /*break*/, 4];
|
|
10703
|
+
ctx.translate(vw, 0);
|
|
10704
|
+
ctx.scale(-1, 1);
|
|
10705
|
+
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10706
|
+
_b.label = 1;
|
|
10707
|
+
case 1:
|
|
10708
|
+
_b.trys.push([1, 3,, 4]);
|
|
10709
|
+
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10710
|
+
return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces)];
|
|
10711
|
+
case 2:
|
|
10712
|
+
_b.sent();
|
|
10713
|
+
return [3 /*break*/, 4];
|
|
10714
|
+
case 3:
|
|
10715
|
+
e_1 = _b.sent();
|
|
10716
|
+
error('caught face detection error', e_1);
|
|
10717
|
+
return [3 /*break*/, 4];
|
|
10718
|
+
case 4:
|
|
10719
|
+
return [2 /*return*/];
|
|
10720
|
+
}
|
|
10721
|
+
});
|
|
10722
|
+
});
|
|
10723
|
+
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10724
|
+
throttleMs: throttleMs,
|
|
10725
|
+
autoStart: autoStart
|
|
10726
|
+
}),
|
|
10727
|
+
start = _f.start,
|
|
10728
|
+
stop = _f.stop;
|
|
10729
|
+
var onPredictionMade = React.useCallback(function (handler) {
|
|
10730
|
+
onPredictionHandler.current = handler;
|
|
10731
|
+
}, []);
|
|
10732
|
+
var value = React.useMemo(function () {
|
|
10733
|
+
return {
|
|
10734
|
+
start: start,
|
|
10735
|
+
stop: stop,
|
|
10736
|
+
ready: ready,
|
|
10737
|
+
canvasRef: canvasRef,
|
|
10738
|
+
onPredictionMade: onPredictionMade,
|
|
10739
|
+
error: modelError,
|
|
10740
|
+
modelDownloadProgress: modelDownloadProgress
|
|
10741
|
+
};
|
|
10742
|
+
}, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
|
|
10743
|
+
return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
|
|
10744
|
+
value: value
|
|
10745
|
+
}, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
|
|
10746
|
+
ref: canvasRef
|
|
10747
|
+
}), children);
|
|
10748
|
+
}
|
|
10749
|
+
|
|
10750
|
+
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
10751
|
+
if (shouldStart === void 0) {
|
|
10752
|
+
shouldStart = true;
|
|
10753
|
+
}
|
|
10754
|
+
var _a = React.useState(false),
|
|
10755
|
+
timedOut = _a[0],
|
|
10756
|
+
setTimedOut = _a[1];
|
|
10757
|
+
var _b = React.useState(),
|
|
10758
|
+
timeoutStartedAt = _b[0],
|
|
10759
|
+
setTimeoutStartedAt = _b[1];
|
|
10760
|
+
React.useEffect(function () {
|
|
10761
|
+
if (!durationMs || !shouldStart) return;
|
|
10762
|
+
setTimeoutStartedAt(new Date());
|
|
10763
|
+
var timer = setTimeout(function () {
|
|
10764
|
+
setTimedOut(true);
|
|
10765
|
+
}, durationMs);
|
|
10766
|
+
return function () {
|
|
10767
|
+
if (timer) clearTimeout(timer);
|
|
10768
|
+
};
|
|
10769
|
+
}, [durationMs, shouldStart]);
|
|
10770
|
+
React.useEffect(function () {
|
|
10771
|
+
if (!timedOut || timeoutAverted) return;
|
|
10772
|
+
if (!shouldWaitLonger) {
|
|
10773
|
+
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
10774
|
+
return;
|
|
10775
|
+
}
|
|
10776
|
+
var t = setTimeout(function () {
|
|
10777
|
+
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
10778
|
+
}, 120000);
|
|
10779
|
+
return function () {
|
|
10780
|
+
clearTimeout(t);
|
|
10781
|
+
};
|
|
10782
|
+
}, [onTimeout, shouldWaitLonger, timedOut, timeoutAverted]);
|
|
10783
|
+
return {
|
|
10784
|
+
timedOut: timedOut,
|
|
10785
|
+
timeoutStartedAt: timeoutStartedAt
|
|
10786
|
+
};
|
|
10787
|
+
};
|
|
10788
|
+
|
|
10789
|
+
var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
10790
|
+
var onFinished = _a.onFinished,
|
|
10791
|
+
onCapture = _a.onCapture,
|
|
10792
|
+
_b = _a.classNames,
|
|
10793
|
+
classNames = _b === void 0 ? {} : _b,
|
|
10794
|
+
_c = _a.colors,
|
|
10795
|
+
colors = _c === void 0 ? {} : _c,
|
|
10796
|
+
_d = _a.verbiage,
|
|
10797
|
+
rawVerbiage = _d === void 0 ? {} : _d,
|
|
10798
|
+
_e = _a.silentFallback,
|
|
10799
|
+
silentFallback = _e === void 0 ? false : _e,
|
|
10800
|
+
_f = _a.invalidSelfie,
|
|
10801
|
+
invalidSelfie = _f === void 0 ? false : _f,
|
|
10802
|
+
_g = _a.guidanceMessage,
|
|
10803
|
+
guidanceMessage = _g === void 0 ? undefined : _g;
|
|
10804
|
+
var _h = React.useState(null),
|
|
10805
|
+
image = _h[0],
|
|
10806
|
+
setImage = _h[1];
|
|
10807
|
+
var lastResizedFileRef = React.useRef(null);
|
|
10808
|
+
var fileInput = React.useRef(null);
|
|
10809
|
+
var _j = React.useState(false),
|
|
10810
|
+
loading = _j[0],
|
|
10811
|
+
setLoading = _j[1];
|
|
10812
|
+
var _k = React.useState(false),
|
|
10813
|
+
usingDocumentCapture = _k[0],
|
|
10814
|
+
setUsingDocumentCapture = _k[1];
|
|
10815
|
+
var _l = useFileState(),
|
|
10816
|
+
rawFile = _l.rawFile,
|
|
10817
|
+
fileInputOnChange = _l.fileInputOnChange;
|
|
10818
|
+
var resizedImageFile = useResizeMaxEdge({
|
|
10819
|
+
rawFile: rawFile
|
|
10820
|
+
}).resizedImageFile;
|
|
10821
|
+
React.useEffect(function resetAfterCapturingImage() {
|
|
10822
|
+
// we only want to run this IF the file has changed
|
|
10823
|
+
if (resizedImageFile && resizedImageFile !== lastResizedFileRef.current) {
|
|
10824
|
+
lastResizedFileRef.current = resizedImageFile;
|
|
10825
|
+
setImage(resizedImageFile);
|
|
10826
|
+
setLoading(true);
|
|
10827
|
+
onCapture === null || onCapture === void 0 ? void 0 : onCapture(resizedImageFile);
|
|
10828
|
+
onFinished === null || onFinished === void 0 ? void 0 : onFinished(resizedImageFile);
|
|
10829
|
+
}
|
|
10830
|
+
}, [resizedImageFile, onCapture, onFinished, loading]);
|
|
10831
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
10832
|
+
headingText: "We're having some trouble.",
|
|
10833
|
+
descriptionText: silentFallback ? 'Use your device camera to capture your face' : 'On-device capture guidance failed, please capture a selfie manually.',
|
|
10834
|
+
captureBtnText: 'Capture',
|
|
10835
|
+
doneBtnText: 'Done',
|
|
10836
|
+
doneBtnLoadingText: 'Verifying...',
|
|
10837
|
+
livenessFailedText: 'Live face not detected, please try again',
|
|
10838
|
+
livenessFailedReasonText: guidanceMessage,
|
|
10839
|
+
retryButtonText: 'Retry',
|
|
10840
|
+
retryCaptureButtonText: 'Retry capture'
|
|
10841
|
+
});
|
|
10842
|
+
React.useEffect(function triggerInputWhenInSilentFallbackMode() {
|
|
10843
|
+
var fallbackTimeout;
|
|
10844
|
+
if (silentFallback) {
|
|
10845
|
+
fallbackTimeout = setTimeout(function () {
|
|
10846
|
+
var _a;
|
|
10847
|
+
// using the input element, we want to click on it "immediately" which is 250ms to allow for even old browsers to finish connecting the input
|
|
10848
|
+
if (isMobile()) {
|
|
10849
|
+
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10850
|
+
} else {
|
|
10851
|
+
setUsingDocumentCapture(true);
|
|
10852
|
+
}
|
|
10853
|
+
}, 250);
|
|
10854
|
+
}
|
|
10855
|
+
return function () {
|
|
10856
|
+
clearTimeout(fallbackTimeout);
|
|
10857
|
+
};
|
|
10858
|
+
}, [silentFallback]);
|
|
10859
|
+
function onFileSelected(e) {
|
|
10860
|
+
var _a;
|
|
10861
|
+
if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0])) return;
|
|
10862
|
+
setImage('LOADING'); // this is to reduce some of the flicker - it isn't perfect since .readAsDataURL() is slow
|
|
10863
|
+
fileInputOnChange(e);
|
|
10864
|
+
}
|
|
10865
|
+
if (usingDocumentCapture || silentFallback && !!invalidSelfie && !image && !isMobile() // desktop silent fallback - not a very realistic situation
|
|
10866
|
+
) {
|
|
10867
|
+
return /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureWizard, {
|
|
10868
|
+
documents: [{
|
|
10869
|
+
title: invalidSelfie ? verbiage.livenessFailedText : verbiage.descriptionText
|
|
10870
|
+
}],
|
|
10871
|
+
onDocumentCaptured: function onDocumentCaptured(document) {
|
|
10872
|
+
var imageData = document.contentUrl;
|
|
10873
|
+
onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageData);
|
|
10874
|
+
// todo: this a hack to address what is probably some sub-optimal coupling - fix
|
|
10875
|
+
setTimeout(function () {
|
|
10876
|
+
setImage(imageData);
|
|
10877
|
+
setUsingDocumentCapture(false);
|
|
10878
|
+
}, 0);
|
|
10879
|
+
}
|
|
10880
|
+
});
|
|
10881
|
+
}
|
|
10882
|
+
// todo: JN - we might be able to use the media stream instead if we clone it - as it stands today, we hae to use the camera to support iOS 16 devices
|
|
10883
|
+
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("input", {
|
|
10884
|
+
ref: fileInput,
|
|
10885
|
+
type: "file",
|
|
10886
|
+
accept: "image/*",
|
|
10887
|
+
capture: "user",
|
|
10888
|
+
onChange: onFileSelected,
|
|
10889
|
+
hidden: true
|
|
10890
|
+
}), /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10891
|
+
className: classNames.container
|
|
10892
|
+
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$1, {
|
|
10893
|
+
className: classNames.inner
|
|
10894
|
+
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$7, {
|
|
10895
|
+
className: classNames.heading
|
|
10896
|
+
}, verbiage.livenessFailedText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10897
|
+
className: classNames.description
|
|
10898
|
+
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$7, {
|
|
10899
|
+
className: classNames.heading
|
|
10900
|
+
}, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10901
|
+
className: classNames.description
|
|
10902
|
+
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))), image && image !== 'LOADING' && ( /*#__PURE__*/React__namespace.default.createElement(ImageContainer$5, {
|
|
10903
|
+
className: classNames.imageContainer
|
|
10904
|
+
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10905
|
+
src: image,
|
|
10906
|
+
alt: "",
|
|
10907
|
+
className: classNames.image
|
|
10908
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(StyledButtonsRow$7, {
|
|
10909
|
+
className: classNames.buttonsRow
|
|
10910
|
+
}, image && !loading && !isMobile() && ( /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10911
|
+
className: classNames.retryCaptureBtn,
|
|
10912
|
+
finished: true,
|
|
10913
|
+
variant: "warning",
|
|
10914
|
+
onClick: function onClick() {
|
|
10915
|
+
var _a;
|
|
10916
|
+
if (isMobile()) {
|
|
10917
|
+
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10918
|
+
} else {
|
|
10919
|
+
setUsingDocumentCapture(true);
|
|
10920
|
+
}
|
|
10921
|
+
}
|
|
10922
|
+
}, verbiage.retryCaptureButtonText)), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10923
|
+
variant: "positive",
|
|
10924
|
+
key: loading ? 'loading-btn' : 'ready-btn',
|
|
10925
|
+
className: !image ? classNames.captureBtn : classNames === null || classNames === void 0 ? void 0 : classNames.doneBtn,
|
|
10926
|
+
colors: !image ? colors.captureBtn : colors === null || colors === void 0 ? void 0 : colors.doneBtn,
|
|
10927
|
+
finished: !image ? true : !loading,
|
|
10928
|
+
onClick: function onClick() {
|
|
10929
|
+
var _a;
|
|
10930
|
+
if (isMobile()) {
|
|
10931
|
+
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10932
|
+
} else {
|
|
10933
|
+
if (!image) {
|
|
10934
|
+
setUsingDocumentCapture(true);
|
|
10935
|
+
} else {
|
|
10936
|
+
setLoading(true);
|
|
10937
|
+
onFinished === null || onFinished === void 0 ? void 0 : onFinished(image);
|
|
10938
|
+
}
|
|
10939
|
+
}
|
|
10940
|
+
}
|
|
10941
|
+
}, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
10942
|
+
};
|
|
10943
|
+
var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
10944
|
+
var Heading$7 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10945
|
+
var Description$2 = styled__default.default.p(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10946
|
+
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10947
|
+
var StyledButtonsRow$7 = styled__default.default(ButtonsRow$1)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10948
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$e, templateObject_4$8, templateObject_5$4;
|
|
10949
|
+
|
|
10950
|
+
var initialState$3 = {
|
|
10951
|
+
videoWidth: 0,
|
|
10952
|
+
videoHeight: 0,
|
|
10953
|
+
requireVerticalFaceCentering: true,
|
|
10954
|
+
busy: false,
|
|
10955
|
+
frame: null,
|
|
10956
|
+
faces: [],
|
|
10957
|
+
faceNotDetected: false,
|
|
10958
|
+
faceNotCentered: false,
|
|
10959
|
+
faceLookingAway: false,
|
|
10960
|
+
faceTooClose: false,
|
|
10961
|
+
faceTooFar: false,
|
|
10962
|
+
faceReady: false,
|
|
10963
|
+
faceReadyAt: null
|
|
10964
|
+
};
|
|
10965
|
+
var reducer$3 = function reducer(state, action) {
|
|
10966
|
+
switch (action.type) {
|
|
10967
|
+
case 'configure':
|
|
10968
|
+
return _assign(_assign({}, state), action.payload);
|
|
10969
|
+
case 'facesDetected':
|
|
10970
|
+
{
|
|
10971
|
+
if (state.busy) return state;
|
|
10972
|
+
var faces = action.payload.faces;
|
|
10973
|
+
var face = faces[0];
|
|
10974
|
+
var faceNotDetected = faces.length === 0;
|
|
10975
|
+
var faceNotCentered = state.requireVerticalFaceCentering,
|
|
10976
|
+
faceLookingAway = false,
|
|
10977
|
+
faceTooClose = false,
|
|
10978
|
+
faceTooFar = false,
|
|
10979
|
+
faceReadyAt = state.faceReadyAt;
|
|
10980
|
+
if (face) {
|
|
10981
|
+
// calculate centroids
|
|
10982
|
+
var vCX = state.videoWidth / 2;
|
|
10983
|
+
var vCY = state.videoHeight / 2;
|
|
10984
|
+
var fCX = (face.box.xMin + face.box.xMax) / 2;
|
|
10985
|
+
var fCY = (face.box.yMin + face.box.yMax) / 2;
|
|
10986
|
+
// calculate thresholds
|
|
10987
|
+
var vTX = state.videoWidth * 0.125;
|
|
10988
|
+
var vTY = state.videoHeight * 0.125;
|
|
10989
|
+
var fTW = face.box.width * 0.2;
|
|
10990
|
+
var fTH = face.box.height * 0.2;
|
|
10991
|
+
var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
|
|
10992
|
+
if (nose) {
|
|
10993
|
+
faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
|
|
10994
|
+
var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
|
|
10995
|
+
var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
|
|
10996
|
+
faceNotCentered = faceNotCenteredHorizontally || state.requireVerticalFaceCentering && faceNotCenteredVertically;
|
|
10997
|
+
}
|
|
10998
|
+
var isMobile = state.videoWidth < state.videoHeight;
|
|
10999
|
+
var tooCloseMultiple = isMobile ? 2 : 4.5;
|
|
11000
|
+
var tooFarMultiple = isMobile ? 6 : 7;
|
|
11001
|
+
faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
|
|
11002
|
+
faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
|
|
11003
|
+
}
|
|
11004
|
+
var faceReady = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
|
|
11005
|
+
if (!faceReady) {
|
|
11006
|
+
faceReadyAt = null;
|
|
11007
|
+
} else if (!state.faceReady) {
|
|
11008
|
+
faceReadyAt = new Date();
|
|
11009
|
+
}
|
|
11010
|
+
return _assign(_assign({}, state), {
|
|
11011
|
+
faces: faces,
|
|
11012
|
+
faceNotDetected: faceNotDetected,
|
|
11013
|
+
faceNotCentered: faceNotCentered,
|
|
11014
|
+
faceLookingAway: faceLookingAway,
|
|
11015
|
+
faceTooClose: faceTooClose,
|
|
11016
|
+
faceTooFar: faceTooFar,
|
|
11017
|
+
faceReady: faceReady,
|
|
11018
|
+
faceReadyAt: faceReadyAt,
|
|
11019
|
+
busy: faceReady
|
|
11020
|
+
});
|
|
11021
|
+
}
|
|
11022
|
+
case 'captureStarted':
|
|
11023
|
+
return _assign(_assign({}, state), {
|
|
11024
|
+
busy: true
|
|
11025
|
+
});
|
|
11026
|
+
case 'captureCompleted':
|
|
11027
|
+
return _assign(_assign({}, state), {
|
|
11028
|
+
busy: false
|
|
11029
|
+
});
|
|
11030
|
+
}
|
|
11031
|
+
};
|
|
11032
|
+
var SelfieCapture = function SelfieCapture(_a) {
|
|
11033
|
+
var _b;
|
|
11034
|
+
var onGuidanceSatisfied = _a.onGuidanceSatisfied,
|
|
11035
|
+
onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
|
|
11036
|
+
onSelfieCaptureStarted = _a.onSelfieCaptureStarted,
|
|
11037
|
+
onSelfieCaptured = _a.onSelfieCaptured,
|
|
11038
|
+
onTimeout = _a.onTimeout,
|
|
11039
|
+
onExit = _a.onExit,
|
|
11040
|
+
_c = _a.timeoutDurationMs,
|
|
11041
|
+
timeoutDurationMs = _c === void 0 ? 15000 : _c,
|
|
11042
|
+
guidanceMessage = _a.guidanceMessage,
|
|
11043
|
+
guidanceSatisfied = _a.guidanceSatisfied,
|
|
11044
|
+
guidesComponent = _a.guidesComponent,
|
|
11045
|
+
_d = _a.requireVerticalFaceCentering,
|
|
11046
|
+
requireVerticalFaceCentering = _d === void 0 ? true : _d,
|
|
11047
|
+
_e = _a.shouldCapture,
|
|
11048
|
+
shouldCapture = _e === void 0 ? true : _e,
|
|
11049
|
+
_f = _a.classNames,
|
|
11050
|
+
classNames = _f === void 0 ? {} : _f,
|
|
11051
|
+
_g = _a.colors,
|
|
11052
|
+
colors = _g === void 0 ? {} : _g,
|
|
11053
|
+
_h = _a.verbiage,
|
|
11054
|
+
rawVerbiage = _h === void 0 ? {} : _h,
|
|
11055
|
+
_j = _a.debugMode,
|
|
11056
|
+
debugMode = _j === void 0 ? false : _j;
|
|
11057
|
+
var _k = useResizeObserver__default.default(),
|
|
11058
|
+
ref = _k.ref,
|
|
11059
|
+
_l = _k.width,
|
|
11060
|
+
width = _l === void 0 ? 1 : _l,
|
|
11061
|
+
_m = _k.height,
|
|
11062
|
+
height = _m === void 0 ? 1 : _m;
|
|
11063
|
+
var _o = React.useReducer(reducer$3, initialState$3),
|
|
11064
|
+
state = _o[0],
|
|
11065
|
+
dispatch = _o[1];
|
|
11066
|
+
var lastPredictionCanvas = React.useRef(null);
|
|
11067
|
+
var _p = React.useContext(CameraStateContext),
|
|
11068
|
+
cameraRef = _p.cameraRef,
|
|
11069
|
+
cameraReady = _p.cameraReady,
|
|
11070
|
+
videoRef = _p.videoRef;
|
|
11071
|
+
var _q = React.useContext(SelfieGuidanceModelsContext),
|
|
11072
|
+
onPredictionMade = _q.onPredictionMade,
|
|
11073
|
+
canvasRef = _q.canvasRef,
|
|
11074
|
+
guidanceError = _q.error;
|
|
11075
|
+
React.useEffect(function () {
|
|
11076
|
+
if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
|
|
11077
|
+
dispatch({
|
|
11078
|
+
type: 'configure',
|
|
11079
|
+
payload: {
|
|
11080
|
+
videoWidth: videoRef.current.videoWidth,
|
|
11081
|
+
videoHeight: videoRef.current.videoHeight,
|
|
11082
|
+
requireVerticalFaceCentering: requireVerticalFaceCentering
|
|
11083
|
+
}
|
|
11084
|
+
});
|
|
11085
|
+
}
|
|
11086
|
+
}, [cameraReady, requireVerticalFaceCentering, videoRef]);
|
|
11087
|
+
onPredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (prediction) {
|
|
11088
|
+
return new Promise(function (resolve) {
|
|
11089
|
+
if (shouldCapture && !state.busy) {
|
|
11090
|
+
drawToCanvas(lastPredictionCanvas.current, canvasRef.current);
|
|
11091
|
+
dispatch({
|
|
11092
|
+
type: 'facesDetected',
|
|
11093
|
+
payload: {
|
|
11094
|
+
faces: prediction
|
|
11095
|
+
}
|
|
11096
|
+
});
|
|
11097
|
+
}
|
|
11098
|
+
resolve();
|
|
11099
|
+
});
|
|
11100
|
+
}, [canvasRef, shouldCapture, state.busy]), 16));
|
|
11101
|
+
React.useEffect(function () {
|
|
11102
|
+
state.faceReady ? onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied() : onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
|
|
11103
|
+
}, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
|
|
11104
|
+
React.useEffect(function () {
|
|
11105
|
+
if (!state.faceReady) return;
|
|
11106
|
+
var timer = setTimeout(function () {
|
|
11107
|
+
dispatch({
|
|
11108
|
+
type: 'captureStarted'
|
|
11109
|
+
});
|
|
11110
|
+
onSelfieCaptureStarted === null || onSelfieCaptureStarted === void 0 ? void 0 : onSelfieCaptureStarted();
|
|
11111
|
+
var frame = lastPredictionCanvas.current;
|
|
11112
|
+
if (!frame) return;
|
|
11113
|
+
var ctx = frame.getContext('2d');
|
|
11114
|
+
if (!ctx) return;
|
|
11115
|
+
var imageData = ctx.getImageData(0, 0, frame.width, frame.height);
|
|
11116
|
+
onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
|
|
11117
|
+
clearCanvas(frame);
|
|
11118
|
+
dispatch({
|
|
11119
|
+
type: 'captureCompleted'
|
|
11120
|
+
});
|
|
11121
|
+
}, 100);
|
|
11122
|
+
return function () {
|
|
11123
|
+
if (timer) clearTimeout(timer);
|
|
11124
|
+
};
|
|
11125
|
+
}, [onSelfieCaptureStarted, onSelfieCaptured, state.faceReady, state.faces]);
|
|
11126
|
+
var _r = useTimeout(timeoutDurationMs, onTimeout),
|
|
11127
|
+
timedOut = _r.timedOut,
|
|
11128
|
+
timeoutStartedAt = _r.timeoutStartedAt;
|
|
11129
|
+
var debugScalingDetails = useDebugScalingDetails({
|
|
11130
|
+
enabled: debugMode,
|
|
11131
|
+
pageWidth: width,
|
|
11132
|
+
pageHeight: height,
|
|
11133
|
+
videoWidth: state.videoWidth,
|
|
11134
|
+
videoHeight: state.videoHeight
|
|
11135
|
+
});
|
|
11136
|
+
colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
|
|
11137
|
+
colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
|
|
11138
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
11139
|
+
guidanceHoldStillText: 'Hold still for a few seconds...',
|
|
11140
|
+
guidanceLookStraightText: 'Look straight into the camera...',
|
|
11141
|
+
guidanceMoveBackText: 'Move back...',
|
|
11142
|
+
guidanceMoveForwardText: 'Move forward...',
|
|
11143
|
+
guidanceMoveToCenterText: 'Move to the center...',
|
|
11144
|
+
guidanceNoFaceDetectedText: 'Waiting for face to be detected...'
|
|
11145
|
+
});
|
|
11146
|
+
var satisfied = state.faceReady;
|
|
11147
|
+
if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
|
|
11148
|
+
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : state.faceNotDetected ? verbiage.guidanceNoFaceDetectedText : '');
|
|
11149
|
+
if (guidanceError) {
|
|
11150
|
+
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
11151
|
+
classNames: classNames.fallback
|
|
11152
|
+
});
|
|
11153
|
+
}
|
|
11154
|
+
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11155
|
+
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
11156
|
+
ref: ref,
|
|
11157
|
+
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
11158
|
+
}, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11159
|
+
ref: lastPredictionCanvas
|
|
11160
|
+
}), /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, {
|
|
11161
|
+
classNames: classNames.guides,
|
|
11162
|
+
status: satisfied ? 'processing' : 'ready'
|
|
11163
|
+
}), guidanceMessage !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
|
|
11164
|
+
className: classNames.guidanceMessageContainer
|
|
11165
|
+
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
11166
|
+
"$variant": satisfied ? 'positive' : 'negative',
|
|
11167
|
+
className: classNames.guidanceMessage
|
|
11168
|
+
}, guidanceMessage))), debugMode && state.faces.length > 0 && ( /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, null, state.faces.map(function (face, i) {
|
|
11169
|
+
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
|
|
11170
|
+
key: i,
|
|
11171
|
+
face: face,
|
|
11172
|
+
scaling: debugScalingDetails,
|
|
11173
|
+
color: satisfied ? 'green' : 'red'
|
|
11174
|
+
});
|
|
11175
|
+
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceNotCentered ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceTooClose && !state.faceTooFar ? '✅' : '❌', " Face", ' ', state.faceTooClose ? 'Too Close' : state.faceTooFar ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceLookingAway ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__namespace.default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
|
|
11176
|
+
onClick: onExit,
|
|
11177
|
+
className: classNames.exitCaptureBtn
|
|
11178
|
+
}));
|
|
11179
|
+
};
|
|
11180
|
+
|
|
11181
|
+
var initialState$2 = {
|
|
11182
|
+
frame: null,
|
|
11183
|
+
face: null,
|
|
11184
|
+
requestState: 'CAPTURING',
|
|
11185
|
+
requestError: null,
|
|
11186
|
+
imageUrl: null,
|
|
11187
|
+
faceLive: false,
|
|
11188
|
+
eyeCoveringDetected: false,
|
|
11189
|
+
maskDetected: false,
|
|
11190
|
+
headCoveringDetected: false,
|
|
11191
|
+
phoneDetected: false,
|
|
11192
|
+
timesLivenessCheckFailed: 0
|
|
11193
|
+
};
|
|
11194
|
+
var reducer$2 = function reducer(state, action) {
|
|
11195
|
+
var _a, _b;
|
|
11196
|
+
switch (action.type) {
|
|
11197
|
+
case 'resetLivenessCheck':
|
|
11198
|
+
return _assign(_assign({}, initialState$2), {
|
|
11199
|
+
timesLivenessCheckFailed: state.timesLivenessCheckFailed
|
|
11200
|
+
});
|
|
11201
|
+
case 'guidanceUnsatisfied':
|
|
11202
|
+
return _assign({}, state);
|
|
11203
|
+
case 'guidanceSatisfied':
|
|
11204
|
+
return _assign(_assign({}, state), {
|
|
11205
|
+
requestState: 'GUIDANCE_SATISFIED'
|
|
11206
|
+
});
|
|
11207
|
+
case 'selfieCaptureStarted':
|
|
11208
|
+
return _assign(_assign({}, state), {
|
|
11209
|
+
requestState: 'CAPTURE_STARTED'
|
|
11210
|
+
});
|
|
11211
|
+
case 'livenessReady':
|
|
11212
|
+
{
|
|
11213
|
+
var allowedStates = ['CAPTURE_STARTED'];
|
|
11214
|
+
if (allowedStates.includes(state.requestState)) {
|
|
11215
|
+
return _assign(_assign({}, state), {
|
|
11216
|
+
requestState: 'CAPTURED',
|
|
11217
|
+
frame: action.payload.frame,
|
|
11218
|
+
face: action.payload.face
|
|
11219
|
+
});
|
|
11220
|
+
} else {
|
|
11221
|
+
return state;
|
|
11222
|
+
}
|
|
11223
|
+
}
|
|
11224
|
+
case 'livenessChecking':
|
|
11225
|
+
return _assign(_assign({}, state), {
|
|
11226
|
+
requestState: 'IN_PROGRESS'
|
|
11227
|
+
});
|
|
11228
|
+
case 'livenessChecked':
|
|
11229
|
+
{
|
|
11230
|
+
var _c = action.payload.response,
|
|
11231
|
+
_d = _c.status,
|
|
11232
|
+
statusCode = _d.statusCode,
|
|
11233
|
+
statusMessage = _d.statusMessage,
|
|
11234
|
+
errorData = _d.errorData,
|
|
11235
|
+
resultData = _c.resultData;
|
|
11236
|
+
if (statusCode !== '000') {
|
|
11237
|
+
return _assign(_assign({}, state), {
|
|
11238
|
+
requestState: 'ERROR',
|
|
11239
|
+
requestError: new Error("".concat(statusMessage, ": ").concat(errorData))
|
|
11240
|
+
});
|
|
11241
|
+
}
|
|
11242
|
+
var faceLive = ['Live Face Detected', 'Approved'].includes(resultData.verificationResult);
|
|
11243
|
+
var eyeCoveringDetected = resultData.eyeCovering === 'true';
|
|
11244
|
+
var maskDetected = resultData.faceMask === 'true';
|
|
11245
|
+
var headCoveringDetected = resultData.headCovering === 'true';
|
|
11246
|
+
var phoneDetected = resultData.cellPhone === 'true';
|
|
11247
|
+
var livenessCheckPassed = faceLive && !eyeCoveringDetected && !maskDetected && !headCoveringDetected;
|
|
11248
|
+
var requestState = livenessCheckPassed ? 'PASSED' : 'FAILED';
|
|
11249
|
+
var timesLivenessCheckFailed = state.timesLivenessCheckFailed;
|
|
11250
|
+
if (livenessCheckPassed) {
|
|
11251
|
+
timesLivenessCheckFailed = 0;
|
|
11252
|
+
} else {
|
|
11253
|
+
timesLivenessCheckFailed += 1;
|
|
11254
|
+
}
|
|
11255
|
+
return _assign(_assign({}, state), {
|
|
11256
|
+
frame: (_a = action.payload.frame) !== null && _a !== void 0 ? _a : null,
|
|
11257
|
+
face: (_b = action.payload.face) !== null && _b !== void 0 ? _b : null,
|
|
11258
|
+
imageUrl: action.payload.imageUrl,
|
|
11259
|
+
requestState: requestState,
|
|
11260
|
+
faceLive: faceLive,
|
|
11261
|
+
eyeCoveringDetected: eyeCoveringDetected,
|
|
11262
|
+
maskDetected: maskDetected,
|
|
11263
|
+
headCoveringDetected: headCoveringDetected,
|
|
11264
|
+
phoneDetected: phoneDetected,
|
|
11265
|
+
timesLivenessCheckFailed: timesLivenessCheckFailed
|
|
11266
|
+
});
|
|
11267
|
+
}
|
|
11268
|
+
case 'livenessCheckFailed':
|
|
11269
|
+
return _assign(_assign({}, state), {
|
|
11270
|
+
requestState: 'ERROR',
|
|
11271
|
+
requestError: action.payload.error
|
|
11272
|
+
});
|
|
11273
|
+
default:
|
|
11274
|
+
return state;
|
|
11275
|
+
}
|
|
11276
|
+
};
|
|
11277
|
+
var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
11278
|
+
var _b, _c, _d, _e;
|
|
11279
|
+
var onCapture = _a.onCapture,
|
|
11280
|
+
onSuccess = _a.onSuccess,
|
|
11281
|
+
onTimeout = _a.onTimeout,
|
|
11282
|
+
onExit = _a.onExit,
|
|
11283
|
+
_f = _a.timeoutDurationMs,
|
|
11284
|
+
timeoutDurationMs = _f === void 0 ? 15000 : _f,
|
|
11285
|
+
_g = _a.silentFallback,
|
|
11286
|
+
silentFallback = _g === void 0 ? false : _g,
|
|
11287
|
+
guidesComponent = _a.guidesComponent,
|
|
11288
|
+
disableCapturePreview = _a.disableCapturePreview,
|
|
11289
|
+
_h = _a.requireVerticalFaceCentering,
|
|
11290
|
+
requireVerticalFaceCentering = _h === void 0 ? true : _h,
|
|
11291
|
+
_j = _a.classNames,
|
|
11292
|
+
classNames = _j === void 0 ? {} : _j,
|
|
11293
|
+
_k = _a.colors,
|
|
11294
|
+
colors = _k === void 0 ? {} : _k,
|
|
11295
|
+
_l = _a.verbiage,
|
|
11296
|
+
rawVerbiage = _l === void 0 ? {} : _l,
|
|
11297
|
+
debugMode = _a.debugMode;
|
|
11298
|
+
var _m = React.useContext(SubmissionContext),
|
|
11299
|
+
checkLiveness = _m.checkLiveness,
|
|
11300
|
+
submissionError = _m.submissionError;
|
|
11301
|
+
var modelError = React.useContext(SelfieGuidanceModelsContext).error;
|
|
11302
|
+
var _o = React.useReducer(reducer$2, initialState$2),
|
|
11303
|
+
state = _o[0],
|
|
11304
|
+
dispatch = _o[1];
|
|
11305
|
+
var _p = React.useState(null),
|
|
11306
|
+
imageUrl = _p[0],
|
|
11307
|
+
setImageUrl = _p[1];
|
|
11308
|
+
var rawCanvas = React.useRef(null);
|
|
11309
|
+
var cropCanvas = React.useRef(null);
|
|
11310
|
+
var resizeCanvas = React.useRef(null);
|
|
11311
|
+
var theme = styled.useTheme();
|
|
11312
|
+
var onSelfieCaptureStarted = React.useCallback(function () {
|
|
11313
|
+
dispatch({
|
|
11314
|
+
type: 'selfieCaptureStarted'
|
|
11315
|
+
});
|
|
11316
|
+
}, []);
|
|
11317
|
+
var onSelfieCaptured = React.useCallback(function (frame, face) {
|
|
11318
|
+
onCapture === null || onCapture === void 0 ? void 0 : onCapture();
|
|
11319
|
+
dispatch({
|
|
11320
|
+
type: 'livenessReady',
|
|
11321
|
+
payload: {
|
|
11322
|
+
frame: frame,
|
|
11323
|
+
face: face
|
|
11324
|
+
}
|
|
11325
|
+
});
|
|
11326
|
+
}, [onCapture]);
|
|
11327
|
+
var frame = state.frame,
|
|
11328
|
+
face = state.face;
|
|
11329
|
+
var isReady = state.requestState === 'CAPTURED';
|
|
11330
|
+
var isPassed = state.requestState === 'PASSED';
|
|
11331
|
+
React.useEffect(function checkLivenessIfPossible() {
|
|
11332
|
+
var _this = this;
|
|
11333
|
+
if (!frame || !face || !isReady || submissionError) return;
|
|
11334
|
+
dispatch({
|
|
11335
|
+
type: 'livenessChecking'
|
|
11336
|
+
});
|
|
11337
|
+
(function () {
|
|
11338
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
11339
|
+
var imageUrl_1, response, _a, e_1;
|
|
11340
|
+
return __generator(this, function (_b) {
|
|
11341
|
+
switch (_b.label) {
|
|
11342
|
+
case 0:
|
|
11343
|
+
_b.trys.push([0, 3,, 4]);
|
|
11344
|
+
imageUrl_1 = cropToShoulders(rawCanvas.current, cropCanvas.current, resizeCanvas.current, frame, face, 0.92, 600);
|
|
11345
|
+
setImageUrl(imageUrl_1);
|
|
11346
|
+
_a = checkLiveness;
|
|
11347
|
+
return [4 /*yield*/, dataUrlToBase64(imageUrl_1)];
|
|
11348
|
+
case 1:
|
|
11349
|
+
return [4 /*yield*/, _a.apply(void 0, [_b.sent()])];
|
|
11350
|
+
case 2:
|
|
11351
|
+
response = _b.sent();
|
|
11352
|
+
dispatch({
|
|
11353
|
+
type: 'livenessChecked',
|
|
11354
|
+
payload: {
|
|
11355
|
+
frame: frame,
|
|
11356
|
+
face: face,
|
|
11357
|
+
imageUrl: imageUrl_1,
|
|
11358
|
+
response: response
|
|
11359
|
+
}
|
|
11360
|
+
});
|
|
11361
|
+
return [3 /*break*/, 4];
|
|
11362
|
+
case 3:
|
|
11363
|
+
e_1 = _b.sent();
|
|
11364
|
+
dispatch({
|
|
11365
|
+
type: 'livenessCheckFailed',
|
|
11366
|
+
payload: {
|
|
11367
|
+
error: e_1
|
|
11368
|
+
}
|
|
11369
|
+
});
|
|
11370
|
+
return [3 /*break*/, 4];
|
|
11371
|
+
case 4:
|
|
11372
|
+
return [2 /*return*/];
|
|
11373
|
+
}
|
|
11374
|
+
});
|
|
11375
|
+
});
|
|
11376
|
+
})();
|
|
11377
|
+
}, [checkLiveness, face, frame, isReady, submissionError]);
|
|
11378
|
+
var onFallbackImageCaptured = React.useCallback(function (imageUrl) {
|
|
11379
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
11380
|
+
var imageData, response, e_2;
|
|
11381
|
+
var _a;
|
|
11382
|
+
return __generator(this, function (_b) {
|
|
11383
|
+
switch (_b.label) {
|
|
11384
|
+
case 0:
|
|
11385
|
+
dispatch({
|
|
11386
|
+
type: 'livenessChecking'
|
|
11387
|
+
});
|
|
11388
|
+
_b.label = 1;
|
|
11389
|
+
case 1:
|
|
11390
|
+
_b.trys.push([1, 4,, 5]);
|
|
11391
|
+
return [4 /*yield*/, dataUrlToBase64(imageUrl)];
|
|
11392
|
+
case 2:
|
|
11393
|
+
imageData = _b.sent();
|
|
11394
|
+
return [4 /*yield*/, checkLiveness(imageData)
|
|
11395
|
+
// todo: JN - this feels dirty and is the reason for the todo around line 83 - but is necessary to handle fallback liveness validation
|
|
11396
|
+
];
|
|
11397
|
+
case 3:
|
|
11398
|
+
response = _b.sent();
|
|
11399
|
+
// todo: JN - this feels dirty and is the reason for the todo around line 83 - but is necessary to handle fallback liveness validation
|
|
11400
|
+
if (((_a = response === null || response === void 0 ? void 0 : response.resultData) === null || _a === void 0 ? void 0 : _a.verificationResult) !== 'Live Face Detected') {
|
|
11401
|
+
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
11402
|
+
}
|
|
11403
|
+
dispatch({
|
|
11404
|
+
type: 'livenessChecked',
|
|
11405
|
+
payload: {
|
|
11406
|
+
imageUrl: imageUrl,
|
|
11407
|
+
response: response
|
|
11408
|
+
}
|
|
11409
|
+
});
|
|
11410
|
+
return [3 /*break*/, 5];
|
|
11411
|
+
case 4:
|
|
11412
|
+
e_2 = _b.sent();
|
|
11413
|
+
dispatch({
|
|
11414
|
+
type: 'livenessCheckFailed',
|
|
11415
|
+
payload: {
|
|
11416
|
+
error: e_2
|
|
11417
|
+
}
|
|
11418
|
+
});
|
|
11419
|
+
return [3 /*break*/, 5];
|
|
11420
|
+
case 5:
|
|
11421
|
+
return [2 /*return*/];
|
|
11422
|
+
}
|
|
11423
|
+
});
|
|
11424
|
+
});
|
|
11425
|
+
}, [checkLiveness, onTimeout]);
|
|
11426
|
+
React.useEffect(function () {
|
|
11427
|
+
if (state.requestState === 'FAILED' || state.requestState === 'ERROR') {
|
|
11428
|
+
setTimeout(function () {
|
|
11429
|
+
dispatch({
|
|
11430
|
+
type: 'resetLivenessCheck'
|
|
11431
|
+
});
|
|
11432
|
+
}, 1000);
|
|
11433
|
+
}
|
|
11434
|
+
}, [state.requestState]);
|
|
11435
|
+
React.useEffect(function callSuccessIfAvailable() {
|
|
11436
|
+
if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
|
|
11437
|
+
}, [onSuccess, state.imageUrl, isPassed]);
|
|
11438
|
+
React.useEffect(function timeoutOnTooManyLivenessCheckFailures() {
|
|
11439
|
+
if (modelError) return;
|
|
11440
|
+
var allowedFailures = 2;
|
|
11441
|
+
if (state.timesLivenessCheckFailed > allowedFailures) {
|
|
11442
|
+
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
11443
|
+
}
|
|
11444
|
+
}, [modelError, onTimeout, state.timesLivenessCheckFailed]);
|
|
11445
|
+
useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelError, state.requestState === 'IN_PROGRESS');
|
|
11446
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
11447
|
+
guidanceLivenessCheckFailedText: 'Could not verify your face.',
|
|
11448
|
+
guidanceLivenessCheckErrorText: 'An error occurred while verifying your face.',
|
|
11449
|
+
guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
|
|
11450
|
+
guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
|
|
11451
|
+
guidanceRemoveMaskText: 'Please remove your mask...',
|
|
11452
|
+
progressPreviewText: 'Processing...'
|
|
11453
|
+
});
|
|
11454
|
+
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : state.requestState === 'FAILED' ? verbiage.guidanceLivenessCheckFailedText : state.requestState === 'ERROR' ? verbiage.guidanceLivenessCheckErrorText : undefined;
|
|
11455
|
+
disableCapturePreview || (disableCapturePreview = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) !== null && _d !== void 0 ? _d : false);
|
|
11456
|
+
var guidesByRequestState = React.useCallback(function (props) {
|
|
11457
|
+
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11458
|
+
var status = ['IN_PROGRESS', 'CAPTURE_STARTED', 'GUIDANCE_SATISFIED', 'CAPTURED'].includes(state.requestState) ? 'processing' : ['FAILED', 'ERROR'].includes(state.requestState) ? 'failure' : 'ready';
|
|
11459
|
+
return /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, _assign({}, props, {
|
|
11460
|
+
status: status
|
|
11461
|
+
}));
|
|
11462
|
+
}, [guidesComponent, state.requestState]);
|
|
11463
|
+
var onGuidanceSatisfied = React.useCallback(function () {
|
|
11464
|
+
dispatch({
|
|
11465
|
+
type: 'guidanceSatisfied'
|
|
11466
|
+
});
|
|
11467
|
+
}, []);
|
|
11468
|
+
var onGuidanceNotSatisfied = React.useCallback(function () {
|
|
11469
|
+
dispatch({
|
|
11470
|
+
type: 'guidanceUnsatisfied'
|
|
11471
|
+
});
|
|
11472
|
+
}, []);
|
|
11473
|
+
if (modelError) {
|
|
11474
|
+
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
11475
|
+
key: state.timesLivenessCheckFailed,
|
|
11476
|
+
onFinished: onFallbackImageCaptured,
|
|
11477
|
+
silentFallback: silentFallback,
|
|
11478
|
+
invalidSelfie: !!state.timesLivenessCheckFailed,
|
|
11479
|
+
guidanceMessage: guidanceMessage
|
|
11480
|
+
});
|
|
11481
|
+
}
|
|
11482
|
+
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11483
|
+
ref: rawCanvas
|
|
11484
|
+
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11485
|
+
ref: cropCanvas
|
|
11486
|
+
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11487
|
+
ref: resizeCanvas
|
|
11488
|
+
}), /*#__PURE__*/React__namespace.default.createElement(SelfieCapture, {
|
|
11489
|
+
shouldCapture: state.requestState === 'CAPTURING',
|
|
11490
|
+
onSelfieCaptureStarted: onSelfieCaptureStarted,
|
|
11491
|
+
onSelfieCaptured: onSelfieCaptured,
|
|
11492
|
+
onExit: onExit,
|
|
11493
|
+
timeoutDurationMs: timeoutDurationMs,
|
|
11494
|
+
guidanceMessage: guidanceMessage,
|
|
11495
|
+
guidanceSatisfied: guidanceMessage ? false : undefined,
|
|
11496
|
+
onGuidanceSatisfied: onGuidanceSatisfied,
|
|
11497
|
+
onGuidanceNotSatisfied: onGuidanceNotSatisfied,
|
|
11498
|
+
guidesComponent: guidesByRequestState,
|
|
11499
|
+
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
11500
|
+
classNames: classNames,
|
|
11501
|
+
colors: colors,
|
|
11502
|
+
verbiage: verbiage,
|
|
11503
|
+
debugMode: debugMode
|
|
11504
|
+
}), !disableCapturePreview && imageUrl && ( /*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
|
|
11505
|
+
classNames: classNames.imagePreview,
|
|
11506
|
+
imageUrl: imageUrl,
|
|
11507
|
+
text: (_e = verbiage.progressPreviewText) !== null && _e !== void 0 ? _e : ''
|
|
11508
|
+
})));
|
|
11509
|
+
};
|
|
11510
|
+
|
|
11511
|
+
var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
11512
|
+
var imageUrl = _a.imageUrl,
|
|
11513
|
+
onDoneClick = _a.onDoneClick,
|
|
11514
|
+
onRetryClick = _a.onRetryClick,
|
|
11515
|
+
_b = _a.classNames,
|
|
11516
|
+
classNames = _b === void 0 ? {} : _b,
|
|
11517
|
+
_c = _a.colors,
|
|
11518
|
+
colors = _c === void 0 ? {} : _c,
|
|
11519
|
+
_d = _a.verbiage,
|
|
11520
|
+
rawVerbiage = _d === void 0 ? {} : _d;
|
|
11521
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
11522
|
+
headingText: 'Face liveness has been verified!',
|
|
11523
|
+
retryBtnText: 'Retry',
|
|
11524
|
+
doneBtnText: 'Done'
|
|
11525
|
+
});
|
|
11526
|
+
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
11527
|
+
className: classNames.container
|
|
11528
|
+
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11529
|
+
className: classNames.inner
|
|
11530
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
11531
|
+
className: classNames.heading
|
|
11532
|
+
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
11533
|
+
className: classNames.imageContainer
|
|
11534
|
+
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
11535
|
+
alt: verbiage.headingText,
|
|
11536
|
+
src: imageUrl,
|
|
11537
|
+
className: classNames.image
|
|
11538
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
|
|
11539
|
+
className: classNames.buttonsRow
|
|
11540
|
+
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11541
|
+
variant: "warning",
|
|
11542
|
+
onClick: onRetryClick,
|
|
11543
|
+
colors: colors.retryBtn,
|
|
11544
|
+
className: classNames.retryBtn,
|
|
11545
|
+
finished: true
|
|
11546
|
+
}, verbiage.retryBtnText), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11547
|
+
variant: "positive",
|
|
11548
|
+
onClick: onDoneClick,
|
|
11549
|
+
colors: colors.doneBtn,
|
|
11550
|
+
className: classNames.doneBtn,
|
|
11551
|
+
finished: true
|
|
11552
|
+
}, verbiage.doneBtnText))));
|
|
11553
|
+
};
|
|
11554
|
+
var Heading$6 = styled__default.default.h3(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
11555
|
+
var templateObject_1$j;
|
|
11556
|
+
|
|
11557
|
+
var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
11558
|
+
var _b = _a.canRetry,
|
|
11559
|
+
canRetry = _b === void 0 ? true : _b,
|
|
11560
|
+
onRetryClick = _a.onRetryClick,
|
|
11561
|
+
onExitClick = _a.onExitClick,
|
|
11562
|
+
_c = _a.assets,
|
|
11563
|
+
assets = _c === void 0 ? {} : _c,
|
|
11564
|
+
_d = _a.classNames,
|
|
11565
|
+
classNames = _d === void 0 ? {} : _d,
|
|
11566
|
+
_e = _a.colors,
|
|
11567
|
+
colors = _e === void 0 ? {} : _e,
|
|
11568
|
+
_f = _a.verbiage,
|
|
11569
|
+
rawVerbiage = _f === void 0 ? {} : _f;
|
|
11570
|
+
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/Face_Not_Detected.svg"));
|
|
11571
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
11572
|
+
headingText: 'Live face not detected, please try again',
|
|
11573
|
+
retryBtnText: 'Retry',
|
|
11574
|
+
exitBtnText: 'Exit'
|
|
11575
|
+
});
|
|
11576
|
+
return /*#__PURE__*/React__namespace.default.createElement(GrayOverlayContainer, {
|
|
11577
|
+
className: classNames.container
|
|
11578
|
+
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11579
|
+
className: classNames.inner
|
|
11580
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Card, null, /*#__PURE__*/React__namespace.default.createElement(ImageContainer$4, {
|
|
11581
|
+
className: classNames.imageContainer
|
|
11582
|
+
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
11583
|
+
alt: verbiage.headingText,
|
|
11584
|
+
src: assets.imageUrl,
|
|
11585
|
+
className: classNames.image
|
|
11586
|
+
})), /*#__PURE__*/React__namespace.default.createElement(Heading$5, {
|
|
11587
|
+
className: classNames.heading
|
|
11588
|
+
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
11589
|
+
className: classNames.buttonsRow
|
|
11590
|
+
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(WideButton, {
|
|
11591
|
+
variant: "secondary",
|
|
11592
|
+
className: classNames.retryBtn,
|
|
11593
|
+
onClick: onRetryClick,
|
|
11594
|
+
colors: colors.retryBtn,
|
|
11595
|
+
finished: true
|
|
11596
|
+
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(WideBorderButton, {
|
|
11597
|
+
variant: "secondary",
|
|
11598
|
+
className: classNames.exitBtn,
|
|
11599
|
+
onClick: onExitClick,
|
|
11600
|
+
colors: colors.exitBtn,
|
|
11601
|
+
finished: true
|
|
11602
|
+
}, verbiage.exitBtnText)))));
|
|
11603
|
+
};
|
|
11604
|
+
var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
11605
|
+
var Heading$5 = styled__default.default.h3(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-bottom: 36px;\n"], ["\n margin-bottom: 36px;\n"])));
|
|
11606
|
+
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
11607
|
+
var Card = styled__default.default.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: 500px;\n"], ["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: 500px;\n"])));
|
|
11608
|
+
var WideButton = styled__default.default(LoaderButton)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
11609
|
+
var ButtonsRow = styled__default.default.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"])));
|
|
11610
|
+
var WideBorderButton = styled__default.default(WideButton)(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n color: black;\n background: white;\n border: 1px solid var(--idm-color-secondary-500);\n box-sizing: border-box;\n"], ["\n color: black;\n background: white;\n border: 1px solid var(--idm-color-secondary-500);\n box-sizing: border-box;\n"])));
|
|
11611
|
+
var templateObject_1$i, templateObject_2$e, templateObject_3$d, templateObject_4$7, templateObject_5$3, templateObject_6$3, templateObject_7$2;
|
|
11612
|
+
|
|
11613
|
+
var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
11614
|
+
var _b;
|
|
11615
|
+
var _c = _a.assets,
|
|
11616
|
+
assets = _c === void 0 ? {} : _c,
|
|
11617
|
+
_d = _a.classNames,
|
|
11618
|
+
classNames = _d === void 0 ? {} : _d,
|
|
11619
|
+
_e = _a.colors,
|
|
11620
|
+
colors = _e === void 0 ? {} : _e,
|
|
11621
|
+
_f = _a.verbiage,
|
|
11622
|
+
rawVerbiage = _f === void 0 ? {} : _f;
|
|
11623
|
+
var requestMicrophoneAccess = React.useContext(CameraStateContext).requestMicrophoneAccess;
|
|
11624
|
+
assets.imageUrl || (assets.imageUrl = DEFAULT_CDN_URL + '/microphone-disable-icon.svg');
|
|
11625
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
11626
|
+
headingText: 'Your microphone permission is disabled',
|
|
11627
|
+
descriptionText: 'This application requires access to your microphone to continue. ' + 'Please accept the permission once prompted by the browser. ' + 'If the browser does not prompt for microphone permissions, you must go to settings ' + 'and provide microphone access to the current browser.',
|
|
11628
|
+
retryBtnText: 'Retry'
|
|
11629
|
+
});
|
|
11630
|
+
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
11631
|
+
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
11632
|
+
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner, {
|
|
11633
|
+
className: classNames.inner
|
|
11634
|
+
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayImageContainer$1, {
|
|
11635
|
+
className: classNames.imageContainer
|
|
11636
|
+
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
11637
|
+
src: assets.imageUrl,
|
|
11638
|
+
alt: "",
|
|
11639
|
+
className: classNames.image
|
|
11640
|
+
})), /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
11641
|
+
className: classNames.heading
|
|
11642
|
+
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$1, {
|
|
11643
|
+
className: classNames.description
|
|
11644
|
+
}, verbiage.descriptionText), /*#__PURE__*/React__namespace.default.createElement(RetryButton, {
|
|
11645
|
+
variant: "warning",
|
|
11646
|
+
onClick: requestMicrophoneAccess,
|
|
11647
|
+
colors: colors.retryBtn,
|
|
11648
|
+
className: classNames.retryBtn,
|
|
11649
|
+
finished: true
|
|
11650
|
+
}, verbiage.retryBtnText)));
|
|
11651
|
+
};
|
|
11652
|
+
var StyledOverlayInner = styled__default.default(OverlayInner$2)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
11653
|
+
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
11654
|
+
var Description$1 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
11655
|
+
var RetryButton = styled__default.default(LoaderButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
11656
|
+
var templateObject_1$h, templateObject_2$d, templateObject_3$c, templateObject_4$6;
|
|
11657
|
+
|
|
11658
|
+
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
11659
|
+
var onDismissed = _a.onDismissed,
|
|
11660
|
+
onUserCancel = _a.onUserCancel,
|
|
11661
|
+
_b = _a.assets,
|
|
11662
|
+
assets = _b === void 0 ? {} : _b,
|
|
11663
|
+
_c = _a.classNames,
|
|
11664
|
+
classNames = _c === void 0 ? {} : _c,
|
|
11665
|
+
_d = _a.colors,
|
|
11666
|
+
colors = _d === void 0 ? {} : _d,
|
|
11667
|
+
_e = _a.verbiage,
|
|
11668
|
+
rawVerbiage = _e === void 0 ? {} : _e;
|
|
11669
|
+
var _f = React.useContext(CameraStateContext),
|
|
11670
|
+
cameraReady = _f.cameraReady,
|
|
11671
|
+
cameraAccessDenied = _f.cameraAccessDenied,
|
|
11672
|
+
microphoneAccessDenied = _f.microphoneAccessDenied;
|
|
11673
|
+
var _g = React.useContext(SelfieGuidanceModelsContext),
|
|
11674
|
+
modelsReady = _g.ready,
|
|
11675
|
+
modelDownloadProgress = _g.modelDownloadProgress;
|
|
11676
|
+
assets.instructionImageUrl || (assets.instructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png"));
|
|
11677
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
11678
|
+
headingText: 'Use your device camera to capture your face',
|
|
11679
|
+
removeEyeCoveringsText: 'Remove Sunglasses & Hat',
|
|
11680
|
+
avoidExcessiveBacklightingText: 'Avoid Excessive Backlighting',
|
|
11681
|
+
continueText: 'Continue',
|
|
11682
|
+
cameraInitializingText: 'Camera initializing...',
|
|
11683
|
+
downloadingText: 'Downloading...',
|
|
11684
|
+
modelsWarmingUpText: 'Models warming up...'
|
|
11685
|
+
});
|
|
11686
|
+
var _h = React.useState(false),
|
|
11687
|
+
dismissed = _h[0],
|
|
11688
|
+
setDismissed = _h[1];
|
|
11689
|
+
if (dismissed) return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null);
|
|
11690
|
+
if (cameraAccessDenied) {
|
|
11691
|
+
return /*#__PURE__*/React__namespace.default.createElement(CameraAccessDeniedOverlay, {
|
|
11692
|
+
assets: assets.cameraAccessDenied,
|
|
11693
|
+
classNames: classNames.cameraAccessDenied,
|
|
11694
|
+
colors: colors.cameraAccessDenied,
|
|
11695
|
+
verbiage: rawVerbiage.cameraAccessDenied
|
|
11696
|
+
});
|
|
11697
|
+
}
|
|
11698
|
+
if (microphoneAccessDenied) {
|
|
11699
|
+
return /*#__PURE__*/React__namespace.default.createElement(MicrophoneAccessDeniedOverlay, {
|
|
11700
|
+
assets: assets.microphoneAccessDenied,
|
|
11701
|
+
classNames: classNames.microphoneAccessDenied,
|
|
11702
|
+
colors: colors.microphoneAccessDenied,
|
|
11703
|
+
verbiage: rawVerbiage.microphoneAccessDenied
|
|
11704
|
+
});
|
|
11705
|
+
}
|
|
11706
|
+
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
11707
|
+
className: classNames.container
|
|
11708
|
+
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11709
|
+
className: classNames.inner
|
|
11710
|
+
}, /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
11711
|
+
className: classNames.heading
|
|
11712
|
+
}, verbiage.headingText), onUserCancel && ( /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
|
|
11713
|
+
onClick: onUserCancel,
|
|
11714
|
+
className: classNames.cancelBtn
|
|
11715
|
+
})), /*#__PURE__*/React__namespace.default.createElement(StyledGuidanceMessage$1, null, verbiage.removeEyeCoveringsText, /*#__PURE__*/React__namespace.default.createElement("br", null), verbiage.avoidExcessiveBacklightingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
11716
|
+
className: classNames.imageContainer
|
|
11717
|
+
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
11718
|
+
className: classNames.image,
|
|
11719
|
+
alt: verbiage.headingText,
|
|
11720
|
+
src: assets.instructionImageUrl
|
|
11721
|
+
})), /*#__PURE__*/React__namespace.default.createElement(StyledButtonsRow$6, {
|
|
11722
|
+
className: classNames.buttonsRow
|
|
11723
|
+
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11724
|
+
variant: "positive",
|
|
11725
|
+
disabled: !cameraReady || !modelsReady,
|
|
11726
|
+
finished: cameraReady && modelsReady,
|
|
11727
|
+
className: classNames.continueBtn,
|
|
11728
|
+
colors: colors.continueBtn,
|
|
11729
|
+
onClick: function onClick() {
|
|
11730
|
+
setDismissed(true);
|
|
11731
|
+
onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
|
|
11732
|
+
}
|
|
11733
|
+
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
11734
|
+
};
|
|
11735
|
+
var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n padding: 12px 24px;\n font-weight: normal;\n line-height: 1.5;\n margin-bottom: -30px;\n"], ["\n padding: 12px 24px;\n font-weight: normal;\n line-height: 1.5;\n margin-bottom: -30px;\n"])));
|
|
11736
|
+
var StyledButtonsRow$6 = styled__default.default(ButtonsRow$1)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-direction: column;\n padding-top: 25px;\n"], ["\n flex-direction: column;\n padding-top: 25px;\n"])));
|
|
11737
|
+
var templateObject_1$g, templateObject_2$c;
|
|
11276
11738
|
|
|
11277
11739
|
var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
|
|
11278
11740
|
var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
|
|
@@ -11386,21 +11848,21 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
|
|
|
11386
11848
|
}
|
|
11387
11849
|
}, verbiage.continueText))))));
|
|
11388
11850
|
};
|
|
11389
|
-
var OverlayInner = styled__default.default.div(templateObject_1$
|
|
11851
|
+
var OverlayInner = styled__default.default.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"], ["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
11390
11852
|
var _a, _b, _c, _d;
|
|
11391
11853
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
11392
11854
|
}, function (props) {
|
|
11393
11855
|
var _a, _b, _c, _d;
|
|
11394
11856
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
11395
11857
|
});
|
|
11396
|
-
var OverlayHeader = styled__default.default.div(templateObject_2$
|
|
11858
|
+
var OverlayHeader = styled__default.default.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"])), function (props) {
|
|
11397
11859
|
var _a;
|
|
11398
11860
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
11399
11861
|
}, function (props) {
|
|
11400
11862
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
11401
11863
|
});
|
|
11402
|
-
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
11403
|
-
var StyledButtonsRow$5 = styled__default.default(ButtonsRow)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
|
|
11864
|
+
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
11865
|
+
var StyledButtonsRow$5 = styled__default.default(ButtonsRow$1)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
|
|
11404
11866
|
var _a, _b, _c, _d;
|
|
11405
11867
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
11406
11868
|
}, function (props) {
|
|
@@ -11435,7 +11897,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
|
|
|
11435
11897
|
var _a, _b, _c, _d, _e, _f;
|
|
11436
11898
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.selfieCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
|
|
11437
11899
|
});
|
|
11438
|
-
var templateObject_1$
|
|
11900
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$b, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
11439
11901
|
|
|
11440
11902
|
var components = {
|
|
11441
11903
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -11472,40 +11934,44 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11472
11934
|
releaseCameraAccessOnExit = _k === void 0 ? true : _k,
|
|
11473
11935
|
_l = _a.silentFallback,
|
|
11474
11936
|
silentFallback = _l === void 0 ? false : _l,
|
|
11475
|
-
|
|
11476
|
-
|
|
11477
|
-
|
|
11478
|
-
|
|
11479
|
-
|
|
11480
|
-
|
|
11481
|
-
|
|
11482
|
-
|
|
11483
|
-
|
|
11484
|
-
|
|
11485
|
-
|
|
11486
|
-
|
|
11487
|
-
|
|
11488
|
-
|
|
11489
|
-
|
|
11490
|
-
|
|
11491
|
-
|
|
11492
|
-
|
|
11493
|
-
|
|
11494
|
-
var _u = React.
|
|
11495
|
-
|
|
11496
|
-
|
|
11497
|
-
|
|
11498
|
-
|
|
11499
|
-
|
|
11500
|
-
|
|
11501
|
-
|
|
11502
|
-
|
|
11937
|
+
guidesComponent = _a.guidesComponent,
|
|
11938
|
+
disableCapturePreview = _a.disableCapturePreview,
|
|
11939
|
+
_m = _a.requireVerticalFaceCentering,
|
|
11940
|
+
requireVerticalFaceCentering = _m === void 0 ? true : _m,
|
|
11941
|
+
_o = _a.assets,
|
|
11942
|
+
assets = _o === void 0 ? {} : _o,
|
|
11943
|
+
_p = _a.classNames,
|
|
11944
|
+
classNames = _p === void 0 ? {} : _p,
|
|
11945
|
+
_q = _a.colors,
|
|
11946
|
+
colors = _q === void 0 ? {} : _q,
|
|
11947
|
+
_r = _a.verbiage,
|
|
11948
|
+
verbiage = _r === void 0 ? {} : _r,
|
|
11949
|
+
_s = _a.debugMode,
|
|
11950
|
+
debugMode = _s === void 0 ? false : _s;
|
|
11951
|
+
var _t = React.useContext(SubmissionContext),
|
|
11952
|
+
submissionResponse = _t.submissionResponse,
|
|
11953
|
+
livenessCheckRequest = _t.livenessCheckRequest,
|
|
11954
|
+
setSelfieImage = _t.setSelfieImage,
|
|
11955
|
+
logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt;
|
|
11956
|
+
var _u = React.useContext(CameraStateContext),
|
|
11957
|
+
cameraAccessDenied = _u.cameraAccessDenied,
|
|
11958
|
+
requestCameraAccess = _u.requestCameraAccess,
|
|
11959
|
+
releaseCameraAccess = _u.releaseCameraAccess;
|
|
11960
|
+
var _v = React.useState(''),
|
|
11961
|
+
faceCropImageUrl = _v[0],
|
|
11962
|
+
setFaceCropImageUrl = _v[1];
|
|
11963
|
+
var _w = React.useState(0),
|
|
11964
|
+
retryCount = _w[0],
|
|
11965
|
+
setRetryCount = _w[1];
|
|
11966
|
+
var _x = React.useState('LOADING'),
|
|
11967
|
+
captureState = _x[0],
|
|
11968
|
+
setCaptureState = _x[1];
|
|
11503
11969
|
var captureStartedAt = React.useRef();
|
|
11504
11970
|
var captureEndedAt = React.useRef();
|
|
11505
11971
|
var operationStartedAt = React.useRef();
|
|
11506
|
-
var
|
|
11507
|
-
start =
|
|
11508
|
-
stop =
|
|
11972
|
+
var _y = React.useContext(SelfieGuidanceModelsContext),
|
|
11973
|
+
start = _y.start,
|
|
11974
|
+
stop = _y.stop;
|
|
11509
11975
|
React.useEffect(function () {
|
|
11510
11976
|
operationStartedAt.current = new Date();
|
|
11511
11977
|
}, []);
|
|
@@ -11553,9 +12019,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11553
12019
|
setCaptureState('FAILED');
|
|
11554
12020
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
|
|
11555
12021
|
}, [onTimeout, livenessCheckRequest, submissionResponse]);
|
|
11556
|
-
var
|
|
11557
|
-
attempt =
|
|
11558
|
-
setAttempt =
|
|
12022
|
+
var _z = React.useState(0),
|
|
12023
|
+
attempt = _z[0],
|
|
12024
|
+
setAttempt = _z[1];
|
|
11559
12025
|
var onExitCallback = React.useCallback(function () {
|
|
11560
12026
|
setAttempt(function (n) {
|
|
11561
12027
|
return n + 1;
|
|
@@ -11608,6 +12074,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11608
12074
|
onExit: onExitCallback,
|
|
11609
12075
|
timeoutDurationMs: timeoutDurationMs,
|
|
11610
12076
|
silentFallback: silentFallback,
|
|
12077
|
+
guidesComponent: guidesComponent,
|
|
12078
|
+
disableCapturePreview: disableCapturePreview,
|
|
12079
|
+
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
11611
12080
|
classNames: classNames.capture,
|
|
11612
12081
|
colors: colors,
|
|
11613
12082
|
verbiage: verbiage,
|
|
@@ -11806,11 +12275,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
11806
12275
|
}
|
|
11807
12276
|
}, verbiage.captureBtnText)))));
|
|
11808
12277
|
};
|
|
11809
|
-
var Inner = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
11810
|
-
var Heading$4 = styled__default.default.h3(templateObject_2$
|
|
11811
|
-
var Description = styled__default.default.p(templateObject_3$
|
|
11812
|
-
var StyledButtonsRow$4 = styled__default.default(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11813
|
-
var templateObject_1$
|
|
12278
|
+
var Inner = styled__default.default(OverlayInner$2)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
12279
|
+
var Heading$4 = styled__default.default.h3(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
12280
|
+
var Description = styled__default.default.p(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
12281
|
+
var StyledButtonsRow$4 = styled__default.default(ButtonsRow$1)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
12282
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$a, templateObject_4$4;
|
|
11814
12283
|
|
|
11815
12284
|
var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
|
|
11816
12285
|
var documents = _a.documents,
|
|
@@ -11954,7 +12423,7 @@ function convertSVGtoImg(svgData_1) {
|
|
|
11954
12423
|
});
|
|
11955
12424
|
}
|
|
11956
12425
|
|
|
11957
|
-
var SignaturePaperBacking = styled__default.default.div(templateObject_1$
|
|
12426
|
+
var SignaturePaperBacking = styled__default.default.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n ", "\n ", "\n"], ["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n ", "\n ", "\n"])), function (props) {
|
|
11958
12427
|
var _a, _b;
|
|
11959
12428
|
return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.background) ? "background: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.background, ";") : "";
|
|
11960
12429
|
}, function (props) {
|
|
@@ -11964,8 +12433,8 @@ var SignaturePaperBacking = styled__default.default.div(templateObject_1$c || (t
|
|
|
11964
12433
|
var _a, _b;
|
|
11965
12434
|
return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.backgroundPosition) ? "background-position: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.backgroundPosition, ";") : "";
|
|
11966
12435
|
});
|
|
11967
|
-
var SignatureCanvasContainer = styled__default.default.div(templateObject_2$
|
|
11968
|
-
var SignaturePad = styled__default.default.div(templateObject_3$
|
|
12436
|
+
var SignatureCanvasContainer = styled__default.default.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n position: absolute;\n top: 25%;\n left: 15%;\n width: 70%;\n height: 50%;\n\n @media (max-width: 800px) {\n top: 15%;\n left: 2%;\n width: 96%;\n height: 70%;\n }\n"], ["\n position: absolute;\n top: 25%;\n left: 15%;\n width: 70%;\n height: 50%;\n\n @media (max-width: 800px) {\n top: 15%;\n left: 2%;\n width: 96%;\n height: 70%;\n }\n"])));
|
|
12437
|
+
var SignaturePad = styled__default.default.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n"], ["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n"])), function (props) {
|
|
11969
12438
|
var _a, _b, _c;
|
|
11970
12439
|
return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.background) !== null && _c !== void 0 ? _c : 'rgba(255, 255, 255, 0.5)';
|
|
11971
12440
|
}, function (props) {
|
|
@@ -11975,8 +12444,8 @@ var SignaturePad = styled__default.default.div(templateObject_3$8 || (templateOb
|
|
|
11975
12444
|
var _a, _b, _c;
|
|
11976
12445
|
return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : '16px';
|
|
11977
12446
|
});
|
|
11978
|
-
var SignatureButtonsContainer = styled__default.default(ButtonsRow)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"], ["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"])));
|
|
11979
|
-
var templateObject_1$
|
|
12447
|
+
var SignatureButtonsContainer = styled__default.default(ButtonsRow$1)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"], ["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"])));
|
|
12448
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$3;
|
|
11980
12449
|
|
|
11981
12450
|
var SignatureCapture = function SignatureCapture(_a) {
|
|
11982
12451
|
var _b;
|
|
@@ -12047,8 +12516,8 @@ var SignatureCapture = function SignatureCapture(_a) {
|
|
|
12047
12516
|
finished: true
|
|
12048
12517
|
}, verbiage.acceptBtnText)))));
|
|
12049
12518
|
};
|
|
12050
|
-
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$
|
|
12051
|
-
var templateObject_1$
|
|
12519
|
+
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12520
|
+
var templateObject_1$c;
|
|
12052
12521
|
|
|
12053
12522
|
var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
|
|
12054
12523
|
if (mergeAVStreams === void 0) {
|
|
@@ -12405,8 +12874,8 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
12405
12874
|
ref: outputCanvas
|
|
12406
12875
|
}));
|
|
12407
12876
|
};
|
|
12408
|
-
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$
|
|
12409
|
-
var templateObject_1$
|
|
12877
|
+
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12878
|
+
var templateObject_1$b;
|
|
12410
12879
|
|
|
12411
12880
|
var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
12412
12881
|
var videoUrl = _a.videoUrl,
|
|
@@ -12445,7 +12914,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12445
12914
|
style: {
|
|
12446
12915
|
display: 'none'
|
|
12447
12916
|
}
|
|
12448
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
12917
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
|
|
12449
12918
|
className: classNames.buttonsRow
|
|
12450
12919
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
12451
12920
|
variant: "warning",
|
|
@@ -12461,8 +12930,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12461
12930
|
finished: true
|
|
12462
12931
|
}, verbiage.doneBtnText))));
|
|
12463
12932
|
};
|
|
12464
|
-
var StyledVideo$1 = styled__default.default.video(templateObject_1$
|
|
12465
|
-
var templateObject_1$
|
|
12933
|
+
var StyledVideo$1 = styled__default.default.video(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n max-width: 100%;\n"], ["\n margin-left: auto;\n margin-right: auto;\n max-width: 100%;\n"])));
|
|
12934
|
+
var templateObject_1$a;
|
|
12466
12935
|
|
|
12467
12936
|
var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
12468
12937
|
var _b;
|
|
@@ -12641,18 +13110,91 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
12641
13110
|
}));
|
|
12642
13111
|
};
|
|
12643
13112
|
|
|
13113
|
+
var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n position: relative;\n aspect-ratio: 3.375 / 2.125;\n ", "\n box-sizing: border-box;\n"], ["\n position: relative;\n aspect-ratio: 3.375 / 2.125;\n ", "\n box-sizing: border-box;\n"])), function (props) {
|
|
13114
|
+
return props.$isVisible ? '' : 'opacity: 0;';
|
|
13115
|
+
});
|
|
13116
|
+
var IdCardGuideImage = styled__default.default.img(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n width: 100%;\n max-height: 100%;\n ", "\n"], ["\n width: 100%;\n max-height: 100%;\n ", "\n"])), function (props) {
|
|
13117
|
+
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
13118
|
+
});
|
|
13119
|
+
function IdCardBorder(_a) {
|
|
13120
|
+
var children = _a.children,
|
|
13121
|
+
_b = _a.status,
|
|
13122
|
+
status = _b === void 0 ? 'ready' : _b,
|
|
13123
|
+
_c = _a.borderWidth,
|
|
13124
|
+
borderWidth = _c === void 0 ? 20 : _c,
|
|
13125
|
+
_d = _a.borderRadius,
|
|
13126
|
+
borderRadius = _d === void 0 ? 25 : _d,
|
|
13127
|
+
_e = _a.borderColor,
|
|
13128
|
+
borderColor = _e === void 0 ? 'white' : _e,
|
|
13129
|
+
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor"]);
|
|
13130
|
+
var dashArray = 12;
|
|
13131
|
+
var _f = React.useState(0),
|
|
13132
|
+
dashOffset = _f[0],
|
|
13133
|
+
setDashOffset = _f[1];
|
|
13134
|
+
React.useEffect(function () {
|
|
13135
|
+
if (status !== 'capturing') {
|
|
13136
|
+
setDashOffset(0);
|
|
13137
|
+
return;
|
|
13138
|
+
}
|
|
13139
|
+
var interval = setInterval(function () {
|
|
13140
|
+
setDashOffset(function (n) {
|
|
13141
|
+
return (n - 1) % (dashArray * 2);
|
|
13142
|
+
});
|
|
13143
|
+
}, 10);
|
|
13144
|
+
return function () {
|
|
13145
|
+
clearInterval(interval);
|
|
13146
|
+
};
|
|
13147
|
+
}, [status]);
|
|
13148
|
+
var _g = React.useState('0'),
|
|
13149
|
+
width = _g[0],
|
|
13150
|
+
setWidth = _g[1];
|
|
13151
|
+
React.useLayoutEffect(function () {
|
|
13152
|
+
setTimeout(function () {
|
|
13153
|
+
setWidth('100%');
|
|
13154
|
+
}, 0);
|
|
13155
|
+
}, []);
|
|
13156
|
+
return /*#__PURE__*/React__namespace.default.createElement("div", _assign({}, props), children, /*#__PURE__*/React__namespace.default.createElement(SvgOverlay, {
|
|
13157
|
+
width: width,
|
|
13158
|
+
height: "100%",
|
|
13159
|
+
fill: "none",
|
|
13160
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
13161
|
+
}, /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
13162
|
+
id: "round-corner"
|
|
13163
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
13164
|
+
x: "0",
|
|
13165
|
+
y: "0",
|
|
13166
|
+
width: "100%",
|
|
13167
|
+
height: "100%",
|
|
13168
|
+
rx: borderRadius,
|
|
13169
|
+
ry: borderRadius
|
|
13170
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
13171
|
+
x: "0",
|
|
13172
|
+
y: "0",
|
|
13173
|
+
width: "100%",
|
|
13174
|
+
height: "100%",
|
|
13175
|
+
rx: borderRadius,
|
|
13176
|
+
ry: borderRadius,
|
|
13177
|
+
stroke: borderColor,
|
|
13178
|
+
strokeWidth: borderWidth,
|
|
13179
|
+
clipPath: "url(#round-corner)",
|
|
13180
|
+
strokeDasharray: status === 'disabled' ? '0' : dashArray,
|
|
13181
|
+
strokeDashoffset: dashOffset
|
|
13182
|
+
})));
|
|
13183
|
+
}
|
|
13184
|
+
var SvgOverlay = styled__default.default.svg(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
|
|
13185
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8;
|
|
13186
|
+
|
|
12644
13187
|
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
12645
13188
|
var _b;
|
|
12646
|
-
var
|
|
12647
|
-
|
|
12648
|
-
|
|
12649
|
-
|
|
12650
|
-
borderWidth =
|
|
12651
|
-
|
|
12652
|
-
assets = _d === void 0 ? {} : _d;
|
|
13189
|
+
var _c = _a.assets,
|
|
13190
|
+
assets = _c === void 0 ? {} : _c,
|
|
13191
|
+
_d = _a.classNames,
|
|
13192
|
+
classNames = _d === void 0 ? {} : _d,
|
|
13193
|
+
borderWidth = _a.borderWidth,
|
|
13194
|
+
borderColor = _a.borderColor;
|
|
12653
13195
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
12654
|
-
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-
|
|
12655
|
-
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-
|
|
13196
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
|
|
13197
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
|
|
12656
13198
|
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
12657
13199
|
var _e = React.useState(1),
|
|
12658
13200
|
transitionTime = _e[0],
|
|
@@ -12681,39 +13223,36 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
12681
13223
|
clearTimeout(timeout);
|
|
12682
13224
|
};
|
|
12683
13225
|
}, []);
|
|
12684
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(
|
|
12685
|
-
|
|
12686
|
-
|
|
12687
|
-
|
|
13226
|
+
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
|
|
13227
|
+
className: classNames.frontImageContainer,
|
|
13228
|
+
status: "disabled",
|
|
13229
|
+
borderWidth: borderWidth,
|
|
13230
|
+
borderColor: borderColor,
|
|
12688
13231
|
"$transforms": frontTransforms.join(' '),
|
|
12689
13232
|
"$transitionTime": transitionTime,
|
|
12690
|
-
"$
|
|
12691
|
-
|
|
12692
|
-
|
|
12693
|
-
|
|
12694
|
-
|
|
12695
|
-
|
|
12696
|
-
className:
|
|
13233
|
+
"$isVisible": true
|
|
13234
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
13235
|
+
src: assets.frontImageUrl,
|
|
13236
|
+
className: classNames.frontImage,
|
|
13237
|
+
alt: ""
|
|
13238
|
+
})), /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
|
|
13239
|
+
className: classNames.backImageContainer,
|
|
13240
|
+
status: "disabled",
|
|
13241
|
+
borderWidth: borderWidth,
|
|
13242
|
+
borderColor: borderColor,
|
|
12697
13243
|
"$transforms": backTransforms.join(' '),
|
|
12698
13244
|
"$transitionTime": transitionTime,
|
|
12699
|
-
"$
|
|
12700
|
-
|
|
12701
|
-
|
|
12702
|
-
|
|
12703
|
-
|
|
13245
|
+
"$isVisible": true
|
|
13246
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
13247
|
+
src: assets.backImageUrl,
|
|
13248
|
+
className: classNames.backImage,
|
|
13249
|
+
alt: ""
|
|
13250
|
+
})));
|
|
12704
13251
|
};
|
|
12705
|
-
var
|
|
13252
|
+
var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n width: 100%;\n max-height: 100%;\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n width: 100%;\n max-height: 100%;\n"])), function (props) {
|
|
12706
13253
|
return props.$transitionTime;
|
|
12707
13254
|
}, function (props) {
|
|
12708
13255
|
return props.$transforms;
|
|
12709
|
-
}, function (props) {
|
|
12710
|
-
return props.$isBack ? 'absolute' : 'relative';
|
|
12711
|
-
}, function (props) {
|
|
12712
|
-
return -props.$borderWidth / 2;
|
|
12713
|
-
}, function (props) {
|
|
12714
|
-
return props.$imageWidth;
|
|
12715
|
-
}, function (props) {
|
|
12716
|
-
return props.$imageHeight + props.$borderWidth;
|
|
12717
13256
|
});
|
|
12718
13257
|
var templateObject_1$8;
|
|
12719
13258
|
|
|
@@ -12723,98 +13262,84 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
12723
13262
|
requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
|
|
12724
13263
|
_z = _a.satisfied,
|
|
12725
13264
|
satisfied = _z === void 0 ? false : _z,
|
|
13265
|
+
_0 = _a.faceGuideStatus,
|
|
13266
|
+
faceGuideStatus = _0 === void 0 ? 'success' : _0,
|
|
12726
13267
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
12727
13268
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
13269
|
+
_1 = _a.idCardGuideStatus,
|
|
13270
|
+
idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
|
|
12728
13271
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
12729
13272
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
12730
|
-
|
|
12731
|
-
assets =
|
|
12732
|
-
|
|
12733
|
-
classNames =
|
|
12734
|
-
|
|
12735
|
-
rawVerbiage =
|
|
13273
|
+
_2 = _a.assets,
|
|
13274
|
+
assets = _2 === void 0 ? {} : _2,
|
|
13275
|
+
_3 = _a.classNames,
|
|
13276
|
+
classNames = _3 === void 0 ? {} : _3,
|
|
13277
|
+
_4 = _a.verbiage,
|
|
13278
|
+
rawVerbiage = _4 === void 0 ? {} : _4;
|
|
12736
13279
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
12737
13280
|
var imageRef = React.useRef(null);
|
|
12738
|
-
|
|
12739
|
-
|
|
12740
|
-
setImageWidth = _3[1];
|
|
12741
|
-
var _4 = React.useState(0),
|
|
12742
|
-
imageHeight = _4[0],
|
|
12743
|
-
setImageHeight = _4[1];
|
|
12744
|
-
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12745
|
-
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
13281
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
|
|
13282
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
|
|
12746
13283
|
var verbiage = useTranslations(rawVerbiage, {
|
|
12747
13284
|
idFrontInstructionText: 'Display the front of your ID card...',
|
|
12748
13285
|
idBackInstructionText: 'Display the back of your ID card...',
|
|
12749
|
-
flipIdInstructionText: 'Please flip your ID card...'
|
|
13286
|
+
flipIdInstructionText: 'Please flip your ID card...',
|
|
13287
|
+
verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
|
|
12750
13288
|
});
|
|
12751
|
-
var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
|
|
13289
|
+
var instructionText = requestedAction === 'VERIFY_LIVENESS' ? verbiage.verifyLivenessInstructionText : requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
|
|
12752
13290
|
var theme = styled.useTheme();
|
|
12753
|
-
if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d :
|
|
12754
|
-
if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : '
|
|
12755
|
-
if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m :
|
|
12756
|
-
if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : '
|
|
12757
|
-
var captureImageSize = function captureImageSize() {
|
|
12758
|
-
var _a, _b, _c, _d;
|
|
12759
|
-
if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
|
|
12760
|
-
if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
|
|
12761
|
-
};
|
|
13291
|
+
if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 5;
|
|
13292
|
+
if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : '#D6DCE7';
|
|
13293
|
+
if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 20;
|
|
13294
|
+
if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : '#D6DCE7';
|
|
12762
13295
|
return /*#__PURE__*/React__namespace.default.createElement(Container, {
|
|
12763
13296
|
className: classNames.container
|
|
12764
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
13297
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer, {
|
|
13298
|
+
className: classNames.faceGuideContainer
|
|
13299
|
+
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
|
|
12765
13300
|
className: classNames.faceGuide,
|
|
12766
|
-
|
|
12767
|
-
|
|
12768
|
-
|
|
13301
|
+
status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
|
|
13302
|
+
borderWidth: faceGuideBorderWidth,
|
|
13303
|
+
borderColor: faceGuideBorderColor
|
|
13304
|
+
})), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideContainer, {
|
|
12769
13305
|
className: classNames.idCardGuideContainer
|
|
12770
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
12771
|
-
className: classNames.
|
|
12772
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
12773
|
-
className: classNames.
|
|
12774
|
-
|
|
12775
|
-
"$background": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsBackgroundColor
|
|
12776
|
-
}, instructionText)), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
|
|
12777
|
-
"$borderWidth": idCardGuideBorderWidth,
|
|
12778
|
-
"$borderColor": idCardGuideBorderColor,
|
|
12779
|
-
className: classNames.idCardGuideImageContainer
|
|
12780
|
-
}, requestedAction === 'FLIP_ID' ? ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
12781
|
-
assets: assets,
|
|
12782
|
-
imageWidth: imageWidth,
|
|
12783
|
-
imageHeight: imageHeight,
|
|
13306
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInner, {
|
|
13307
|
+
className: classNames.idCardGuideInner
|
|
13308
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
|
|
13309
|
+
className: classNames.idCardGuideImageContainer,
|
|
13310
|
+
status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
|
|
12784
13311
|
borderWidth: idCardGuideBorderWidth,
|
|
12785
|
-
|
|
12786
|
-
|
|
12787
|
-
|
|
12788
|
-
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
13312
|
+
borderColor: idCardGuideBorderColor,
|
|
13313
|
+
"$isVisible": requestedAction !== 'FLIP_ID'
|
|
13314
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
12789
13315
|
alt: "",
|
|
13316
|
+
ref: imageRef,
|
|
12790
13317
|
className: classNames.idCardGuideImage,
|
|
12791
|
-
"$isMirrored": !((
|
|
12792
|
-
|
|
12793
|
-
|
|
12794
|
-
|
|
13318
|
+
"$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
|
|
13319
|
+
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
|
|
13320
|
+
})), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
13321
|
+
assets: assets,
|
|
13322
|
+
classNames: classNames.flipIdPrompt,
|
|
13323
|
+
borderWidth: idCardGuideBorderWidth,
|
|
13324
|
+
borderColor: idCardGuideBorderColor
|
|
13325
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructionsContainer, {
|
|
13326
|
+
className: classNames.idCardGuideInstructionsContainer
|
|
13327
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructions, {
|
|
13328
|
+
className: classNames.idCardGuideInstructions,
|
|
13329
|
+
"$textColor": (_v = (_u = theme.idVideoCapture) === null || _u === void 0 ? void 0 : _u.idCardGuides) === null || _v === void 0 ? void 0 : _v.instructionsTextColor,
|
|
13330
|
+
"$background": (_x = (_w = theme.idVideoCapture) === null || _w === void 0 ? void 0 : _w.idCardGuides) === null || _x === void 0 ? void 0 : _x.instructionsBackgroundColor
|
|
13331
|
+
}, instructionText))));
|
|
12795
13332
|
};
|
|
12796
|
-
var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position:
|
|
13333
|
+
var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n max-height: 100%;\n flex-direction: column;\n align-items: center;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n padding: 40px;\n font-family: ", ";\n box-sizing: border-box;\n"], ["\n display: flex;\n max-height: 100%;\n flex-direction: column;\n align-items: center;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n padding: 40px;\n font-family: ", ";\n box-sizing: border-box;\n"])), function (props) {
|
|
12797
13334
|
var _a;
|
|
12798
13335
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
12799
13336
|
});
|
|
12800
|
-
var
|
|
12801
|
-
|
|
12802
|
-
|
|
12803
|
-
|
|
12804
|
-
|
|
12805
|
-
|
|
12806
|
-
});
|
|
12807
|
-
var IdCardGuideContainer = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: 50%;\n padding: 0 40px;\n display: flex;\n flex-flow: column nowrap;\n margin: 2% auto;\n"], ["\n height: 50%;\n padding: 0 40px;\n display: flex;\n flex-flow: column nowrap;\n margin: 2% auto;\n"])));
|
|
12808
|
-
var IdCardGuideInstructionsContainer = styled__default.default.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n width: 100%;\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n"], ["\n width: 100%;\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n"])));
|
|
12809
|
-
var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n padding: 8px 12px;\n font-weight: bold;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n padding: 8px 12px;\n font-weight: bold;\n"])));
|
|
12810
|
-
var IdCardGuideImageContainer = styled__default.default.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: relative;\n border: ", "px solid\n ", ";\n"], ["\n position: relative;\n border: ", "px solid\n ", ";\n"])), function (props) {
|
|
12811
|
-
return props.$borderWidth;
|
|
12812
|
-
}, function (props) {
|
|
12813
|
-
return props.$borderColor;
|
|
12814
|
-
});
|
|
12815
|
-
var IdCardGuideImage = styled__default.default.img(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100%;\n max-height: 100%;\n ", "\n"], ["\n width: 100%;\n max-height: 100%;\n ", "\n"])), function (props) {
|
|
12816
|
-
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
12817
|
-
});
|
|
13337
|
+
var FaceGuideContainer = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n"], ["\n position: relative;\n height: 100%;\n"])));
|
|
13338
|
+
var StyledSelfieCaptureAnimatedMask = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n max-width: 100%;\n height: 100%;\n align-items: flex-end;\n"], ["\n max-width: 100%;\n height: 100%;\n align-items: flex-end;\n"])));
|
|
13339
|
+
var IdCardGuideContainer = styled__default.default.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n"])));
|
|
13340
|
+
var IdCardGuideInner = styled__default.default.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n"], ["\n position: relative;\n height: 100%;\n"])));
|
|
13341
|
+
var IdCardGuideInstructionsContainer = styled__default.default.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: calc(100% - 80px);\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 0 40px;\n position: fixed;\n bottom: 14px;\n left: 0;\n right: 0;\n"], ["\n width: calc(100% - 80px);\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 0 40px;\n position: fixed;\n bottom: 14px;\n left: 0;\n right: 0;\n"])));
|
|
13342
|
+
var IdCardGuideInstructions = styled__default.default(GuidanceMessage)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-content: center;\n margin: 12px auto;\n padding: 8px 12px;\n font-weight: bold;\n font-size: 18px;\n"], ["\n align-content: center;\n margin: 12px auto;\n padding: 8px 12px;\n font-weight: bold;\n font-size: 18px;\n"])));
|
|
12818
13343
|
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
12819
13344
|
|
|
12820
13345
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
@@ -12905,7 +13430,7 @@ var ReadTextPromptText = styled__default.default.div(templateObject_3$6 || (temp
|
|
|
12905
13430
|
var _a, _b, _c, _d, _e, _f;
|
|
12906
13431
|
return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.prompt) === null || _c === void 0 ? void 0 : _c.borderRadius) ? "border-radius: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.prompt) === null || _f === void 0 ? void 0 : _f.borderRadius, ";") : "";
|
|
12907
13432
|
});
|
|
12908
|
-
var ReadTextPromptButtonsRow = styled__default.default(ButtonsRow)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin: 32px auto auto;\n gap: 20px;\n"], ["\n margin: 32px auto auto;\n gap: 20px;\n"])));
|
|
13433
|
+
var ReadTextPromptButtonsRow = styled__default.default(ButtonsRow$1)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin: 32px auto auto;\n gap: 20px;\n"], ["\n margin: 32px auto auto;\n gap: 20px;\n"])));
|
|
12909
13434
|
var ReadTextPromptTimeRemaining = styled__default.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"], ["\n padding: 20px;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
|
|
12910
13435
|
var _a, _b, _c, _d, _e, _f;
|
|
12911
13436
|
return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.timeRemaining) === null || _c === void 0 ? void 0 : _c.backgroundColor) ? "background: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.timeRemaining) === null || _f === void 0 ? void 0 : _f.backgroundColor, ";") : "";
|
|
@@ -12922,8 +13447,8 @@ var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4
|
|
|
12922
13447
|
var edgeBoundary = 0.05;
|
|
12923
13448
|
var defaultVideoIdCaptureThresholds = {
|
|
12924
13449
|
detection: {
|
|
12925
|
-
idCardFront: 0.
|
|
12926
|
-
idCardBack: 0.
|
|
13450
|
+
idCardFront: 0.7,
|
|
13451
|
+
idCardBack: 0.7,
|
|
12927
13452
|
passport: 1
|
|
12928
13453
|
},
|
|
12929
13454
|
focus: {
|
|
@@ -13260,12 +13785,10 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13260
13785
|
var theme = styled.useTheme();
|
|
13261
13786
|
var _30 = useTranslations(rawVerbiage, {
|
|
13262
13787
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
13263
|
-
searchingForIdCardText: 'Searching for ID card...',
|
|
13264
13788
|
captureBtnText: 'Capture'
|
|
13265
13789
|
}),
|
|
13266
13790
|
captureBtnText = _30.captureBtnText,
|
|
13267
|
-
faceNotCenteredText = _30.faceNotCenteredText
|
|
13268
|
-
searchingForIdCardText = _30.searchingForIdCardText;
|
|
13791
|
+
faceNotCenteredText = _30.faceNotCenteredText;
|
|
13269
13792
|
var debugScalingDetails = useDebugScalingDetails({
|
|
13270
13793
|
enabled: debugMode,
|
|
13271
13794
|
pageWidth: width,
|
|
@@ -13274,8 +13797,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13274
13797
|
videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
|
|
13275
13798
|
});
|
|
13276
13799
|
var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
|
|
13277
|
-
|
|
13278
|
-
|
|
13800
|
+
// const searchingForIdCard =
|
|
13801
|
+
// idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet
|
|
13802
|
+
var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
|
|
13279
13803
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13280
13804
|
ref: ref,
|
|
13281
13805
|
className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
|
|
@@ -13295,6 +13819,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13295
13819
|
verbiage: rawVerbiage.guides,
|
|
13296
13820
|
requestedAction: requestedAction,
|
|
13297
13821
|
satisfied: satisfied,
|
|
13822
|
+
idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
|
|
13298
13823
|
faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
|
|
13299
13824
|
idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
|
|
13300
13825
|
}), debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
|
|
@@ -13442,7 +13967,7 @@ var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
|
|
|
13442
13967
|
})) : ( /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
13443
13968
|
src: idBackImageUrl,
|
|
13444
13969
|
alt: "ID Back Image"
|
|
13445
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
13970
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
|
|
13446
13971
|
className: classNames.buttonsRow
|
|
13447
13972
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
13448
13973
|
variant: "warning",
|
|
@@ -13464,7 +13989,7 @@ var AssetSelectorOption = styled__default.default.div(templateObject_3$4 || (tem
|
|
|
13464
13989
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
13465
13990
|
|
|
13466
13991
|
var VideoIdWizard = function VideoIdWizard(_a) {
|
|
13467
|
-
var _b, _c, _d, _e, _f;
|
|
13992
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
13468
13993
|
var onComplete = _a.onComplete,
|
|
13469
13994
|
onExitCapture = _a.onExitCapture,
|
|
13470
13995
|
onExitAfterFailure = _a.onExitAfterFailure,
|
|
@@ -13472,66 +13997,66 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13472
13997
|
onIdCaptureModelError = _a.onIdCaptureModelError,
|
|
13473
13998
|
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
13474
13999
|
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
13475
|
-
|
|
13476
|
-
idCaptureProps =
|
|
13477
|
-
|
|
13478
|
-
faceLivenessProps =
|
|
13479
|
-
|
|
13480
|
-
idCaptureModelsEnabled =
|
|
13481
|
-
|
|
13482
|
-
videoIdCaptureThresholds =
|
|
14000
|
+
_m = _a.idCaptureProps,
|
|
14001
|
+
idCaptureProps = _m === void 0 ? {} : _m,
|
|
14002
|
+
_o = _a.faceLivenessProps,
|
|
14003
|
+
faceLivenessProps = _o === void 0 ? {} : _o,
|
|
14004
|
+
_p = _a.idCaptureModelsEnabled,
|
|
14005
|
+
idCaptureModelsEnabled = _p === void 0 ? true : _p,
|
|
14006
|
+
_q = _a.videoIdCaptureThresholds,
|
|
14007
|
+
videoIdCaptureThresholds = _q === void 0 ? defaultVideoIdCaptureThresholds : _q,
|
|
13483
14008
|
readTextPrompt = _a.readTextPrompt,
|
|
13484
14009
|
readTextTimeoutDurationMs = _a.readTextTimeoutDurationMs,
|
|
13485
14010
|
readTextMinReadingMs = _a.readTextMinReadingMs,
|
|
13486
|
-
|
|
13487
|
-
skipIdCapture =
|
|
13488
|
-
|
|
13489
|
-
skipShowIdCardBack =
|
|
13490
|
-
|
|
13491
|
-
skipSuccessScreen =
|
|
13492
|
-
|
|
13493
|
-
idCaptureLoadingOverlayMode =
|
|
13494
|
-
|
|
13495
|
-
idCaptureGuideType =
|
|
13496
|
-
|
|
13497
|
-
idCapturePortraitGuidesOnMobile =
|
|
13498
|
-
|
|
13499
|
-
idCaptureRotateLoadingOverlayImageWhenPortrait =
|
|
13500
|
-
|
|
13501
|
-
idCaptureModelLoadTimeoutMs =
|
|
13502
|
-
|
|
13503
|
-
faceLivenessLoadingOverlayMode =
|
|
13504
|
-
|
|
13505
|
-
disableFaceDetectionWhileAudioCapture =
|
|
13506
|
-
|
|
13507
|
-
disableFaceDetectionWhileAudioCaptureMsDelay =
|
|
13508
|
-
|
|
13509
|
-
silentFallback =
|
|
13510
|
-
|
|
13511
|
-
mergeAVStreams =
|
|
13512
|
-
|
|
13513
|
-
assets =
|
|
13514
|
-
|
|
13515
|
-
classNames =
|
|
13516
|
-
|
|
13517
|
-
colors =
|
|
13518
|
-
|
|
13519
|
-
verbiage =
|
|
13520
|
-
|
|
13521
|
-
debugMode =
|
|
13522
|
-
var
|
|
13523
|
-
submissionStatus =
|
|
13524
|
-
idCaptureVideoUrl =
|
|
13525
|
-
idCaptureVideoAudioUrl =
|
|
13526
|
-
idCaptureVideoIdFrontImage =
|
|
13527
|
-
idCaptureVideoIdBackImage =
|
|
13528
|
-
setIdCaptureVideoUrl =
|
|
13529
|
-
setIdCaptureVideoIdFrontImage =
|
|
13530
|
-
setIdCaptureVideoIdBackImage =
|
|
13531
|
-
setIdCaptureVideoAudioUrl =
|
|
13532
|
-
var
|
|
13533
|
-
captureState =
|
|
13534
|
-
setCaptureState =
|
|
14011
|
+
_r = _a.skipIdCapture,
|
|
14012
|
+
skipIdCapture = _r === void 0 ? false : _r,
|
|
14013
|
+
_s = _a.skipShowIdCardBack,
|
|
14014
|
+
skipShowIdCardBack = _s === void 0 ? false : _s,
|
|
14015
|
+
_t = _a.skipSuccessScreen,
|
|
14016
|
+
skipSuccessScreen = _t === void 0 ? false : _t,
|
|
14017
|
+
_u = _a.idCaptureLoadingOverlayMode,
|
|
14018
|
+
idCaptureLoadingOverlayMode = _u === void 0 ? 'default' : _u,
|
|
14019
|
+
_v = _a.idCaptureGuideType,
|
|
14020
|
+
idCaptureGuideType = _v === void 0 ? 'fit' : _v,
|
|
14021
|
+
_w = _a.idCapturePortraitGuidesOnMobile,
|
|
14022
|
+
idCapturePortraitGuidesOnMobile = _w === void 0 ? true : _w,
|
|
14023
|
+
_x = _a.idCaptureRotateLoadingOverlayImageWhenPortrait,
|
|
14024
|
+
idCaptureRotateLoadingOverlayImageWhenPortrait = _x === void 0 ? true : _x,
|
|
14025
|
+
_y = _a.idCaptureModelLoadTimeoutMs,
|
|
14026
|
+
idCaptureModelLoadTimeoutMs = _y === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _y,
|
|
14027
|
+
_z = _a.faceLivenessLoadingOverlayMode,
|
|
14028
|
+
faceLivenessLoadingOverlayMode = _z === void 0 ? 'default' : _z,
|
|
14029
|
+
_0 = _a.disableFaceDetectionWhileAudioCapture,
|
|
14030
|
+
disableFaceDetectionWhileAudioCapture = _0 === void 0 ? true : _0,
|
|
14031
|
+
_1 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
|
|
14032
|
+
disableFaceDetectionWhileAudioCaptureMsDelay = _1 === void 0 ? 2000 : _1,
|
|
14033
|
+
_2 = _a.silentFallback,
|
|
14034
|
+
silentFallback = _2 === void 0 ? false : _2,
|
|
14035
|
+
_3 = _a.mergeAVStreams,
|
|
14036
|
+
mergeAVStreams = _3 === void 0 ? false : _3,
|
|
14037
|
+
_4 = _a.assets,
|
|
14038
|
+
assets = _4 === void 0 ? {} : _4,
|
|
14039
|
+
_5 = _a.classNames,
|
|
14040
|
+
classNames = _5 === void 0 ? {} : _5,
|
|
14041
|
+
_6 = _a.colors,
|
|
14042
|
+
colors = _6 === void 0 ? {} : _6,
|
|
14043
|
+
_7 = _a.verbiage,
|
|
14044
|
+
verbiage = _7 === void 0 ? {} : _7,
|
|
14045
|
+
_8 = _a.debugMode,
|
|
14046
|
+
debugMode = _8 === void 0 ? false : _8;
|
|
14047
|
+
var _9 = React.useContext(SubmissionContext),
|
|
14048
|
+
submissionStatus = _9.submissionStatus,
|
|
14049
|
+
idCaptureVideoUrl = _9.idCaptureVideoUrl,
|
|
14050
|
+
idCaptureVideoAudioUrl = _9.idCaptureVideoAudioUrl,
|
|
14051
|
+
idCaptureVideoIdFrontImage = _9.idCaptureVideoIdFrontImage,
|
|
14052
|
+
idCaptureVideoIdBackImage = _9.idCaptureVideoIdBackImage,
|
|
14053
|
+
setIdCaptureVideoUrl = _9.setIdCaptureVideoUrl,
|
|
14054
|
+
setIdCaptureVideoIdFrontImage = _9.setIdCaptureVideoIdFrontImage,
|
|
14055
|
+
setIdCaptureVideoIdBackImage = _9.setIdCaptureVideoIdBackImage,
|
|
14056
|
+
setIdCaptureVideoAudioUrl = _9.setIdCaptureVideoAudioUrl;
|
|
14057
|
+
var _10 = React.useState('CAPTURING_ID'),
|
|
14058
|
+
captureState = _10[0],
|
|
14059
|
+
setCaptureState = _10[1];
|
|
13535
14060
|
React.useEffect(function () {
|
|
13536
14061
|
if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
|
|
13537
14062
|
}, [captureState, skipIdCapture]);
|
|
@@ -13562,9 +14087,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13562
14087
|
var onVideoCaptureFaceNotDetected = React.useCallback(function () {
|
|
13563
14088
|
setCaptureState('CHECKING_LIVENESS');
|
|
13564
14089
|
}, []);
|
|
13565
|
-
var
|
|
13566
|
-
attempt =
|
|
13567
|
-
setAttempt =
|
|
14090
|
+
var _11 = React.useState(0),
|
|
14091
|
+
attempt = _11[0],
|
|
14092
|
+
setAttempt = _11[1];
|
|
13568
14093
|
var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
|
|
13569
14094
|
var onFaceCaptureExitAfterFailure = React.useCallback(function (resp, req) {
|
|
13570
14095
|
userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);
|
|
@@ -13595,6 +14120,19 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13595
14120
|
});
|
|
13596
14121
|
onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
|
|
13597
14122
|
}, [onExitCapture]);
|
|
14123
|
+
var faceLivenessGuides = React.useCallback(function (_a) {
|
|
14124
|
+
var _b, _c, _d, _e, _f;
|
|
14125
|
+
var status = _a.status;
|
|
14126
|
+
return /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureGuides, {
|
|
14127
|
+
assets: (_b = assets.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides,
|
|
14128
|
+
classNames: (_c = classNames.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides,
|
|
14129
|
+
verbiage: (_d = verbiage.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guides,
|
|
14130
|
+
requestedAction: "VERIFY_LIVENESS",
|
|
14131
|
+
faceGuideStatus: status,
|
|
14132
|
+
faceGuideBorderColor: status === 'success' ? (_e = colors.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guidesSatisfiedColor : (_f = colors.idVideoCapture) === null || _f === void 0 ? void 0 : _f.guidesUnsatisfiedColor,
|
|
14133
|
+
idCardGuideStatus: "disabled"
|
|
14134
|
+
});
|
|
14135
|
+
}, [(_b = assets.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides, (_c = classNames.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides, (_d = colors.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guidesSatisfiedColor, (_e = colors.idVideoCapture) === null || _e === void 0 ? void 0 : _e.guidesUnsatisfiedColor, (_f = verbiage.idVideoCapture) === null || _f === void 0 ? void 0 : _f.guides]);
|
|
13598
14136
|
if (submissionStatus === SubmissionStatus.SUBMITTING) {
|
|
13599
14137
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13600
14138
|
className: "flex"
|
|
@@ -13612,8 +14150,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13612
14150
|
debugMode: debugMode
|
|
13613
14151
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
|
|
13614
14152
|
autoStart: false,
|
|
13615
|
-
documentDetectionModelUrl: (
|
|
13616
|
-
focusModelUrl: (
|
|
14153
|
+
documentDetectionModelUrl: (_h = (_g = idCaptureProps.assets) === null || _g === void 0 ? void 0 : _g.documentDetectionModelUrl) !== null && _h !== void 0 ? _h : '',
|
|
14154
|
+
focusModelUrl: (_k = (_j = idCaptureProps.assets) === null || _j === void 0 ? void 0 : _j.focusModelUrl) !== null && _k !== void 0 ? _k : '',
|
|
13617
14155
|
onModelError: onIdCaptureModelError,
|
|
13618
14156
|
modelLoadTimeoutMs: idCaptureModelLoadTimeoutMs
|
|
13619
14157
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
@@ -13621,7 +14159,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13621
14159
|
onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
|
|
13622
14160
|
modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
|
|
13623
14161
|
}, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13624
|
-
className: "flex ".concat((
|
|
14162
|
+
className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
|
|
13625
14163
|
}, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
|
|
13626
14164
|
className: classNames.cameraFeed
|
|
13627
14165
|
}), function () {
|
|
@@ -13659,6 +14197,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13659
14197
|
skipSuccessScreen: true,
|
|
13660
14198
|
renderCameraFeed: false,
|
|
13661
14199
|
releaseCameraAccessOnExit: false,
|
|
14200
|
+
disableCapturePreview: !debugMode,
|
|
14201
|
+
requireVerticalFaceCentering: false,
|
|
14202
|
+
guidesComponent: faceLivenessGuides,
|
|
13662
14203
|
assets: assets.faceLiveness,
|
|
13663
14204
|
classNames: classNames.faceLiveness,
|
|
13664
14205
|
colors: colors.faceLiveness,
|
|
@@ -15146,8 +15687,8 @@ var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
|
|
|
15146
15687
|
}, verbiage.doneBtnText))));
|
|
15147
15688
|
};
|
|
15148
15689
|
var Heading$3 = styled__default.default.h3(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15149
|
-
var ImageContainer$3 = styled__default.default(ButtonsRow)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15150
|
-
var StyledButtonsRow$3 = styled__default.default(ButtonsRow)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15690
|
+
var ImageContainer$3 = styled__default.default(ButtonsRow$1)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15691
|
+
var StyledButtonsRow$3 = styled__default.default(ButtonsRow$1)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15151
15692
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
15152
15693
|
|
|
15153
15694
|
var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
@@ -15198,8 +15739,8 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
|
15198
15739
|
}, verbiage.exitBtnText))));
|
|
15199
15740
|
};
|
|
15200
15741
|
var Heading$2 = styled__default.default.h3(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15201
|
-
var ImageContainer$2 = styled__default.default(ButtonsRow)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15202
|
-
var StyledButtonsRow$2 = styled__default.default(ButtonsRow)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15742
|
+
var ImageContainer$2 = styled__default.default(ButtonsRow$1)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15743
|
+
var StyledButtonsRow$2 = styled__default.default(ButtonsRow$1)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15203
15744
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
15204
15745
|
|
|
15205
15746
|
var ALLOWED_RETRIES$2 = 2;
|
|
@@ -15704,8 +16245,8 @@ var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
|
|
|
15704
16245
|
}, verbiage.doneBtnText))));
|
|
15705
16246
|
};
|
|
15706
16247
|
var Heading$1 = styled__default.default.h3(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15707
|
-
var ImageContainer$1 = styled__default.default(ButtonsRow)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15708
|
-
var StyledButtonsRow$1 = styled__default.default(ButtonsRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16248
|
+
var ImageContainer$1 = styled__default.default(ButtonsRow$1)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
16249
|
+
var StyledButtonsRow$1 = styled__default.default(ButtonsRow$1)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15709
16250
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
15710
16251
|
|
|
15711
16252
|
var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
@@ -15756,8 +16297,8 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
|
15756
16297
|
}, verbiage.exitBtnText))));
|
|
15757
16298
|
};
|
|
15758
16299
|
var Heading = styled__default.default.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15759
|
-
var ImageContainer = styled__default.default(ButtonsRow)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
15760
|
-
var StyledButtonsRow = styled__default.default(ButtonsRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16300
|
+
var ImageContainer = styled__default.default(ButtonsRow$1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
16301
|
+
var StyledButtonsRow = styled__default.default(ButtonsRow$1)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15761
16302
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
15762
16303
|
|
|
15763
16304
|
var ALLOWED_RETRIES = 2;
|