idmission-web-sdk 2.1.35 → 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/id_capture/IdCapture.d.ts +3 -0
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts +2 -2
- package/dist/components/id_capture/OverrideWrongDocumentTypeGuidanceDialog.d.ts +18 -0
- 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 +4 -0
- package/dist/lib/locales/index.d.ts +4 -0
- package/dist/sdk2.cjs.development.js +1984 -1433
- 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 +1984 -1433
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +1984 -1433
- 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 +9 -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$E || (templateObject_1$E = __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$D || (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
|
}
|
|
@@ -6142,8 +6142,8 @@ var initialState$4 = {
|
|
|
6142
6142
|
backDetectedFirst: false,
|
|
6143
6143
|
enableOverrideWrongDocumentTypeDialog: false,
|
|
6144
6144
|
allowOverrideWrongDocumentTypeAfterMs: 8000,
|
|
6145
|
-
|
|
6146
|
-
|
|
6145
|
+
allowOverrideWrongDocumentTypeGuidance: false,
|
|
6146
|
+
overrideWrongDocumentTypeGuidance: false,
|
|
6147
6147
|
wrongDocumentTypePredictions: 0,
|
|
6148
6148
|
idCardFrontDetectionScore: 0,
|
|
6149
6149
|
idCardFrontDetectionThresholdMet: false,
|
|
@@ -6267,8 +6267,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6267
6267
|
goodFramesThreshold = Math.ceil(3 * frameCaptureRate);
|
|
6268
6268
|
}
|
|
6269
6269
|
}
|
|
6270
|
-
var flipRequired = !state.
|
|
6271
|
-
var backDetectedFirst = !state.
|
|
6270
|
+
var flipRequired = !state.overrideWrongDocumentTypeGuidance && (state.allowIdCardBackToFrontCapture ? 'idCardFront' in state.capturedDocuments && detectedDocumentType === 'idCardFront' : state.requestedDocumentType === 'idCardBack' && detectedDocumentType === 'idCardFront');
|
|
6271
|
+
var backDetectedFirst = !state.overrideWrongDocumentTypeGuidance && (state.allowIdCardBackToFrontCapture ? 'idCardBack' in state.capturedDocuments && detectedDocumentType === 'idCardBack' : state.requestedDocumentType === 'idCardFront' && detectedDocumentType === 'idCardBack');
|
|
6272
6272
|
var wrongDocumentTypePredictions = state.wrongDocumentTypePredictions;
|
|
6273
6273
|
if (state.captureState === 'capturing' && (flipRequired || backDetectedFirst)) {
|
|
6274
6274
|
wrongDocumentTypePredictions += 1;
|
|
@@ -6297,7 +6297,7 @@ var _reducer = function reducer(state, action) {
|
|
|
6297
6297
|
}
|
|
6298
6298
|
var hasBeenRunningForLongEnough = !!state.captureStartedAt && new Date().getTime() - state.captureStartedAt.getTime() > 1000;
|
|
6299
6299
|
var overrideFlipRequirementThreshold = Math.ceil(state.allowOverrideWrongDocumentTypeAfterMs / 1000 * frameCaptureRate);
|
|
6300
|
-
var allowOverrideFlipRequirement = state.enableOverrideWrongDocumentTypeDialog && hasBeenRunningForLongEnough && !state.
|
|
6300
|
+
var allowOverrideFlipRequirement = state.enableOverrideWrongDocumentTypeDialog && hasBeenRunningForLongEnough && !state.overrideWrongDocumentTypeGuidance && overrideFlipRequirementThreshold > 0 && (state.allowOverrideWrongDocumentTypeGuidance || wrongDocumentTypePredictions >= overrideFlipRequirementThreshold);
|
|
6301
6301
|
return _assign(_assign({}, state), {
|
|
6302
6302
|
videoWidth: frameWidth,
|
|
6303
6303
|
videoHeight: frameHeight,
|
|
@@ -6310,7 +6310,7 @@ var _reducer = function reducer(state, action) {
|
|
|
6310
6310
|
documentTooClose: documentTooClose,
|
|
6311
6311
|
flipRequired: flipRequired,
|
|
6312
6312
|
backDetectedFirst: backDetectedFirst,
|
|
6313
|
-
|
|
6313
|
+
allowOverrideWrongDocumentTypeGuidance: allowOverrideFlipRequirement,
|
|
6314
6314
|
wrongDocumentTypePredictions: wrongDocumentTypePredictions,
|
|
6315
6315
|
idCardFrontDetectionScore: idCardFrontDetectionScore,
|
|
6316
6316
|
idCardFrontDetectionThresholdMet: idCardFrontDetectionThresholdMet,
|
|
@@ -6425,18 +6425,18 @@ var _reducer = function reducer(state, action) {
|
|
|
6425
6425
|
case 'flipRequestCompleted':
|
|
6426
6426
|
return _assign(_assign({}, state), {
|
|
6427
6427
|
captureState: 'capturing',
|
|
6428
|
-
|
|
6429
|
-
|
|
6428
|
+
allowOverrideWrongDocumentTypeGuidance: false,
|
|
6429
|
+
overrideWrongDocumentTypeGuidance: false,
|
|
6430
6430
|
wrongDocumentTypePredictions: 0
|
|
6431
6431
|
});
|
|
6432
6432
|
case 'allowOverrideFlipRequirement':
|
|
6433
6433
|
return _assign(_assign({}, state), {
|
|
6434
|
-
|
|
6434
|
+
allowOverrideWrongDocumentTypeGuidance: true
|
|
6435
6435
|
});
|
|
6436
6436
|
case 'overrideFlipRequirement':
|
|
6437
6437
|
return _assign(_assign({}, state), {
|
|
6438
|
-
|
|
6439
|
-
|
|
6438
|
+
allowOverrideWrongDocumentTypeGuidance: false,
|
|
6439
|
+
overrideWrongDocumentTypeGuidance: true
|
|
6440
6440
|
});
|
|
6441
6441
|
case 'resetWizard':
|
|
6442
6442
|
return _assign(_assign({}, initialState$4), {
|
|
@@ -6466,10 +6466,10 @@ var IdCaptureStateProvider = function IdCaptureStateProvider(_a) {
|
|
|
6466
6466
|
}, [onResize]);
|
|
6467
6467
|
var setRequiredDocumentType = React.useContext(IdCaptureModelsContext).setRequiredDocumentType;
|
|
6468
6468
|
React.useEffect(function () {
|
|
6469
|
-
if (state.
|
|
6469
|
+
if (state.overrideWrongDocumentTypeGuidance) {
|
|
6470
6470
|
setRequiredDocumentType('none');
|
|
6471
6471
|
}
|
|
6472
|
-
}, [state.
|
|
6472
|
+
}, [state.overrideWrongDocumentTypeGuidance, setRequiredDocumentType]);
|
|
6473
6473
|
return /*#__PURE__*/React__namespace.default.createElement(IdCaptureStateContext.Provider, {
|
|
6474
6474
|
value: state
|
|
6475
6475
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCaptureDispatchContext.Provider, {
|
|
@@ -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$k ||
|
|
|
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',
|
|
@@ -6800,7 +6802,9 @@ var esTranslation = {
|
|
|
6800
6802
|
'Camera ready': 'Cámara está lista',
|
|
6801
6803
|
'Loading guided capture experience...': 'Cargando la experiencia guiada para la captura....',
|
|
6802
6804
|
'Guided capture experience ready': 'La experiencia guiada está lista',
|
|
6803
|
-
"Let's Go!": 'Vamos!'
|
|
6805
|
+
"Let's Go!": 'Vamos!',
|
|
6806
|
+
'We are having trouble identifying the correct side of your id, do you want to continue with capture anyway?': 'Estamos teniendo problemas para identificar el lado correcto de tu identificación, quieres continuar con la captura?',
|
|
6807
|
+
OK: 'Sí'
|
|
6804
6808
|
};
|
|
6805
6809
|
|
|
6806
6810
|
var resources = {
|
|
@@ -6864,7 +6868,7 @@ function useTranslations(verbiage, fallbacks) {
|
|
|
6864
6868
|
}, [fallbacks, i18n.language, t, verbiage]);
|
|
6865
6869
|
}
|
|
6866
6870
|
|
|
6867
|
-
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) {
|
|
6868
6872
|
var $top = _a.$top;
|
|
6869
6873
|
return $top !== null && $top !== void 0 ? $top : '10vh';
|
|
6870
6874
|
}, function (_a) {
|
|
@@ -6877,17 +6881,61 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
6877
6881
|
if (!portalLocation) return element;
|
|
6878
6882
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6879
6883
|
};
|
|
6880
|
-
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) {
|
|
6881
6885
|
var _a, _b, _c, _d, _e, _f;
|
|
6882
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';
|
|
6883
6887
|
}, function (props) {
|
|
6884
6888
|
var _a, _b, _c, _d, _e, _f;
|
|
6885
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';
|
|
6886
6890
|
});
|
|
6887
|
-
var templateObject_1$
|
|
6891
|
+
var templateObject_1$D, templateObject_2$t;
|
|
6888
6892
|
|
|
6889
6893
|
var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
|
|
6890
6894
|
|
|
6895
|
+
function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
6896
|
+
var _b = _a.classNames,
|
|
6897
|
+
classNames = _b === void 0 ? {} : _b,
|
|
6898
|
+
_c = _a.verbiage,
|
|
6899
|
+
rawVerbiage = _c === void 0 ? {} : _c;
|
|
6900
|
+
var _d = useIdCaptureState(),
|
|
6901
|
+
state = _d[0],
|
|
6902
|
+
dispatch = _d[1];
|
|
6903
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
6904
|
+
messageText: 'We are having trouble identifying the correct side of your id, do you want to continue with capture anyway?',
|
|
6905
|
+
buttonText: 'OK'
|
|
6906
|
+
});
|
|
6907
|
+
if (!state.allowOverrideWrongDocumentTypeGuidance) return null;
|
|
6908
|
+
return /*#__PURE__*/React__namespace.default.createElement(Container$1, {
|
|
6909
|
+
className: classNames.container
|
|
6910
|
+
}, /*#__PURE__*/React__namespace.default.createElement(InnerContainer, {
|
|
6911
|
+
className: classNames.inner
|
|
6912
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Message, {
|
|
6913
|
+
className: classNames.message
|
|
6914
|
+
}, verbiage.messageText), /*#__PURE__*/React__namespace.default.createElement(ButtonContainer, {
|
|
6915
|
+
className: classNames.buttonContainer
|
|
6916
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Button, {
|
|
6917
|
+
variant: "positive",
|
|
6918
|
+
className: classNames.button,
|
|
6919
|
+
onClick: function onClick() {
|
|
6920
|
+
return dispatch({
|
|
6921
|
+
type: 'overrideFlipRequirement'
|
|
6922
|
+
});
|
|
6923
|
+
}
|
|
6924
|
+
}, verbiage.buttonText))));
|
|
6925
|
+
}
|
|
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) {
|
|
6927
|
+
var _a, _b, _c;
|
|
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';
|
|
6929
|
+
}, function (props) {
|
|
6930
|
+
var _a, _b, _c;
|
|
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';
|
|
6932
|
+
});
|
|
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;
|
|
6938
|
+
|
|
6891
6939
|
var IdCapture = function IdCapture(_a) {
|
|
6892
6940
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
6893
6941
|
var requiredDocumentType = _a.requiredDocumentType,
|
|
@@ -7022,46 +7070,10 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7022
7070
|
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
7023
7071
|
"$variant": satisfied ? 'positive' : 'default',
|
|
7024
7072
|
className: classNames.guidanceMessage
|
|
7025
|
-
}, guidanceMessage),
|
|
7026
|
-
|
|
7027
|
-
|
|
7028
|
-
|
|
7029
|
-
bottom: 0,
|
|
7030
|
-
width: '100dvw',
|
|
7031
|
-
background: '#eed202',
|
|
7032
|
-
display: 'flex',
|
|
7033
|
-
zIndex: 100001
|
|
7034
|
-
}
|
|
7035
|
-
}, /*#__PURE__*/React__namespace.default.createElement("div", {
|
|
7036
|
-
style: {
|
|
7037
|
-
display: 'flex',
|
|
7038
|
-
flexDirection: 'row',
|
|
7039
|
-
padding: '16px 24px',
|
|
7040
|
-
margin: 'auto 0',
|
|
7041
|
-
width: '100%'
|
|
7042
|
-
}
|
|
7043
|
-
}, /*#__PURE__*/React__namespace.default.createElement("span", {
|
|
7044
|
-
style: {
|
|
7045
|
-
display: 'block',
|
|
7046
|
-
margin: 'auto 12px auto 0'
|
|
7047
|
-
}
|
|
7048
|
-
}, "It appears that you are attempting to capture the wrong side of your ID card, but perhaps we are wrong about that. Would you like to proceed with capture anyway?"), /*#__PURE__*/React__namespace.default.createElement("div", {
|
|
7049
|
-
style: {
|
|
7050
|
-
marginLeft: 'auto',
|
|
7051
|
-
display: 'flex'
|
|
7052
|
-
}
|
|
7053
|
-
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
7054
|
-
variant: "positive",
|
|
7055
|
-
style: {
|
|
7056
|
-
whiteSpace: 'nowrap',
|
|
7057
|
-
margin: 'auto'
|
|
7058
|
-
},
|
|
7059
|
-
onClick: function onClick() {
|
|
7060
|
-
return dispatch({
|
|
7061
|
-
type: 'overrideFlipRequirement'
|
|
7062
|
-
});
|
|
7063
|
-
}
|
|
7064
|
-
}, "Capture Anyway"))))))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, {
|
|
7073
|
+
}, guidanceMessage), /*#__PURE__*/React__namespace.default.createElement(OverrideWrongDocumentTypeGuidanceDialog, {
|
|
7074
|
+
classNames: classNames.overrideWrongDocumentTypeGuidanceDialog,
|
|
7075
|
+
verbiage: rawVerbiage.overrideWrongDocumentTypeGuidanceDialog
|
|
7076
|
+
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, {
|
|
7065
7077
|
"$flipX": !((_j = cameraRef.current) === null || _j === void 0 ? void 0 : _j.isRearFacing),
|
|
7066
7078
|
scaling: debugScalingDetails
|
|
7067
7079
|
}, state.detectedObjects.map(function (obj, i) {
|
|
@@ -7118,13 +7130,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7118
7130
|
finished: true
|
|
7119
7131
|
}, verbiage.retryBtnText)));
|
|
7120
7132
|
};
|
|
7121
|
-
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
7122
|
-
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
7123
|
-
var Description$4 = styled__default.default.p(templateObject_3$
|
|
7124
|
-
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$
|
|
7125
|
-
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;
|
|
7126
7138
|
|
|
7127
|
-
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"])));
|
|
7128
7140
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7129
7141
|
var onClick = _a.onClick,
|
|
7130
7142
|
className = _a.className;
|
|
@@ -7168,10 +7180,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7168
7180
|
y2: "19.75"
|
|
7169
7181
|
}))));
|
|
7170
7182
|
};
|
|
7171
|
-
var templateObject_1$
|
|
7183
|
+
var templateObject_1$A;
|
|
7172
7184
|
|
|
7173
|
-
var ButtonsRow = styled__default.default.div(templateObject_1$
|
|
7174
|
-
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;
|
|
7175
7187
|
|
|
7176
7188
|
function IdCaptureLoadingGraphic(props) {
|
|
7177
7189
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -7806,25 +7818,25 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
7806
7818
|
}
|
|
7807
7819
|
}, verbiage.continueText))))));
|
|
7808
7820
|
};
|
|
7809
|
-
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) {
|
|
7810
7822
|
var _a, _b, _c, _d;
|
|
7811
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';
|
|
7812
7824
|
}, function (props) {
|
|
7813
7825
|
var _a, _b, _c, _d;
|
|
7814
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';
|
|
7815
7827
|
});
|
|
7816
|
-
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) {
|
|
7817
7829
|
var _a;
|
|
7818
7830
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
7819
7831
|
}, function (props) {
|
|
7820
7832
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
7821
7833
|
});
|
|
7822
|
-
var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
7823
|
-
var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$
|
|
7824
|
-
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$
|
|
7825
|
-
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$
|
|
7826
|
-
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$
|
|
7827
|
-
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) {
|
|
7828
7840
|
var _a, _b, _c, _d;
|
|
7829
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';
|
|
7830
7842
|
}, function (props) {
|
|
@@ -7858,10 +7870,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
|
|
|
7858
7870
|
var _a, _b, _c, _d, _e, _f;
|
|
7859
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, ";") : '';
|
|
7860
7872
|
});
|
|
7861
|
-
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;
|
|
7862
7874
|
|
|
7863
|
-
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$
|
|
7864
|
-
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"])));
|
|
7865
7877
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
7866
7878
|
var _b, _c, _d, _e;
|
|
7867
7879
|
var onDismissed = _a.onDismissed,
|
|
@@ -7972,7 +7984,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
7972
7984
|
}
|
|
7973
7985
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
7974
7986
|
};
|
|
7975
|
-
var templateObject_1$
|
|
7987
|
+
var templateObject_1$x, templateObject_2$p;
|
|
7976
7988
|
|
|
7977
7989
|
var components$1 = {
|
|
7978
7990
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8029,7 +8041,7 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8029
8041
|
});
|
|
8030
8042
|
};
|
|
8031
8043
|
|
|
8032
|
-
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"])));
|
|
8033
8045
|
var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
8034
8046
|
var capturedDocuments = _a.capturedDocuments,
|
|
8035
8047
|
onSubmitClick = _a.onSubmitClick,
|
|
@@ -8064,7 +8076,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8064
8076
|
className: classNames.imageContainer
|
|
8065
8077
|
}, /*#__PURE__*/React__namespace.default.createElement(ImageRow, {
|
|
8066
8078
|
className: classNames.imageRow
|
|
8067
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
8079
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$a, {
|
|
8068
8080
|
className: classNames.heading
|
|
8069
8081
|
}, verbiage.headingText), idCardFront && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
|
|
8070
8082
|
className: classNames.imageCol
|
|
@@ -8098,7 +8110,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8098
8110
|
alt: verbiage.passportText
|
|
8099
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, {
|
|
8100
8112
|
className: classNames.instruction
|
|
8101
|
-
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
8113
|
+
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
|
|
8102
8114
|
className: classNames.buttonsRow
|
|
8103
8115
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
8104
8116
|
className: classNames.retryBtn,
|
|
@@ -8115,17 +8127,17 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8115
8127
|
finished: true
|
|
8116
8128
|
}, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
|
|
8117
8129
|
};
|
|
8118
|
-
var Heading$
|
|
8119
|
-
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$
|
|
8120
|
-
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$
|
|
8121
|
-
var ImageCol$1 = styled__default.default.div(templateObject_5$
|
|
8122
|
-
var ImageHeading = styled__default.default.h3(templateObject_6$
|
|
8123
|
-
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) {
|
|
8124
8136
|
var _a, _b, _c;
|
|
8125
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)';
|
|
8126
8138
|
});
|
|
8127
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"])));
|
|
8128
|
-
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;
|
|
8129
8141
|
|
|
8130
8142
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
8131
8143
|
var _b;
|
|
@@ -8164,10 +8176,10 @@ var CameraVideoTag = function CameraVideoTag(_a) {
|
|
|
8164
8176
|
"$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
|
|
8165
8177
|
});
|
|
8166
8178
|
};
|
|
8167
|
-
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) {
|
|
8168
8180
|
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
8169
8181
|
});
|
|
8170
|
-
var templateObject_1$
|
|
8182
|
+
var templateObject_1$v;
|
|
8171
8183
|
|
|
8172
8184
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8173
8185
|
var _this = this;
|
|
@@ -8202,10 +8214,10 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
|
|
|
8202
8214
|
return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
|
|
8203
8215
|
}
|
|
8204
8216
|
|
|
8205
|
-
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) {
|
|
8206
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;") : "";
|
|
8207
8219
|
});
|
|
8208
|
-
var templateObject_1$
|
|
8220
|
+
var templateObject_1$u;
|
|
8209
8221
|
|
|
8210
8222
|
function setCanvasDimensions(canvas, width, height) {
|
|
8211
8223
|
var _a;
|
|
@@ -8239,10 +8251,10 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
|
8239
8251
|
}
|
|
8240
8252
|
});
|
|
8241
8253
|
|
|
8242
|
-
var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$
|
|
8243
|
-
var GuidesContainer = styled__default.default.div(templateObject_2$
|
|
8244
|
-
var GuideCenterRow = styled__default.default.div(templateObject_3$
|
|
8245
|
-
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) {
|
|
8246
8258
|
var _a, _b, _c, _d, _e;
|
|
8247
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)';
|
|
8248
8260
|
}, function (props) {
|
|
@@ -8253,13 +8265,13 @@ var GuideRegion = styled__default.default.div(templateObject_4$b || (templateObj
|
|
|
8253
8265
|
}, function (props) {
|
|
8254
8266
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
8255
8267
|
});
|
|
8256
|
-
var Spacer = styled__default.default(GuideRegion)(templateObject_5$
|
|
8257
|
-
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) {
|
|
8258
8270
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8259
8271
|
}, function (props) {
|
|
8260
8272
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8261
8273
|
});
|
|
8262
|
-
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) {
|
|
8263
8275
|
var _a, _b;
|
|
8264
8276
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
8265
8277
|
});
|
|
@@ -8387,9 +8399,9 @@ var regionClsx$1 = function regionClsx(classNames, which) {
|
|
|
8387
8399
|
return v;
|
|
8388
8400
|
}).join(' ');
|
|
8389
8401
|
};
|
|
8390
|
-
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;
|
|
8391
8403
|
|
|
8392
|
-
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) {
|
|
8393
8405
|
return props.$transitionTime;
|
|
8394
8406
|
}, function (props) {
|
|
8395
8407
|
return props.$transforms;
|
|
@@ -8534,7 +8546,7 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
8534
8546
|
return v;
|
|
8535
8547
|
}).join(' ');
|
|
8536
8548
|
};
|
|
8537
|
-
var templateObject_1$
|
|
8549
|
+
var templateObject_1$s;
|
|
8538
8550
|
|
|
8539
8551
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
8540
8552
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -8670,11 +8682,11 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
8670
8682
|
imageVisible: imageVisible
|
|
8671
8683
|
})));
|
|
8672
8684
|
};
|
|
8673
|
-
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) {
|
|
8674
8686
|
return props.$maskColor;
|
|
8675
8687
|
});
|
|
8676
|
-
var Canvas$1 = styled__default.default.canvas(templateObject_2$
|
|
8677
|
-
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;
|
|
8678
8690
|
|
|
8679
8691
|
function IdCaptureGuides(_a) {
|
|
8680
8692
|
var _b, _c;
|
|
@@ -8819,11 +8831,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
8819
8831
|
onError: onError
|
|
8820
8832
|
})));
|
|
8821
8833
|
};
|
|
8822
|
-
var StyledSpinner = styled__default.default(Spinner)(templateObject_1$
|
|
8823
|
-
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$
|
|
8824
|
-
var ImagePreviewText = styled__default.default.div(templateObject_3$
|
|
8825
|
-
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$
|
|
8826
|
-
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;
|
|
8827
8839
|
|
|
8828
8840
|
var documentCaptureInitialState = {
|
|
8829
8841
|
documents: [],
|
|
@@ -9179,11 +9191,11 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
9179
9191
|
ref: canvasRef
|
|
9180
9192
|
}));
|
|
9181
9193
|
};
|
|
9182
|
-
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) {
|
|
9183
9195
|
return props.$maskColor;
|
|
9184
9196
|
});
|
|
9185
|
-
var Canvas = styled__default.default.canvas(templateObject_2$
|
|
9186
|
-
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;
|
|
9187
9199
|
|
|
9188
9200
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
9189
9201
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -9287,7 +9299,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9287
9299
|
}, /*#__PURE__*/React__namespace.default.createElement(HeadingRow, {
|
|
9288
9300
|
"$maskColor": maskColor,
|
|
9289
9301
|
className: classNames.headingRow
|
|
9290
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9302
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$9, {
|
|
9291
9303
|
className: classNames.heading
|
|
9292
9304
|
}, verbiage.headingText)), /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureGuideOverlay, {
|
|
9293
9305
|
aspectRatio: aspectRatio,
|
|
@@ -9333,21 +9345,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9333
9345
|
disabled: !cameraReady || capturing
|
|
9334
9346
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
9335
9347
|
};
|
|
9336
|
-
var CaptureContainer = styled__default.default.div(templateObject_1$
|
|
9337
|
-
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) {
|
|
9338
9350
|
return props.$maskColor;
|
|
9339
9351
|
});
|
|
9340
|
-
var Heading$
|
|
9341
|
-
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) {
|
|
9342
9354
|
return props.$maskColor;
|
|
9343
9355
|
});
|
|
9344
|
-
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) {
|
|
9345
9357
|
var _a, _b, _c;
|
|
9346
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';
|
|
9347
9359
|
});
|
|
9348
|
-
var StyledButtonsRow$9 = styled__default.default(ButtonsRow)(templateObject_6$
|
|
9349
|
-
var PreviewImage = styled__default.default.img(templateObject_7$
|
|
9350
|
-
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;
|
|
9351
9363
|
|
|
9352
9364
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
9353
9365
|
var onSuccess = _a.onSuccess,
|
|
@@ -9567,7 +9579,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9567
9579
|
className: classNames.container
|
|
9568
9580
|
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$2, {
|
|
9569
9581
|
className: classNames.inner
|
|
9570
|
-
}, !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, {
|
|
9571
9583
|
className: classNames.heading
|
|
9572
9584
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$3, {
|
|
9573
9585
|
className: classNames.description
|
|
@@ -9616,13 +9628,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9616
9628
|
}
|
|
9617
9629
|
}, verbiage.doneBtnText))))));
|
|
9618
9630
|
};
|
|
9619
|
-
var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
9620
|
-
var Heading$
|
|
9621
|
-
var Description$3 = styled__default.default.p(templateObject_3$
|
|
9622
|
-
var Instruction = styled__default.default.p(templateObject_4$
|
|
9623
|
-
var ImageCol = styled__default.default.div(templateObject_5$
|
|
9624
|
-
var StyledButtonsRow$8 = styled__default.default(ButtonsRow)(templateObject_6$
|
|
9625
|
-
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;
|
|
9626
9638
|
|
|
9627
9639
|
var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
9628
9640
|
var _b, _c, _d, _e, _f, _g;
|
|
@@ -9983,1045 +9995,28 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
9983
9995
|
})));
|
|
9984
9996
|
};
|
|
9985
9997
|
|
|
9986
|
-
|
|
9987
|
-
var
|
|
9988
|
-
|
|
9989
|
-
|
|
9990
|
-
|
|
9991
|
-
|
|
9992
|
-
|
|
9993
|
-
var
|
|
9994
|
-
|
|
9995
|
-
|
|
9996
|
-
_c = _a.variant,
|
|
9997
|
-
variant = _c === void 0 ? 'unsatisfied' : _c,
|
|
9998
|
-
_d = _a.borderWidth,
|
|
9999
|
-
borderWidth = _d === void 0 ? 3 : _d,
|
|
10000
|
-
borderColor = _a.borderColor;
|
|
10001
|
-
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10002
|
-
className: classNames.container
|
|
10003
|
-
}, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOval, {
|
|
10004
|
-
className: classNames.oval,
|
|
10005
|
-
"$variant": variant,
|
|
10006
|
-
"$borderWidth": borderWidth,
|
|
10007
|
-
"$borderColor": borderColor
|
|
10008
|
-
}));
|
|
10009
|
-
};
|
|
10010
|
-
var templateObject_1$k, templateObject_2$e;
|
|
10011
|
-
|
|
10012
|
-
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10013
|
-
start: function start() {
|
|
10014
|
-
return null;
|
|
10015
|
-
},
|
|
10016
|
-
stop: function stop() {
|
|
10017
|
-
return null;
|
|
10018
|
-
},
|
|
10019
|
-
onPredictionMade: function onPredictionMade() {
|
|
10020
|
-
return null;
|
|
10021
|
-
},
|
|
10022
|
-
canvasRef: {
|
|
10023
|
-
current: null
|
|
10024
|
-
},
|
|
10025
|
-
ready: false,
|
|
10026
|
-
error: null,
|
|
10027
|
-
modelDownloadProgress: 0
|
|
10028
|
-
});
|
|
10029
|
-
function SelfieGuidanceModelsProvider(_a) {
|
|
10030
|
-
var _this = this;
|
|
10031
|
-
var _b = _a.autoStart,
|
|
10032
|
-
autoStart = _b === void 0 ? true : _b,
|
|
10033
|
-
children = _a.children,
|
|
10034
|
-
throttleMs = _a.throttleMs,
|
|
10035
|
-
onModelError = _a.onModelError,
|
|
10036
|
-
_c = _a.modelLoadTimeoutMs,
|
|
10037
|
-
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10038
|
-
var _d = React.useContext(CameraStateContext),
|
|
10039
|
-
videoRef = _d.videoRef,
|
|
10040
|
-
videoLoaded = _d.videoLoaded,
|
|
10041
|
-
cameraReady = _d.cameraReady;
|
|
10042
|
-
var canvasRef = React.useRef(null);
|
|
10043
|
-
var onPredictionHandler = React.useRef();
|
|
10044
|
-
var _e = useLoadFaceDetector({
|
|
10045
|
-
onModelError: onModelError,
|
|
10046
|
-
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10047
|
-
}),
|
|
10048
|
-
detector = _e.detector,
|
|
10049
|
-
ready = _e.ready,
|
|
10050
|
-
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10051
|
-
modelError = _e.modelError;
|
|
10052
|
-
var _f = useFrameLoop(React.useCallback(function () {
|
|
10053
|
-
return __awaiter(_this, void 0, void 0, function () {
|
|
10054
|
-
var vw, vh, ctx, faces;
|
|
10055
|
-
var _a;
|
|
10056
|
-
return __generator(this, function (_b) {
|
|
10057
|
-
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10058
|
-
vw = videoRef.current.videoWidth;
|
|
10059
|
-
vh = videoRef.current.videoHeight;
|
|
10060
|
-
ctx = canvasRef.current.getContext('2d');
|
|
10061
|
-
canvasRef.current.width = vw;
|
|
10062
|
-
canvasRef.current.height = vh;
|
|
10063
|
-
if (ctx && videoRef.current.readyState === 4) {
|
|
10064
|
-
ctx.translate(vw, 0);
|
|
10065
|
-
ctx.scale(-1, 1);
|
|
10066
|
-
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10067
|
-
// Detectors can throw errors, for example when using custom URLs that
|
|
10068
|
-
// contain a model that doesn't provide the expected output.
|
|
10069
|
-
try {
|
|
10070
|
-
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10071
|
-
(_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
|
|
10072
|
-
} catch (e) {
|
|
10073
|
-
error('caught face detection error', e);
|
|
10074
|
-
}
|
|
10075
|
-
}
|
|
10076
|
-
return [2 /*return*/];
|
|
10077
|
-
});
|
|
10078
|
-
});
|
|
10079
|
-
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10080
|
-
throttleMs: throttleMs,
|
|
10081
|
-
autoStart: autoStart
|
|
10082
|
-
}),
|
|
10083
|
-
start = _f.start,
|
|
10084
|
-
stop = _f.stop;
|
|
10085
|
-
var onPredictionMade = React.useCallback(function (handler) {
|
|
10086
|
-
onPredictionHandler.current = handler;
|
|
10087
|
-
}, []);
|
|
10088
|
-
var value = React.useMemo(function () {
|
|
10089
|
-
return {
|
|
10090
|
-
start: start,
|
|
10091
|
-
stop: stop,
|
|
10092
|
-
ready: ready,
|
|
10093
|
-
canvasRef: canvasRef,
|
|
10094
|
-
onPredictionMade: onPredictionMade,
|
|
10095
|
-
error: modelError,
|
|
10096
|
-
modelDownloadProgress: modelDownloadProgress
|
|
10097
|
-
};
|
|
10098
|
-
}, [modelError, modelDownloadProgress, onPredictionMade, ready, start, stop]);
|
|
10099
|
-
return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
|
|
10100
|
-
value: value
|
|
10101
|
-
}, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
|
|
10102
|
-
ref: canvasRef
|
|
10103
|
-
}), children);
|
|
10104
|
-
}
|
|
10105
|
-
|
|
10106
|
-
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
10107
|
-
if (shouldStart === void 0) {
|
|
10108
|
-
shouldStart = true;
|
|
10109
|
-
}
|
|
10110
|
-
var _a = React.useState(false),
|
|
10111
|
-
timedOut = _a[0],
|
|
10112
|
-
setTimedOut = _a[1];
|
|
10113
|
-
var _b = React.useState(),
|
|
10114
|
-
timeoutStartedAt = _b[0],
|
|
10115
|
-
setTimeoutStartedAt = _b[1];
|
|
10116
|
-
React.useEffect(function () {
|
|
10117
|
-
if (!durationMs || !shouldStart) return;
|
|
10118
|
-
setTimeoutStartedAt(new Date());
|
|
10119
|
-
var timer = setTimeout(function () {
|
|
10120
|
-
setTimedOut(true);
|
|
10121
|
-
}, durationMs);
|
|
10122
|
-
return function () {
|
|
10123
|
-
if (timer) clearTimeout(timer);
|
|
10124
|
-
};
|
|
10125
|
-
}, [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];
|
|
10126
10008
|
React.useEffect(function () {
|
|
10127
|
-
|
|
10128
|
-
|
|
10129
|
-
|
|
10130
|
-
|
|
10131
|
-
}
|
|
10132
|
-
var t = setTimeout(function () {
|
|
10133
|
-
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
10134
|
-
}, 120000);
|
|
10009
|
+
var i = setInterval(function () {
|
|
10010
|
+
setFrame(function (n) {
|
|
10011
|
+
return (n + 1) % 10;
|
|
10012
|
+
});
|
|
10013
|
+
}, 750);
|
|
10135
10014
|
return function () {
|
|
10136
|
-
|
|
10137
|
-
};
|
|
10138
|
-
}, [onTimeout, shouldWaitLonger, timedOut, timeoutAverted]);
|
|
10139
|
-
return {
|
|
10140
|
-
timedOut: timedOut,
|
|
10141
|
-
timeoutStartedAt: timeoutStartedAt
|
|
10142
|
-
};
|
|
10143
|
-
};
|
|
10144
|
-
|
|
10145
|
-
var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
10146
|
-
var onFinished = _a.onFinished,
|
|
10147
|
-
onCapture = _a.onCapture,
|
|
10148
|
-
_b = _a.classNames,
|
|
10149
|
-
classNames = _b === void 0 ? {} : _b,
|
|
10150
|
-
_c = _a.colors,
|
|
10151
|
-
colors = _c === void 0 ? {} : _c,
|
|
10152
|
-
_d = _a.verbiage,
|
|
10153
|
-
rawVerbiage = _d === void 0 ? {} : _d,
|
|
10154
|
-
_e = _a.silentFallback,
|
|
10155
|
-
silentFallback = _e === void 0 ? false : _e,
|
|
10156
|
-
_f = _a.invalidSelfie,
|
|
10157
|
-
invalidSelfie = _f === void 0 ? false : _f,
|
|
10158
|
-
_g = _a.guidanceMessage,
|
|
10159
|
-
guidanceMessage = _g === void 0 ? undefined : _g;
|
|
10160
|
-
var _h = React.useState(null),
|
|
10161
|
-
image = _h[0],
|
|
10162
|
-
setImage = _h[1];
|
|
10163
|
-
var lastResizedFileRef = React.useRef(null);
|
|
10164
|
-
var fileInput = React.useRef(null);
|
|
10165
|
-
var _j = React.useState(false),
|
|
10166
|
-
loading = _j[0],
|
|
10167
|
-
setLoading = _j[1];
|
|
10168
|
-
var _k = React.useState(false),
|
|
10169
|
-
usingDocumentCapture = _k[0],
|
|
10170
|
-
setUsingDocumentCapture = _k[1];
|
|
10171
|
-
var _l = useFileState(),
|
|
10172
|
-
rawFile = _l.rawFile,
|
|
10173
|
-
fileInputOnChange = _l.fileInputOnChange;
|
|
10174
|
-
var resizedImageFile = useResizeMaxEdge({
|
|
10175
|
-
rawFile: rawFile
|
|
10176
|
-
}).resizedImageFile;
|
|
10177
|
-
React.useEffect(function resetAfterCapturingImage() {
|
|
10178
|
-
// we only want to run this IF the file has changed
|
|
10179
|
-
if (resizedImageFile && resizedImageFile !== lastResizedFileRef.current) {
|
|
10180
|
-
lastResizedFileRef.current = resizedImageFile;
|
|
10181
|
-
setImage(resizedImageFile);
|
|
10182
|
-
setLoading(true);
|
|
10183
|
-
onCapture === null || onCapture === void 0 ? void 0 : onCapture(resizedImageFile);
|
|
10184
|
-
onFinished === null || onFinished === void 0 ? void 0 : onFinished(resizedImageFile);
|
|
10185
|
-
}
|
|
10186
|
-
}, [resizedImageFile, onCapture, onFinished, loading]);
|
|
10187
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10188
|
-
headingText: "We're having some trouble.",
|
|
10189
|
-
descriptionText: silentFallback ? 'Use your device camera to capture your face' : 'On-device capture guidance failed, please capture a selfie manually.',
|
|
10190
|
-
captureBtnText: 'Capture',
|
|
10191
|
-
doneBtnText: 'Done',
|
|
10192
|
-
doneBtnLoadingText: 'Verifying...',
|
|
10193
|
-
livenessFailedText: 'Live face not detected, please try again',
|
|
10194
|
-
livenessFailedReasonText: guidanceMessage,
|
|
10195
|
-
retryButtonText: 'Retry',
|
|
10196
|
-
retryCaptureButtonText: 'Retry capture'
|
|
10197
|
-
});
|
|
10198
|
-
React.useEffect(function triggerInputWhenInSilentFallbackMode() {
|
|
10199
|
-
var fallbackTimeout;
|
|
10200
|
-
if (silentFallback) {
|
|
10201
|
-
fallbackTimeout = setTimeout(function () {
|
|
10202
|
-
var _a;
|
|
10203
|
-
// 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
|
|
10204
|
-
if (isMobile()) {
|
|
10205
|
-
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10206
|
-
} else {
|
|
10207
|
-
setUsingDocumentCapture(true);
|
|
10208
|
-
}
|
|
10209
|
-
}, 250);
|
|
10210
|
-
}
|
|
10211
|
-
return function () {
|
|
10212
|
-
clearTimeout(fallbackTimeout);
|
|
10213
|
-
};
|
|
10214
|
-
}, [silentFallback]);
|
|
10215
|
-
function onFileSelected(e) {
|
|
10216
|
-
var _a;
|
|
10217
|
-
if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0])) return;
|
|
10218
|
-
setImage('LOADING'); // this is to reduce some of the flicker - it isn't perfect since .readAsDataURL() is slow
|
|
10219
|
-
fileInputOnChange(e);
|
|
10220
|
-
}
|
|
10221
|
-
if (usingDocumentCapture || silentFallback && !!invalidSelfie && !image && !isMobile() // desktop silent fallback - not a very realistic situation
|
|
10222
|
-
) {
|
|
10223
|
-
return /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureWizard, {
|
|
10224
|
-
documents: [{
|
|
10225
|
-
title: invalidSelfie ? verbiage.livenessFailedText : verbiage.descriptionText
|
|
10226
|
-
}],
|
|
10227
|
-
onDocumentCaptured: function onDocumentCaptured(document) {
|
|
10228
|
-
var imageData = document.contentUrl;
|
|
10229
|
-
onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageData);
|
|
10230
|
-
// todo: this a hack to address what is probably some sub-optimal coupling - fix
|
|
10231
|
-
setTimeout(function () {
|
|
10232
|
-
setImage(imageData);
|
|
10233
|
-
setUsingDocumentCapture(false);
|
|
10234
|
-
}, 0);
|
|
10235
|
-
}
|
|
10236
|
-
});
|
|
10237
|
-
}
|
|
10238
|
-
// 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
|
|
10239
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("input", {
|
|
10240
|
-
ref: fileInput,
|
|
10241
|
-
type: "file",
|
|
10242
|
-
accept: "image/*",
|
|
10243
|
-
capture: "user",
|
|
10244
|
-
onChange: onFileSelected,
|
|
10245
|
-
hidden: true
|
|
10246
|
-
}), /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10247
|
-
className: classNames.container
|
|
10248
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$1, {
|
|
10249
|
-
className: classNames.inner
|
|
10250
|
-
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
10251
|
-
className: classNames.heading
|
|
10252
|
-
}, verbiage.livenessFailedText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10253
|
-
className: classNames.description
|
|
10254
|
-
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
10255
|
-
className: classNames.heading
|
|
10256
|
-
}, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
10257
|
-
className: classNames.description
|
|
10258
|
-
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))), image && image !== 'LOADING' && ( /*#__PURE__*/React__namespace.default.createElement(ImageContainer$5, {
|
|
10259
|
-
className: classNames.imageContainer
|
|
10260
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10261
|
-
src: image,
|
|
10262
|
-
alt: "",
|
|
10263
|
-
className: classNames.image
|
|
10264
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(StyledButtonsRow$7, {
|
|
10265
|
-
className: classNames.buttonsRow
|
|
10266
|
-
}, image && !loading && !isMobile() && ( /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10267
|
-
className: classNames.retryCaptureBtn,
|
|
10268
|
-
finished: true,
|
|
10269
|
-
variant: "warning",
|
|
10270
|
-
onClick: function onClick() {
|
|
10271
|
-
var _a;
|
|
10272
|
-
if (isMobile()) {
|
|
10273
|
-
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10274
|
-
} else {
|
|
10275
|
-
setUsingDocumentCapture(true);
|
|
10276
|
-
}
|
|
10277
|
-
}
|
|
10278
|
-
}, verbiage.retryCaptureButtonText)), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10279
|
-
variant: "positive",
|
|
10280
|
-
key: loading ? 'loading-btn' : 'ready-btn',
|
|
10281
|
-
className: !image ? classNames.captureBtn : classNames === null || classNames === void 0 ? void 0 : classNames.doneBtn,
|
|
10282
|
-
colors: !image ? colors.captureBtn : colors === null || colors === void 0 ? void 0 : colors.doneBtn,
|
|
10283
|
-
finished: !image ? true : !loading,
|
|
10284
|
-
onClick: function onClick() {
|
|
10285
|
-
var _a;
|
|
10286
|
-
if (isMobile()) {
|
|
10287
|
-
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
10288
|
-
} else {
|
|
10289
|
-
if (!image) {
|
|
10290
|
-
setUsingDocumentCapture(true);
|
|
10291
|
-
} else {
|
|
10292
|
-
setLoading(true);
|
|
10293
|
-
onFinished === null || onFinished === void 0 ? void 0 : onFinished(image);
|
|
10294
|
-
}
|
|
10295
|
-
}
|
|
10296
|
-
}
|
|
10297
|
-
}, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
10298
|
-
};
|
|
10299
|
-
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"])));
|
|
10300
|
-
var Heading$6 = styled__default.default.h3(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10301
|
-
var Description$2 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10302
|
-
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10303
|
-
var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10304
|
-
var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$3;
|
|
10305
|
-
|
|
10306
|
-
var initialState$3 = {
|
|
10307
|
-
videoWidth: 0,
|
|
10308
|
-
videoHeight: 0,
|
|
10309
|
-
frame: null,
|
|
10310
|
-
faces: [],
|
|
10311
|
-
faceNotCentered: false,
|
|
10312
|
-
faceLookingAway: false,
|
|
10313
|
-
faceTooClose: false,
|
|
10314
|
-
faceTooFar: false,
|
|
10315
|
-
faceReady: false,
|
|
10316
|
-
faceReadyAt: null
|
|
10317
|
-
};
|
|
10318
|
-
var reducer$3 = function reducer(state, action) {
|
|
10319
|
-
switch (action.type) {
|
|
10320
|
-
case 'configure':
|
|
10321
|
-
return _assign(_assign({}, state), action.payload);
|
|
10322
|
-
case 'facesDetected':
|
|
10323
|
-
{
|
|
10324
|
-
var faces = action.payload.faces;
|
|
10325
|
-
var face = faces[0];
|
|
10326
|
-
var faceNotCentered = true,
|
|
10327
|
-
faceLookingAway = false,
|
|
10328
|
-
faceTooClose = false,
|
|
10329
|
-
faceTooFar = false,
|
|
10330
|
-
faceReadyAt = state.faceReadyAt;
|
|
10331
|
-
if (face) {
|
|
10332
|
-
// calculate centroids
|
|
10333
|
-
var vCX = state.videoWidth / 2;
|
|
10334
|
-
var vCY = state.videoHeight / 2;
|
|
10335
|
-
var fCX = (face.box.xMin + face.box.xMax) / 2;
|
|
10336
|
-
var fCY = (face.box.yMin + face.box.yMax) / 2;
|
|
10337
|
-
// calculate thresholds
|
|
10338
|
-
var vTX = state.videoWidth * 0.125;
|
|
10339
|
-
var vTY = state.videoHeight * 0.125;
|
|
10340
|
-
var fTW = face.box.width * 0.2;
|
|
10341
|
-
var fTH = face.box.height * 0.2;
|
|
10342
|
-
var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
|
|
10343
|
-
if (nose) {
|
|
10344
|
-
faceNotCentered = Math.abs(vCX - fCX) > vTX || Math.abs(vCY + 50 - fCY) > vTY;
|
|
10345
|
-
faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
|
|
10346
|
-
}
|
|
10347
|
-
var isMobile = state.videoWidth < state.videoHeight;
|
|
10348
|
-
var tooCloseMultiple = isMobile ? 2 : 4.5;
|
|
10349
|
-
var tooFarMultiple = isMobile ? 6 : 7;
|
|
10350
|
-
faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
|
|
10351
|
-
faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
|
|
10352
|
-
}
|
|
10353
|
-
var faceReady = !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
|
|
10354
|
-
if (!faceReady) {
|
|
10355
|
-
faceReadyAt = null;
|
|
10356
|
-
} else if (!state.faceReady) {
|
|
10357
|
-
faceReadyAt = new Date();
|
|
10358
|
-
}
|
|
10359
|
-
return _assign(_assign({}, state), {
|
|
10360
|
-
faces: faces,
|
|
10361
|
-
faceNotCentered: faceNotCentered,
|
|
10362
|
-
faceLookingAway: faceLookingAway,
|
|
10363
|
-
faceTooClose: faceTooClose,
|
|
10364
|
-
faceTooFar: faceTooFar,
|
|
10365
|
-
faceReady: faceReady,
|
|
10366
|
-
faceReadyAt: faceReadyAt
|
|
10367
|
-
});
|
|
10368
|
-
}
|
|
10369
|
-
}
|
|
10370
|
-
};
|
|
10371
|
-
var SelfieCapture = function SelfieCapture(_a) {
|
|
10372
|
-
var _b;
|
|
10373
|
-
var onGuidanceSatisfied = _a.onGuidanceSatisfied,
|
|
10374
|
-
onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
|
|
10375
|
-
onSelfieCaptured = _a.onSelfieCaptured,
|
|
10376
|
-
onTimeout = _a.onTimeout,
|
|
10377
|
-
onExit = _a.onExit,
|
|
10378
|
-
_c = _a.timeoutDurationMs,
|
|
10379
|
-
timeoutDurationMs = _c === void 0 ? 15000 : _c,
|
|
10380
|
-
guidanceMessage = _a.guidanceMessage,
|
|
10381
|
-
guidanceSatisfied = _a.guidanceSatisfied,
|
|
10382
|
-
_d = _a.classNames,
|
|
10383
|
-
classNames = _d === void 0 ? {} : _d,
|
|
10384
|
-
_e = _a.colors,
|
|
10385
|
-
colors = _e === void 0 ? {} : _e,
|
|
10386
|
-
_f = _a.verbiage,
|
|
10387
|
-
rawVerbiage = _f === void 0 ? {} : _f,
|
|
10388
|
-
_g = _a.debugMode,
|
|
10389
|
-
debugMode = _g === void 0 ? false : _g;
|
|
10390
|
-
var _h = useResizeObserver__default.default(),
|
|
10391
|
-
ref = _h.ref,
|
|
10392
|
-
_j = _h.width,
|
|
10393
|
-
width = _j === void 0 ? 1 : _j,
|
|
10394
|
-
_k = _h.height,
|
|
10395
|
-
height = _k === void 0 ? 1 : _k;
|
|
10396
|
-
var _l = React.useReducer(reducer$3, initialState$3),
|
|
10397
|
-
state = _l[0],
|
|
10398
|
-
dispatch = _l[1];
|
|
10399
|
-
var lastPredictionCanvas = React.useRef(null);
|
|
10400
|
-
var _m = React.useContext(CameraStateContext),
|
|
10401
|
-
cameraRef = _m.cameraRef,
|
|
10402
|
-
cameraReady = _m.cameraReady,
|
|
10403
|
-
videoRef = _m.videoRef;
|
|
10404
|
-
var _o = React.useContext(SelfieGuidanceModelsContext),
|
|
10405
|
-
onPredictionMade = _o.onPredictionMade,
|
|
10406
|
-
guidanceError = _o.error;
|
|
10407
|
-
React.useEffect(function () {
|
|
10408
|
-
if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
|
|
10409
|
-
dispatch({
|
|
10410
|
-
type: 'configure',
|
|
10411
|
-
payload: {
|
|
10412
|
-
videoWidth: videoRef.current.videoWidth,
|
|
10413
|
-
videoHeight: videoRef.current.videoHeight
|
|
10414
|
-
}
|
|
10415
|
-
});
|
|
10416
|
-
}
|
|
10417
|
-
}, [cameraReady, videoRef]);
|
|
10418
|
-
onPredictionMade(useDebounce.useThrottledCallback(function (prediction) {
|
|
10419
|
-
dispatch({
|
|
10420
|
-
type: 'facesDetected',
|
|
10421
|
-
payload: {
|
|
10422
|
-
faces: prediction
|
|
10423
|
-
}
|
|
10424
|
-
});
|
|
10425
|
-
}, 16));
|
|
10426
|
-
var _p = React.useState(false),
|
|
10427
|
-
captureReady = _p[0],
|
|
10428
|
-
setCaptureReady = _p[1];
|
|
10429
|
-
React.useEffect(function () {
|
|
10430
|
-
var timer;
|
|
10431
|
-
if (state.faceReady) {
|
|
10432
|
-
onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied();
|
|
10433
|
-
timer = setTimeout(function () {
|
|
10434
|
-
setCaptureReady(true);
|
|
10435
|
-
}, 1000);
|
|
10436
|
-
} else {
|
|
10437
|
-
onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
|
|
10438
|
-
}
|
|
10439
|
-
return function () {
|
|
10440
|
-
if (timer) clearTimeout(timer);
|
|
10441
|
-
};
|
|
10442
|
-
}, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
|
|
10443
|
-
React.useEffect(function () {
|
|
10444
|
-
if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
|
|
10445
|
-
drawToCanvas(lastPredictionCanvas.current, videoRef.current);
|
|
10446
|
-
var ctx = lastPredictionCanvas.current.getContext('2d');
|
|
10447
|
-
if (!ctx) return;
|
|
10448
|
-
var imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
|
|
10449
|
-
onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
|
|
10450
|
-
clearCanvas(lastPredictionCanvas.current);
|
|
10451
|
-
}
|
|
10452
|
-
}, [captureReady, onSelfieCaptured, state.faces, videoRef]);
|
|
10453
|
-
var _q = useTimeout(timeoutDurationMs, onTimeout),
|
|
10454
|
-
timedOut = _q.timedOut,
|
|
10455
|
-
timeoutStartedAt = _q.timeoutStartedAt;
|
|
10456
|
-
var debugScalingDetails = useDebugScalingDetails({
|
|
10457
|
-
enabled: debugMode,
|
|
10458
|
-
pageWidth: width,
|
|
10459
|
-
pageHeight: height,
|
|
10460
|
-
videoWidth: state.videoWidth,
|
|
10461
|
-
videoHeight: state.videoHeight
|
|
10462
|
-
});
|
|
10463
|
-
colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
|
|
10464
|
-
colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
|
|
10465
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10466
|
-
guidanceHoldStillText: 'Hold still for a few seconds...',
|
|
10467
|
-
guidanceLookStraightText: 'Look straight into the camera...',
|
|
10468
|
-
guidanceMoveBackText: 'Move back...',
|
|
10469
|
-
guidanceMoveForwardText: 'Move forward...',
|
|
10470
|
-
guidanceMoveToCenterText: 'Move to the center...'
|
|
10471
|
-
});
|
|
10472
|
-
var satisfied = state.faceReady;
|
|
10473
|
-
if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
|
|
10474
|
-
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
|
|
10475
|
-
if (guidanceError) {
|
|
10476
|
-
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
10477
|
-
classNames: classNames.fallback
|
|
10478
|
-
});
|
|
10479
|
-
}
|
|
10480
|
-
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
10481
|
-
ref: ref,
|
|
10482
|
-
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
10483
|
-
}, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
10484
|
-
ref: lastPredictionCanvas
|
|
10485
|
-
}), /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOverlay, {
|
|
10486
|
-
classNames: classNames.guides,
|
|
10487
|
-
variant: satisfied ? 'satisfied' : 'unsatisfied'
|
|
10488
|
-
}), guidanceMessage !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
|
|
10489
|
-
className: classNames.guidanceMessageContainer
|
|
10490
|
-
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
10491
|
-
"$variant": satisfied ? 'positive' : 'negative',
|
|
10492
|
-
className: classNames.guidanceMessage
|
|
10493
|
-
}, guidanceMessage))), debugMode && state.faces.length > 0 && ( /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, null, state.faces.map(function (face, i) {
|
|
10494
|
-
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
|
|
10495
|
-
key: i,
|
|
10496
|
-
face: face,
|
|
10497
|
-
scaling: debugScalingDetails,
|
|
10498
|
-
color: satisfied ? 'green' : 'red'
|
|
10499
|
-
});
|
|
10500
|
-
}))), 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, {
|
|
10501
|
-
onClick: onExit,
|
|
10502
|
-
className: classNames.exitCaptureBtn
|
|
10503
|
-
}));
|
|
10504
|
-
};
|
|
10505
|
-
|
|
10506
|
-
var initialState$2 = {
|
|
10507
|
-
frame: null,
|
|
10508
|
-
face: null,
|
|
10509
|
-
requestState: 'CAPTURING',
|
|
10510
|
-
requestError: null,
|
|
10511
|
-
imageUrl: null,
|
|
10512
|
-
faceLive: false,
|
|
10513
|
-
eyeCoveringDetected: false,
|
|
10514
|
-
maskDetected: false,
|
|
10515
|
-
headCoveringDetected: false,
|
|
10516
|
-
phoneDetected: false,
|
|
10517
|
-
timesLivenessCheckFailed: 0
|
|
10518
|
-
};
|
|
10519
|
-
/** 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.
|
|
10520
|
-
* There may also be some crossing of wires in how error/failed are used.
|
|
10521
|
-
*/
|
|
10522
|
-
var reducer$2 = function reducer(state, action) {
|
|
10523
|
-
var _a, _b;
|
|
10524
|
-
switch (action.type) {
|
|
10525
|
-
case 'livenessReady':
|
|
10526
|
-
{
|
|
10527
|
-
var allowedStates = ['CAPTURING', 'FAILED', 'ERROR'];
|
|
10528
|
-
if (allowedStates.includes(state.requestState)) {
|
|
10529
|
-
return _assign(_assign({}, state), {
|
|
10530
|
-
requestState: 'CAPTURED',
|
|
10531
|
-
frame: action.payload.frame,
|
|
10532
|
-
face: action.payload.face
|
|
10533
|
-
});
|
|
10534
|
-
} else {
|
|
10535
|
-
return state;
|
|
10536
|
-
}
|
|
10537
|
-
}
|
|
10538
|
-
case 'livenessChecking':
|
|
10539
|
-
return _assign(_assign({}, state), {
|
|
10540
|
-
requestState: 'IN_PROGRESS'
|
|
10541
|
-
});
|
|
10542
|
-
case 'livenessChecked':
|
|
10543
|
-
{
|
|
10544
|
-
var _c = action.payload.response,
|
|
10545
|
-
_d = _c.status,
|
|
10546
|
-
statusCode = _d.statusCode,
|
|
10547
|
-
statusMessage = _d.statusMessage,
|
|
10548
|
-
errorData = _d.errorData,
|
|
10549
|
-
resultData = _c.resultData;
|
|
10550
|
-
if (statusCode !== '000') {
|
|
10551
|
-
return _assign(_assign({}, state), {
|
|
10552
|
-
requestState: 'ERROR',
|
|
10553
|
-
requestError: new Error("".concat(statusMessage, ": ").concat(errorData))
|
|
10554
|
-
});
|
|
10555
|
-
}
|
|
10556
|
-
var faceLive = ['Live Face Detected', 'Approved'].includes(resultData.verificationResult);
|
|
10557
|
-
var eyeCoveringDetected = resultData.eyeCovering === 'true';
|
|
10558
|
-
var maskDetected = resultData.faceMask === 'true';
|
|
10559
|
-
var headCoveringDetected = resultData.headCovering === 'true';
|
|
10560
|
-
var phoneDetected = resultData.cellPhone === 'true';
|
|
10561
|
-
var livenessCheckPassed = faceLive && !eyeCoveringDetected && !maskDetected && !headCoveringDetected;
|
|
10562
|
-
var requestState = livenessCheckPassed ? 'PASSED' : 'FAILED';
|
|
10563
|
-
var timesLivenessCheckFailed = state.timesLivenessCheckFailed;
|
|
10564
|
-
if (livenessCheckPassed) {
|
|
10565
|
-
timesLivenessCheckFailed = 0;
|
|
10566
|
-
} else {
|
|
10567
|
-
timesLivenessCheckFailed += 1;
|
|
10568
|
-
}
|
|
10569
|
-
return _assign(_assign({}, state), {
|
|
10570
|
-
frame: (_a = action.payload.frame) !== null && _a !== void 0 ? _a : null,
|
|
10571
|
-
face: (_b = action.payload.face) !== null && _b !== void 0 ? _b : null,
|
|
10572
|
-
imageUrl: action.payload.imageUrl,
|
|
10573
|
-
requestState: requestState,
|
|
10574
|
-
faceLive: faceLive,
|
|
10575
|
-
eyeCoveringDetected: eyeCoveringDetected,
|
|
10576
|
-
maskDetected: maskDetected,
|
|
10577
|
-
headCoveringDetected: headCoveringDetected,
|
|
10578
|
-
phoneDetected: phoneDetected,
|
|
10579
|
-
timesLivenessCheckFailed: timesLivenessCheckFailed
|
|
10580
|
-
});
|
|
10581
|
-
}
|
|
10582
|
-
case 'livenessCheckFailed':
|
|
10583
|
-
return _assign(_assign({}, state), {
|
|
10584
|
-
requestState: 'ERROR',
|
|
10585
|
-
requestError: action.payload.error
|
|
10586
|
-
});
|
|
10587
|
-
default:
|
|
10588
|
-
return state;
|
|
10589
|
-
}
|
|
10590
|
-
};
|
|
10591
|
-
var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
10592
|
-
var _b, _c, _d;
|
|
10593
|
-
var onCapture = _a.onCapture,
|
|
10594
|
-
onSuccess = _a.onSuccess,
|
|
10595
|
-
onTimeout = _a.onTimeout,
|
|
10596
|
-
onExit = _a.onExit,
|
|
10597
|
-
_e = _a.timeoutDurationMs,
|
|
10598
|
-
timeoutDurationMs = _e === void 0 ? 15000 : _e,
|
|
10599
|
-
_f = _a.silentFallback,
|
|
10600
|
-
silentFallback = _f === void 0 ? false : _f,
|
|
10601
|
-
_g = _a.classNames,
|
|
10602
|
-
classNames = _g === void 0 ? {} : _g,
|
|
10603
|
-
_h = _a.colors,
|
|
10604
|
-
colors = _h === void 0 ? {} : _h,
|
|
10605
|
-
_j = _a.verbiage,
|
|
10606
|
-
rawVerbiage = _j === void 0 ? {} : _j,
|
|
10607
|
-
debugMode = _a.debugMode;
|
|
10608
|
-
var _k = React.useContext(SubmissionContext),
|
|
10609
|
-
checkLiveness = _k.checkLiveness,
|
|
10610
|
-
submissionError = _k.submissionError;
|
|
10611
|
-
var modelError = React.useContext(SelfieGuidanceModelsContext).error;
|
|
10612
|
-
var _l = React.useReducer(reducer$2, initialState$2),
|
|
10613
|
-
state = _l[0],
|
|
10614
|
-
dispatch = _l[1];
|
|
10615
|
-
var _m = React.useState(null),
|
|
10616
|
-
imageUrl = _m[0],
|
|
10617
|
-
setImageUrl = _m[1];
|
|
10618
|
-
var rawCanvas = React.useRef(null);
|
|
10619
|
-
var cropCanvas = React.useRef(null);
|
|
10620
|
-
var resizeCanvas = React.useRef(null);
|
|
10621
|
-
var theme = styled.useTheme();
|
|
10622
|
-
var onSelfieCaptured = React.useCallback(function (frame, face) {
|
|
10623
|
-
onCapture === null || onCapture === void 0 ? void 0 : onCapture();
|
|
10624
|
-
dispatch({
|
|
10625
|
-
type: 'livenessReady',
|
|
10626
|
-
payload: {
|
|
10627
|
-
frame: frame,
|
|
10628
|
-
face: face
|
|
10629
|
-
}
|
|
10630
|
-
});
|
|
10631
|
-
}, [onCapture]);
|
|
10632
|
-
var frame = state.frame,
|
|
10633
|
-
face = state.face;
|
|
10634
|
-
var isReady = state.requestState === 'CAPTURED';
|
|
10635
|
-
var isPassed = state.requestState === 'PASSED';
|
|
10636
|
-
React.useEffect(function checkLivenessIfPossible() {
|
|
10637
|
-
var _this = this;
|
|
10638
|
-
if (!frame || !face || !isReady || submissionError) return;
|
|
10639
|
-
dispatch({
|
|
10640
|
-
type: 'livenessChecking'
|
|
10641
|
-
});
|
|
10642
|
-
(function () {
|
|
10643
|
-
return __awaiter(_this, void 0, void 0, function () {
|
|
10644
|
-
var imageUrl_1, response, _a, e_1;
|
|
10645
|
-
return __generator(this, function (_b) {
|
|
10646
|
-
switch (_b.label) {
|
|
10647
|
-
case 0:
|
|
10648
|
-
_b.trys.push([0, 3,, 4]);
|
|
10649
|
-
imageUrl_1 = cropToShoulders(rawCanvas.current, cropCanvas.current, resizeCanvas.current, frame, face, 0.92, 600);
|
|
10650
|
-
setImageUrl(imageUrl_1);
|
|
10651
|
-
_a = checkLiveness;
|
|
10652
|
-
return [4 /*yield*/, dataUrlToBase64(imageUrl_1)];
|
|
10653
|
-
case 1:
|
|
10654
|
-
return [4 /*yield*/, _a.apply(void 0, [_b.sent()])];
|
|
10655
|
-
case 2:
|
|
10656
|
-
response = _b.sent();
|
|
10657
|
-
dispatch({
|
|
10658
|
-
type: 'livenessChecked',
|
|
10659
|
-
payload: {
|
|
10660
|
-
frame: frame,
|
|
10661
|
-
face: face,
|
|
10662
|
-
imageUrl: imageUrl_1,
|
|
10663
|
-
response: response
|
|
10664
|
-
}
|
|
10665
|
-
});
|
|
10666
|
-
return [3 /*break*/, 4];
|
|
10667
|
-
case 3:
|
|
10668
|
-
e_1 = _b.sent();
|
|
10669
|
-
dispatch({
|
|
10670
|
-
type: 'livenessCheckFailed',
|
|
10671
|
-
payload: {
|
|
10672
|
-
error: e_1
|
|
10673
|
-
}
|
|
10674
|
-
});
|
|
10675
|
-
return [3 /*break*/, 4];
|
|
10676
|
-
case 4:
|
|
10677
|
-
return [2 /*return*/];
|
|
10678
|
-
}
|
|
10679
|
-
});
|
|
10680
|
-
});
|
|
10681
|
-
})();
|
|
10682
|
-
}, [checkLiveness, face, frame, isReady, submissionError]);
|
|
10683
|
-
var onFallbackImageCaptured = React.useCallback(function (imageUrl) {
|
|
10684
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
10685
|
-
var imageData, response, e_2;
|
|
10686
|
-
var _a;
|
|
10687
|
-
return __generator(this, function (_b) {
|
|
10688
|
-
switch (_b.label) {
|
|
10689
|
-
case 0:
|
|
10690
|
-
dispatch({
|
|
10691
|
-
type: 'livenessChecking'
|
|
10692
|
-
});
|
|
10693
|
-
_b.label = 1;
|
|
10694
|
-
case 1:
|
|
10695
|
-
_b.trys.push([1, 4,, 5]);
|
|
10696
|
-
return [4 /*yield*/, dataUrlToBase64(imageUrl)];
|
|
10697
|
-
case 2:
|
|
10698
|
-
imageData = _b.sent();
|
|
10699
|
-
return [4 /*yield*/, checkLiveness(imageData)
|
|
10700
|
-
// todo: JN - this feels dirty and is the reason for the todo around line 83 - but is necessary to handle fallback liveness validation
|
|
10701
|
-
];
|
|
10702
|
-
case 3:
|
|
10703
|
-
response = _b.sent();
|
|
10704
|
-
// todo: JN - this feels dirty and is the reason for the todo around line 83 - but is necessary to handle fallback liveness validation
|
|
10705
|
-
if (((_a = response === null || response === void 0 ? void 0 : response.resultData) === null || _a === void 0 ? void 0 : _a.verificationResult) !== 'Live Face Detected') {
|
|
10706
|
-
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
10707
|
-
}
|
|
10708
|
-
dispatch({
|
|
10709
|
-
type: 'livenessChecked',
|
|
10710
|
-
payload: {
|
|
10711
|
-
imageUrl: imageUrl,
|
|
10712
|
-
response: response
|
|
10713
|
-
}
|
|
10714
|
-
});
|
|
10715
|
-
return [3 /*break*/, 5];
|
|
10716
|
-
case 4:
|
|
10717
|
-
e_2 = _b.sent();
|
|
10718
|
-
dispatch({
|
|
10719
|
-
type: 'livenessCheckFailed',
|
|
10720
|
-
payload: {
|
|
10721
|
-
error: e_2
|
|
10722
|
-
}
|
|
10723
|
-
});
|
|
10724
|
-
return [3 /*break*/, 5];
|
|
10725
|
-
case 5:
|
|
10726
|
-
return [2 /*return*/];
|
|
10727
|
-
}
|
|
10728
|
-
});
|
|
10729
|
-
});
|
|
10730
|
-
}, [checkLiveness, onTimeout]);
|
|
10731
|
-
React.useEffect(function callSuccessIfAvailable() {
|
|
10732
|
-
if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
|
|
10733
|
-
}, [onSuccess, state.imageUrl, isPassed]);
|
|
10734
|
-
React.useEffect(function timeoutOnTooManyLivenessCheckFailures() {
|
|
10735
|
-
if (modelError) return;
|
|
10736
|
-
var allowedFailures = 2;
|
|
10737
|
-
if (state.timesLivenessCheckFailed >= allowedFailures) {
|
|
10738
|
-
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
10739
|
-
}
|
|
10740
|
-
}, [modelError, onTimeout, state.timesLivenessCheckFailed]);
|
|
10741
|
-
useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelError, state.requestState === 'IN_PROGRESS');
|
|
10742
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10743
|
-
guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
|
|
10744
|
-
guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
|
|
10745
|
-
guidanceRemoveMaskText: 'Please remove your mask...',
|
|
10746
|
-
progressPreviewText: 'Processing...'
|
|
10747
|
-
});
|
|
10748
|
-
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
|
|
10749
|
-
if (modelError) {
|
|
10750
|
-
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
10751
|
-
key: state.timesLivenessCheckFailed,
|
|
10752
|
-
onFinished: onFallbackImageCaptured,
|
|
10753
|
-
silentFallback: silentFallback,
|
|
10754
|
-
invalidSelfie: !!state.timesLivenessCheckFailed,
|
|
10755
|
-
guidanceMessage: guidanceMessage
|
|
10756
|
-
});
|
|
10757
|
-
}
|
|
10758
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
10759
|
-
ref: rawCanvas
|
|
10760
|
-
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
10761
|
-
ref: cropCanvas
|
|
10762
|
-
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
10763
|
-
ref: resizeCanvas
|
|
10764
|
-
}), /*#__PURE__*/React__namespace.default.createElement(SelfieCapture, {
|
|
10765
|
-
onSelfieCaptured: onSelfieCaptured,
|
|
10766
|
-
onExit: onExit,
|
|
10767
|
-
timeoutDurationMs: timeoutDurationMs,
|
|
10768
|
-
guidanceMessage: guidanceMessage,
|
|
10769
|
-
guidanceSatisfied: guidanceMessage ? false : undefined,
|
|
10770
|
-
classNames: classNames,
|
|
10771
|
-
colors: colors,
|
|
10772
|
-
verbiage: verbiage,
|
|
10773
|
-
debugMode: debugMode
|
|
10774
|
-
}), !((_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, {
|
|
10775
|
-
classNames: classNames.imagePreview,
|
|
10776
|
-
imageUrl: imageUrl,
|
|
10777
|
-
text: (_d = verbiage.progressPreviewText) !== null && _d !== void 0 ? _d : ''
|
|
10778
|
-
})));
|
|
10779
|
-
};
|
|
10780
|
-
|
|
10781
|
-
var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
10782
|
-
var imageUrl = _a.imageUrl,
|
|
10783
|
-
onDoneClick = _a.onDoneClick,
|
|
10784
|
-
onRetryClick = _a.onRetryClick,
|
|
10785
|
-
_b = _a.classNames,
|
|
10786
|
-
classNames = _b === void 0 ? {} : _b,
|
|
10787
|
-
_c = _a.colors,
|
|
10788
|
-
colors = _c === void 0 ? {} : _c,
|
|
10789
|
-
_d = _a.verbiage,
|
|
10790
|
-
rawVerbiage = _d === void 0 ? {} : _d;
|
|
10791
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10792
|
-
headingText: 'Face liveness has been verified!',
|
|
10793
|
-
retryBtnText: 'Retry',
|
|
10794
|
-
doneBtnText: 'Done'
|
|
10795
|
-
});
|
|
10796
|
-
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10797
|
-
className: classNames.container
|
|
10798
|
-
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
10799
|
-
className: classNames.inner
|
|
10800
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$5, {
|
|
10801
|
-
className: classNames.heading
|
|
10802
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
10803
|
-
className: classNames.imageContainer
|
|
10804
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10805
|
-
alt: verbiage.headingText,
|
|
10806
|
-
src: imageUrl,
|
|
10807
|
-
className: classNames.image
|
|
10808
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
10809
|
-
className: classNames.buttonsRow
|
|
10810
|
-
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10811
|
-
variant: "warning",
|
|
10812
|
-
onClick: onRetryClick,
|
|
10813
|
-
colors: colors.retryBtn,
|
|
10814
|
-
className: classNames.retryBtn,
|
|
10815
|
-
finished: true
|
|
10816
|
-
}, verbiage.retryBtnText), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10817
|
-
variant: "positive",
|
|
10818
|
-
onClick: onDoneClick,
|
|
10819
|
-
colors: colors.doneBtn,
|
|
10820
|
-
className: classNames.doneBtn,
|
|
10821
|
-
finished: true
|
|
10822
|
-
}, verbiage.doneBtnText))));
|
|
10823
|
-
};
|
|
10824
|
-
var Heading$5 = styled__default.default.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
10825
|
-
var templateObject_1$i;
|
|
10826
|
-
|
|
10827
|
-
var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
10828
|
-
var _b = _a.canRetry,
|
|
10829
|
-
canRetry = _b === void 0 ? true : _b,
|
|
10830
|
-
onRetryClick = _a.onRetryClick,
|
|
10831
|
-
onExitClick = _a.onExitClick,
|
|
10832
|
-
_c = _a.assets,
|
|
10833
|
-
assets = _c === void 0 ? {} : _c,
|
|
10834
|
-
_d = _a.classNames,
|
|
10835
|
-
classNames = _d === void 0 ? {} : _d,
|
|
10836
|
-
_e = _a.colors,
|
|
10837
|
-
colors = _e === void 0 ? {} : _e,
|
|
10838
|
-
_f = _a.verbiage,
|
|
10839
|
-
rawVerbiage = _f === void 0 ? {} : _f;
|
|
10840
|
-
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
|
|
10841
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10842
|
-
headingText: 'Live face not detected, please try again',
|
|
10843
|
-
retryBtnText: 'Retry',
|
|
10844
|
-
exitBtnText: 'Exit'
|
|
10845
|
-
});
|
|
10846
|
-
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10847
|
-
className: classNames.container
|
|
10848
|
-
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
10849
|
-
className: classNames.inner
|
|
10850
|
-
}, /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10851
|
-
className: classNames.heading
|
|
10852
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ImageContainer$4, {
|
|
10853
|
-
className: classNames.imageContainer
|
|
10854
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10855
|
-
alt: verbiage.headingText,
|
|
10856
|
-
src: assets.imageUrl,
|
|
10857
|
-
className: classNames.image
|
|
10858
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
10859
|
-
className: classNames.buttonsRow
|
|
10860
|
-
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10861
|
-
variant: "warning",
|
|
10862
|
-
className: classNames.retryBtn,
|
|
10863
|
-
onClick: onRetryClick,
|
|
10864
|
-
colors: colors.retryBtn,
|
|
10865
|
-
finished: true
|
|
10866
|
-
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10867
|
-
variant: "secondary",
|
|
10868
|
-
className: classNames.exitBtn,
|
|
10869
|
-
onClick: onExitClick,
|
|
10870
|
-
colors: colors.exitBtn,
|
|
10871
|
-
finished: true
|
|
10872
|
-
}, verbiage.exitBtnText))));
|
|
10873
|
-
};
|
|
10874
|
-
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"])));
|
|
10875
|
-
var templateObject_1$h;
|
|
10876
|
-
|
|
10877
|
-
var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
10878
|
-
var _b;
|
|
10879
|
-
var _c = _a.assets,
|
|
10880
|
-
assets = _c === void 0 ? {} : _c,
|
|
10881
|
-
_d = _a.classNames,
|
|
10882
|
-
classNames = _d === void 0 ? {} : _d,
|
|
10883
|
-
_e = _a.colors,
|
|
10884
|
-
colors = _e === void 0 ? {} : _e,
|
|
10885
|
-
_f = _a.verbiage,
|
|
10886
|
-
rawVerbiage = _f === void 0 ? {} : _f;
|
|
10887
|
-
var requestMicrophoneAccess = React.useContext(CameraStateContext).requestMicrophoneAccess;
|
|
10888
|
-
assets.imageUrl || (assets.imageUrl = DEFAULT_CDN_URL + '/microphone-disable-icon.svg');
|
|
10889
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10890
|
-
headingText: 'Your microphone permission is disabled',
|
|
10891
|
-
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.',
|
|
10892
|
-
retryBtnText: 'Retry'
|
|
10893
|
-
});
|
|
10894
|
-
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10895
|
-
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
10896
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner, {
|
|
10897
|
-
className: classNames.inner
|
|
10898
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayImageContainer$1, {
|
|
10899
|
-
className: classNames.imageContainer
|
|
10900
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10901
|
-
src: assets.imageUrl,
|
|
10902
|
-
alt: "",
|
|
10903
|
-
className: classNames.image
|
|
10904
|
-
})), /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10905
|
-
className: classNames.heading
|
|
10906
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$1, {
|
|
10907
|
-
className: classNames.description
|
|
10908
|
-
}, verbiage.descriptionText), /*#__PURE__*/React__namespace.default.createElement(RetryButton, {
|
|
10909
|
-
variant: "warning",
|
|
10910
|
-
onClick: requestMicrophoneAccess,
|
|
10911
|
-
colors: colors.retryBtn,
|
|
10912
|
-
className: classNames.retryBtn,
|
|
10913
|
-
finished: true
|
|
10914
|
-
}, verbiage.retryBtnText)));
|
|
10915
|
-
};
|
|
10916
|
-
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"])));
|
|
10917
|
-
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
10918
|
-
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"])));
|
|
10919
|
-
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"])));
|
|
10920
|
-
var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$6;
|
|
10921
|
-
|
|
10922
|
-
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
10923
|
-
var onDismissed = _a.onDismissed,
|
|
10924
|
-
onUserCancel = _a.onUserCancel,
|
|
10925
|
-
_b = _a.assets,
|
|
10926
|
-
assets = _b === void 0 ? {} : _b,
|
|
10927
|
-
_c = _a.classNames,
|
|
10928
|
-
classNames = _c === void 0 ? {} : _c,
|
|
10929
|
-
_d = _a.colors,
|
|
10930
|
-
colors = _d === void 0 ? {} : _d,
|
|
10931
|
-
_e = _a.verbiage,
|
|
10932
|
-
rawVerbiage = _e === void 0 ? {} : _e;
|
|
10933
|
-
var _f = React.useContext(CameraStateContext),
|
|
10934
|
-
cameraReady = _f.cameraReady,
|
|
10935
|
-
cameraAccessDenied = _f.cameraAccessDenied,
|
|
10936
|
-
microphoneAccessDenied = _f.microphoneAccessDenied;
|
|
10937
|
-
var _g = React.useContext(SelfieGuidanceModelsContext),
|
|
10938
|
-
modelsReady = _g.ready,
|
|
10939
|
-
modelDownloadProgress = _g.modelDownloadProgress;
|
|
10940
|
-
assets.instructionImageUrl || (assets.instructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png"));
|
|
10941
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
10942
|
-
headingText: 'Use your device camera to capture your face',
|
|
10943
|
-
removeEyeCoveringsText: 'Remove Sunglasses & Hat',
|
|
10944
|
-
avoidExcessiveBacklightingText: 'Avoid Excessive Backlighting',
|
|
10945
|
-
continueText: 'Continue',
|
|
10946
|
-
cameraInitializingText: 'Camera initializing...',
|
|
10947
|
-
downloadingText: 'Downloading...',
|
|
10948
|
-
modelsWarmingUpText: 'Models warming up...'
|
|
10949
|
-
});
|
|
10950
|
-
var _h = React.useState(false),
|
|
10951
|
-
dismissed = _h[0],
|
|
10952
|
-
setDismissed = _h[1];
|
|
10953
|
-
if (dismissed) return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null);
|
|
10954
|
-
if (cameraAccessDenied) {
|
|
10955
|
-
return /*#__PURE__*/React__namespace.default.createElement(CameraAccessDeniedOverlay, {
|
|
10956
|
-
assets: assets.cameraAccessDenied,
|
|
10957
|
-
classNames: classNames.cameraAccessDenied,
|
|
10958
|
-
colors: colors.cameraAccessDenied,
|
|
10959
|
-
verbiage: rawVerbiage.cameraAccessDenied
|
|
10960
|
-
});
|
|
10961
|
-
}
|
|
10962
|
-
if (microphoneAccessDenied) {
|
|
10963
|
-
return /*#__PURE__*/React__namespace.default.createElement(MicrophoneAccessDeniedOverlay, {
|
|
10964
|
-
assets: assets.microphoneAccessDenied,
|
|
10965
|
-
classNames: classNames.microphoneAccessDenied,
|
|
10966
|
-
colors: colors.microphoneAccessDenied,
|
|
10967
|
-
verbiage: rawVerbiage.microphoneAccessDenied
|
|
10968
|
-
});
|
|
10969
|
-
}
|
|
10970
|
-
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
10971
|
-
className: classNames.container
|
|
10972
|
-
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
10973
|
-
className: classNames.inner
|
|
10974
|
-
}, /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10975
|
-
className: classNames.heading
|
|
10976
|
-
}, verbiage.headingText), onUserCancel && ( /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
|
|
10977
|
-
onClick: onUserCancel,
|
|
10978
|
-
className: classNames.cancelBtn
|
|
10979
|
-
})), /*#__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, {
|
|
10980
|
-
className: classNames.imageContainer
|
|
10981
|
-
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
10982
|
-
className: classNames.image,
|
|
10983
|
-
alt: verbiage.headingText,
|
|
10984
|
-
src: assets.instructionImageUrl
|
|
10985
|
-
})), /*#__PURE__*/React__namespace.default.createElement(StyledButtonsRow$6, {
|
|
10986
|
-
className: classNames.buttonsRow
|
|
10987
|
-
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10988
|
-
variant: "positive",
|
|
10989
|
-
disabled: !cameraReady || !modelsReady,
|
|
10990
|
-
finished: cameraReady && modelsReady,
|
|
10991
|
-
className: classNames.continueBtn,
|
|
10992
|
-
colors: colors.continueBtn,
|
|
10993
|
-
onClick: function onClick() {
|
|
10994
|
-
setDismissed(true);
|
|
10995
|
-
onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
|
|
10996
|
-
}
|
|
10997
|
-
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
10998
|
-
};
|
|
10999
|
-
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"])));
|
|
11000
|
-
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"])));
|
|
11001
|
-
var templateObject_1$f, templateObject_2$b;
|
|
11002
|
-
|
|
11003
|
-
function SelfieCaptureLoadingGraphic(_a) {
|
|
11004
|
-
var _b, _c, _d;
|
|
11005
|
-
var _e = _a.width,
|
|
11006
|
-
width = _e === void 0 ? 840 : _e,
|
|
11007
|
-
_f = _a.height,
|
|
11008
|
-
height = _f === void 0 ? 740 : _f,
|
|
11009
|
-
className = _a.className;
|
|
11010
|
-
var _g = React.useState(1),
|
|
11011
|
-
frame = _g[0],
|
|
11012
|
-
setFrame = _g[1];
|
|
11013
|
-
React.useEffect(function () {
|
|
11014
|
-
var i = setInterval(function () {
|
|
11015
|
-
setFrame(function (n) {
|
|
11016
|
-
return (n + 1) % 10;
|
|
11017
|
-
});
|
|
11018
|
-
}, 750);
|
|
11019
|
-
return function () {
|
|
11020
|
-
clearInterval(i);
|
|
10015
|
+
clearInterval(i);
|
|
11021
10016
|
};
|
|
11022
10017
|
}, []);
|
|
11023
10018
|
var theme = styled.useTheme();
|
|
11024
|
-
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)';
|
|
11025
10020
|
return /*#__PURE__*/React__namespace.default.createElement("svg", {
|
|
11026
10021
|
width: width,
|
|
11027
10022
|
height: height,
|
|
@@ -11080,13 +10075,13 @@ function SelfieCaptureLoadingGraphic(_a) {
|
|
|
11080
10075
|
fill: "#525252"
|
|
11081
10076
|
})), frame >= 8 ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11082
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",
|
|
11083
|
-
stroke:
|
|
10078
|
+
stroke: satisfiedColor,
|
|
11084
10079
|
strokeWidth: "5"
|
|
11085
10080
|
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11086
10081
|
cx: "518.5",
|
|
11087
10082
|
cy: "438.5",
|
|
11088
10083
|
r: "25.5",
|
|
11089
|
-
fill:
|
|
10084
|
+
fill: satisfiedColor
|
|
11090
10085
|
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11091
10086
|
d: "M504 440.5L512 448L531 427",
|
|
11092
10087
|
stroke: "white",
|
|
@@ -11263,6 +10258,1483 @@ function SelfieCaptureLoadingGraphic(_a) {
|
|
|
11263
10258
|
fill: "white"
|
|
11264
10259
|
}))));
|
|
11265
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;
|
|
11266
11738
|
|
|
11267
11739
|
var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
|
|
11268
11740
|
var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
|
|
@@ -11376,21 +11848,21 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
|
|
|
11376
11848
|
}
|
|
11377
11849
|
}, verbiage.continueText))))));
|
|
11378
11850
|
};
|
|
11379
|
-
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) {
|
|
11380
11852
|
var _a, _b, _c, _d;
|
|
11381
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';
|
|
11382
11854
|
}, function (props) {
|
|
11383
11855
|
var _a, _b, _c, _d;
|
|
11384
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';
|
|
11385
11857
|
});
|
|
11386
|
-
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) {
|
|
11387
11859
|
var _a;
|
|
11388
11860
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
11389
11861
|
}, function (props) {
|
|
11390
11862
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
11391
11863
|
});
|
|
11392
|
-
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
11393
|
-
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) {
|
|
11394
11866
|
var _a, _b, _c, _d;
|
|
11395
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';
|
|
11396
11868
|
}, function (props) {
|
|
@@ -11425,7 +11897,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
|
|
|
11425
11897
|
var _a, _b, _c, _d, _e, _f;
|
|
11426
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, ";") : '';
|
|
11427
11899
|
});
|
|
11428
|
-
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;
|
|
11429
11901
|
|
|
11430
11902
|
var components = {
|
|
11431
11903
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -11462,40 +11934,44 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11462
11934
|
releaseCameraAccessOnExit = _k === void 0 ? true : _k,
|
|
11463
11935
|
_l = _a.silentFallback,
|
|
11464
11936
|
silentFallback = _l === void 0 ? false : _l,
|
|
11465
|
-
|
|
11466
|
-
|
|
11467
|
-
|
|
11468
|
-
|
|
11469
|
-
|
|
11470
|
-
|
|
11471
|
-
|
|
11472
|
-
|
|
11473
|
-
|
|
11474
|
-
|
|
11475
|
-
|
|
11476
|
-
|
|
11477
|
-
|
|
11478
|
-
|
|
11479
|
-
|
|
11480
|
-
|
|
11481
|
-
|
|
11482
|
-
|
|
11483
|
-
|
|
11484
|
-
var _u = React.
|
|
11485
|
-
|
|
11486
|
-
|
|
11487
|
-
|
|
11488
|
-
|
|
11489
|
-
|
|
11490
|
-
|
|
11491
|
-
|
|
11492
|
-
|
|
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];
|
|
11493
11969
|
var captureStartedAt = React.useRef();
|
|
11494
11970
|
var captureEndedAt = React.useRef();
|
|
11495
11971
|
var operationStartedAt = React.useRef();
|
|
11496
|
-
var
|
|
11497
|
-
start =
|
|
11498
|
-
stop =
|
|
11972
|
+
var _y = React.useContext(SelfieGuidanceModelsContext),
|
|
11973
|
+
start = _y.start,
|
|
11974
|
+
stop = _y.stop;
|
|
11499
11975
|
React.useEffect(function () {
|
|
11500
11976
|
operationStartedAt.current = new Date();
|
|
11501
11977
|
}, []);
|
|
@@ -11543,9 +12019,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11543
12019
|
setCaptureState('FAILED');
|
|
11544
12020
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
|
|
11545
12021
|
}, [onTimeout, livenessCheckRequest, submissionResponse]);
|
|
11546
|
-
var
|
|
11547
|
-
attempt =
|
|
11548
|
-
setAttempt =
|
|
12022
|
+
var _z = React.useState(0),
|
|
12023
|
+
attempt = _z[0],
|
|
12024
|
+
setAttempt = _z[1];
|
|
11549
12025
|
var onExitCallback = React.useCallback(function () {
|
|
11550
12026
|
setAttempt(function (n) {
|
|
11551
12027
|
return n + 1;
|
|
@@ -11598,6 +12074,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
11598
12074
|
onExit: onExitCallback,
|
|
11599
12075
|
timeoutDurationMs: timeoutDurationMs,
|
|
11600
12076
|
silentFallback: silentFallback,
|
|
12077
|
+
guidesComponent: guidesComponent,
|
|
12078
|
+
disableCapturePreview: disableCapturePreview,
|
|
12079
|
+
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
11601
12080
|
classNames: classNames.capture,
|
|
11602
12081
|
colors: colors,
|
|
11603
12082
|
verbiage: verbiage,
|
|
@@ -11796,11 +12275,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
11796
12275
|
}
|
|
11797
12276
|
}, verbiage.captureBtnText)))));
|
|
11798
12277
|
};
|
|
11799
|
-
var Inner = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
11800
|
-
var Heading$4 = styled__default.default.h3(templateObject_2$
|
|
11801
|
-
var Description = styled__default.default.p(templateObject_3$
|
|
11802
|
-
var StyledButtonsRow$4 = styled__default.default(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11803
|
-
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;
|
|
11804
12283
|
|
|
11805
12284
|
var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
|
|
11806
12285
|
var documents = _a.documents,
|
|
@@ -11944,7 +12423,7 @@ function convertSVGtoImg(svgData_1) {
|
|
|
11944
12423
|
});
|
|
11945
12424
|
}
|
|
11946
12425
|
|
|
11947
|
-
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) {
|
|
11948
12427
|
var _a, _b;
|
|
11949
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, ";") : "";
|
|
11950
12429
|
}, function (props) {
|
|
@@ -11954,8 +12433,8 @@ var SignaturePaperBacking = styled__default.default.div(templateObject_1$c || (t
|
|
|
11954
12433
|
var _a, _b;
|
|
11955
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, ";") : "";
|
|
11956
12435
|
});
|
|
11957
|
-
var SignatureCanvasContainer = styled__default.default.div(templateObject_2$
|
|
11958
|
-
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) {
|
|
11959
12438
|
var _a, _b, _c;
|
|
11960
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)';
|
|
11961
12440
|
}, function (props) {
|
|
@@ -11965,8 +12444,8 @@ var SignaturePad = styled__default.default.div(templateObject_3$8 || (templateOb
|
|
|
11965
12444
|
var _a, _b, _c;
|
|
11966
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';
|
|
11967
12446
|
});
|
|
11968
|
-
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"])));
|
|
11969
|
-
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;
|
|
11970
12449
|
|
|
11971
12450
|
var SignatureCapture = function SignatureCapture(_a) {
|
|
11972
12451
|
var _b;
|
|
@@ -12037,8 +12516,8 @@ var SignatureCapture = function SignatureCapture(_a) {
|
|
|
12037
12516
|
finished: true
|
|
12038
12517
|
}, verbiage.acceptBtnText)))));
|
|
12039
12518
|
};
|
|
12040
|
-
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$
|
|
12041
|
-
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;
|
|
12042
12521
|
|
|
12043
12522
|
var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
|
|
12044
12523
|
if (mergeAVStreams === void 0) {
|
|
@@ -12395,8 +12874,8 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
12395
12874
|
ref: outputCanvas
|
|
12396
12875
|
}));
|
|
12397
12876
|
};
|
|
12398
|
-
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$
|
|
12399
|
-
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;
|
|
12400
12879
|
|
|
12401
12880
|
var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
12402
12881
|
var videoUrl = _a.videoUrl,
|
|
@@ -12435,7 +12914,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12435
12914
|
style: {
|
|
12436
12915
|
display: 'none'
|
|
12437
12916
|
}
|
|
12438
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
12917
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
|
|
12439
12918
|
className: classNames.buttonsRow
|
|
12440
12919
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
12441
12920
|
variant: "warning",
|
|
@@ -12451,8 +12930,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
12451
12930
|
finished: true
|
|
12452
12931
|
}, verbiage.doneBtnText))));
|
|
12453
12932
|
};
|
|
12454
|
-
var StyledVideo$1 = styled__default.default.video(templateObject_1$
|
|
12455
|
-
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;
|
|
12456
12935
|
|
|
12457
12936
|
var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
12458
12937
|
var _b;
|
|
@@ -12631,18 +13110,91 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
12631
13110
|
}));
|
|
12632
13111
|
};
|
|
12633
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
|
+
|
|
12634
13187
|
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
12635
13188
|
var _b;
|
|
12636
|
-
var
|
|
12637
|
-
|
|
12638
|
-
|
|
12639
|
-
|
|
12640
|
-
borderWidth =
|
|
12641
|
-
|
|
12642
|
-
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;
|
|
12643
13195
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
12644
|
-
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-
|
|
12645
|
-
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"));
|
|
12646
13198
|
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
12647
13199
|
var _e = React.useState(1),
|
|
12648
13200
|
transitionTime = _e[0],
|
|
@@ -12671,39 +13223,36 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
12671
13223
|
clearTimeout(timeout);
|
|
12672
13224
|
};
|
|
12673
13225
|
}, []);
|
|
12674
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(
|
|
12675
|
-
|
|
12676
|
-
|
|
12677
|
-
|
|
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,
|
|
12678
13231
|
"$transforms": frontTransforms.join(' '),
|
|
12679
13232
|
"$transitionTime": transitionTime,
|
|
12680
|
-
"$
|
|
12681
|
-
|
|
12682
|
-
|
|
12683
|
-
|
|
12684
|
-
|
|
12685
|
-
|
|
12686
|
-
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,
|
|
12687
13243
|
"$transforms": backTransforms.join(' '),
|
|
12688
13244
|
"$transitionTime": transitionTime,
|
|
12689
|
-
"$
|
|
12690
|
-
|
|
12691
|
-
|
|
12692
|
-
|
|
12693
|
-
|
|
13245
|
+
"$isVisible": true
|
|
13246
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
13247
|
+
src: assets.backImageUrl,
|
|
13248
|
+
className: classNames.backImage,
|
|
13249
|
+
alt: ""
|
|
13250
|
+
})));
|
|
12694
13251
|
};
|
|
12695
|
-
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) {
|
|
12696
13253
|
return props.$transitionTime;
|
|
12697
13254
|
}, function (props) {
|
|
12698
13255
|
return props.$transforms;
|
|
12699
|
-
}, function (props) {
|
|
12700
|
-
return props.$isBack ? 'absolute' : 'relative';
|
|
12701
|
-
}, function (props) {
|
|
12702
|
-
return -props.$borderWidth / 2;
|
|
12703
|
-
}, function (props) {
|
|
12704
|
-
return props.$imageWidth;
|
|
12705
|
-
}, function (props) {
|
|
12706
|
-
return props.$imageHeight + props.$borderWidth;
|
|
12707
13256
|
});
|
|
12708
13257
|
var templateObject_1$8;
|
|
12709
13258
|
|
|
@@ -12713,98 +13262,84 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
12713
13262
|
requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
|
|
12714
13263
|
_z = _a.satisfied,
|
|
12715
13264
|
satisfied = _z === void 0 ? false : _z,
|
|
13265
|
+
_0 = _a.faceGuideStatus,
|
|
13266
|
+
faceGuideStatus = _0 === void 0 ? 'success' : _0,
|
|
12716
13267
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
12717
13268
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
13269
|
+
_1 = _a.idCardGuideStatus,
|
|
13270
|
+
idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
|
|
12718
13271
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
12719
13272
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
12720
|
-
|
|
12721
|
-
assets =
|
|
12722
|
-
|
|
12723
|
-
classNames =
|
|
12724
|
-
|
|
12725
|
-
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;
|
|
12726
13279
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
12727
13280
|
var imageRef = React.useRef(null);
|
|
12728
|
-
|
|
12729
|
-
|
|
12730
|
-
setImageWidth = _3[1];
|
|
12731
|
-
var _4 = React.useState(0),
|
|
12732
|
-
imageHeight = _4[0],
|
|
12733
|
-
setImageHeight = _4[1];
|
|
12734
|
-
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12735
|
-
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"));
|
|
12736
13283
|
var verbiage = useTranslations(rawVerbiage, {
|
|
12737
13284
|
idFrontInstructionText: 'Display the front of your ID card...',
|
|
12738
13285
|
idBackInstructionText: 'Display the back of your ID card...',
|
|
12739
|
-
flipIdInstructionText: 'Please flip your ID card...'
|
|
13286
|
+
flipIdInstructionText: 'Please flip your ID card...',
|
|
13287
|
+
verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
|
|
12740
13288
|
});
|
|
12741
|
-
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;
|
|
12742
13290
|
var theme = styled.useTheme();
|
|
12743
|
-
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 :
|
|
12744
|
-
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 : '
|
|
12745
|
-
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 :
|
|
12746
|
-
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 : '
|
|
12747
|
-
var captureImageSize = function captureImageSize() {
|
|
12748
|
-
var _a, _b, _c, _d;
|
|
12749
|
-
if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
|
|
12750
|
-
if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
|
|
12751
|
-
};
|
|
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';
|
|
12752
13295
|
return /*#__PURE__*/React__namespace.default.createElement(Container, {
|
|
12753
13296
|
className: classNames.container
|
|
12754
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
13297
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer, {
|
|
13298
|
+
className: classNames.faceGuideContainer
|
|
13299
|
+
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
|
|
12755
13300
|
className: classNames.faceGuide,
|
|
12756
|
-
|
|
12757
|
-
|
|
12758
|
-
|
|
13301
|
+
status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
|
|
13302
|
+
borderWidth: faceGuideBorderWidth,
|
|
13303
|
+
borderColor: faceGuideBorderColor
|
|
13304
|
+
})), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideContainer, {
|
|
12759
13305
|
className: classNames.idCardGuideContainer
|
|
12760
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
12761
|
-
className: classNames.
|
|
12762
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
12763
|
-
className: classNames.
|
|
12764
|
-
|
|
12765
|
-
"$background": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsBackgroundColor
|
|
12766
|
-
}, instructionText)), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
|
|
12767
|
-
"$borderWidth": idCardGuideBorderWidth,
|
|
12768
|
-
"$borderColor": idCardGuideBorderColor,
|
|
12769
|
-
className: classNames.idCardGuideImageContainer
|
|
12770
|
-
}, requestedAction === 'FLIP_ID' ? ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
12771
|
-
assets: assets,
|
|
12772
|
-
imageWidth: imageWidth,
|
|
12773
|
-
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,
|
|
12774
13311
|
borderWidth: idCardGuideBorderWidth,
|
|
12775
|
-
|
|
12776
|
-
|
|
12777
|
-
|
|
12778
|
-
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
13312
|
+
borderColor: idCardGuideBorderColor,
|
|
13313
|
+
"$isVisible": requestedAction !== 'FLIP_ID'
|
|
13314
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
12779
13315
|
alt: "",
|
|
13316
|
+
ref: imageRef,
|
|
12780
13317
|
className: classNames.idCardGuideImage,
|
|
12781
|
-
"$isMirrored": !((
|
|
12782
|
-
|
|
12783
|
-
|
|
12784
|
-
|
|
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))));
|
|
12785
13332
|
};
|
|
12786
|
-
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) {
|
|
12787
13334
|
var _a;
|
|
12788
13335
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
12789
13336
|
});
|
|
12790
|
-
var
|
|
12791
|
-
|
|
12792
|
-
|
|
12793
|
-
|
|
12794
|
-
|
|
12795
|
-
|
|
12796
|
-
});
|
|
12797
|
-
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"])));
|
|
12798
|
-
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"])));
|
|
12799
|
-
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"])));
|
|
12800
|
-
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) {
|
|
12801
|
-
return props.$borderWidth;
|
|
12802
|
-
}, function (props) {
|
|
12803
|
-
return props.$borderColor;
|
|
12804
|
-
});
|
|
12805
|
-
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) {
|
|
12806
|
-
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
12807
|
-
});
|
|
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"])));
|
|
12808
13343
|
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
12809
13344
|
|
|
12810
13345
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
@@ -12895,7 +13430,7 @@ var ReadTextPromptText = styled__default.default.div(templateObject_3$6 || (temp
|
|
|
12895
13430
|
var _a, _b, _c, _d, _e, _f;
|
|
12896
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, ";") : "";
|
|
12897
13432
|
});
|
|
12898
|
-
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"])));
|
|
12899
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) {
|
|
12900
13435
|
var _a, _b, _c, _d, _e, _f;
|
|
12901
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, ";") : "";
|
|
@@ -12912,8 +13447,8 @@ var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4
|
|
|
12912
13447
|
var edgeBoundary = 0.05;
|
|
12913
13448
|
var defaultVideoIdCaptureThresholds = {
|
|
12914
13449
|
detection: {
|
|
12915
|
-
idCardFront: 0.
|
|
12916
|
-
idCardBack: 0.
|
|
13450
|
+
idCardFront: 0.7,
|
|
13451
|
+
idCardBack: 0.7,
|
|
12917
13452
|
passport: 1
|
|
12918
13453
|
},
|
|
12919
13454
|
focus: {
|
|
@@ -13250,12 +13785,10 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13250
13785
|
var theme = styled.useTheme();
|
|
13251
13786
|
var _30 = useTranslations(rawVerbiage, {
|
|
13252
13787
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
13253
|
-
searchingForIdCardText: 'Searching for ID card...',
|
|
13254
13788
|
captureBtnText: 'Capture'
|
|
13255
13789
|
}),
|
|
13256
13790
|
captureBtnText = _30.captureBtnText,
|
|
13257
|
-
faceNotCenteredText = _30.faceNotCenteredText
|
|
13258
|
-
searchingForIdCardText = _30.searchingForIdCardText;
|
|
13791
|
+
faceNotCenteredText = _30.faceNotCenteredText;
|
|
13259
13792
|
var debugScalingDetails = useDebugScalingDetails({
|
|
13260
13793
|
enabled: debugMode,
|
|
13261
13794
|
pageWidth: width,
|
|
@@ -13264,8 +13797,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13264
13797
|
videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
|
|
13265
13798
|
});
|
|
13266
13799
|
var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
|
|
13267
|
-
|
|
13268
|
-
|
|
13800
|
+
// const searchingForIdCard =
|
|
13801
|
+
// idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet
|
|
13802
|
+
var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
|
|
13269
13803
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13270
13804
|
ref: ref,
|
|
13271
13805
|
className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
|
|
@@ -13285,6 +13819,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13285
13819
|
verbiage: rawVerbiage.guides,
|
|
13286
13820
|
requestedAction: requestedAction,
|
|
13287
13821
|
satisfied: satisfied,
|
|
13822
|
+
idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
|
|
13288
13823
|
faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
|
|
13289
13824
|
idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
|
|
13290
13825
|
}), debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
|
|
@@ -13432,7 +13967,7 @@ var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
|
|
|
13432
13967
|
})) : ( /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
13433
13968
|
src: idBackImageUrl,
|
|
13434
13969
|
alt: "ID Back Image"
|
|
13435
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
13970
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow$1, {
|
|
13436
13971
|
className: classNames.buttonsRow
|
|
13437
13972
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
13438
13973
|
variant: "warning",
|
|
@@ -13454,7 +13989,7 @@ var AssetSelectorOption = styled__default.default.div(templateObject_3$4 || (tem
|
|
|
13454
13989
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
13455
13990
|
|
|
13456
13991
|
var VideoIdWizard = function VideoIdWizard(_a) {
|
|
13457
|
-
var _b, _c, _d, _e, _f;
|
|
13992
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
13458
13993
|
var onComplete = _a.onComplete,
|
|
13459
13994
|
onExitCapture = _a.onExitCapture,
|
|
13460
13995
|
onExitAfterFailure = _a.onExitAfterFailure,
|
|
@@ -13462,66 +13997,66 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13462
13997
|
onIdCaptureModelError = _a.onIdCaptureModelError,
|
|
13463
13998
|
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
13464
13999
|
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
13465
|
-
|
|
13466
|
-
idCaptureProps =
|
|
13467
|
-
|
|
13468
|
-
faceLivenessProps =
|
|
13469
|
-
|
|
13470
|
-
idCaptureModelsEnabled =
|
|
13471
|
-
|
|
13472
|
-
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,
|
|
13473
14008
|
readTextPrompt = _a.readTextPrompt,
|
|
13474
14009
|
readTextTimeoutDurationMs = _a.readTextTimeoutDurationMs,
|
|
13475
14010
|
readTextMinReadingMs = _a.readTextMinReadingMs,
|
|
13476
|
-
|
|
13477
|
-
skipIdCapture =
|
|
13478
|
-
|
|
13479
|
-
skipShowIdCardBack =
|
|
13480
|
-
|
|
13481
|
-
skipSuccessScreen =
|
|
13482
|
-
|
|
13483
|
-
idCaptureLoadingOverlayMode =
|
|
13484
|
-
|
|
13485
|
-
idCaptureGuideType =
|
|
13486
|
-
|
|
13487
|
-
idCapturePortraitGuidesOnMobile =
|
|
13488
|
-
|
|
13489
|
-
idCaptureRotateLoadingOverlayImageWhenPortrait =
|
|
13490
|
-
|
|
13491
|
-
idCaptureModelLoadTimeoutMs =
|
|
13492
|
-
|
|
13493
|
-
faceLivenessLoadingOverlayMode =
|
|
13494
|
-
|
|
13495
|
-
disableFaceDetectionWhileAudioCapture =
|
|
13496
|
-
|
|
13497
|
-
disableFaceDetectionWhileAudioCaptureMsDelay =
|
|
13498
|
-
|
|
13499
|
-
silentFallback =
|
|
13500
|
-
|
|
13501
|
-
mergeAVStreams =
|
|
13502
|
-
|
|
13503
|
-
assets =
|
|
13504
|
-
|
|
13505
|
-
classNames =
|
|
13506
|
-
|
|
13507
|
-
colors =
|
|
13508
|
-
|
|
13509
|
-
verbiage =
|
|
13510
|
-
|
|
13511
|
-
debugMode =
|
|
13512
|
-
var
|
|
13513
|
-
submissionStatus =
|
|
13514
|
-
idCaptureVideoUrl =
|
|
13515
|
-
idCaptureVideoAudioUrl =
|
|
13516
|
-
idCaptureVideoIdFrontImage =
|
|
13517
|
-
idCaptureVideoIdBackImage =
|
|
13518
|
-
setIdCaptureVideoUrl =
|
|
13519
|
-
setIdCaptureVideoIdFrontImage =
|
|
13520
|
-
setIdCaptureVideoIdBackImage =
|
|
13521
|
-
setIdCaptureVideoAudioUrl =
|
|
13522
|
-
var
|
|
13523
|
-
captureState =
|
|
13524
|
-
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];
|
|
13525
14060
|
React.useEffect(function () {
|
|
13526
14061
|
if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
|
|
13527
14062
|
}, [captureState, skipIdCapture]);
|
|
@@ -13552,9 +14087,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13552
14087
|
var onVideoCaptureFaceNotDetected = React.useCallback(function () {
|
|
13553
14088
|
setCaptureState('CHECKING_LIVENESS');
|
|
13554
14089
|
}, []);
|
|
13555
|
-
var
|
|
13556
|
-
attempt =
|
|
13557
|
-
setAttempt =
|
|
14090
|
+
var _11 = React.useState(0),
|
|
14091
|
+
attempt = _11[0],
|
|
14092
|
+
setAttempt = _11[1];
|
|
13558
14093
|
var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
|
|
13559
14094
|
var onFaceCaptureExitAfterFailure = React.useCallback(function (resp, req) {
|
|
13560
14095
|
userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);
|
|
@@ -13585,6 +14120,19 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13585
14120
|
});
|
|
13586
14121
|
onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
|
|
13587
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]);
|
|
13588
14136
|
if (submissionStatus === SubmissionStatus.SUBMITTING) {
|
|
13589
14137
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13590
14138
|
className: "flex"
|
|
@@ -13602,8 +14150,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13602
14150
|
debugMode: debugMode
|
|
13603
14151
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
|
|
13604
14152
|
autoStart: false,
|
|
13605
|
-
documentDetectionModelUrl: (
|
|
13606
|
-
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 : '',
|
|
13607
14155
|
onModelError: onIdCaptureModelError,
|
|
13608
14156
|
modelLoadTimeoutMs: idCaptureModelLoadTimeoutMs
|
|
13609
14157
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
@@ -13611,7 +14159,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13611
14159
|
onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
|
|
13612
14160
|
modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
|
|
13613
14161
|
}, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13614
|
-
className: "flex ".concat((
|
|
14162
|
+
className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
|
|
13615
14163
|
}, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
|
|
13616
14164
|
className: classNames.cameraFeed
|
|
13617
14165
|
}), function () {
|
|
@@ -13649,6 +14197,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
13649
14197
|
skipSuccessScreen: true,
|
|
13650
14198
|
renderCameraFeed: false,
|
|
13651
14199
|
releaseCameraAccessOnExit: false,
|
|
14200
|
+
disableCapturePreview: !debugMode,
|
|
14201
|
+
requireVerticalFaceCentering: false,
|
|
14202
|
+
guidesComponent: faceLivenessGuides,
|
|
13652
14203
|
assets: assets.faceLiveness,
|
|
13653
14204
|
classNames: classNames.faceLiveness,
|
|
13654
14205
|
colors: colors.faceLiveness,
|
|
@@ -15136,8 +15687,8 @@ var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
|
|
|
15136
15687
|
}, verbiage.doneBtnText))));
|
|
15137
15688
|
};
|
|
15138
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"])));
|
|
15139
|
-
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"])));
|
|
15140
|
-
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"])));
|
|
15141
15692
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
15142
15693
|
|
|
15143
15694
|
var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
@@ -15188,8 +15739,8 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
|
15188
15739
|
}, verbiage.exitBtnText))));
|
|
15189
15740
|
};
|
|
15190
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"])));
|
|
15191
|
-
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"])));
|
|
15192
|
-
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"])));
|
|
15193
15744
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
15194
15745
|
|
|
15195
15746
|
var ALLOWED_RETRIES$2 = 2;
|
|
@@ -15694,8 +16245,8 @@ var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
|
|
|
15694
16245
|
}, verbiage.doneBtnText))));
|
|
15695
16246
|
};
|
|
15696
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"])));
|
|
15697
|
-
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"])));
|
|
15698
|
-
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"])));
|
|
15699
16250
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
15700
16251
|
|
|
15701
16252
|
var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
@@ -15746,8 +16297,8 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
|
15746
16297
|
}, verbiage.exitBtnText))));
|
|
15747
16298
|
};
|
|
15748
16299
|
var Heading = styled__default.default.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15749
|
-
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"])));
|
|
15750
|
-
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"])));
|
|
15751
16302
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
15752
16303
|
|
|
15753
16304
|
var ALLOWED_RETRIES = 2;
|