idmission-web-sdk 2.1.41 → 2.1.43
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 +2 -6
- package/dist/components/face_liveness/FaceLivenessCapture.d.ts +2 -8
- package/dist/components/face_liveness/FaceLivenessFailure.d.ts +1 -2
- package/dist/components/face_liveness/FaceLivenessWizard.d.ts +2 -6
- package/dist/components/id_capture/FlipIdPrompt.d.ts +17 -12
- package/dist/components/id_capture/IdCapture.d.ts +2 -0
- package/dist/components/id_capture/IdCaptureFitGuide.d.ts +6 -10
- package/dist/components/id_capture/IdCaptureGuideOverlay.d.ts +32 -48
- package/dist/components/id_capture/IdCaptureGuides.d.ts +7 -14
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts +2 -0
- package/dist/components/id_capture/IdCaptureWizard.d.ts +4 -4
- package/dist/components/selfie_capture/SelfieCapture.d.ts +3 -8
- package/dist/components/selfie_capture/SelfieCaptureLoadingGraphic.d.ts +1 -14
- package/dist/components/selfie_capture/SelfieGuidanceModelsProvider.d.ts +2 -2
- package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts +6 -25
- package/dist/components/video_id/IdVideoCaptureGuides.d.ts +3 -12
- package/dist/contexts/SubmissionContext.d.ts +4 -2
- package/dist/lib/locales/es/translation.d.ts +2 -2
- package/dist/lib/locales/index.d.ts +2 -2
- package/dist/sdk2.cjs.development.js +1294 -1992
- 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 +1294 -1992
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +1301 -1999
- 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 +0 -5
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/video_id/IdVideoCaptureGuidesCommon.d.ts +0 -23
|
@@ -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.43';
|
|
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$H || (templateObject_1$H = __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$H;
|
|
435
435
|
|
|
436
|
-
var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$
|
|
436
|
+
var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$G || (templateObject_1$G = __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$s || (templateObject_2$s = __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$m || (templateObject_3$m = __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$h || (templateObject_4$h = __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$G, templateObject_2$s, templateObject_3$m, templateObject_4$h;
|
|
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$G || (templateObject_1$G = __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$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
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$F;
|
|
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$E || (templateObject_1$E = __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$F || (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$E;
|
|
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'];
|
|
@@ -984,14 +984,6 @@ function useLogLevel(newLogLevel) {
|
|
|
984
984
|
function useDebugLogging(enabled) {
|
|
985
985
|
useLogLevel(enabled ? LogLevel.Debug : logLevel);
|
|
986
986
|
}
|
|
987
|
-
function debug() {
|
|
988
|
-
var parts = [];
|
|
989
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
990
|
-
parts[_i] = arguments[_i];
|
|
991
|
-
}
|
|
992
|
-
if (logLevel < LogLevel.Debug) return;
|
|
993
|
-
console.debug.apply(console, parts); // eslint-disable-line
|
|
994
|
-
}
|
|
995
987
|
function log() {
|
|
996
988
|
var parts = [];
|
|
997
989
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
@@ -1852,7 +1844,7 @@ function getFrameDimensions(frame) {
|
|
|
1852
1844
|
return [frameWidth, frameHeight];
|
|
1853
1845
|
}
|
|
1854
1846
|
|
|
1855
|
-
var InvisibleCanvas = styled__default.default.canvas(templateObject_1$
|
|
1847
|
+
var InvisibleCanvas = styled__default.default.canvas(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
1856
1848
|
function drawToCanvas(canvas, frame, width, height) {
|
|
1857
1849
|
if (!canvas) return;
|
|
1858
1850
|
var ctx = canvas.getContext('2d');
|
|
@@ -1872,7 +1864,7 @@ function clearCanvas(canvas) {
|
|
|
1872
1864
|
var _a;
|
|
1873
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);
|
|
1874
1866
|
}
|
|
1875
|
-
var templateObject_1$
|
|
1867
|
+
var templateObject_1$D;
|
|
1876
1868
|
|
|
1877
1869
|
function listAvailableCameras(facingMode_1) {
|
|
1878
1870
|
return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
|
|
@@ -2494,18 +2486,18 @@ function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quali
|
|
|
2494
2486
|
rawCanvas.width = frame.width;
|
|
2495
2487
|
rawCanvas.height = frame.height;
|
|
2496
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);
|
|
2497
2495
|
if (frame.height > frame.width) {
|
|
2498
2496
|
cropCanvas.width = frame.width;
|
|
2499
2497
|
cropCanvas.height = frame.height;
|
|
2500
2498
|
cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2501
2499
|
} else {
|
|
2502
|
-
|
|
2503
|
-
xMin = _a.xMin,
|
|
2504
|
-
width = _a.width;
|
|
2505
|
-
var desiredWidth = frame.height * 0.6;
|
|
2506
|
-
var faceCenterX = xMin + width / 2;
|
|
2507
|
-
var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
|
|
2508
|
-
cropCanvas.width = desiredWidth;
|
|
2500
|
+
cropCanvas.width = width + xPadding;
|
|
2509
2501
|
cropCanvas.height = frame.height;
|
|
2510
2502
|
cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2511
2503
|
}
|
|
@@ -5768,7 +5760,7 @@ function DocumentDetectionModelProvider(_a) {
|
|
|
5768
5760
|
processedPrediction = processDocumentDetectorPrediction(prediction, documentDetectionThresholds);
|
|
5769
5761
|
processedPrediction.frameId = frameId;
|
|
5770
5762
|
setDetectionTime(prediction.time);
|
|
5771
|
-
|
|
5763
|
+
log(processedPrediction);
|
|
5772
5764
|
if (processedPrediction.allZero) setTimesAllZero(function (n) {
|
|
5773
5765
|
return n + 1;
|
|
5774
5766
|
});
|
|
@@ -6148,6 +6140,8 @@ var initialState$4 = {
|
|
|
6148
6140
|
documentTooClose: false,
|
|
6149
6141
|
flipRequired: false,
|
|
6150
6142
|
backDetectedFirst: false,
|
|
6143
|
+
idCardDetectedButNotAllowed: false,
|
|
6144
|
+
passportDetectedButNotAllowed: false,
|
|
6151
6145
|
enableOverrideWrongDocumentTypeDialog: false,
|
|
6152
6146
|
allowOverrideWrongDocumentTypeAfterMs: 8000,
|
|
6153
6147
|
allowOverrideWrongDocumentTypeGuidance: false,
|
|
@@ -6275,6 +6269,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6275
6269
|
goodFramesThreshold = Math.ceil(3 * frameCaptureRate);
|
|
6276
6270
|
}
|
|
6277
6271
|
}
|
|
6272
|
+
var idCardDetectedButNotAllowed = !state.captureRequirement.includes('idCard') && detectedDocumentType.includes('idCard');
|
|
6273
|
+
var passportDetectedButNotAllowed = !state.captureRequirement.toLowerCase().includes('passport') && detectedDocumentType === 'passport';
|
|
6278
6274
|
var flipRequired = !state.overrideWrongDocumentTypeGuidance && (state.allowIdCardBackToFrontCapture ? 'idCardFront' in state.capturedDocuments && detectedDocumentType === 'idCardFront' : state.requestedDocumentType === 'idCardBack' && detectedDocumentType === 'idCardFront');
|
|
6279
6275
|
var backDetectedFirst = !state.overrideWrongDocumentTypeGuidance && (state.allowIdCardBackToFrontCapture ? 'idCardBack' in state.capturedDocuments && detectedDocumentType === 'idCardBack' : state.requestedDocumentType === 'idCardFront' && detectedDocumentType === 'idCardBack');
|
|
6280
6276
|
var wrongDocumentTypePredictions = state.wrongDocumentTypePredictions;
|
|
@@ -6318,6 +6314,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6318
6314
|
documentTooClose: documentTooClose,
|
|
6319
6315
|
flipRequired: flipRequired,
|
|
6320
6316
|
backDetectedFirst: backDetectedFirst,
|
|
6317
|
+
idCardDetectedButNotAllowed: idCardDetectedButNotAllowed,
|
|
6318
|
+
passportDetectedButNotAllowed: passportDetectedButNotAllowed,
|
|
6321
6319
|
allowOverrideWrongDocumentTypeGuidance: allowOverrideFlipRequirement,
|
|
6322
6320
|
wrongDocumentTypePredictions: wrongDocumentTypePredictions,
|
|
6323
6321
|
idCardFrontDetectionScore: idCardFrontDetectionScore,
|
|
@@ -6498,12 +6496,12 @@ function DebugStatsPane(_a) {
|
|
|
6498
6496
|
if (!portalLocation) return element;
|
|
6499
6497
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6500
6498
|
}
|
|
6501
|
-
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$
|
|
6502
|
-
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$
|
|
6499
|
+
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
6500
|
+
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$r || (templateObject_2$r = __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) {
|
|
6503
6501
|
var $flipX = _a.$flipX;
|
|
6504
6502
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6505
6503
|
});
|
|
6506
|
-
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$
|
|
6504
|
+
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$l || (templateObject_3$l = __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) {
|
|
6507
6505
|
var $color = _a.$color;
|
|
6508
6506
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
6509
6507
|
}, function (_a) {
|
|
@@ -6513,7 +6511,7 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$o ||
|
|
|
6513
6511
|
var $flipX = _a.$flipX;
|
|
6514
6512
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6515
6513
|
});
|
|
6516
|
-
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$
|
|
6514
|
+
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$g || (templateObject_4$g = __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) {
|
|
6517
6515
|
var $color = _a.$color;
|
|
6518
6516
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
6519
6517
|
}, function (_a) {
|
|
@@ -6704,7 +6702,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
6704
6702
|
}
|
|
6705
6703
|
});
|
|
6706
6704
|
}
|
|
6707
|
-
var templateObject_1$
|
|
6705
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$l, templateObject_4$g;
|
|
6708
6706
|
|
|
6709
6707
|
var enTranslation = {};
|
|
6710
6708
|
|
|
@@ -6736,6 +6734,8 @@ var esTranslation = {
|
|
|
6736
6734
|
'Document out of focus – try improving the lighting': 'Documento no enfocado - hay que tratar de mejorar la iluminación',
|
|
6737
6735
|
'ID card front detected - please flip your ID card': 'Anverso de ID detectado, por favor voltea tu identificación',
|
|
6738
6736
|
'ID card back detected - please flip your ID card': 'Reverso de ID detectado, por favor voltea tu identificación',
|
|
6737
|
+
'ID card detected, please scan a passport instead': 'Se ha detectado una credencial, por favor hay que escanear un pasaporte',
|
|
6738
|
+
'Passport detected, please scan an ID card instead': 'Se ha detectado un pasaporte, por favor hay que escanear una credencial',
|
|
6739
6739
|
'Document detected, hold still...': 'Se ha detectado el documento, no moverse por favor...',
|
|
6740
6740
|
'ID card front detected, hold still...': 'Anverso de ID detectado, no mover...',
|
|
6741
6741
|
'ID card back detected, hold still...': 'Reverso de ID detectado, no mover...',
|
|
@@ -6764,8 +6764,6 @@ var esTranslation = {
|
|
|
6764
6764
|
Exit: 'Salir',
|
|
6765
6765
|
'Face liveness has been verified!': 'Se ha verificado la Prueba de Vida en rostro!',
|
|
6766
6766
|
Done: 'Terminar',
|
|
6767
|
-
'Could not verify your face.': 'No se pudo verificar tu rostro.',
|
|
6768
|
-
'An error occurred while verifying your face.': 'Se ha producido un error al verificar tu rostro.',
|
|
6769
6767
|
'Customer has been identified!': '¡Se ha identificado al cliente!',
|
|
6770
6768
|
'Customer not found': 'Cliente no encontrado',
|
|
6771
6769
|
'Additional document capture': 'Captura de otro documento',
|
|
@@ -6876,7 +6874,7 @@ function useTranslations(verbiage, fallbacks) {
|
|
|
6876
6874
|
}, [fallbacks, i18n.language, t, verbiage]);
|
|
6877
6875
|
}
|
|
6878
6876
|
|
|
6879
|
-
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$
|
|
6877
|
+
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
6880
6878
|
var $top = _a.$top;
|
|
6881
6879
|
return $top !== null && $top !== void 0 ? $top : '10vh';
|
|
6882
6880
|
}, function (_a) {
|
|
@@ -6889,14 +6887,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
6889
6887
|
if (!portalLocation) return element;
|
|
6890
6888
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6891
6889
|
};
|
|
6892
|
-
var GuidanceMessage = styled__default.default.div(templateObject_2$
|
|
6890
|
+
var GuidanceMessage = styled__default.default.div(templateObject_2$q || (templateObject_2$q = __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) {
|
|
6893
6891
|
var _a, _b, _c, _d, _e, _f;
|
|
6894
6892
|
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';
|
|
6895
6893
|
}, function (props) {
|
|
6896
6894
|
var _a, _b, _c, _d, _e, _f;
|
|
6897
6895
|
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';
|
|
6898
6896
|
});
|
|
6899
|
-
var templateObject_1$
|
|
6897
|
+
var templateObject_1$B, templateObject_2$q;
|
|
6900
6898
|
|
|
6901
6899
|
var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
|
|
6902
6900
|
|
|
@@ -6931,18 +6929,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
6931
6929
|
}
|
|
6932
6930
|
}, verbiage.buttonText))));
|
|
6933
6931
|
}
|
|
6934
|
-
var Container$1 = styled__default.default.div(templateObject_1$
|
|
6932
|
+
var Container$1 = styled__default.default.div(templateObject_1$A || (templateObject_1$A = __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) {
|
|
6935
6933
|
var _a, _b, _c;
|
|
6936
6934
|
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';
|
|
6937
6935
|
}, function (props) {
|
|
6938
6936
|
var _a, _b, _c;
|
|
6939
6937
|
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';
|
|
6940
6938
|
});
|
|
6941
|
-
var InnerContainer = styled__default.default.div(templateObject_2$
|
|
6942
|
-
var Message = styled__default.default.span(templateObject_3$
|
|
6943
|
-
var ButtonContainer = styled__default.default.div(templateObject_4$
|
|
6944
|
-
var Button = styled__default.default(LoaderButton)(templateObject_5$
|
|
6945
|
-
var templateObject_1$
|
|
6939
|
+
var InnerContainer = styled__default.default.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
6940
|
+
var Message = styled__default.default.span(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
|
|
6941
|
+
var ButtonContainer = styled__default.default.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
6942
|
+
var Button = styled__default.default(LoaderButton)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
6943
|
+
var templateObject_1$A, templateObject_2$p, templateObject_3$k, templateObject_4$f, templateObject_5$9;
|
|
6946
6944
|
|
|
6947
6945
|
var IdCapture = function IdCapture(_a) {
|
|
6948
6946
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -7042,8 +7040,8 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7042
7040
|
});
|
|
7043
7041
|
}, 0);
|
|
7044
7042
|
}, [dispatch, getBestFrame, onCapture, shouldCapture, state.captureStartedAt, state.requestedDocumentType]);
|
|
7045
|
-
assets.portraitGuidesImageUrl || (assets.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-
|
|
7046
|
-
assets.landscapeGuidesImageUrl || (assets.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-
|
|
7043
|
+
assets.portraitGuidesImageUrl || (assets.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg"));
|
|
7044
|
+
assets.landscapeGuidesImageUrl || (assets.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
7047
7045
|
var theme = styled.useTheme();
|
|
7048
7046
|
colors.guideBoxUnsatisfiedColor || (colors.guideBoxUnsatisfiedColor = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.unsatisfiedColor) !== null && _d !== void 0 ? _d : 'white');
|
|
7049
7047
|
colors.guideBoxSatisfiedColor || (colors.guideBoxSatisfiedColor = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.satisfiedColor) !== null && _g !== void 0 ? _g : 'green');
|
|
@@ -7056,7 +7054,9 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7056
7054
|
guidanceTooBlurryText: 'Document out of focus – try improving the lighting',
|
|
7057
7055
|
guidanceNotCenteredText: 'Document is not centered',
|
|
7058
7056
|
guidanceTooCloseText: 'Document too close, please back up',
|
|
7059
|
-
guidanceNotDetectedText: 'Document not detected'
|
|
7057
|
+
guidanceNotDetectedText: 'Document not detected',
|
|
7058
|
+
guidanceIdCardNotAllowedText: 'ID card detected, please scan a passport instead',
|
|
7059
|
+
guidancePassportNotAllowedText: 'Passport detected, please scan an ID card instead'
|
|
7060
7060
|
});
|
|
7061
7061
|
var debugScalingDetails = useDebugScalingDetails({
|
|
7062
7062
|
enabled: debugMode,
|
|
@@ -7067,7 +7067,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7067
7067
|
});
|
|
7068
7068
|
var satisfied = state.isGoodFrame;
|
|
7069
7069
|
if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
|
|
7070
|
-
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceSatisfiedText : !state.detectionThresholdMet ? verbiage.guidanceNotDetectedText : state.backDetectedFirst ? verbiage.guidanceBackDetectedFirstText : state.flipRequired ? verbiage.guidancePleaseFlipText : !state.documentInBounds ? verbiage.guidanceNotCenteredText : state.documentTooClose ? verbiage.guidanceTooCloseText : !state.focusThresholdMet ? verbiage.guidanceTooBlurryText : '');
|
|
7070
|
+
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceSatisfiedText : !state.detectionThresholdMet ? verbiage.guidanceNotDetectedText : state.backDetectedFirst ? verbiage.guidanceBackDetectedFirstText : state.flipRequired ? verbiage.guidancePleaseFlipText : state.idCardDetectedButNotAllowed ? verbiage.guidanceIdCardNotAllowedText : state.passportDetectedButNotAllowed ? verbiage.guidancePassportNotAllowedText : !state.documentInBounds ? verbiage.guidanceNotCenteredText : state.documentTooClose ? verbiage.guidanceTooCloseText : !state.focusThresholdMet ? verbiage.guidanceTooBlurryText : '');
|
|
7071
7071
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
7072
7072
|
ref: ref,
|
|
7073
7073
|
className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
|
|
@@ -7138,13 +7138,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7138
7138
|
finished: true
|
|
7139
7139
|
}, verbiage.retryBtnText)));
|
|
7140
7140
|
};
|
|
7141
|
-
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
7142
|
-
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
7143
|
-
var Description$4 = styled__default.default.p(templateObject_3$
|
|
7144
|
-
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$
|
|
7145
|
-
var templateObject_1$
|
|
7141
|
+
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
7142
|
+
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7143
|
+
var Description$4 = styled__default.default.p(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
7144
|
+
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7145
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$j, templateObject_4$e;
|
|
7146
7146
|
|
|
7147
|
-
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$
|
|
7147
|
+
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
7148
7148
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7149
7149
|
var onClick = _a.onClick,
|
|
7150
7150
|
className = _a.className;
|
|
@@ -7188,11 +7188,11 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7188
7188
|
y2: "19.75"
|
|
7189
7189
|
}))));
|
|
7190
7190
|
};
|
|
7191
|
-
var templateObject_1$z;
|
|
7192
|
-
|
|
7193
|
-
var ButtonsRow$1 = styled__default.default.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
7194
7191
|
var templateObject_1$y;
|
|
7195
7192
|
|
|
7193
|
+
var ButtonsRow = styled__default.default.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
7194
|
+
var templateObject_1$x;
|
|
7195
|
+
|
|
7196
7196
|
function IdCaptureLoadingGraphic(props) {
|
|
7197
7197
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
7198
7198
|
return isMobile ? ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureLoadingGraphicMobile, _assign({}, props))) : ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureLoadingGraphicDesktop, _assign({}, props)));
|
|
@@ -7826,25 +7826,25 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
7826
7826
|
}
|
|
7827
7827
|
}, verbiage.continueText))))));
|
|
7828
7828
|
};
|
|
7829
|
-
var OverlayInner$1 = styled__default.default.div(templateObject_1$
|
|
7829
|
+
var OverlayInner$1 = styled__default.default.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
7830
7830
|
var _a, _b, _c, _d;
|
|
7831
7831
|
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';
|
|
7832
7832
|
}, function (props) {
|
|
7833
7833
|
var _a, _b, _c, _d;
|
|
7834
7834
|
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';
|
|
7835
7835
|
});
|
|
7836
|
-
var OverlayHeader$1 = styled__default.default.div(templateObject_2$
|
|
7836
|
+
var OverlayHeader$1 = styled__default.default.div(templateObject_2$n || (templateObject_2$n = __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) {
|
|
7837
7837
|
var _a;
|
|
7838
7838
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
7839
7839
|
}, function (props) {
|
|
7840
7840
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
7841
7841
|
});
|
|
7842
|
-
var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
7843
|
-
var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$
|
|
7844
|
-
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$
|
|
7845
|
-
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$
|
|
7846
|
-
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$
|
|
7847
|
-
var StyledButtonsRow$a = styled__default.default(ButtonsRow
|
|
7842
|
+
var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
7843
|
+
var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
7844
|
+
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
7845
|
+
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$7 || (templateObject_6$7 = __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"])));
|
|
7846
|
+
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7847
|
+
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) {
|
|
7848
7848
|
var _a, _b, _c, _d;
|
|
7849
7849
|
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';
|
|
7850
7850
|
}, function (props) {
|
|
@@ -7878,10 +7878,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
|
|
|
7878
7878
|
var _a, _b, _c, _d, _e, _f;
|
|
7879
7879
|
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, ";") : '';
|
|
7880
7880
|
});
|
|
7881
|
-
var templateObject_1$
|
|
7881
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, 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;
|
|
7882
7882
|
|
|
7883
|
-
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$
|
|
7884
|
-
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$
|
|
7883
|
+
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
7884
|
+
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7885
7885
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
7886
7886
|
var _b, _c, _d, _e;
|
|
7887
7887
|
var onDismissed = _a.onDismissed,
|
|
@@ -7992,7 +7992,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
7992
7992
|
}
|
|
7993
7993
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
7994
7994
|
};
|
|
7995
|
-
var templateObject_1$
|
|
7995
|
+
var templateObject_1$v, templateObject_2$m;
|
|
7996
7996
|
|
|
7997
7997
|
var components$1 = {
|
|
7998
7998
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8049,7 +8049,7 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8049
8049
|
});
|
|
8050
8050
|
};
|
|
8051
8051
|
|
|
8052
|
-
var OverlayInstruction = styled__default.default.p(templateObject_1$
|
|
8052
|
+
var OverlayInstruction = styled__default.default.p(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n font-size: 18px;\n margin: 30px 0;\n"], ["\n font-size: 18px;\n margin: 30px 0;\n"])));
|
|
8053
8053
|
var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
8054
8054
|
var capturedDocuments = _a.capturedDocuments,
|
|
8055
8055
|
onSubmitClick = _a.onSubmitClick,
|
|
@@ -8084,7 +8084,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8084
8084
|
className: classNames.imageContainer
|
|
8085
8085
|
}, /*#__PURE__*/React__namespace.default.createElement(ImageRow, {
|
|
8086
8086
|
className: classNames.imageRow
|
|
8087
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
8087
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$9, {
|
|
8088
8088
|
className: classNames.heading
|
|
8089
8089
|
}, verbiage.headingText), idCardFront && ( /*#__PURE__*/React__namespace.default.createElement(ImageCol$1, {
|
|
8090
8090
|
className: classNames.imageCol
|
|
@@ -8118,7 +8118,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8118
8118
|
alt: verbiage.passportText
|
|
8119
8119
|
})), 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, {
|
|
8120
8120
|
className: classNames.instruction
|
|
8121
|
-
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
8121
|
+
}, verbiage.instructionText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
8122
8122
|
className: classNames.buttonsRow
|
|
8123
8123
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
8124
8124
|
className: classNames.retryBtn,
|
|
@@ -8135,17 +8135,17 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8135
8135
|
finished: true
|
|
8136
8136
|
}, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
|
|
8137
8137
|
};
|
|
8138
|
-
var Heading$
|
|
8139
|
-
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$
|
|
8140
|
-
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$
|
|
8141
|
-
var ImageCol$1 = styled__default.default.div(templateObject_5$
|
|
8142
|
-
var ImageHeading = styled__default.default.h3(templateObject_6$
|
|
8143
|
-
var CapturedImageWrapper = styled__default.default.div(templateObject_7$
|
|
8138
|
+
var Heading$9 = styled__default.default.h1(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
|
|
8139
|
+
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
|
|
8140
|
+
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
|
|
8141
|
+
var ImageCol$1 = styled__default.default.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
|
|
8142
|
+
var ImageHeading = styled__default.default.h3(templateObject_6$6 || (templateObject_6$6 = __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"])));
|
|
8143
|
+
var CapturedImageWrapper = styled__default.default.div(templateObject_7$4 || (templateObject_7$4 = __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) {
|
|
8144
8144
|
var _a, _b, _c;
|
|
8145
8145
|
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)';
|
|
8146
8146
|
});
|
|
8147
|
-
var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_8$
|
|
8148
|
-
var templateObject_1$
|
|
8147
|
+
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"])));
|
|
8148
|
+
var templateObject_1$u, templateObject_2$l, templateObject_3$h, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$2;
|
|
8149
8149
|
|
|
8150
8150
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
8151
8151
|
var _b;
|
|
@@ -8184,10 +8184,10 @@ var CameraVideoTag = function CameraVideoTag(_a) {
|
|
|
8184
8184
|
"$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
|
|
8185
8185
|
});
|
|
8186
8186
|
};
|
|
8187
|
-
var FullscreenVideoTag = styled__default.default.video(templateObject_1$
|
|
8187
|
+
var FullscreenVideoTag = styled__default.default.video(templateObject_1$t || (templateObject_1$t = __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) {
|
|
8188
8188
|
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
8189
8189
|
});
|
|
8190
|
-
var templateObject_1$
|
|
8190
|
+
var templateObject_1$t;
|
|
8191
8191
|
|
|
8192
8192
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8193
8193
|
var _this = this;
|
|
@@ -8222,10 +8222,10 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
|
|
|
8222
8222
|
return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
|
|
8223
8223
|
}
|
|
8224
8224
|
|
|
8225
|
-
var CameraFeedWrapper = styled__default.default.div(templateObject_1$
|
|
8225
|
+
var CameraFeedWrapper = styled__default.default.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8226
8226
|
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;") : "";
|
|
8227
8227
|
});
|
|
8228
|
-
var templateObject_1$
|
|
8228
|
+
var templateObject_1$s;
|
|
8229
8229
|
|
|
8230
8230
|
function setCanvasDimensions(canvas, width, height) {
|
|
8231
8231
|
var _a;
|
|
@@ -8259,396 +8259,68 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
|
8259
8259
|
}
|
|
8260
8260
|
});
|
|
8261
8261
|
|
|
8262
|
-
var
|
|
8263
|
-
|
|
8264
|
-
|
|
8265
|
-
var
|
|
8266
|
-
|
|
8262
|
+
var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n z-index: 1000;\n"], ["\n z-index: 1000;\n"])));
|
|
8263
|
+
var GuidesContainer = styled__default.default.div(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
8264
|
+
var GuideCenterRow = styled__default.default.div(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
8265
|
+
var GuideRegion = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __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) {
|
|
8266
|
+
var _a, _b, _c, _d, _e;
|
|
8267
|
+
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)';
|
|
8268
|
+
}, function (props) {
|
|
8269
|
+
var _a, _b, _c, _d;
|
|
8270
|
+
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.guideOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'white';
|
|
8271
|
+
}, function (props) {
|
|
8272
|
+
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8267
8273
|
}, function (props) {
|
|
8268
|
-
return props.$
|
|
8274
|
+
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
8269
8275
|
});
|
|
8270
|
-
|
|
8271
|
-
|
|
8272
|
-
|
|
8273
|
-
status = _b === void 0 ? 'ready' : _b,
|
|
8274
|
-
_c = _a.borderWidth,
|
|
8275
|
-
borderWidth = _c === void 0 ? 20 : _c,
|
|
8276
|
-
_d = _a.borderRadius,
|
|
8277
|
-
borderRadius = _d === void 0 ? 25 : _d,
|
|
8278
|
-
_e = _a.borderColor,
|
|
8279
|
-
borderColor = _e === void 0 ? 'white' : _e,
|
|
8280
|
-
_f = _a.progress,
|
|
8281
|
-
progress = _f === void 0 ? 0 : _f,
|
|
8282
|
-
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "progress"]);
|
|
8283
|
-
var _g = useResizeObserver__default.default(),
|
|
8284
|
-
ref = _g.ref,
|
|
8285
|
-
_h = _g.width,
|
|
8286
|
-
width = _h === void 0 ? 0 : _h,
|
|
8287
|
-
_j = _g.height,
|
|
8288
|
-
height = _j === void 0 ? 0 : _j;
|
|
8289
|
-
var _k = React.useState(0),
|
|
8290
|
-
progressResets = _k[0],
|
|
8291
|
-
setProgressResets = _k[1];
|
|
8292
|
-
React.useEffect(function () {
|
|
8293
|
-
if (progress === 0 && status === 'capturing') {
|
|
8294
|
-
setProgressResets(function (n) {
|
|
8295
|
-
return n + 1;
|
|
8296
|
-
});
|
|
8297
|
-
}
|
|
8298
|
-
}, [progress, status]);
|
|
8299
|
-
return /*#__PURE__*/React__namespace.default.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React__namespace.default.createElement("div", {
|
|
8300
|
-
ref: ref
|
|
8301
|
-
}, children), status === 'ready' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
8302
|
-
width: width,
|
|
8303
|
-
height: height,
|
|
8304
|
-
borderRadius: borderRadius,
|
|
8305
|
-
borderOpacity: 0.25,
|
|
8306
|
-
borderColor: "#287ec6",
|
|
8307
|
-
borderWidth: borderWidth,
|
|
8308
|
-
className: "pulse"
|
|
8309
|
-
}), /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
8310
|
-
width: width,
|
|
8311
|
-
height: height,
|
|
8312
|
-
borderRadius: borderRadius,
|
|
8313
|
-
borderOpacity: 0.25,
|
|
8314
|
-
borderColor: "#287ec6",
|
|
8315
|
-
borderWidth: borderWidth,
|
|
8316
|
-
className: "pulse"
|
|
8317
|
-
}), /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
8318
|
-
width: width,
|
|
8319
|
-
height: height,
|
|
8320
|
-
borderRadius: borderRadius,
|
|
8321
|
-
borderOpacity: 0.25,
|
|
8322
|
-
borderColor: "#287ec6",
|
|
8323
|
-
borderWidth: borderWidth,
|
|
8324
|
-
className: "pulse"
|
|
8325
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
8326
|
-
width: width,
|
|
8327
|
-
height: height,
|
|
8328
|
-
borderRadius: borderRadius,
|
|
8329
|
-
borderColor: borderColor,
|
|
8330
|
-
borderWidth: borderWidth,
|
|
8331
|
-
className: "pulseOrigin"
|
|
8332
|
-
}), (status === 'capturing' || progress > 0) && ( /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
8333
|
-
key: "progress".concat(progressResets),
|
|
8334
|
-
width: width,
|
|
8335
|
-
height: height,
|
|
8336
|
-
borderRadius: borderRadius,
|
|
8337
|
-
borderColor: "#287ec6",
|
|
8338
|
-
borderWidth: borderWidth,
|
|
8339
|
-
isProgressBar: true,
|
|
8340
|
-
progress: progress,
|
|
8341
|
-
progressPaused: progress > 0 && status !== 'capturing'
|
|
8342
|
-
})));
|
|
8343
|
-
}
|
|
8344
|
-
function IdCardBorderSvg(_a) {
|
|
8345
|
-
var borderRadius = _a.borderRadius,
|
|
8346
|
-
borderColor = _a.borderColor,
|
|
8347
|
-
borderWidth = _a.borderWidth,
|
|
8348
|
-
_b = _a.borderOpacity,
|
|
8349
|
-
borderOpacity = _b === void 0 ? 1 : _b,
|
|
8350
|
-
_c = _a.progress,
|
|
8351
|
-
progress = _c === void 0 ? 1 : _c,
|
|
8352
|
-
_d = _a.progressPaused,
|
|
8353
|
-
progressPaused = _d === void 0 ? false : _d,
|
|
8354
|
-
_e = _a.isProgressBar,
|
|
8355
|
-
isProgressBar = _e === void 0 ? false : _e,
|
|
8356
|
-
props = __rest(_a, ["borderRadius", "borderColor", "borderWidth", "borderOpacity", "progress", "progressPaused", "isProgressBar"]);
|
|
8357
|
-
var rectRef = React.useRef(null);
|
|
8358
|
-
var _f = React.useState(0),
|
|
8359
|
-
totalLength = _f[0],
|
|
8360
|
-
setTotalLength = _f[1];
|
|
8361
|
-
var _g = React.useState(0),
|
|
8362
|
-
resolvedProgress = _g[0],
|
|
8363
|
-
setResolvedProgress = _g[1];
|
|
8364
|
-
React.useLayoutEffect(function () {
|
|
8365
|
-
var _a, _b;
|
|
8366
|
-
var totalLength = (_b = (_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getTotalLength()) !== null && _b !== void 0 ? _b : 0;
|
|
8367
|
-
setTotalLength(totalLength);
|
|
8368
|
-
setResolvedProgress(progress * totalLength);
|
|
8369
|
-
}, [progress]);
|
|
8370
|
-
return /*#__PURE__*/React__namespace.default.createElement(SvgOverlay, _assign({
|
|
8371
|
-
height: "100%",
|
|
8372
|
-
fill: "none",
|
|
8373
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
8374
|
-
}, props), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
8375
|
-
id: "round-corner"
|
|
8376
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
8377
|
-
x: "0",
|
|
8378
|
-
y: "0",
|
|
8379
|
-
width: "100%",
|
|
8380
|
-
height: "100%",
|
|
8381
|
-
rx: borderRadius,
|
|
8382
|
-
ry: borderRadius
|
|
8383
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(IdCardBorderRect, {
|
|
8384
|
-
ref: rectRef,
|
|
8385
|
-
x: "0",
|
|
8386
|
-
y: "0",
|
|
8387
|
-
width: "100%",
|
|
8388
|
-
height: "100%",
|
|
8389
|
-
rx: borderRadius,
|
|
8390
|
-
ry: borderRadius,
|
|
8391
|
-
clipPath: "url(#round-corner)",
|
|
8392
|
-
stroke: borderColor,
|
|
8393
|
-
strokeWidth: borderWidth,
|
|
8394
|
-
strokeOpacity: borderOpacity,
|
|
8395
|
-
strokeDashoffset: isProgressBar ? resolvedProgress : undefined,
|
|
8396
|
-
strokeDasharray: isProgressBar ? totalLength : undefined,
|
|
8397
|
-
className: isProgressBar ? "progress ".concat(progressPaused ? 'paused' : '') : ''
|
|
8398
|
-
}));
|
|
8399
|
-
}
|
|
8400
|
-
var IdCardBorderContainer = styled__default.default.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\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 @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\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 @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"])));
|
|
8401
|
-
var SvgOverlay = styled__default.default.svg(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
8402
|
-
var IdCardBorderRect = styled__default.default.rect(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n &.progress {\n animation: dash ", "\n ", ";\n }\n\n &.paused {\n animation-play-state: paused;\n }\n\n @keyframes dash {\n to {\n stroke-dashoffset: 0;\n }\n }\n"], ["\n &.progress {\n animation: dash ", "\n ", ";\n }\n\n &.paused {\n animation-play-state: paused;\n }\n\n @keyframes dash {\n to {\n stroke-dashoffset: 0;\n }\n }\n"])), function (props) {
|
|
8403
|
-
var _a;
|
|
8404
|
-
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
8276
|
+
var Spacer = styled__default.default(GuideRegion)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
8277
|
+
var GuideCenterRegion = styled__default.default.div(templateObject_6$5 || (templateObject_6$5 = __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) {
|
|
8278
|
+
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8405
8279
|
}, function (props) {
|
|
8406
|
-
|
|
8407
|
-
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
8280
|
+
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8408
8281
|
});
|
|
8409
|
-
var
|
|
8410
|
-
|
|
8411
|
-
|
|
8412
|
-
|
|
8413
|
-
|
|
8414
|
-
|
|
8415
|
-
|
|
8416
|
-
classNames = _d === void 0 ? {} : _d,
|
|
8417
|
-
borderWidth = _a.borderWidth,
|
|
8418
|
-
borderColor = _a.borderColor,
|
|
8419
|
-
borderRadius = _a.borderRadius,
|
|
8420
|
-
imageStyle = _a.imageStyle;
|
|
8421
|
-
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
8422
|
-
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
|
|
8423
|
-
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
|
|
8424
|
-
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
8425
|
-
var _e = React.useState(1),
|
|
8426
|
-
transitionTime = _e[0],
|
|
8427
|
-
setTransitionTime = _e[1];
|
|
8428
|
-
var _f = React.useState(0),
|
|
8429
|
-
rotationAngle = _f[0],
|
|
8430
|
-
setRotationAngle = _f[1];
|
|
8431
|
-
var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
|
|
8432
|
-
if (isMirrored) frontTransforms.push('scaleX(-1)');
|
|
8433
|
-
var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
|
|
8434
|
-
if (isMirrored) backTransforms.push('scaleX(-1)');
|
|
8435
|
-
React.useEffect(function () {
|
|
8436
|
-
var timeout;
|
|
8437
|
-
function doFlip() {
|
|
8438
|
-
setTransitionTime(1);
|
|
8439
|
-
setRotationAngle(180);
|
|
8440
|
-
timeout = setTimeout(function () {
|
|
8441
|
-
setTransitionTime(0);
|
|
8442
|
-
setRotationAngle(0);
|
|
8443
|
-
}, 1500);
|
|
8444
|
-
}
|
|
8445
|
-
var interval = setInterval(doFlip, 2500);
|
|
8446
|
-
timeout = setTimeout(doFlip, 250);
|
|
8447
|
-
return function () {
|
|
8448
|
-
clearInterval(interval);
|
|
8449
|
-
clearTimeout(timeout);
|
|
8450
|
-
};
|
|
8451
|
-
}, []);
|
|
8452
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
|
|
8453
|
-
className: classNames.frontImageContainer,
|
|
8454
|
-
status: "disabled",
|
|
8455
|
-
borderWidth: borderWidth,
|
|
8456
|
-
borderColor: borderColor,
|
|
8457
|
-
borderRadius: borderRadius,
|
|
8458
|
-
"$transforms": frontTransforms.join(' '),
|
|
8459
|
-
"$transitionTime": transitionTime,
|
|
8460
|
-
"$isVisible": true
|
|
8461
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
8462
|
-
src: assets.frontImageUrl,
|
|
8463
|
-
className: classNames.frontImage,
|
|
8464
|
-
alt: "",
|
|
8465
|
-
style: imageStyle
|
|
8466
|
-
})), /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
|
|
8467
|
-
className: classNames.backImageContainer,
|
|
8468
|
-
status: "disabled",
|
|
8469
|
-
borderWidth: borderWidth,
|
|
8470
|
-
borderColor: borderColor,
|
|
8471
|
-
borderRadius: borderRadius,
|
|
8472
|
-
"$transforms": backTransforms.join(' '),
|
|
8473
|
-
"$transitionTime": transitionTime,
|
|
8474
|
-
"$isVisible": true
|
|
8475
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
8476
|
-
src: assets.backImageUrl,
|
|
8477
|
-
className: classNames.backImage,
|
|
8478
|
-
alt: "",
|
|
8479
|
-
style: imageStyle
|
|
8480
|
-
})));
|
|
8481
|
-
};
|
|
8482
|
-
var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_1$r || (templateObject_1$r = __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) {
|
|
8483
|
-
return props.$transitionTime;
|
|
8282
|
+
var GuideCenterBorder = styled__default.default.div(templateObject_7$3 || (templateObject_7$3 = __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) {
|
|
8283
|
+
var _a, _b;
|
|
8284
|
+
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
8285
|
+
});
|
|
8286
|
+
var GuideText = styled__default.default.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
|
|
8287
|
+
var GuideImage = styled__default.default.img(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n position: relative;\n z-index: 1;\n padding: ", "px;\n box-sizing: border-box;\n opacity: ", ";\n transition: opacity 0.5s;\n max-height: 100%;\n max-width: 100%;\n"], ["\n position: relative;\n z-index: 1;\n padding: ", "px;\n box-sizing: border-box;\n opacity: ", ";\n transition: opacity 0.5s;\n max-height: 100%;\n max-width: 100%;\n"])), function (props) {
|
|
8288
|
+
return props.$padding;
|
|
8484
8289
|
}, function (props) {
|
|
8485
|
-
return props.$
|
|
8290
|
+
return props.$visible ? 1 : 0;
|
|
8486
8291
|
});
|
|
8487
|
-
var templateObject_1$r;
|
|
8488
|
-
|
|
8489
|
-
var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
8490
|
-
// const { width = 1, height = 1 } = useResizeObserver<HTMLDivElement>()
|
|
8491
|
-
// const { cameraRef } = useContext(CameraStateContext)
|
|
8492
|
-
// const theme = useTheme()
|
|
8493
|
-
var
|
|
8494
|
-
// padding: userSuppliedPadding,
|
|
8495
|
-
// imagePadding: userSuppliedImagePadding,
|
|
8496
|
-
_b = _a.borderWidth,
|
|
8497
|
-
// padding: userSuppliedPadding,
|
|
8498
|
-
// imagePadding: userSuppliedImagePadding,
|
|
8499
|
-
borderWidth = _b === void 0 ? 20 : _b,
|
|
8500
|
-
_c = _a.borderColor,
|
|
8501
|
-
borderColor = _c === void 0 ? 'white' : _c,
|
|
8502
|
-
_d = _a.borderRadius,
|
|
8503
|
-
borderRadius = _d === void 0 ? 25 : _d,
|
|
8504
|
-
_e = _a.isMirrored,
|
|
8505
|
-
isMirrored = _e === void 0 ? false : _e,
|
|
8506
|
-
_f = _a.portraitGuidesOnMobile,
|
|
8507
|
-
portraitGuidesOnMobile = _f === void 0 ? true : _f,
|
|
8508
|
-
_g = _a.assets,
|
|
8509
|
-
assets = _g === void 0 ? {} : _g,
|
|
8510
|
-
_h = _a.classNames,
|
|
8511
|
-
classNames = _h === void 0 ? {} : _h;
|
|
8512
|
-
assets.idCardFrontPortraitImageUrl || (assets.idCardFrontPortraitImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-Borderless.svg"));
|
|
8513
|
-
assets.idCardFrontLandscapeImageUrl || (assets.idCardFrontLandscapeImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
|
|
8514
|
-
assets.idCardBackPortraitImageUrl || (assets.idCardBackPortraitImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-Borderless.svg"));
|
|
8515
|
-
assets.idCardBackLandscapeImageUrl || (assets.idCardBackLandscapeImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
|
|
8516
|
-
// const instruction = useVerbiage(
|
|
8517
|
-
// verbiage.instructionText,
|
|
8518
|
-
// 'Please flip your ID card...',
|
|
8519
|
-
// )
|
|
8520
|
-
// const padding =
|
|
8521
|
-
// (userSuppliedPadding ?? isMobile())
|
|
8522
|
-
// ? (theme.idCapture?.guideBox?.mobilePadding ?? 0)
|
|
8523
|
-
// : (theme.idCapture?.guideBox?.desktopPadding ?? 50)
|
|
8524
|
-
// if (borderWidth === undefined)
|
|
8525
|
-
// borderWidth = theme.idCapture?.guideBox?.borderWidth ?? 4
|
|
8526
|
-
// const isMirrored = !cameraRef.current?.isRearFacing
|
|
8527
|
-
var onImageLoaded = React.useContext(GuideOrientationContext).onImageLoaded;
|
|
8528
|
-
var orientation = portraitGuidesOnMobile && window.innerWidth < window.innerHeight ? 'portrait' : 'landscape';
|
|
8529
|
-
// useEffect(() => {
|
|
8530
|
-
// setDimensions({ width, height })
|
|
8531
|
-
// }, [height, setDimensions, width])
|
|
8532
|
-
// const imagePadding =
|
|
8533
|
-
// userSuppliedImagePadding ?? theme.idCapture?.guideBox?.imagePadding ?? 0
|
|
8534
|
-
var _j = React.useState(1),
|
|
8535
|
-
transitionTime = _j[0],
|
|
8536
|
-
setTransitionTime = _j[1];
|
|
8537
|
-
var _k = React.useState(0),
|
|
8538
|
-
rotationAngle = _k[0],
|
|
8539
|
-
setRotationAngle = _k[1];
|
|
8540
|
-
var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
|
|
8541
|
-
if (isMirrored) frontTransforms.push('scaleX(-1)');
|
|
8542
|
-
var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
|
|
8543
|
-
if (isMirrored) backTransforms.push('scaleX(-1)');
|
|
8544
|
-
React.useEffect(function () {
|
|
8545
|
-
var timeout;
|
|
8546
|
-
var doFlip = function doFlip() {
|
|
8547
|
-
setTransitionTime(1);
|
|
8548
|
-
setRotationAngle(180);
|
|
8549
|
-
timeout = setTimeout(function () {
|
|
8550
|
-
setTransitionTime(0);
|
|
8551
|
-
setRotationAngle(0);
|
|
8552
|
-
}, 1500);
|
|
8553
|
-
};
|
|
8554
|
-
var interval = setInterval(doFlip, 2500);
|
|
8555
|
-
timeout = setTimeout(doFlip, 250);
|
|
8556
|
-
return function () {
|
|
8557
|
-
clearInterval(interval);
|
|
8558
|
-
clearTimeout(timeout);
|
|
8559
|
-
};
|
|
8560
|
-
}, []);
|
|
8561
|
-
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
|
|
8562
|
-
status: "disabled",
|
|
8563
|
-
className: classNames.frontImageContainer,
|
|
8564
|
-
borderWidth: borderWidth,
|
|
8565
|
-
borderColor: borderColor,
|
|
8566
|
-
borderRadius: borderRadius,
|
|
8567
|
-
"$transforms": frontTransforms.join(' '),
|
|
8568
|
-
"$transitionTime": transitionTime,
|
|
8569
|
-
"$isVisible": true
|
|
8570
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
8571
|
-
src: orientation === 'portrait' ? assets.idCardFrontPortraitImageUrl : assets.idCardFrontLandscapeImageUrl,
|
|
8572
|
-
alt: "",
|
|
8573
|
-
className: classNames.frontImage,
|
|
8574
|
-
// $padding={imagePadding}
|
|
8575
|
-
// $transitionTime={transitionTime}
|
|
8576
|
-
// $transforms={frontTransforms.join(' ')}
|
|
8577
|
-
// $width={imageWidth}
|
|
8578
|
-
// $height={imageHeight}
|
|
8579
|
-
// $visible
|
|
8580
|
-
onLoad: onImageLoaded
|
|
8581
|
-
})), /*#__PURE__*/React__namespace.default.createElement(FlipImageContainer, {
|
|
8582
|
-
status: "disabled",
|
|
8583
|
-
className: classNames.backImageContainer,
|
|
8584
|
-
borderWidth: borderWidth,
|
|
8585
|
-
borderColor: borderColor,
|
|
8586
|
-
borderRadius: borderRadius,
|
|
8587
|
-
"$transforms": backTransforms.join(' '),
|
|
8588
|
-
"$transitionTime": transitionTime,
|
|
8589
|
-
"$isVisible": true
|
|
8590
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
8591
|
-
src: orientation === 'portrait' ? assets.idCardBackPortraitImageUrl : assets.idCardBackLandscapeImageUrl,
|
|
8592
|
-
alt: "",
|
|
8593
|
-
className: classNames.backImage
|
|
8594
|
-
})));
|
|
8595
|
-
};
|
|
8596
|
-
// const regionClsx = (
|
|
8597
|
-
// classNames: FlipIdPromptClassNames,
|
|
8598
|
-
// which: 'Top' | 'Left' | 'Right' | 'Bottom',
|
|
8599
|
-
// ): string =>
|
|
8600
|
-
// [classNames.dimmingRegion, classNames[`dimmingRegion${which}`]]
|
|
8601
|
-
// .filter((v) => v)
|
|
8602
|
-
// .join(' ')
|
|
8603
|
-
|
|
8604
8292
|
var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
8605
8293
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
8606
|
-
var _p
|
|
8607
|
-
|
|
8608
|
-
|
|
8609
|
-
|
|
8610
|
-
|
|
8611
|
-
|
|
8612
|
-
width = _v === void 0 ? 0 : _v,
|
|
8613
|
-
_w = _a.height,
|
|
8614
|
-
height = _w === void 0 ? 0 : _w,
|
|
8294
|
+
var _p = _a.classNames,
|
|
8295
|
+
classNames = _p === void 0 ? {} : _p,
|
|
8296
|
+
_q = _a.width,
|
|
8297
|
+
width = _q === void 0 ? 0 : _q,
|
|
8298
|
+
_r = _a.height,
|
|
8299
|
+
height = _r === void 0 ? 0 : _r,
|
|
8615
8300
|
userSuppliedPadding = _a.padding,
|
|
8616
8301
|
userSuppliedImagePadding = _a.imagePadding,
|
|
8617
|
-
|
|
8618
|
-
imageVisible =
|
|
8302
|
+
_s = _a.imageVisible,
|
|
8303
|
+
imageVisible = _s === void 0 ? true : _s,
|
|
8619
8304
|
borderWidth = _a.borderWidth,
|
|
8620
8305
|
borderColor = _a.borderColor,
|
|
8621
|
-
_y = _a.idCardBorderWidth,
|
|
8622
|
-
idCardBorderWidth = _y === void 0 ? 20 : _y,
|
|
8623
|
-
_z = _a.idCardBorderColor,
|
|
8624
|
-
idCardBorderColor = _z === void 0 ? 'white' : _z,
|
|
8625
8306
|
maskColor = _a.maskColor,
|
|
8626
|
-
|
|
8627
|
-
isMirrored =
|
|
8628
|
-
|
|
8629
|
-
|
|
8630
|
-
|
|
8631
|
-
|
|
8632
|
-
_3 = _a.instruction,
|
|
8633
|
-
instruction = _3 === void 0 ? '' : _3,
|
|
8634
|
-
_4 = _a.requestedAction,
|
|
8635
|
-
requestedAction = _4 === void 0 ? 'SHOW_ID_FRONT' : _4,
|
|
8636
|
-
_5 = _a.progress,
|
|
8637
|
-
progress = _5 === void 0 ? 0 : _5,
|
|
8638
|
-
_6 = _a.status,
|
|
8639
|
-
status = _6 === void 0 ? 'ready' : _6,
|
|
8307
|
+
_t = _a.isMirrored,
|
|
8308
|
+
isMirrored = _t === void 0 ? false : _t,
|
|
8309
|
+
_u = _a.instruction,
|
|
8310
|
+
instruction = _u === void 0 ? '' : _u,
|
|
8311
|
+
portraitGuidesImageUrl = _a.portraitGuidesImageUrl,
|
|
8312
|
+
landscapeGuidesImageUrl = _a.landscapeGuidesImageUrl,
|
|
8640
8313
|
onClick = _a.onClick;
|
|
8641
|
-
var
|
|
8642
|
-
|
|
8643
|
-
|
|
8644
|
-
|
|
8645
|
-
|
|
8646
|
-
|
|
8647
|
-
|
|
8648
|
-
|
|
8649
|
-
|
|
8650
|
-
|
|
8651
|
-
dispatch = _8[1];
|
|
8314
|
+
var _v = React.useContext(GuideOrientationContext),
|
|
8315
|
+
orientation = _v.orientation,
|
|
8316
|
+
wrapperRef = _v.wrapperRef,
|
|
8317
|
+
wrapperWidth = _v.wrapperWidth,
|
|
8318
|
+
wrapperHeight = _v.wrapperHeight,
|
|
8319
|
+
imageAspectRatio = _v.imageAspectRatio,
|
|
8320
|
+
wrapperAspectRatio = _v.wrapperAspectRatio,
|
|
8321
|
+
guideOrientationOnImageLoaded = _v.onImageLoaded,
|
|
8322
|
+
setDimensions = _v.setDimensions;
|
|
8323
|
+
var dispatch = useIdCaptureState()[1];
|
|
8652
8324
|
function onImageLoaded(e) {
|
|
8653
8325
|
guideOrientationOnImageLoaded(e);
|
|
8654
8326
|
var img = e.target;
|
|
@@ -8672,39 +8344,14 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
|
8672
8344
|
}, [height, setDimensions, width]);
|
|
8673
8345
|
var padding = userSuppliedPadding !== null && userSuppliedPadding !== void 0 ? userSuppliedPadding : isMobile() ? (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.mobilePadding) !== null && _g !== void 0 ? _g : 0 : (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.desktopPadding) !== null && _k !== void 0 ? _k : 50;
|
|
8674
8346
|
var paddingAndBorderPx = padding * 2 + borderWidth * 2;
|
|
8675
|
-
var
|
|
8676
|
-
portrait: {
|
|
8677
|
-
SHOW_ID_FRONT: assets.idCardFrontPortraitImageUrl,
|
|
8678
|
-
FLIP_ID: assets.idCardFrontPortraitImageUrl,
|
|
8679
|
-
SHOW_ID_BACK: assets.idCardBackPortraitImageUrl,
|
|
8680
|
-
SHOW_PASSPORT: assets.passportPortraitImageUrl
|
|
8681
|
-
},
|
|
8682
|
-
landscape: {
|
|
8683
|
-
SHOW_ID_FRONT: assets.idCardFrontLandscapeImageUrl,
|
|
8684
|
-
FLIP_ID: assets.idCardFrontLandscapeImageUrl,
|
|
8685
|
-
SHOW_ID_BACK: assets.idCardBackLandscapeImageUrl,
|
|
8686
|
-
SHOW_PASSPORT: assets.passportLandscapeImageUrl
|
|
8687
|
-
}
|
|
8688
|
-
};
|
|
8689
|
-
if (isBackToFront) {
|
|
8690
|
-
var temp = images.portrait.SHOW_ID_FRONT;
|
|
8691
|
-
images.portrait.SHOW_ID_FRONT = images.portrait.SHOW_ID_BACK;
|
|
8692
|
-
images.portrait.SHOW_ID_BACK = temp;
|
|
8693
|
-
var temp2 = images.landscape.SHOW_ID_FRONT;
|
|
8694
|
-
images.landscape.SHOW_ID_FRONT = images.landscape.SHOW_ID_BACK;
|
|
8695
|
-
images.landscape.SHOW_ID_BACK = temp2;
|
|
8696
|
-
}
|
|
8697
|
-
var orientation = portraitGuidesOnMobile && window.innerWidth < window.innerHeight ? 'portrait' : 'landscape';
|
|
8698
|
-
var imgSrc = images[orientation][requestedAction];
|
|
8699
|
-
assets.flipIdPrompt || (assets.flipIdPrompt = {});
|
|
8700
|
-
(_p = assets.flipIdPrompt).idCardFrontPortraitImageUrl || (_p.idCardFrontPortraitImageUrl = images.portrait.SHOW_ID_FRONT);
|
|
8701
|
-
(_q = assets.flipIdPrompt).idCardFrontLandscapeImageUrl || (_q.idCardFrontLandscapeImageUrl = images.landscape.SHOW_ID_FRONT);
|
|
8702
|
-
(_r = assets.flipIdPrompt).idCardBackPortraitImageUrl || (_r.idCardBackPortraitImageUrl = images.portrait.SHOW_ID_BACK);
|
|
8703
|
-
(_s = assets.flipIdPrompt).idCardBackLandscapeImageUrl || (_s.idCardBackLandscapeImageUrl = images.landscape.SHOW_ID_BACK);
|
|
8347
|
+
var imgSrc = orientation === 'portrait' ? portraitGuidesImageUrl : landscapeGuidesImageUrl;
|
|
8704
8348
|
var imagePadding = (_o = userSuppliedImagePadding !== null && userSuppliedImagePadding !== void 0 ? userSuppliedImagePadding : (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideBox) === null || _m === void 0 ? void 0 : _m.imagePadding) !== null && _o !== void 0 ? _o : 0;
|
|
8705
|
-
var imageWidth = undefined
|
|
8349
|
+
var imageWidth = undefined,
|
|
8350
|
+
imageHeight = undefined;
|
|
8706
8351
|
if (imageAspectRatio >= wrapperAspectRatio) {
|
|
8707
8352
|
imageWidth = wrapperWidth - paddingAndBorderPx;
|
|
8353
|
+
} else {
|
|
8354
|
+
imageHeight = wrapperHeight - paddingAndBorderPx;
|
|
8708
8355
|
}
|
|
8709
8356
|
return /*#__PURE__*/React__namespace.default.createElement(StyledPageContainer, {
|
|
8710
8357
|
ref: wrapperRef,
|
|
@@ -8715,7 +8362,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
|
8715
8362
|
}, /*#__PURE__*/React__namespace.default.createElement(GuideRegion, {
|
|
8716
8363
|
"$maskColor": maskColor,
|
|
8717
8364
|
"$minHeight": padding,
|
|
8718
|
-
className: regionClsx(classNames, 'Top')
|
|
8365
|
+
className: regionClsx$1(classNames, 'Top')
|
|
8719
8366
|
}, instruction !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuideText, {
|
|
8720
8367
|
className: classNames.guideText
|
|
8721
8368
|
}, instruction))), /*#__PURE__*/React__namespace.default.createElement(GuideCenterRow, {
|
|
@@ -8723,7 +8370,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
|
8723
8370
|
}, /*#__PURE__*/React__namespace.default.createElement(Spacer, {
|
|
8724
8371
|
"$maskColor": maskColor,
|
|
8725
8372
|
"$minWidth": padding,
|
|
8726
|
-
className: regionClsx(classNames, 'Left')
|
|
8373
|
+
className: regionClsx$1(classNames, 'Left')
|
|
8727
8374
|
}), /*#__PURE__*/React__namespace.default.createElement(GuideCenterRegion, {
|
|
8728
8375
|
"$minWidth": imageWidth,
|
|
8729
8376
|
"$isMirrored": isMirrored,
|
|
@@ -8731,159 +8378,252 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
|
8731
8378
|
}, /*#__PURE__*/React__namespace.default.createElement(GuideCenterBorder, {
|
|
8732
8379
|
"$borderWidth": borderWidth,
|
|
8733
8380
|
"$borderColor": borderColor,
|
|
8734
|
-
"$padding": imagePadding,
|
|
8735
|
-
className: classNames.centerRegionBorder
|
|
8736
|
-
}, /*#__PURE__*/React__namespace.default.createElement(GuideCenterInner, {
|
|
8737
8381
|
className: classNames.centerRegionInner
|
|
8738
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
8739
|
-
status: status,
|
|
8740
|
-
progress: progress,
|
|
8741
|
-
borderWidth: idCardBorderWidth,
|
|
8742
|
-
borderColor: idCardBorderColor,
|
|
8743
|
-
"$isVisible": requestedAction !== 'FLIP_ID'
|
|
8744
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
8382
|
+
}, /*#__PURE__*/React__namespace.default.createElement(GuideImage, {
|
|
8745
8383
|
src: imgSrc,
|
|
8746
8384
|
alt: "",
|
|
8747
8385
|
onLoad: onImageLoaded,
|
|
8748
8386
|
className: classNames.image,
|
|
8749
|
-
"$
|
|
8750
|
-
"$
|
|
8751
|
-
|
|
8752
|
-
|
|
8753
|
-
})),
|
|
8754
|
-
borderWidth: idCardBorderWidth,
|
|
8755
|
-
borderColor: idCardBorderColor,
|
|
8756
|
-
portraitGuidesOnMobile: portraitGuidesOnMobile,
|
|
8757
|
-
isMirrored: isMirrored,
|
|
8758
|
-
assets: assets.flipIdPrompt,
|
|
8759
|
-
classNames: classNames.flipIdPrompt
|
|
8760
|
-
}))))), /*#__PURE__*/React__namespace.default.createElement(Spacer, {
|
|
8387
|
+
"$width": imageWidth,
|
|
8388
|
+
"$height": imageHeight,
|
|
8389
|
+
"$padding": imagePadding,
|
|
8390
|
+
"$visible": imageVisible
|
|
8391
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(Spacer, {
|
|
8761
8392
|
"$maskColor": maskColor,
|
|
8762
8393
|
"$minWidth": padding,
|
|
8763
|
-
className: regionClsx(classNames, 'Right')
|
|
8394
|
+
className: regionClsx$1(classNames, 'Right')
|
|
8764
8395
|
})), /*#__PURE__*/React__namespace.default.createElement(GuideRegion, {
|
|
8765
8396
|
"$maskColor": maskColor,
|
|
8766
8397
|
"$minHeight": padding,
|
|
8767
|
-
className: regionClsx(classNames, 'Bottom')
|
|
8398
|
+
className: regionClsx$1(classNames, 'Bottom')
|
|
8768
8399
|
}, instruction !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuideText, {
|
|
8769
8400
|
style: {
|
|
8770
8401
|
opacity: 0
|
|
8771
8402
|
}
|
|
8772
8403
|
}, instruction)))));
|
|
8773
8404
|
};
|
|
8774
|
-
var regionClsx = function regionClsx(classNames, which) {
|
|
8405
|
+
var regionClsx$1 = function regionClsx(classNames, which) {
|
|
8775
8406
|
return [classNames.dimmingRegion, classNames["dimmingRegion".concat(which)]].filter(function (v) {
|
|
8776
8407
|
return v;
|
|
8777
8408
|
}).join(' ');
|
|
8778
8409
|
};
|
|
8779
|
-
var
|
|
8780
|
-
|
|
8781
|
-
var
|
|
8782
|
-
|
|
8783
|
-
var _a, _b, _c, _d, _e;
|
|
8784
|
-
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)';
|
|
8785
|
-
}, function (props) {
|
|
8786
|
-
var _a, _b, _c, _d;
|
|
8787
|
-
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.guideOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'white';
|
|
8788
|
-
}, function (props) {
|
|
8789
|
-
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8790
|
-
}, function (props) {
|
|
8791
|
-
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
8792
|
-
});
|
|
8793
|
-
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"])));
|
|
8794
|
-
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) {
|
|
8795
|
-
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8796
|
-
}, function (props) {
|
|
8797
|
-
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8798
|
-
});
|
|
8799
|
-
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"], ["\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"])), function (props) {
|
|
8800
|
-
var _a, _b;
|
|
8801
|
-
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
8410
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$g, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$1, templateObject_9$1;
|
|
8411
|
+
|
|
8412
|
+
var FlippingImage = styled__default.default(GuideImage)(templateObject_1$q || (templateObject_1$q = __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) {
|
|
8413
|
+
return props.$transitionTime;
|
|
8802
8414
|
}, function (props) {
|
|
8803
|
-
return props.$
|
|
8415
|
+
return props.$transforms;
|
|
8804
8416
|
});
|
|
8805
|
-
var
|
|
8806
|
-
var
|
|
8807
|
-
var
|
|
8808
|
-
|
|
8809
|
-
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
8810
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
8811
|
-
var aspectRatio = _a.aspectRatio,
|
|
8812
|
-
maskColor = _a.maskColor,
|
|
8813
|
-
_p = _a.borderRadius,
|
|
8814
|
-
borderRadius = _p === void 0 ? 33 : _p,
|
|
8815
|
-
borderColor = _a.borderColor,
|
|
8417
|
+
var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
8418
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
8419
|
+
var userSuppliedPadding = _a.padding,
|
|
8420
|
+
userSuppliedImagePadding = _a.imagePadding,
|
|
8816
8421
|
borderWidth = _a.borderWidth,
|
|
8817
|
-
|
|
8818
|
-
|
|
8819
|
-
_q = _a.
|
|
8820
|
-
|
|
8821
|
-
_r = _a.
|
|
8822
|
-
|
|
8823
|
-
_s = _a.
|
|
8824
|
-
|
|
8825
|
-
|
|
8826
|
-
|
|
8827
|
-
|
|
8828
|
-
|
|
8829
|
-
|
|
8830
|
-
|
|
8831
|
-
|
|
8832
|
-
_w = _a.assets,
|
|
8833
|
-
assets = _w === void 0 ? {} : _w,
|
|
8834
|
-
_x = _a.classNames,
|
|
8835
|
-
classNames = _x === void 0 ? {} : _x;
|
|
8836
|
-
var _y = useIdCaptureState(),
|
|
8837
|
-
_z = _y[0],
|
|
8838
|
-
redrawing = _z.redrawing,
|
|
8839
|
-
guideImageWidth = _z.guideImageWidth,
|
|
8840
|
-
guideImageHeight = _z.guideImageHeight,
|
|
8841
|
-
dispatch = _y[1];
|
|
8842
|
-
var canvasRef = React.useRef(null);
|
|
8843
|
-
var _0 = useResizeObserver__default.default(),
|
|
8844
|
-
wrapperRef = _0.ref,
|
|
8845
|
-
_1 = _0.width,
|
|
8846
|
-
wrapperWidth = _1 === void 0 ? 1 : _1,
|
|
8847
|
-
_2 = _0.height,
|
|
8848
|
-
wrapperHeight = _2 === void 0 ? 1 : _2;
|
|
8422
|
+
borderColor = _a.borderColor,
|
|
8423
|
+
maskColor = _a.maskColor,
|
|
8424
|
+
_q = _a.assets,
|
|
8425
|
+
assets = _q === void 0 ? {} : _q,
|
|
8426
|
+
_r = _a.classNames,
|
|
8427
|
+
classNames = _r === void 0 ? {} : _r,
|
|
8428
|
+
_s = _a.verbiage,
|
|
8429
|
+
verbiage = _s === void 0 ? {} : _s;
|
|
8430
|
+
var _t = useResizeObserver__default.default(),
|
|
8431
|
+
ref = _t.ref,
|
|
8432
|
+
_u = _t.width,
|
|
8433
|
+
width = _u === void 0 ? 1 : _u,
|
|
8434
|
+
_v = _t.height,
|
|
8435
|
+
height = _v === void 0 ? 1 : _v;
|
|
8436
|
+
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
8849
8437
|
var theme = styled.useTheme();
|
|
8850
|
-
|
|
8851
|
-
|
|
8852
|
-
|
|
8853
|
-
|
|
8854
|
-
|
|
8855
|
-
|
|
8856
|
-
|
|
8857
|
-
|
|
8858
|
-
|
|
8438
|
+
assets.frontPortraitGuidesImageUrl || (assets.frontPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg"));
|
|
8439
|
+
assets.frontLandscapeGuidesImageUrl || (assets.frontLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
8440
|
+
assets.backPortraitGuidesImageUrl || (assets.backPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-2.svg"));
|
|
8441
|
+
assets.backLandscapeGuidesImageUrl || (assets.backLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
8442
|
+
var instruction = useVerbiage(verbiage.instructionText, 'Please flip your ID card...');
|
|
8443
|
+
var padding = (userSuppliedPadding !== null && userSuppliedPadding !== void 0 ? userSuppliedPadding : isMobile()) ? (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.mobilePadding) !== null && _d !== void 0 ? _d : 0 : (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.desktopPadding) !== null && _g !== void 0 ? _g : 50;
|
|
8444
|
+
if (borderWidth === undefined) borderWidth = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.borderWidth) !== null && _k !== void 0 ? _k : 4;
|
|
8445
|
+
var isMirrored = !((_l = cameraRef.current) === null || _l === void 0 ? void 0 : _l.isRearFacing);
|
|
8446
|
+
var _w = React.useContext(GuideOrientationContext),
|
|
8447
|
+
orientation = _w.orientation,
|
|
8448
|
+
wrapperRef = _w.wrapperRef,
|
|
8449
|
+
wrapperWidth = _w.wrapperWidth,
|
|
8450
|
+
wrapperHeight = _w.wrapperHeight,
|
|
8451
|
+
imageAspectRatio = _w.imageAspectRatio,
|
|
8452
|
+
wrapperAspectRatio = _w.wrapperAspectRatio,
|
|
8453
|
+
onImageLoaded = _w.onImageLoaded,
|
|
8454
|
+
setDimensions = _w.setDimensions;
|
|
8455
|
+
React.useEffect(function () {
|
|
8456
|
+
setDimensions({
|
|
8457
|
+
width: width,
|
|
8458
|
+
height: height
|
|
8459
|
+
});
|
|
8460
|
+
}, [height, setDimensions, width]);
|
|
8461
|
+
var paddingAndBorderPx = padding * 2 + borderWidth * 2;
|
|
8462
|
+
var imagePadding = (_p = userSuppliedImagePadding !== null && userSuppliedImagePadding !== void 0 ? userSuppliedImagePadding : (_o = (_m = theme.idCapture) === null || _m === void 0 ? void 0 : _m.guideBox) === null || _o === void 0 ? void 0 : _o.imagePadding) !== null && _p !== void 0 ? _p : 0;
|
|
8463
|
+
var imageWidth = undefined,
|
|
8464
|
+
imageHeight = undefined;
|
|
8465
|
+
if (imageAspectRatio >= wrapperAspectRatio) {
|
|
8466
|
+
imageWidth = wrapperWidth - paddingAndBorderPx;
|
|
8467
|
+
} else {
|
|
8468
|
+
imageHeight = wrapperHeight - paddingAndBorderPx;
|
|
8859
8469
|
}
|
|
8470
|
+
var _x = React.useState(1),
|
|
8471
|
+
transitionTime = _x[0],
|
|
8472
|
+
setTransitionTime = _x[1];
|
|
8473
|
+
var _y = React.useState(0),
|
|
8474
|
+
rotationAngle = _y[0],
|
|
8475
|
+
setRotationAngle = _y[1];
|
|
8476
|
+
var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
|
|
8477
|
+
if (isMirrored) frontTransforms.push('scaleX(-1)');
|
|
8478
|
+
var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
|
|
8479
|
+
if (isMirrored) backTransforms.push('scaleX(-1)');
|
|
8860
8480
|
React.useEffect(function () {
|
|
8861
|
-
var
|
|
8862
|
-
|
|
8863
|
-
|
|
8864
|
-
|
|
8865
|
-
|
|
8866
|
-
|
|
8867
|
-
|
|
8868
|
-
|
|
8869
|
-
|
|
8870
|
-
|
|
8871
|
-
|
|
8872
|
-
|
|
8873
|
-
}
|
|
8874
|
-
|
|
8875
|
-
|
|
8876
|
-
|
|
8877
|
-
|
|
8878
|
-
|
|
8879
|
-
|
|
8880
|
-
|
|
8881
|
-
|
|
8882
|
-
|
|
8883
|
-
|
|
8884
|
-
|
|
8885
|
-
|
|
8886
|
-
|
|
8481
|
+
var doFlip = function doFlip() {
|
|
8482
|
+
setTransitionTime(1);
|
|
8483
|
+
setRotationAngle(180);
|
|
8484
|
+
setTimeout(function () {
|
|
8485
|
+
setTransitionTime(0);
|
|
8486
|
+
setRotationAngle(0);
|
|
8487
|
+
}, 1500);
|
|
8488
|
+
};
|
|
8489
|
+
setTimeout(doFlip, 250);
|
|
8490
|
+
var interval = setInterval(doFlip, 2500);
|
|
8491
|
+
return function () {
|
|
8492
|
+
clearInterval(interval);
|
|
8493
|
+
};
|
|
8494
|
+
}, []);
|
|
8495
|
+
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
8496
|
+
ref: ref,
|
|
8497
|
+
className: classNames.container
|
|
8498
|
+
}, /*#__PURE__*/React__namespace.default.createElement(GuidesContainer, {
|
|
8499
|
+
ref: wrapperRef,
|
|
8500
|
+
className: classNames.inner
|
|
8501
|
+
}, /*#__PURE__*/React__namespace.default.createElement(GuideRegion, {
|
|
8502
|
+
"$minHeight": padding,
|
|
8503
|
+
"$maskColor": maskColor,
|
|
8504
|
+
className: regionClsx(classNames, 'Top')
|
|
8505
|
+
}, instruction !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuideText, {
|
|
8506
|
+
className: classNames.guideText
|
|
8507
|
+
}, instruction))), /*#__PURE__*/React__namespace.default.createElement(GuideCenterRow, {
|
|
8508
|
+
className: classNames.centerRow
|
|
8509
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Spacer, {
|
|
8510
|
+
"$minWidth": padding,
|
|
8511
|
+
"$maskColor": maskColor,
|
|
8512
|
+
className: regionClsx(classNames, 'Left')
|
|
8513
|
+
}), /*#__PURE__*/React__namespace.default.createElement(GuideCenterRegion, null, /*#__PURE__*/React__namespace.default.createElement(GuideCenterBorder, {
|
|
8514
|
+
"$borderWidth": borderWidth,
|
|
8515
|
+
"$borderColor": borderColor,
|
|
8516
|
+
className: classNames.centerRegion
|
|
8517
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FlippingImage, {
|
|
8518
|
+
src: orientation === 'portrait' ? assets.frontPortraitGuidesImageUrl : assets.frontLandscapeGuidesImageUrl,
|
|
8519
|
+
alt: "",
|
|
8520
|
+
className: classNames.image,
|
|
8521
|
+
"$width": imageWidth,
|
|
8522
|
+
"$height": imageHeight,
|
|
8523
|
+
"$padding": imagePadding,
|
|
8524
|
+
"$transitionTime": transitionTime,
|
|
8525
|
+
"$transforms": frontTransforms.join(' '),
|
|
8526
|
+
"$visible": true,
|
|
8527
|
+
onLoad: onImageLoaded
|
|
8528
|
+
}), /*#__PURE__*/React__namespace.default.createElement(FlippingImage, {
|
|
8529
|
+
src: orientation === 'portrait' ? assets.backPortraitGuidesImageUrl : assets.backLandscapeGuidesImageUrl,
|
|
8530
|
+
alt: "",
|
|
8531
|
+
className: classNames.image,
|
|
8532
|
+
"$width": imageWidth,
|
|
8533
|
+
"$height": imageHeight,
|
|
8534
|
+
"$padding": imagePadding,
|
|
8535
|
+
"$transitionTime": transitionTime,
|
|
8536
|
+
"$transforms": backTransforms.join(' '),
|
|
8537
|
+
"$visible": true
|
|
8538
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(Spacer, {
|
|
8539
|
+
"$minWidth": padding,
|
|
8540
|
+
"$maskColor": maskColor,
|
|
8541
|
+
className: regionClsx(classNames, 'Right')
|
|
8542
|
+
})), /*#__PURE__*/React__namespace.default.createElement(GuideRegion, {
|
|
8543
|
+
"$minHeight": padding,
|
|
8544
|
+
"$maskColor": maskColor,
|
|
8545
|
+
className: regionClsx(classNames, 'Bottom')
|
|
8546
|
+
}, instruction !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuideText, {
|
|
8547
|
+
style: {
|
|
8548
|
+
opacity: 0
|
|
8549
|
+
}
|
|
8550
|
+
}, instruction)))));
|
|
8551
|
+
};
|
|
8552
|
+
var regionClsx = function regionClsx(classNames, which) {
|
|
8553
|
+
return [classNames.dimmingRegion, classNames["dimmingRegion".concat(which)]].filter(function (v) {
|
|
8554
|
+
return v;
|
|
8555
|
+
}).join(' ');
|
|
8556
|
+
};
|
|
8557
|
+
var templateObject_1$q;
|
|
8558
|
+
|
|
8559
|
+
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
8560
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
8561
|
+
var aspectRatio = _a.aspectRatio,
|
|
8562
|
+
maskColor = _a.maskColor,
|
|
8563
|
+
_p = _a.borderRadius,
|
|
8564
|
+
borderRadius = _p === void 0 ? 33 : _p,
|
|
8565
|
+
borderColor = _a.borderColor,
|
|
8566
|
+
borderWidth = _a.borderWidth,
|
|
8567
|
+
padding = _a.padding,
|
|
8568
|
+
imageUrl = _a.imageUrl,
|
|
8569
|
+
imageVisible = _a.imageVisible,
|
|
8570
|
+
frontImageUrl = _a.frontImageUrl,
|
|
8571
|
+
backImageUrl = _a.backImageUrl,
|
|
8572
|
+
isMirrored = _a.isMirrored,
|
|
8573
|
+
instruction = _a.instruction,
|
|
8574
|
+
_q = _a.requestingFlip,
|
|
8575
|
+
requestingFlip = _q === void 0 ? false : _q,
|
|
8576
|
+
_r = _a.classNames,
|
|
8577
|
+
classNames = _r === void 0 ? {} : _r;
|
|
8578
|
+
var _s = useIdCaptureState(),
|
|
8579
|
+
_t = _s[0],
|
|
8580
|
+
redrawing = _t.redrawing,
|
|
8581
|
+
guideImageWidth = _t.guideImageWidth,
|
|
8582
|
+
guideImageHeight = _t.guideImageHeight,
|
|
8583
|
+
dispatch = _s[1];
|
|
8584
|
+
var canvasRef = React.useRef(null);
|
|
8585
|
+
var _u = useResizeObserver__default.default(),
|
|
8586
|
+
wrapperRef = _u.ref,
|
|
8587
|
+
_v = _u.width,
|
|
8588
|
+
wrapperWidth = _v === void 0 ? 1 : _v,
|
|
8589
|
+
_w = _u.height,
|
|
8590
|
+
wrapperHeight = _w === void 0 ? 1 : _w;
|
|
8591
|
+
var theme = styled.useTheme();
|
|
8592
|
+
if (borderWidth === undefined) borderWidth = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
|
|
8593
|
+
if (padding === undefined) {
|
|
8594
|
+
padding = isMobile() ? (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.mobilePadding) !== null && _g !== void 0 ? _g : 0 : (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.desktopPadding) !== null && _k !== void 0 ? _k : 0;
|
|
8595
|
+
}
|
|
8596
|
+
if (aspectRatio === undefined && guideImageWidth !== 0) {
|
|
8597
|
+
aspectRatio = guideImageWidth / guideImageHeight;
|
|
8598
|
+
}
|
|
8599
|
+
if (maskColor === undefined) {
|
|
8600
|
+
maskColor = (_o = (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideOverlay) === null || _m === void 0 ? void 0 : _m.backgroundColor) !== null && _o !== void 0 ? _o : '#708090';
|
|
8601
|
+
}
|
|
8602
|
+
React.useEffect(function () {
|
|
8603
|
+
var canvas = canvasRef.current;
|
|
8604
|
+
if (!canvas) return;
|
|
8605
|
+
if (redrawing) {
|
|
8606
|
+
resetCanvasDimensions(canvas);
|
|
8607
|
+
setTimeout(function () {
|
|
8608
|
+
dispatch({
|
|
8609
|
+
type: 'redrawInProgress'
|
|
8610
|
+
});
|
|
8611
|
+
}, 10);
|
|
8612
|
+
return;
|
|
8613
|
+
}
|
|
8614
|
+
var boundingWidth = wrapperWidth - padding * 2 - borderWidth * 2;
|
|
8615
|
+
var boundingHeight = wrapperHeight - padding * 2 - borderWidth * 2;
|
|
8616
|
+
var _a = [padding + borderWidth, padding + borderWidth, boundingWidth, boundingHeight],
|
|
8617
|
+
rectX = _a[0],
|
|
8618
|
+
rectY = _a[1],
|
|
8619
|
+
rectWidth = _a[2],
|
|
8620
|
+
rectHeight = _a[3];
|
|
8621
|
+
if (aspectRatio !== undefined) {
|
|
8622
|
+
var scaledWidth = boundingHeight * aspectRatio;
|
|
8623
|
+
var scaledHeight = boundingWidth / aspectRatio;
|
|
8624
|
+
if (scaledWidth < boundingWidth) {
|
|
8625
|
+
rectWidth = scaledWidth;
|
|
8626
|
+
rectX += (boundingWidth - rectWidth) / 2;
|
|
8887
8627
|
} else {
|
|
8888
8628
|
rectHeight = scaledHeight;
|
|
8889
8629
|
rectY += (boundingHeight - rectHeight) / 2;
|
|
@@ -8923,7 +8663,6 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
8923
8663
|
guideRectOffsetTop: rectOffsetTop
|
|
8924
8664
|
}
|
|
8925
8665
|
});
|
|
8926
|
-
return function () {};
|
|
8927
8666
|
}, [aspectRatio, borderColor, borderRadius, borderWidth, dispatch, maskColor, padding, redrawing, wrapperHeight, wrapperWidth]);
|
|
8928
8667
|
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(CanvasWrapper$1, {
|
|
8929
8668
|
ref: wrapperRef,
|
|
@@ -8932,49 +8671,51 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
8932
8671
|
}, /*#__PURE__*/React__namespace.default.createElement(Canvas$1, {
|
|
8933
8672
|
ref: canvasRef,
|
|
8934
8673
|
className: classNames.canvas
|
|
8935
|
-
})), /*#__PURE__*/React__namespace.default.createElement(
|
|
8674
|
+
})), requestingFlip ? ( /*#__PURE__*/React__namespace.default.createElement(FlipIdPrompt, {
|
|
8675
|
+
maskColor: "transparent",
|
|
8676
|
+
borderWidth: 0,
|
|
8677
|
+
// instruction={instruction}
|
|
8678
|
+
classNames: classNames,
|
|
8679
|
+
assets: {
|
|
8680
|
+
frontLandscapeGuidesImageUrl: frontImageUrl,
|
|
8681
|
+
backLandscapeGuidesImageUrl: backImageUrl
|
|
8682
|
+
}
|
|
8683
|
+
})) : ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureGuideOverlay, {
|
|
8684
|
+
landscapeGuidesImageUrl: imageUrl,
|
|
8936
8685
|
maskColor: "transparent",
|
|
8937
8686
|
borderWidth: 0,
|
|
8938
8687
|
isMirrored: isMirrored,
|
|
8939
|
-
isBackToFront: isBackToFront,
|
|
8940
|
-
portraitGuidesOnMobile: portraitGuidesOnMobile,
|
|
8941
8688
|
instruction: instruction,
|
|
8942
|
-
assets: assets,
|
|
8943
8689
|
classNames: classNames,
|
|
8944
|
-
imageVisible: imageVisible
|
|
8945
|
-
|
|
8946
|
-
status: status,
|
|
8947
|
-
progress: progress
|
|
8948
|
-
}));
|
|
8690
|
+
imageVisible: imageVisible
|
|
8691
|
+
})));
|
|
8949
8692
|
};
|
|
8950
8693
|
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
8951
8694
|
return props.$maskColor;
|
|
8952
8695
|
});
|
|
8953
|
-
var Canvas$1 = styled__default.default.canvas(templateObject_2$
|
|
8954
|
-
var templateObject_1$p, templateObject_2$
|
|
8696
|
+
var Canvas$1 = styled__default.default.canvas(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
8697
|
+
var templateObject_1$p, templateObject_2$j;
|
|
8955
8698
|
|
|
8956
8699
|
function IdCaptureGuides(_a) {
|
|
8957
8700
|
var _b, _c;
|
|
8958
8701
|
var _d = _a.guideType,
|
|
8959
8702
|
guideType = _d === void 0 ? 'fit' : _d,
|
|
8960
|
-
_e = _a.
|
|
8961
|
-
|
|
8962
|
-
_f = _a.
|
|
8963
|
-
|
|
8964
|
-
_g = _a.
|
|
8965
|
-
|
|
8966
|
-
_h = _a.
|
|
8967
|
-
|
|
8968
|
-
_j = _a.
|
|
8969
|
-
|
|
8703
|
+
_e = _a.portraitGuidesOnMobile,
|
|
8704
|
+
portraitGuidesOnMobile = _e === void 0 ? true : _e,
|
|
8705
|
+
_f = _a.requestingFlip,
|
|
8706
|
+
requestingFlip = _f === void 0 ? false : _f,
|
|
8707
|
+
_g = _a.isBackToFront,
|
|
8708
|
+
isBackToFront = _g === void 0 ? false : _g,
|
|
8709
|
+
_h = _a.flipIdPromptAssets,
|
|
8710
|
+
flipIdPromptAssets = _h === void 0 ? {} : _h,
|
|
8711
|
+
_j = _a.classNames,
|
|
8712
|
+
classNames = _j === void 0 ? {} : _j,
|
|
8970
8713
|
_k = _a.assets,
|
|
8971
8714
|
assets = _k === void 0 ? {} : _k,
|
|
8972
|
-
_l = _a.
|
|
8973
|
-
|
|
8974
|
-
_m = _a.
|
|
8975
|
-
|
|
8976
|
-
_o = _a.verbiage,
|
|
8977
|
-
rawVerbiage = _o === void 0 ? {} : _o;
|
|
8715
|
+
_l = _a.colors,
|
|
8716
|
+
colors = _l === void 0 ? {} : _l,
|
|
8717
|
+
_m = _a.verbiage,
|
|
8718
|
+
rawVerbiage = _m === void 0 ? {} : _m;
|
|
8978
8719
|
var state = useIdCaptureState()[0];
|
|
8979
8720
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
8980
8721
|
var verbiage = useTranslations(rawVerbiage, {
|
|
@@ -8982,29 +8723,34 @@ function IdCaptureGuides(_a) {
|
|
|
8982
8723
|
capturingText: 'Capturing...',
|
|
8983
8724
|
captureFailedText: 'Capture failed!'
|
|
8984
8725
|
});
|
|
8726
|
+
var isMobile = window.innerWidth < window.innerHeight;
|
|
8727
|
+
var frontImageUrl = portraitGuidesOnMobile && isMobile ? flipIdPromptAssets === null || flipIdPromptAssets === void 0 ? void 0 : flipIdPromptAssets.frontPortraitGuidesImageUrl : flipIdPromptAssets === null || flipIdPromptAssets === void 0 ? void 0 : flipIdPromptAssets.frontLandscapeGuidesImageUrl;
|
|
8728
|
+
var backImageUrl = portraitGuidesOnMobile && isMobile ? flipIdPromptAssets === null || flipIdPromptAssets === void 0 ? void 0 : flipIdPromptAssets.backPortraitGuidesImageUrl : flipIdPromptAssets === null || flipIdPromptAssets === void 0 ? void 0 : flipIdPromptAssets.backLandscapeGuidesImageUrl;
|
|
8729
|
+
if (isBackToFront) {
|
|
8730
|
+
var temp = frontImageUrl;
|
|
8731
|
+
frontImageUrl = backImageUrl;
|
|
8732
|
+
backImageUrl = temp;
|
|
8733
|
+
}
|
|
8985
8734
|
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, guideType === 'overlay' && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureGuideOverlay, {
|
|
8986
|
-
assets: assets,
|
|
8987
8735
|
classNames: classNames,
|
|
8988
8736
|
width: state.pageWidth,
|
|
8989
8737
|
height: state.pageHeight,
|
|
8990
|
-
status: status,
|
|
8991
|
-
progress: progress,
|
|
8992
8738
|
instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
|
|
8739
|
+
portraitGuidesImageUrl: assets.portraitGuidesImageUrl,
|
|
8740
|
+
landscapeGuidesImageUrl: assets.landscapeGuidesImageUrl,
|
|
8993
8741
|
isMirrored: !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing),
|
|
8994
8742
|
borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor,
|
|
8995
|
-
imageVisible:
|
|
8743
|
+
imageVisible: requestingFlip || !state.idCardFrontDetectionThresholdMet || !state.documentInBounds || state.documentTooClose
|
|
8996
8744
|
})), guideType === 'fit' && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureFitGuide, {
|
|
8997
|
-
assets: assets,
|
|
8998
8745
|
classNames: classNames,
|
|
8999
|
-
|
|
9000
|
-
status: status,
|
|
9001
|
-
progress: progress,
|
|
8746
|
+
requestingFlip: requestingFlip,
|
|
9002
8747
|
instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
|
|
8748
|
+
imageUrl: portraitGuidesOnMobile && isMobile ? assets === null || assets === void 0 ? void 0 : assets.portraitGuidesImageUrl : assets === null || assets === void 0 ? void 0 : assets.landscapeGuidesImageUrl,
|
|
8749
|
+
frontImageUrl: frontImageUrl,
|
|
8750
|
+
backImageUrl: backImageUrl,
|
|
9003
8751
|
isMirrored: !((_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.isRearFacing),
|
|
9004
|
-
isBackToFront: isBackToFront,
|
|
9005
|
-
portraitGuidesOnMobile: portraitGuidesOnMobile,
|
|
9006
8752
|
borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor,
|
|
9007
|
-
imageVisible:
|
|
8753
|
+
imageVisible: requestingFlip || !state.detectionThresholdMet || !state.documentInBounds || state.documentTooClose || state.backDetectedFirst || state.flipRequired
|
|
9008
8754
|
})));
|
|
9009
8755
|
}
|
|
9010
8756
|
|
|
@@ -9094,10 +8840,10 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
9094
8840
|
})));
|
|
9095
8841
|
};
|
|
9096
8842
|
var StyledSpinner = styled__default.default(Spinner)(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
9097
|
-
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$
|
|
9098
|
-
var ImagePreviewText = styled__default.default.div(templateObject_3$
|
|
9099
|
-
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$
|
|
9100
|
-
var templateObject_1$o, templateObject_2$
|
|
8843
|
+
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
8844
|
+
var ImagePreviewText = styled__default.default.div(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
8845
|
+
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
8846
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$f, templateObject_4$a;
|
|
9101
8847
|
|
|
9102
8848
|
var documentCaptureInitialState = {
|
|
9103
8849
|
documents: [],
|
|
@@ -9456,8 +9202,8 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
9456
9202
|
var CanvasWrapper = styled__default.default.div(templateObject_1$n || (templateObject_1$n = __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) {
|
|
9457
9203
|
return props.$maskColor;
|
|
9458
9204
|
});
|
|
9459
|
-
var Canvas = styled__default.default.canvas(templateObject_2$
|
|
9460
|
-
var templateObject_1$n, templateObject_2$
|
|
9205
|
+
var Canvas = styled__default.default.canvas(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9206
|
+
var templateObject_1$n, templateObject_2$h;
|
|
9461
9207
|
|
|
9462
9208
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
9463
9209
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -9561,7 +9307,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9561
9307
|
}, /*#__PURE__*/React__namespace.default.createElement(HeadingRow, {
|
|
9562
9308
|
"$maskColor": maskColor,
|
|
9563
9309
|
className: classNames.headingRow
|
|
9564
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9310
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$8, {
|
|
9565
9311
|
className: classNames.heading
|
|
9566
9312
|
}, verbiage.headingText)), /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureGuideOverlay, {
|
|
9567
9313
|
aspectRatio: aspectRatio,
|
|
@@ -9608,20 +9354,20 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9608
9354
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
9609
9355
|
};
|
|
9610
9356
|
var CaptureContainer = styled__default.default.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
9611
|
-
var HeadingRow = styled__default.default.div(templateObject_2$
|
|
9357
|
+
var HeadingRow = styled__default.default.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
|
|
9612
9358
|
return props.$maskColor;
|
|
9613
9359
|
});
|
|
9614
|
-
var Heading$
|
|
9615
|
-
var FooterRow = styled__default.default.div(templateObject_4$
|
|
9360
|
+
var Heading$8 = styled__default.default.h1(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
|
|
9361
|
+
var FooterRow = styled__default.default.div(templateObject_4$9 || (templateObject_4$9 = __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) {
|
|
9616
9362
|
return props.$maskColor;
|
|
9617
9363
|
});
|
|
9618
|
-
var Instructions = styled__default.default.div(templateObject_5$
|
|
9364
|
+
var Instructions = styled__default.default.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
|
|
9619
9365
|
var _a, _b, _c;
|
|
9620
9366
|
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';
|
|
9621
9367
|
});
|
|
9622
|
-
var StyledButtonsRow$9 = styled__default.default(ButtonsRow
|
|
9623
|
-
var PreviewImage = styled__default.default.img(templateObject_7$
|
|
9624
|
-
var templateObject_1$m, templateObject_2$
|
|
9368
|
+
var StyledButtonsRow$9 = styled__default.default(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
|
|
9369
|
+
var PreviewImage = styled__default.default.img(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
|
|
9370
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
9625
9371
|
|
|
9626
9372
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
9627
9373
|
var onSuccess = _a.onSuccess,
|
|
@@ -9841,7 +9587,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9841
9587
|
className: classNames.container
|
|
9842
9588
|
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$2, {
|
|
9843
9589
|
className: classNames.inner
|
|
9844
|
-
}, !silentFallback && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
9590
|
+
}, !silentFallback && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$7, {
|
|
9845
9591
|
className: classNames.heading
|
|
9846
9592
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$3, {
|
|
9847
9593
|
className: classNames.description
|
|
@@ -9891,83 +9637,83 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9891
9637
|
}, verbiage.doneBtnText))))));
|
|
9892
9638
|
};
|
|
9893
9639
|
var StyledOverlayInner$2 = styled__default.default(OverlayInner$2)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
9894
|
-
var Heading$
|
|
9895
|
-
var Description$3 = styled__default.default.p(templateObject_3$
|
|
9896
|
-
var Instruction = styled__default.default.p(templateObject_4$
|
|
9897
|
-
var ImageCol = styled__default.default.div(templateObject_5$
|
|
9898
|
-
var StyledButtonsRow$8 = styled__default.default(ButtonsRow
|
|
9899
|
-
var templateObject_1$l, templateObject_2$
|
|
9640
|
+
var Heading$7 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9641
|
+
var Description$3 = styled__default.default.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9642
|
+
var Instruction = styled__default.default.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
9643
|
+
var ImageCol = styled__default.default.div(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
9644
|
+
var StyledButtonsRow$8 = styled__default.default(ButtonsRow)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
9645
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$3;
|
|
9900
9646
|
|
|
9901
9647
|
var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
9902
9648
|
var _b, _c, _d, _e, _f, _g;
|
|
9903
|
-
var _h, _j, _k, _l, _m, _o, _p, _q, _r, _s
|
|
9649
|
+
var _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
9904
9650
|
var onSuccess = _a.onSuccess,
|
|
9905
9651
|
onExitCapture = _a.onExitCapture,
|
|
9906
9652
|
onUserCancel = _a.onUserCancel,
|
|
9907
|
-
|
|
9908
|
-
loadingOverlayMode =
|
|
9653
|
+
_t = _a.loadingOverlayMode,
|
|
9654
|
+
loadingOverlayMode = _t === void 0 ? 'default' : _t,
|
|
9909
9655
|
precapturedDocuments = _a.precapturedDocuments,
|
|
9910
|
-
|
|
9911
|
-
captureRequirement =
|
|
9912
|
-
|
|
9913
|
-
separateIdCardCaptureSequence =
|
|
9914
|
-
|
|
9915
|
-
thresholds =
|
|
9916
|
-
|
|
9917
|
-
skipSuccessScreen =
|
|
9656
|
+
_u = _a.captureRequirement,
|
|
9657
|
+
captureRequirement = _u === void 0 ? 'idCardOrPassport' : _u,
|
|
9658
|
+
_v = _a.separateIdCardCaptureSequence,
|
|
9659
|
+
separateIdCardCaptureSequence = _v === void 0 ? false : _v,
|
|
9660
|
+
_w = _a.thresholds,
|
|
9661
|
+
thresholds = _w === void 0 ? defaultIdCaptureThresholds : _w,
|
|
9662
|
+
_x = _a.skipSuccessScreen,
|
|
9663
|
+
skipSuccessScreen = _x === void 0 ? false : _x,
|
|
9918
9664
|
instructions = _a.instructions,
|
|
9919
|
-
|
|
9920
|
-
releaseCameraAccessOnExit =
|
|
9921
|
-
|
|
9922
|
-
guideType =
|
|
9923
|
-
|
|
9924
|
-
portraitGuidesOnMobile =
|
|
9925
|
-
|
|
9926
|
-
rotateLoadingOverlayImageWhenPortrait =
|
|
9927
|
-
|
|
9928
|
-
silentFallback =
|
|
9929
|
-
|
|
9930
|
-
forceFallbackMode =
|
|
9931
|
-
|
|
9932
|
-
allowIdCardBackToFrontCapture =
|
|
9933
|
-
|
|
9934
|
-
enableOverrideWrongDocumentTypeDialog =
|
|
9935
|
-
|
|
9936
|
-
allowOverrideWrongDocumentTypeAfterMs =
|
|
9937
|
-
|
|
9938
|
-
assets =
|
|
9939
|
-
|
|
9940
|
-
classNames =
|
|
9941
|
-
|
|
9942
|
-
colors =
|
|
9943
|
-
|
|
9944
|
-
verbiage =
|
|
9945
|
-
|
|
9946
|
-
debugMode =
|
|
9947
|
-
var
|
|
9948
|
-
state =
|
|
9949
|
-
dispatch =
|
|
9950
|
-
var
|
|
9951
|
-
cameraAccessDenied =
|
|
9952
|
-
requestCameraAccess =
|
|
9953
|
-
releaseCameraAccess =
|
|
9954
|
-
var
|
|
9955
|
-
overlayDismissed =
|
|
9956
|
-
setOverlayDismissed =
|
|
9957
|
-
var
|
|
9958
|
-
submissionStatus =
|
|
9959
|
-
setIdFrontImage =
|
|
9960
|
-
setIdBackImage =
|
|
9961
|
-
setPassportImage =
|
|
9962
|
-
logIdFrontCaptureAttempt =
|
|
9963
|
-
logIdBackCaptureAttempt =
|
|
9964
|
-
var
|
|
9965
|
-
start =
|
|
9966
|
-
stop =
|
|
9967
|
-
onPredictionMade =
|
|
9968
|
-
setRequiredDocumentType =
|
|
9969
|
-
modelError =
|
|
9970
|
-
resetBestFrame =
|
|
9665
|
+
_y = _a.releaseCameraAccessOnExit,
|
|
9666
|
+
releaseCameraAccessOnExit = _y === void 0 ? true : _y,
|
|
9667
|
+
_z = _a.guideType,
|
|
9668
|
+
guideType = _z === void 0 ? 'fit' : _z,
|
|
9669
|
+
_0 = _a.portraitGuidesOnMobile,
|
|
9670
|
+
portraitGuidesOnMobile = _0 === void 0 ? true : _0,
|
|
9671
|
+
_1 = _a.rotateLoadingOverlayImageWhenPortrait,
|
|
9672
|
+
rotateLoadingOverlayImageWhenPortrait = _1 === void 0 ? true : _1,
|
|
9673
|
+
_2 = _a.silentFallback,
|
|
9674
|
+
silentFallback = _2 === void 0 ? false : _2,
|
|
9675
|
+
_3 = _a.forceFallbackMode,
|
|
9676
|
+
forceFallbackMode = _3 === void 0 ? false : _3,
|
|
9677
|
+
_4 = _a.allowIdCardBackToFrontCapture,
|
|
9678
|
+
allowIdCardBackToFrontCapture = _4 === void 0 ? false : _4,
|
|
9679
|
+
_5 = _a.enableOverrideWrongDocumentTypeDialog,
|
|
9680
|
+
enableOverrideWrongDocumentTypeDialog = _5 === void 0 ? false : _5,
|
|
9681
|
+
_6 = _a.allowOverrideWrongDocumentTypeAfterMs,
|
|
9682
|
+
allowOverrideWrongDocumentTypeAfterMs = _6 === void 0 ? 8000 : _6,
|
|
9683
|
+
_7 = _a.assets,
|
|
9684
|
+
assets = _7 === void 0 ? {} : _7,
|
|
9685
|
+
_8 = _a.classNames,
|
|
9686
|
+
classNames = _8 === void 0 ? {} : _8,
|
|
9687
|
+
_9 = _a.colors,
|
|
9688
|
+
colors = _9 === void 0 ? {} : _9,
|
|
9689
|
+
_10 = _a.verbiage,
|
|
9690
|
+
verbiage = _10 === void 0 ? {} : _10,
|
|
9691
|
+
_11 = _a.debugMode,
|
|
9692
|
+
debugMode = _11 === void 0 ? false : _11;
|
|
9693
|
+
var _12 = useIdCaptureState(),
|
|
9694
|
+
state = _12[0],
|
|
9695
|
+
dispatch = _12[1];
|
|
9696
|
+
var _13 = React.useContext(CameraStateContext),
|
|
9697
|
+
cameraAccessDenied = _13.cameraAccessDenied,
|
|
9698
|
+
requestCameraAccess = _13.requestCameraAccess,
|
|
9699
|
+
releaseCameraAccess = _13.releaseCameraAccess;
|
|
9700
|
+
var _14 = React.useState(false),
|
|
9701
|
+
overlayDismissed = _14[0],
|
|
9702
|
+
setOverlayDismissed = _14[1];
|
|
9703
|
+
var _15 = React.useContext(SubmissionContext),
|
|
9704
|
+
submissionStatus = _15.submissionStatus,
|
|
9705
|
+
setIdFrontImage = _15.setIdFrontImage,
|
|
9706
|
+
setIdBackImage = _15.setIdBackImage,
|
|
9707
|
+
setPassportImage = _15.setPassportImage,
|
|
9708
|
+
logIdFrontCaptureAttempt = _15.logIdFrontCaptureAttempt,
|
|
9709
|
+
logIdBackCaptureAttempt = _15.logIdBackCaptureAttempt;
|
|
9710
|
+
var _16 = React.useContext(IdCaptureModelsContext),
|
|
9711
|
+
start = _16.start,
|
|
9712
|
+
stop = _16.stop,
|
|
9713
|
+
onPredictionMade = _16.onPredictionMade,
|
|
9714
|
+
setRequiredDocumentType = _16.setRequiredDocumentType,
|
|
9715
|
+
modelError = _16.modelError,
|
|
9716
|
+
resetBestFrame = _16.resetBestFrame;
|
|
9971
9717
|
React.useEffect(function () {
|
|
9972
9718
|
dispatch({
|
|
9973
9719
|
type: 'configureWizard',
|
|
@@ -10059,9 +9805,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10059
9805
|
type: 'resetWizard'
|
|
10060
9806
|
});
|
|
10061
9807
|
}, [dispatch]);
|
|
10062
|
-
var
|
|
10063
|
-
attempt =
|
|
10064
|
-
setAttempt =
|
|
9808
|
+
var _17 = React.useState(0),
|
|
9809
|
+
attempt = _17[0],
|
|
9810
|
+
setAttempt = _17[1];
|
|
10065
9811
|
var onExit = React.useCallback(function () {
|
|
10066
9812
|
releaseCameraAccess();
|
|
10067
9813
|
setOverlayDismissed(false);
|
|
@@ -10088,26 +9834,19 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10088
9834
|
}
|
|
10089
9835
|
}, [cameraAccessDenied]);
|
|
10090
9836
|
assets.idCardFront || (assets.idCardFront = {});
|
|
10091
|
-
(_h = assets.idCardFront).portraitGuidesImageUrl || (_h.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-
|
|
10092
|
-
(_j = assets.idCardFront).landscapeGuidesImageUrl || (_j.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-
|
|
9837
|
+
(_h = assets.idCardFront).portraitGuidesImageUrl || (_h.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg"));
|
|
9838
|
+
(_j = assets.idCardFront).landscapeGuidesImageUrl || (_j.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
10093
9839
|
assets.idCardBack || (assets.idCardBack = {});
|
|
10094
|
-
(_k = assets.idCardBack).portraitGuidesImageUrl || (_k.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-
|
|
10095
|
-
(_l = assets.idCardBack).landscapeGuidesImageUrl || (_l.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-
|
|
9840
|
+
(_k = assets.idCardBack).portraitGuidesImageUrl || (_k.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-2.svg"));
|
|
9841
|
+
(_l = assets.idCardBack).landscapeGuidesImageUrl || (_l.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
10096
9842
|
assets.passport || (assets.passport = {});
|
|
10097
9843
|
(_m = assets.passport).portraitGuidesImageUrl || (_m.portraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Portrait-2.svg"));
|
|
10098
9844
|
(_o = assets.passport).landscapeGuidesImageUrl || (_o.landscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-Passport-Front-SVG-Landscape-2.svg"));
|
|
10099
|
-
assets.
|
|
10100
|
-
(_p = assets.
|
|
10101
|
-
(_q = assets.
|
|
10102
|
-
(_r = assets.
|
|
10103
|
-
(_s = assets.
|
|
10104
|
-
(_t = assets.guides).passportPortraitImageUrl || (_t.passportPortraitImageUrl = assets.passport.portraitGuidesImageUrl);
|
|
10105
|
-
(_u = assets.guides).passportLandscapeImageUrl || (_u.passportLandscapeImageUrl = assets.passport.landscapeGuidesImageUrl);
|
|
10106
|
-
(_v = assets.guides).flipIdPrompt || (_v.flipIdPrompt = {});
|
|
10107
|
-
(_w = assets.guides.flipIdPrompt).idCardFrontPortraitImageUrl || (_w.idCardFrontPortraitImageUrl = assets.idCardFront.portraitGuidesImageUrl);
|
|
10108
|
-
(_x = assets.guides.flipIdPrompt).idCardFrontLandscapeImageUrl || (_x.idCardFrontLandscapeImageUrl = assets.idCardFront.landscapeGuidesImageUrl);
|
|
10109
|
-
(_y = assets.guides.flipIdPrompt).idCardBackPortraitImageUrl || (_y.idCardBackPortraitImageUrl = assets.idCardBack.portraitGuidesImageUrl);
|
|
10110
|
-
(_z = assets.guides.flipIdPrompt).idCardBackLandscapeImageUrl || (_z.idCardBackLandscapeImageUrl = assets.idCardBack.landscapeGuidesImageUrl);
|
|
9845
|
+
assets.flipIdPrompt || (assets.flipIdPrompt = {});
|
|
9846
|
+
(_p = assets.flipIdPrompt).frontPortraitGuidesImageUrl || (_p.frontPortraitGuidesImageUrl = assets.idCardFront.portraitGuidesImageUrl);
|
|
9847
|
+
(_q = assets.flipIdPrompt).frontLandscapeGuidesImageUrl || (_q.frontLandscapeGuidesImageUrl = assets.idCardFront.landscapeGuidesImageUrl);
|
|
9848
|
+
(_r = assets.flipIdPrompt).backPortraitGuidesImageUrl || (_r.backPortraitGuidesImageUrl = assets.idCardBack.portraitGuidesImageUrl);
|
|
9849
|
+
(_s = assets.flipIdPrompt).backLandscapeGuidesImageUrl || (_s.backLandscapeGuidesImageUrl = assets.idCardBack.landscapeGuidesImageUrl);
|
|
10111
9850
|
var idCaptureVerbiages = {
|
|
10112
9851
|
idCardFront: useTranslations(verbiage.idCardFront, {
|
|
10113
9852
|
instructionText: 'Scan the front of ID',
|
|
@@ -10121,12 +9860,12 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10121
9860
|
})
|
|
10122
9861
|
};
|
|
10123
9862
|
var theme = styled.useTheme();
|
|
10124
|
-
var
|
|
10125
|
-
guideRectX =
|
|
10126
|
-
guideRectY =
|
|
10127
|
-
guideRectWidth =
|
|
10128
|
-
guideRectHeight =
|
|
10129
|
-
imageUrl =
|
|
9863
|
+
var _18 = useIdCaptureState()[0],
|
|
9864
|
+
guideRectX = _18.guideRectX,
|
|
9865
|
+
guideRectY = _18.guideRectY,
|
|
9866
|
+
guideRectWidth = _18.guideRectWidth,
|
|
9867
|
+
guideRectHeight = _18.guideRectHeight,
|
|
9868
|
+
imageUrl = _18.imageUrl;
|
|
10130
9869
|
var idCaptureAssets = assets[state.requestedDocumentType];
|
|
10131
9870
|
var idCaptureVerbiage = idCaptureVerbiages[state.requestedDocumentType];
|
|
10132
9871
|
React.useEffect(function () {
|
|
@@ -10180,19 +9919,6 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10180
9919
|
});
|
|
10181
9920
|
});
|
|
10182
9921
|
}, [dispatch]);
|
|
10183
|
-
var _26 = React.useState(false),
|
|
10184
|
-
progressStarted = _26[0],
|
|
10185
|
-
setProgressStarted = _26[1];
|
|
10186
|
-
React.useEffect(function () {
|
|
10187
|
-
if (state.captureState === 'capturing') {
|
|
10188
|
-
setProgressStarted(false);
|
|
10189
|
-
}
|
|
10190
|
-
}, [state.captureState]);
|
|
10191
|
-
React.useEffect(function () {
|
|
10192
|
-
if (state.goodFramesCount > 0) {
|
|
10193
|
-
setProgressStarted(true);
|
|
10194
|
-
}
|
|
10195
|
-
}, [state.goodFramesCount]);
|
|
10196
9922
|
if (forceFallbackMode || modelError) {
|
|
10197
9923
|
return /*#__PURE__*/React__namespace.default.createElement(IdCaptureFallback, {
|
|
10198
9924
|
idCaptureRequirement: captureRequirement,
|
|
@@ -10204,7 +9930,6 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10204
9930
|
silentFallback: silentFallback
|
|
10205
9931
|
});
|
|
10206
9932
|
}
|
|
10207
|
-
var requestedAction = state.captureState === 'requestingFlip' ? 'FLIP_ID' : state.requestedDocumentType === 'idCardBack' ? 'SHOW_ID_BACK' : state.requestedDocumentType === 'passport' ? 'SHOW_PASSPORT' : 'SHOW_ID_FRONT';
|
|
10208
9933
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
10209
9934
|
className: "flex ".concat((_b = classNames === null || classNames === void 0 ? void 0 : classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
10210
9935
|
}, state.captureState !== 'complete' && ( /*#__PURE__*/React__namespace.default.createElement(CameraFeedWrapper, {
|
|
@@ -10225,14 +9950,12 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10225
9950
|
verbiage: idCaptureVerbiage,
|
|
10226
9951
|
debugMode: debugMode
|
|
10227
9952
|
})), /*#__PURE__*/React__namespace.default.createElement(IdCaptureGuides, {
|
|
10228
|
-
key: "guides".concat(attempt),
|
|
10229
9953
|
guideType: guideType,
|
|
10230
|
-
status: state.isGoodFrame ? 'capturing' : 'ready',
|
|
10231
|
-
progress: progressStarted && state.captureState === 'capturing' ? 1 : 0,
|
|
10232
9954
|
portraitGuidesOnMobile: portraitGuidesOnMobile,
|
|
10233
|
-
|
|
10234
|
-
assets: assets.
|
|
10235
|
-
classNames: classNames
|
|
9955
|
+
requestingFlip: state.captureState === 'requestingFlip',
|
|
9956
|
+
flipIdPromptAssets: assets === null || assets === void 0 ? void 0 : assets.flipIdPrompt,
|
|
9957
|
+
classNames: classNames,
|
|
9958
|
+
assets: idCaptureAssets,
|
|
10236
9959
|
colors: colors,
|
|
10237
9960
|
verbiage: idCaptureVerbiage,
|
|
10238
9961
|
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
@@ -10246,7 +9969,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10246
9969
|
onClick: onExit,
|
|
10247
9970
|
className: (_g = classNames.capture) === null || _g === void 0 ? void 0 : _g.exitCaptureBtn
|
|
10248
9971
|
}), !overlayDismissed && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureLoadingOverlay, {
|
|
10249
|
-
key:
|
|
9972
|
+
key: attempt,
|
|
10250
9973
|
mode: loadingOverlayMode,
|
|
10251
9974
|
instructions: instructions,
|
|
10252
9975
|
assets: assets.loadingOverlay,
|
|
@@ -10280,736 +10003,107 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10280
10003
|
})));
|
|
10281
10004
|
};
|
|
10282
10005
|
|
|
10283
|
-
|
|
10284
|
-
|
|
10285
|
-
|
|
10286
|
-
|
|
10287
|
-
|
|
10288
|
-
|
|
10289
|
-
|
|
10290
|
-
|
|
10291
|
-
|
|
10292
|
-
|
|
10293
|
-
|
|
10294
|
-
|
|
10295
|
-
|
|
10296
|
-
|
|
10006
|
+
var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: absolute;\n z-index: 1000;\n width: 100%;\n height: 100%;\n display: flex;\n"], ["\n position: absolute;\n z-index: 1000;\n width: 100%;\n height: 100%;\n display: flex;\n"])));
|
|
10007
|
+
var FaceCaptureGuideOval = styled__default.default.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n margin: auto;\n"], ["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n margin: auto;\n"])), function (props) {
|
|
10008
|
+
return props.$borderWidth;
|
|
10009
|
+
}, function (props) {
|
|
10010
|
+
var _a, _b, _c, _d;
|
|
10011
|
+
return (_d = (_a = props.$borderColor) !== null && _a !== void 0 ? _a : (_c = (_b = props.theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.guides) === null || _c === void 0 ? void 0 : _c["".concat(props.$variant, "Color")]) !== null && _d !== void 0 ? _d : 'white';
|
|
10012
|
+
});
|
|
10013
|
+
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10014
|
+
var _b = _a.classNames,
|
|
10015
|
+
classNames = _b === void 0 ? {} : _b,
|
|
10016
|
+
_c = _a.variant,
|
|
10017
|
+
variant = _c === void 0 ? 'unsatisfied' : _c,
|
|
10018
|
+
_d = _a.borderWidth,
|
|
10019
|
+
borderWidth = _d === void 0 ? 3 : _d,
|
|
10020
|
+
borderColor = _a.borderColor;
|
|
10021
|
+
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10022
|
+
className: classNames.container
|
|
10023
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOval, {
|
|
10024
|
+
className: classNames.oval,
|
|
10025
|
+
"$variant": variant,
|
|
10026
|
+
"$borderWidth": borderWidth,
|
|
10027
|
+
"$borderColor": borderColor
|
|
10028
|
+
}));
|
|
10029
|
+
};
|
|
10030
|
+
var templateObject_1$k, templateObject_2$e;
|
|
10031
|
+
|
|
10032
|
+
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10033
|
+
start: function start() {
|
|
10034
|
+
return null;
|
|
10035
|
+
},
|
|
10036
|
+
stop: function stop() {
|
|
10037
|
+
return null;
|
|
10038
|
+
},
|
|
10039
|
+
onPredictionMade: function onPredictionMade() {
|
|
10040
|
+
return null;
|
|
10041
|
+
},
|
|
10042
|
+
canvasRef: {
|
|
10043
|
+
current: null
|
|
10044
|
+
},
|
|
10045
|
+
ready: false,
|
|
10046
|
+
error: null,
|
|
10047
|
+
modelDownloadProgress: 0
|
|
10048
|
+
});
|
|
10049
|
+
function SelfieGuidanceModelsProvider(_a) {
|
|
10050
|
+
var _this = this;
|
|
10051
|
+
var _b = _a.autoStart,
|
|
10052
|
+
autoStart = _b === void 0 ? true : _b,
|
|
10053
|
+
children = _a.children,
|
|
10054
|
+
throttleMs = _a.throttleMs,
|
|
10055
|
+
onModelError = _a.onModelError,
|
|
10056
|
+
_c = _a.modelLoadTimeoutMs,
|
|
10057
|
+
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10058
|
+
var _d = React.useContext(CameraStateContext),
|
|
10059
|
+
videoRef = _d.videoRef,
|
|
10060
|
+
videoLoaded = _d.videoLoaded,
|
|
10061
|
+
cameraReady = _d.cameraReady;
|
|
10062
|
+
var canvasRef = React.useRef(null);
|
|
10063
|
+
var onPredictionHandler = React.useRef();
|
|
10064
|
+
var _e = useLoadFaceDetector({
|
|
10065
|
+
onModelError: onModelError,
|
|
10066
|
+
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10067
|
+
}),
|
|
10068
|
+
detector = _e.detector,
|
|
10069
|
+
ready = _e.ready,
|
|
10070
|
+
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10071
|
+
modelError = _e.modelError;
|
|
10072
|
+
var _f = useFrameLoop(React.useCallback(function () {
|
|
10073
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
10074
|
+
var vw, vh, ctx, faces;
|
|
10075
|
+
var _a;
|
|
10076
|
+
return __generator(this, function (_b) {
|
|
10077
|
+
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10078
|
+
vw = videoRef.current.videoWidth;
|
|
10079
|
+
vh = videoRef.current.videoHeight;
|
|
10080
|
+
ctx = canvasRef.current.getContext('2d');
|
|
10081
|
+
canvasRef.current.width = vw;
|
|
10082
|
+
canvasRef.current.height = vh;
|
|
10083
|
+
if (ctx && videoRef.current.readyState === 4) {
|
|
10084
|
+
ctx.translate(vw, 0);
|
|
10085
|
+
ctx.scale(-1, 1);
|
|
10086
|
+
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10087
|
+
// Detectors can throw errors, for example when using custom URLs that
|
|
10088
|
+
// contain a model that doesn't provide the expected output.
|
|
10089
|
+
try {
|
|
10090
|
+
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10091
|
+
(_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces);
|
|
10092
|
+
} catch (e) {
|
|
10093
|
+
error('caught face detection error', e);
|
|
10094
|
+
}
|
|
10095
|
+
}
|
|
10096
|
+
return [2 /*return*/];
|
|
10097
|
+
});
|
|
10297
10098
|
});
|
|
10298
|
-
},
|
|
10299
|
-
|
|
10300
|
-
|
|
10301
|
-
}
|
|
10302
|
-
|
|
10303
|
-
|
|
10304
|
-
var
|
|
10305
|
-
|
|
10306
|
-
width: width,
|
|
10307
|
-
height: height,
|
|
10308
|
-
className: className,
|
|
10309
|
-
viewBox: "0 0 840 740",
|
|
10310
|
-
fill: "none",
|
|
10311
|
-
preserveAspectRatio: "xMidYMax slice",
|
|
10312
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
10313
|
-
}, /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10314
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10315
|
-
}, /*#__PURE__*/React__namespace.default.createElement("mask", {
|
|
10316
|
-
id: "mask0_428_1188",
|
|
10317
|
-
style: {
|
|
10318
|
-
maskType: 'alpha'
|
|
10319
|
-
},
|
|
10320
|
-
maskUnits: "userSpaceOnUse",
|
|
10321
|
-
x: "0",
|
|
10322
|
-
y: "0",
|
|
10323
|
-
width: "840",
|
|
10324
|
-
height: "740"
|
|
10325
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10326
|
-
width: "840",
|
|
10327
|
-
height: "740",
|
|
10328
|
-
fill: "#D9D9D9"
|
|
10329
|
-
})), /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10330
|
-
mask: "url(#mask0_428_1188)"
|
|
10331
|
-
}, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10332
|
-
d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
|
|
10333
|
-
fill: "#D2D4DA"
|
|
10334
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10335
|
-
d: "M574.88 244.97C647.073 163.885 598.921 362.155 558.945 338.928C488.709 298.211 574.88 244.97 574.88 244.97Z",
|
|
10336
|
-
fill: "#F7A69C"
|
|
10337
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10338
|
-
d: "M816.983 742.838C779.698 781.432 736.86 814.612 689.786 841.127C617.161 882.012 534.399 906.862 446.153 911.027C437.335 911.513 428.448 911.721 419.491 911.721C374.986 911.721 331.731 906.446 290.281 896.519C232.514 882.706 178.358 859.8 129.271 829.397C89.9033 805.033 53.9382 775.948 22 742.838L31.512 705.355C45.8842 649.061 90.2505 605.33 146.837 591.795L153.085 590.337L222.447 573.747L241.401 569.235C249.386 567.292 257.023 564.585 264.244 561.114C270.285 558.199 276.047 554.797 281.463 550.91C287.295 546.745 292.78 542.025 297.71 536.819C310.971 522.867 320.761 505.653 325.76 486.286L333.119 457.688L335.064 449.983L335.202 449.358L344.645 412.916L347.422 402.019H491.491L502.253 443.667L503.225 447.415L503.78 449.497V449.983L505.863 457.757L513.223 486.286C520.097 512.802 535.996 535.5 557.589 550.91C569.393 559.448 582.932 565.765 597.581 569.235L615.078 573.4L692.146 591.795C748.732 605.33 793.099 649.061 807.471 705.355L816.983 742.838Z",
|
|
10339
|
-
fill: "#F7A69C"
|
|
10340
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10341
|
-
d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
|
|
10342
|
-
fill: "#DC968D"
|
|
10343
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10344
|
-
d: "M264.123 244.97C191.93 163.885 240.082 362.155 280.058 338.928C350.294 298.211 264.123 244.97 264.123 244.97Z",
|
|
10345
|
-
fill: "#F7A69C"
|
|
10346
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10347
|
-
d: "M586.473 187.324C586.473 193.432 586.126 199.402 585.432 205.371C584.876 210.785 582.446 233.9 578.141 263.331C575.781 279.713 572.726 297.969 569.115 316.294C569.115 316.502 569.115 316.78 568.976 316.988C560.159 361.621 547.731 406.045 531.484 422.219C513.154 440.544 498.435 457.203 481.632 469.211C464.83 481.289 446.014 488.786 419.631 488.786C393.247 488.786 374.431 481.289 357.629 469.211C340.896 457.203 326.107 440.544 307.778 422.219C291.531 405.976 279.103 361.482 270.216 316.918C270.216 316.918 270.216 316.71 270.216 316.641C269.105 310.879 268.063 305.118 267.022 299.426C266.605 297.066 266.189 294.706 265.772 292.346C264.036 282.351 262.509 272.563 261.12 263.401C256.121 229.596 253.691 204.122 253.691 204.122C253.136 198.638 252.858 193.016 252.858 187.324C252.858 185.866 252.858 184.408 252.858 182.951C253.205 169.832 255.01 157.06 258.274 144.843C258.412 144.287 258.551 143.732 258.69 143.177C277.228 75.4294 337.425 24.8271 410.049 20.8011C413.243 20.5928 416.368 20.5234 419.631 20.5234C465.733 20.5234 507.461 39.1956 537.663 69.3904C563.769 95.4205 581.266 130.127 585.501 168.79C586.195 174.899 586.542 181.077 586.542 187.324H586.473Z",
|
|
10348
|
-
fill: "#FEAEA5"
|
|
10349
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10350
|
-
d: "M445.867 337.327C445.867 348.849 434.133 358.151 419.622 358.151C405.111 358.151 393.447 348.849 393.447 337.327C393.447 335.939 393.586 334.55 394.002 333.301C396.293 342.88 406.916 350.099 419.622 350.099C432.328 350.099 443.02 342.88 445.312 333.301C445.728 334.62 445.867 335.939 445.867 337.327Z",
|
|
10351
|
-
fill: "#F7A69C"
|
|
10352
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10353
|
-
d: "M817.053 743.187C716.586 847.238 575.642 912 419.561 912C263.481 912 122.467 847.238 22.0698 743.118L31.5818 705.704C45.954 649.34 90.3203 605.61 146.906 592.074L222.655 574.027L241.471 569.515C249.942 567.502 258.135 564.517 265.772 560.699C304.237 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.351 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471L692.216 592.074C748.802 605.61 793.168 649.34 807.471 705.704L817.053 743.187Z",
|
|
10354
|
-
fill: "#6E7174"
|
|
10355
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10356
|
-
d: "M614.106 573.471C597.165 594.018 534.886 659.058 419.561 663.639C286.671 668.984 226.266 579.441 222.655 574.027L241.471 569.515C249.942 567.502 258.134 564.517 265.772 560.699C304.236 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.35 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471Z",
|
|
10357
|
-
fill: "#555A5E"
|
|
10358
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10359
|
-
d: "M249.898 196.144C249.898 249.777 270.317 315.623 270.317 315.623C270.317 315.623 266.862 205.572 314.892 164.108C347.514 135.946 374.019 167.565 417.115 167.565C456.137 167.565 492.558 136.481 525.436 164.108C578.852 208.994 568.738 315.623 568.738 315.623C568.738 315.623 589.157 250.557 589.157 196.144C589.157 76.4319 542.638 20 417.115 20C302.8 20 249.898 75.8365 249.898 196.144Z",
|
|
10360
|
-
fill: "#525252"
|
|
10361
|
-
})), frame >= 8 ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10362
|
-
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",
|
|
10363
|
-
stroke: satisfiedColor,
|
|
10364
|
-
strokeWidth: "5"
|
|
10365
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10366
|
-
cx: "518.5",
|
|
10367
|
-
cy: "438.5",
|
|
10368
|
-
r: "25.5",
|
|
10369
|
-
fill: satisfiedColor
|
|
10370
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10371
|
-
d: "M504 440.5L512 448L531 427",
|
|
10372
|
-
stroke: "white",
|
|
10373
|
-
strokeWidth: "5",
|
|
10374
|
-
strokeLinecap: "round",
|
|
10375
|
-
strokeLinejoin: "round"
|
|
10376
|
-
}))) : ( /*#__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, frame > 5 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10377
|
-
d: "M298.5 182.5L419 164.5L540 182",
|
|
10378
|
-
stroke: "white",
|
|
10379
|
-
strokeWidth: "2",
|
|
10380
|
-
strokeLinecap: "round",
|
|
10381
|
-
strokeLinejoin: "round"
|
|
10382
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10383
|
-
cx: "419",
|
|
10384
|
-
cy: "165",
|
|
10385
|
-
r: "7",
|
|
10386
|
-
fill: "white"
|
|
10387
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10388
|
-
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",
|
|
10389
|
-
stroke: "white",
|
|
10390
|
-
strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
|
|
10391
|
-
strokeWidth: "5"
|
|
10392
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10393
|
-
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
10394
|
-
stroke: "white",
|
|
10395
|
-
strokeWidth: "2",
|
|
10396
|
-
strokeLinecap: "round",
|
|
10397
|
-
strokeLinejoin: "round"
|
|
10398
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10399
|
-
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
10400
|
-
stroke: "white",
|
|
10401
|
-
strokeWidth: "2",
|
|
10402
|
-
strokeLinecap: "round",
|
|
10403
|
-
strokeLinejoin: "round"
|
|
10404
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10405
|
-
d: "M298.5 182.5L299.939 262.805",
|
|
10406
|
-
stroke: "white",
|
|
10407
|
-
strokeWidth: "2",
|
|
10408
|
-
strokeLinecap: "round",
|
|
10409
|
-
strokeLinejoin: "round"
|
|
10410
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10411
|
-
d: "M540.001 182L538.501 261.5",
|
|
10412
|
-
stroke: "white",
|
|
10413
|
-
strokeWidth: "2",
|
|
10414
|
-
strokeLinecap: "round",
|
|
10415
|
-
strokeLinejoin: "round"
|
|
10416
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10417
|
-
cx: "299.914",
|
|
10418
|
-
cy: "182",
|
|
10419
|
-
r: "7",
|
|
10420
|
-
fill: "white"
|
|
10421
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10422
|
-
cx: "540",
|
|
10423
|
-
cy: "182",
|
|
10424
|
-
r: "7",
|
|
10425
|
-
fill: "white"
|
|
10426
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10427
|
-
d: "M418.828 230L419 342.5",
|
|
10428
|
-
stroke: "white",
|
|
10429
|
-
strokeWidth: "2",
|
|
10430
|
-
strokeLinecap: "round",
|
|
10431
|
-
strokeLinejoin: "round",
|
|
10432
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10433
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10434
|
-
d: "M300 263.001L419 342.501",
|
|
10435
|
-
stroke: "white",
|
|
10436
|
-
strokeWidth: "2",
|
|
10437
|
-
strokeLinecap: "round",
|
|
10438
|
-
strokeLinejoin: "round",
|
|
10439
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10440
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10441
|
-
d: "M538.5 261.5L419 342.5",
|
|
10442
|
-
stroke: "white",
|
|
10443
|
-
strokeWidth: "2",
|
|
10444
|
-
strokeLinecap: "round",
|
|
10445
|
-
strokeLinejoin: "round",
|
|
10446
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10447
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10448
|
-
d: "M301.5 409L419 342.5",
|
|
10449
|
-
stroke: "white",
|
|
10450
|
-
strokeWidth: "2",
|
|
10451
|
-
strokeLinecap: "round",
|
|
10452
|
-
strokeLinejoin: "round",
|
|
10453
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10454
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10455
|
-
d: "M536.5 410L419 342.5",
|
|
10456
|
-
stroke: "white",
|
|
10457
|
-
strokeWidth: "2",
|
|
10458
|
-
strokeLinecap: "round",
|
|
10459
|
-
strokeLinejoin: "round",
|
|
10460
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10461
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10462
|
-
d: "M300 263L419 230",
|
|
10463
|
-
stroke: "white",
|
|
10464
|
-
strokeWidth: "2",
|
|
10465
|
-
strokeLinecap: "round",
|
|
10466
|
-
strokeLinejoin: "round",
|
|
10467
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10468
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10469
|
-
d: "M538.5 261.5L419 230",
|
|
10470
|
-
stroke: "white",
|
|
10471
|
-
strokeWidth: "2",
|
|
10472
|
-
strokeLinecap: "round",
|
|
10473
|
-
strokeLinejoin: "round",
|
|
10474
|
-
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
10475
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10476
|
-
cx: "419",
|
|
10477
|
-
cy: "229.971",
|
|
10478
|
-
r: "7",
|
|
10479
|
-
fill: "white"
|
|
10480
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10481
|
-
cx: "419",
|
|
10482
|
-
cy: "342.4",
|
|
10483
|
-
r: "7",
|
|
10484
|
-
fill: "white"
|
|
10485
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10486
|
-
d: "M538.5 261.5L536.5 410",
|
|
10487
|
-
stroke: "white",
|
|
10488
|
-
strokeWidth: "2",
|
|
10489
|
-
strokeLinecap: "round",
|
|
10490
|
-
strokeLinejoin: "round",
|
|
10491
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10492
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10493
|
-
d: "M419 478.5L536.5 410",
|
|
10494
|
-
stroke: "white",
|
|
10495
|
-
strokeWidth: "2",
|
|
10496
|
-
strokeLinecap: "round",
|
|
10497
|
-
strokeLinejoin: "round",
|
|
10498
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10499
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10500
|
-
cx: "537",
|
|
10501
|
-
cy: "263",
|
|
10502
|
-
r: "7",
|
|
10503
|
-
fill: "white"
|
|
10504
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10505
|
-
cx: "537",
|
|
10506
|
-
cy: "409",
|
|
10507
|
-
r: "7",
|
|
10508
|
-
fill: "white"
|
|
10509
|
-
}))), frame > 1 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10510
|
-
d: "M301.501 409L300.001 263",
|
|
10511
|
-
stroke: "white",
|
|
10512
|
-
strokeWidth: "2",
|
|
10513
|
-
strokeLinecap: "round",
|
|
10514
|
-
strokeLinejoin: "round",
|
|
10515
|
-
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
10516
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10517
|
-
d: "M301.501 409L419.001 478.5",
|
|
10518
|
-
stroke: "white",
|
|
10519
|
-
strokeWidth: "2",
|
|
10520
|
-
strokeLinecap: "round",
|
|
10521
|
-
strokeLinejoin: "round",
|
|
10522
|
-
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
10523
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10524
|
-
cx: "419",
|
|
10525
|
-
cy: "477.576",
|
|
10526
|
-
r: "7",
|
|
10527
|
-
fill: "white"
|
|
10528
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10529
|
-
cx: "301.914",
|
|
10530
|
-
cy: "263",
|
|
10531
|
-
r: "7",
|
|
10532
|
-
fill: "white"
|
|
10533
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10534
|
-
cx: "301.444",
|
|
10535
|
-
cy: "409",
|
|
10536
|
-
r: "7",
|
|
10537
|
-
fill: "white"
|
|
10538
|
-
})))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
10539
|
-
id: "clip0_428_1188"
|
|
10540
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10541
|
-
width: "840",
|
|
10542
|
-
height: "740",
|
|
10543
|
-
fill: "white"
|
|
10544
|
-
}))));
|
|
10545
|
-
}
|
|
10546
|
-
var HeadGuideSvg = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
10547
|
-
var _b = _a.borderColor,
|
|
10548
|
-
borderColor = _b === void 0 ? 'white' : _b,
|
|
10549
|
-
_c = _a.borderOpacity,
|
|
10550
|
-
borderOpacity = _c === void 0 ? 0.8 : _c,
|
|
10551
|
-
_d = _a.borderWidth,
|
|
10552
|
-
borderWidth = _d === void 0 ? 5 : _d,
|
|
10553
|
-
_e = _a.status,
|
|
10554
|
-
status = _e === void 0 ? 'ready' : _e,
|
|
10555
|
-
props = __rest(_a, ["borderColor", "borderOpacity", "borderWidth", "status"]);
|
|
10556
|
-
return /*#__PURE__*/React__namespace.default.createElement("svg", _assign({}, props, {
|
|
10557
|
-
ref: ref,
|
|
10558
|
-
viewBox: "271 92 297 406",
|
|
10559
|
-
fill: "none",
|
|
10560
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
10561
|
-
}), /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10562
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10563
|
-
}, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10564
|
-
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",
|
|
10565
|
-
stroke: borderColor,
|
|
10566
|
-
strokeOpacity: borderOpacity,
|
|
10567
|
-
strokeWidth: borderWidth
|
|
10568
|
-
}), status === 'success' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10569
|
-
cx: "518.5",
|
|
10570
|
-
cy: "438.5",
|
|
10571
|
-
r: "25.5",
|
|
10572
|
-
fill: borderColor
|
|
10573
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10574
|
-
d: "M504 440.5L512 448L531 427",
|
|
10575
|
-
stroke: "white",
|
|
10576
|
-
strokeWidth: "5",
|
|
10577
|
-
strokeLinecap: "round",
|
|
10578
|
-
strokeLinejoin: "round"
|
|
10579
|
-
}))), status === 'failure' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10580
|
-
cx: "518.5",
|
|
10581
|
-
cy: "438.5",
|
|
10582
|
-
r: "25.5",
|
|
10583
|
-
fill: borderColor
|
|
10584
|
-
}), /*#__PURE__*/React__namespace.default.createElement("image", {
|
|
10585
|
-
href: "https://websdk-cdn-dev.idmission.com/assets/x.svg",
|
|
10586
|
-
x: "507",
|
|
10587
|
-
y: "427",
|
|
10588
|
-
width: "24",
|
|
10589
|
-
height: "24"
|
|
10590
|
-
})))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
10591
|
-
id: "clip0_428_1188"
|
|
10592
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10593
|
-
width: "840",
|
|
10594
|
-
height: "740",
|
|
10595
|
-
fill: "white"
|
|
10596
|
-
}))));
|
|
10597
|
-
});
|
|
10598
|
-
HeadGuideSvg.displayName = 'HeadGuideSvg';
|
|
10599
|
-
var PulsingHeadGuideContainer = styled__default.default.div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
10600
|
-
function HeadGuide(_a) {
|
|
10601
|
-
var _b;
|
|
10602
|
-
var _c = _a.status,
|
|
10603
|
-
status = _c === void 0 ? 'ready' : _c,
|
|
10604
|
-
props = __rest(_a, ["status"]);
|
|
10605
|
-
var ref = React.useRef(null);
|
|
10606
|
-
var parentRef = React.useRef(null);
|
|
10607
|
-
var _d = React.useState(undefined),
|
|
10608
|
-
refBox = _d[0],
|
|
10609
|
-
setRefBox = _d[1];
|
|
10610
|
-
React.useLayoutEffect(function () {
|
|
10611
|
-
if (!ref.current || !parentRef.current) return;
|
|
10612
|
-
var box = ref.current.getBoundingClientRect();
|
|
10613
|
-
var parentBox = parentRef.current.getBoundingClientRect();
|
|
10614
|
-
setRefBox(_assign(_assign({}, box), {
|
|
10615
|
-
top: box.top - parentBox.top,
|
|
10616
|
-
left: box.left - parentBox.left
|
|
10617
|
-
}));
|
|
10618
|
-
}, []);
|
|
10619
|
-
return /*#__PURE__*/React__namespace.default.createElement(PulsingHeadGuideContainer, {
|
|
10620
|
-
ref: parentRef
|
|
10621
|
-
}, status === 'ready' && refBox && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10622
|
-
className: "pulse",
|
|
10623
|
-
borderOpacity: 0.25,
|
|
10624
|
-
borderColor: "#287ec6",
|
|
10625
|
-
style: refBox
|
|
10626
|
-
})), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10627
|
-
className: "pulse",
|
|
10628
|
-
borderOpacity: 0.25,
|
|
10629
|
-
borderColor: "#287ec6",
|
|
10630
|
-
style: refBox
|
|
10631
|
-
})), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10632
|
-
className: "pulse",
|
|
10633
|
-
borderOpacity: 0.25,
|
|
10634
|
-
borderColor: "#287ec6",
|
|
10635
|
-
style: refBox
|
|
10636
|
-
})))), /*#__PURE__*/React__namespace.default.createElement(HeadGuideSvg, _assign({}, props, {
|
|
10637
|
-
ref: ref,
|
|
10638
|
-
borderOpacity: 1,
|
|
10639
|
-
className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
|
|
10640
|
-
status: status
|
|
10641
|
-
})));
|
|
10642
|
-
}
|
|
10643
|
-
var RelativeSvg = styled__default.default.svg(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
10644
|
-
var RelativeSvgContainer = styled__default.default.div(templateObject_3$e || (templateObject_3$e = __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) {
|
|
10645
|
-
return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
|
|
10646
|
-
});
|
|
10647
|
-
function SelfieCaptureAnimatedMask(_a) {
|
|
10648
|
-
var _b, _c, _d, _e, _f, _g;
|
|
10649
|
-
var _h = _a.frame,
|
|
10650
|
-
frame = _h === void 0 ? 0 : _h,
|
|
10651
|
-
_j = _a.borderWidth,
|
|
10652
|
-
borderWidth = _j === void 0 ? 5 : _j,
|
|
10653
|
-
_k = _a.borderColor,
|
|
10654
|
-
borderColor = _k === void 0 ? 'white' : _k,
|
|
10655
|
-
_l = _a.borderOpacity,
|
|
10656
|
-
borderOpacity = _l === void 0 ? 0.8 : _l,
|
|
10657
|
-
_m = _a.verticalAlign,
|
|
10658
|
-
verticalAlign = _m === void 0 ? 'center' : _m,
|
|
10659
|
-
_o = _a.status,
|
|
10660
|
-
status = _o === void 0 ? 'ready' : _o,
|
|
10661
|
-
props = __rest(_a, ["frame", "borderWidth", "borderColor", "borderOpacity", "verticalAlign", "status"]);
|
|
10662
|
-
var theme = styled.useTheme();
|
|
10663
|
-
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)';
|
|
10664
|
-
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)';
|
|
10665
|
-
var statusBorderColor = status === 'failure' ? negativeColor : status === 'success' ? satisfiedColor : borderColor;
|
|
10666
|
-
return /*#__PURE__*/React__namespace.default.createElement(RelativeSvgContainer, {
|
|
10667
|
-
"$verticalAlign": verticalAlign
|
|
10668
|
-
}, /*#__PURE__*/React__namespace.default.createElement(HeadGuide, _assign({
|
|
10669
|
-
borderOpacity: borderOpacity,
|
|
10670
|
-
borderWidth: borderWidth,
|
|
10671
|
-
borderColor: statusBorderColor,
|
|
10672
|
-
status: status
|
|
10673
|
-
}, props)), /*#__PURE__*/React__namespace.default.createElement(RelativeSvg, _assign({}, props, {
|
|
10674
|
-
viewBox: "271 92 297 406",
|
|
10675
|
-
fill: "none",
|
|
10676
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
10677
|
-
}), status === 'processing' && ( /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
10678
|
-
clipPath: "url(#clip0_428_1188)"
|
|
10679
|
-
}, 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", {
|
|
10680
|
-
d: "M298.5 182.5L419 164.5L540 182",
|
|
10681
|
-
stroke: "white",
|
|
10682
|
-
strokeWidth: "2",
|
|
10683
|
-
strokeLinecap: "round",
|
|
10684
|
-
strokeLinejoin: "round"
|
|
10685
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10686
|
-
cx: "419",
|
|
10687
|
-
cy: "165",
|
|
10688
|
-
r: "7",
|
|
10689
|
-
fill: "white"
|
|
10690
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10691
|
-
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
10692
|
-
stroke: "white",
|
|
10693
|
-
strokeWidth: "2",
|
|
10694
|
-
strokeLinecap: "round",
|
|
10695
|
-
strokeLinejoin: "round"
|
|
10696
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10697
|
-
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
10698
|
-
stroke: "white",
|
|
10699
|
-
strokeWidth: "2",
|
|
10700
|
-
strokeLinecap: "round",
|
|
10701
|
-
strokeLinejoin: "round"
|
|
10702
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10703
|
-
d: "M298.5 182.5L299.939 262.805",
|
|
10704
|
-
stroke: "white",
|
|
10705
|
-
strokeWidth: "2",
|
|
10706
|
-
strokeLinecap: "round",
|
|
10707
|
-
strokeLinejoin: "round"
|
|
10708
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10709
|
-
d: "M540.001 182L538.501 261.5",
|
|
10710
|
-
stroke: "white",
|
|
10711
|
-
strokeWidth: "2",
|
|
10712
|
-
strokeLinecap: "round",
|
|
10713
|
-
strokeLinejoin: "round"
|
|
10714
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10715
|
-
cx: "299.914",
|
|
10716
|
-
cy: "182",
|
|
10717
|
-
r: "7",
|
|
10718
|
-
fill: "white"
|
|
10719
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10720
|
-
cx: "540",
|
|
10721
|
-
cy: "182",
|
|
10722
|
-
r: "7",
|
|
10723
|
-
fill: "white"
|
|
10724
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10725
|
-
d: "M418.828 230L419 342.5",
|
|
10726
|
-
stroke: "white",
|
|
10727
|
-
strokeWidth: "2",
|
|
10728
|
-
strokeLinecap: "round",
|
|
10729
|
-
strokeLinejoin: "round",
|
|
10730
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10731
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10732
|
-
d: "M300 263.001L419 342.501",
|
|
10733
|
-
stroke: "white",
|
|
10734
|
-
strokeWidth: "2",
|
|
10735
|
-
strokeLinecap: "round",
|
|
10736
|
-
strokeLinejoin: "round",
|
|
10737
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10738
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10739
|
-
d: "M538.5 261.5L419 342.5",
|
|
10740
|
-
stroke: "white",
|
|
10741
|
-
strokeWidth: "2",
|
|
10742
|
-
strokeLinecap: "round",
|
|
10743
|
-
strokeLinejoin: "round",
|
|
10744
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10745
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10746
|
-
d: "M301.5 409L419 342.5",
|
|
10747
|
-
stroke: "white",
|
|
10748
|
-
strokeWidth: "2",
|
|
10749
|
-
strokeLinecap: "round",
|
|
10750
|
-
strokeLinejoin: "round",
|
|
10751
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10752
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10753
|
-
d: "M536.5 410L419 342.5",
|
|
10754
|
-
stroke: "white",
|
|
10755
|
-
strokeWidth: "2",
|
|
10756
|
-
strokeLinecap: "round",
|
|
10757
|
-
strokeLinejoin: "round",
|
|
10758
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10759
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10760
|
-
d: "M300 263L419 230",
|
|
10761
|
-
stroke: "white",
|
|
10762
|
-
strokeWidth: "2",
|
|
10763
|
-
strokeLinecap: "round",
|
|
10764
|
-
strokeLinejoin: "round",
|
|
10765
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10766
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10767
|
-
d: "M538.5 261.5L419 230",
|
|
10768
|
-
stroke: "white",
|
|
10769
|
-
strokeWidth: "2",
|
|
10770
|
-
strokeLinecap: "round",
|
|
10771
|
-
strokeLinejoin: "round",
|
|
10772
|
-
strokeOpacity: frame > 3 && frame < 6 ? 0.3 : 1
|
|
10773
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10774
|
-
cx: "419",
|
|
10775
|
-
cy: "229.971",
|
|
10776
|
-
r: "7",
|
|
10777
|
-
fill: "white"
|
|
10778
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10779
|
-
cx: "419",
|
|
10780
|
-
cy: "342.4",
|
|
10781
|
-
r: "7",
|
|
10782
|
-
fill: "white"
|
|
10783
|
-
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10784
|
-
d: "M538.5 261.5L536.5 410",
|
|
10785
|
-
stroke: "white",
|
|
10786
|
-
strokeWidth: "2",
|
|
10787
|
-
strokeLinecap: "round",
|
|
10788
|
-
strokeLinejoin: "round",
|
|
10789
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10790
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10791
|
-
d: "M419 478.5L536.5 410",
|
|
10792
|
-
stroke: "white",
|
|
10793
|
-
strokeWidth: "2",
|
|
10794
|
-
strokeLinecap: "round",
|
|
10795
|
-
strokeLinejoin: "round",
|
|
10796
|
-
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
10797
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10798
|
-
cx: "537",
|
|
10799
|
-
cy: "263",
|
|
10800
|
-
r: "7",
|
|
10801
|
-
fill: "white"
|
|
10802
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10803
|
-
cx: "537",
|
|
10804
|
-
cy: "409",
|
|
10805
|
-
r: "7",
|
|
10806
|
-
fill: "white"
|
|
10807
|
-
}))), frame > 0 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10808
|
-
d: "M301.501 409L300.001 263",
|
|
10809
|
-
stroke: "white",
|
|
10810
|
-
strokeWidth: "2",
|
|
10811
|
-
strokeLinecap: "round",
|
|
10812
|
-
strokeLinejoin: "round",
|
|
10813
|
-
strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
|
|
10814
|
-
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
10815
|
-
d: "M301.501 409L419.001 478.5",
|
|
10816
|
-
stroke: "white",
|
|
10817
|
-
strokeWidth: "2",
|
|
10818
|
-
strokeLinecap: "round",
|
|
10819
|
-
strokeLinejoin: "round",
|
|
10820
|
-
strokeOpacity: frame > 1 && frame < 6 ? 0.3 : 1
|
|
10821
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10822
|
-
cx: "419",
|
|
10823
|
-
cy: "477.576",
|
|
10824
|
-
r: "7",
|
|
10825
|
-
fill: "white"
|
|
10826
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10827
|
-
cx: "301.914",
|
|
10828
|
-
cy: "263",
|
|
10829
|
-
r: "7",
|
|
10830
|
-
fill: "white"
|
|
10831
|
-
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
10832
|
-
cx: "301.444",
|
|
10833
|
-
cy: "409",
|
|
10834
|
-
r: "7",
|
|
10835
|
-
fill: "white"
|
|
10836
|
-
}))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
10837
|
-
id: "clip0_428_1188"
|
|
10838
|
-
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
10839
|
-
width: "840",
|
|
10840
|
-
height: "740",
|
|
10841
|
-
fill: "white"
|
|
10842
|
-
})))));
|
|
10843
|
-
}
|
|
10844
|
-
function SelfieCaptureAnimatedMaskWithStatus(_a) {
|
|
10845
|
-
var _b = _a.status,
|
|
10846
|
-
status = _b === void 0 ? 'ready' : _b,
|
|
10847
|
-
props = __rest(_a, ["status"]);
|
|
10848
|
-
var _c = React.useState(1),
|
|
10849
|
-
frame = _c[0],
|
|
10850
|
-
setFrame = _c[1];
|
|
10851
|
-
React.useEffect(function () {
|
|
10852
|
-
if (status !== 'processing') {
|
|
10853
|
-
setFrame(0);
|
|
10854
|
-
return;
|
|
10855
|
-
}
|
|
10856
|
-
setFrame(1);
|
|
10857
|
-
var interval = setInterval(function () {
|
|
10858
|
-
setFrame(function (n) {
|
|
10859
|
-
return (n + 1) % 6;
|
|
10860
|
-
});
|
|
10861
|
-
}, 250);
|
|
10862
|
-
return function () {
|
|
10863
|
-
clearInterval(interval);
|
|
10864
|
-
};
|
|
10865
|
-
}, [status]);
|
|
10866
|
-
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
|
|
10867
|
-
frame: frame,
|
|
10868
|
-
status: status
|
|
10869
|
-
}));
|
|
10870
|
-
}
|
|
10871
|
-
var templateObject_1$k, templateObject_2$g, templateObject_3$e;
|
|
10872
|
-
|
|
10873
|
-
var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$j || (templateObject_1$j = __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"
|
|
10874
|
-
// const FaceCaptureGuideOval = styled.div<{
|
|
10875
|
-
// $variant: FaceCaptureGuideOverlayVariant
|
|
10876
|
-
// $borderWidth: number
|
|
10877
|
-
// $borderColor?: string
|
|
10878
|
-
// }>`
|
|
10879
|
-
// border-width: ${(props) => props.$borderWidth}px;
|
|
10880
|
-
// border-color: ${(props) =>
|
|
10881
|
-
// props.$borderColor ??
|
|
10882
|
-
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
10883
|
-
// 'white'};
|
|
10884
|
-
// border-style: solid;
|
|
10885
|
-
// border-radius: 50%;
|
|
10886
|
-
// aspect-ratio: 1 / 1.618;
|
|
10887
|
-
// height: 50%;
|
|
10888
|
-
// margin: auto;
|
|
10889
|
-
// `
|
|
10890
|
-
])));
|
|
10891
|
-
// const FaceCaptureGuideOval = styled.div<{
|
|
10892
|
-
// $variant: FaceCaptureGuideOverlayVariant
|
|
10893
|
-
// $borderWidth: number
|
|
10894
|
-
// $borderColor?: string
|
|
10895
|
-
// }>`
|
|
10896
|
-
// border-width: ${(props) => props.$borderWidth}px;
|
|
10897
|
-
// border-color: ${(props) =>
|
|
10898
|
-
// props.$borderColor ??
|
|
10899
|
-
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
10900
|
-
// 'white'};
|
|
10901
|
-
// border-style: solid;
|
|
10902
|
-
// border-radius: 50%;
|
|
10903
|
-
// aspect-ratio: 1 / 1.618;
|
|
10904
|
-
// height: 50%;
|
|
10905
|
-
// margin: auto;
|
|
10906
|
-
// `
|
|
10907
|
-
var StyledSelfieCaptureAnimatedMask$1 = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
10908
|
-
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10909
|
-
var _b = _a.classNames,
|
|
10910
|
-
classNames = _b === void 0 ? {} : _b,
|
|
10911
|
-
_c = _a.status,
|
|
10912
|
-
status = _c === void 0 ? 'ready' : _c,
|
|
10913
|
-
_d = _a.borderWidth,
|
|
10914
|
-
borderWidth = _d === void 0 ? 5 : _d,
|
|
10915
|
-
_e = _a.borderColor,
|
|
10916
|
-
borderColor = _e === void 0 ? 'white' : _e,
|
|
10917
|
-
_f = _a.borderOpacity,
|
|
10918
|
-
borderOpacity = _f === void 0 ? 0.8 : _f;
|
|
10919
|
-
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10920
|
-
className: classNames.container
|
|
10921
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$1, {
|
|
10922
|
-
status: status,
|
|
10923
|
-
borderColor: borderColor,
|
|
10924
|
-
borderWidth: borderWidth,
|
|
10925
|
-
borderOpacity: borderOpacity,
|
|
10926
|
-
verticalAlign: "center"
|
|
10927
|
-
}));
|
|
10928
|
-
};
|
|
10929
|
-
var templateObject_1$j, templateObject_2$f;
|
|
10930
|
-
|
|
10931
|
-
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10932
|
-
start: function start() {
|
|
10933
|
-
return null;
|
|
10934
|
-
},
|
|
10935
|
-
stop: function stop() {
|
|
10936
|
-
return null;
|
|
10937
|
-
},
|
|
10938
|
-
onPredictionMade: function onPredictionMade() {
|
|
10939
|
-
return null;
|
|
10940
|
-
},
|
|
10941
|
-
canvasRef: {
|
|
10942
|
-
current: null
|
|
10943
|
-
},
|
|
10944
|
-
ready: false,
|
|
10945
|
-
error: null,
|
|
10946
|
-
modelDownloadProgress: 0
|
|
10947
|
-
});
|
|
10948
|
-
function SelfieGuidanceModelsProvider(_a) {
|
|
10949
|
-
var _this = this;
|
|
10950
|
-
var _b = _a.autoStart,
|
|
10951
|
-
autoStart = _b === void 0 ? true : _b,
|
|
10952
|
-
children = _a.children,
|
|
10953
|
-
throttleMs = _a.throttleMs,
|
|
10954
|
-
onModelError = _a.onModelError,
|
|
10955
|
-
_c = _a.modelLoadTimeoutMs,
|
|
10956
|
-
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
|
|
10957
|
-
var _d = React.useContext(CameraStateContext),
|
|
10958
|
-
videoRef = _d.videoRef,
|
|
10959
|
-
videoLoaded = _d.videoLoaded,
|
|
10960
|
-
cameraReady = _d.cameraReady;
|
|
10961
|
-
var canvasRef = React.useRef(null);
|
|
10962
|
-
var onPredictionHandler = React.useRef();
|
|
10963
|
-
var _e = useLoadFaceDetector({
|
|
10964
|
-
onModelError: onModelError,
|
|
10965
|
-
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
10966
|
-
}),
|
|
10967
|
-
detector = _e.detector,
|
|
10968
|
-
ready = _e.ready,
|
|
10969
|
-
modelDownloadProgress = _e.modelDownloadProgress,
|
|
10970
|
-
modelError = _e.modelError;
|
|
10971
|
-
var _f = useFrameLoop(React.useCallback(function () {
|
|
10972
|
-
return __awaiter(_this, void 0, void 0, function () {
|
|
10973
|
-
var vw, vh, ctx, faces, e_1;
|
|
10974
|
-
var _a;
|
|
10975
|
-
return __generator(this, function (_b) {
|
|
10976
|
-
switch (_b.label) {
|
|
10977
|
-
case 0:
|
|
10978
|
-
if (!videoLoaded || !cameraReady || !ready || modelError || !videoRef.current || !detector.current || !canvasRef.current) return [2 /*return*/];
|
|
10979
|
-
vw = videoRef.current.videoWidth;
|
|
10980
|
-
vh = videoRef.current.videoHeight;
|
|
10981
|
-
ctx = canvasRef.current.getContext('2d');
|
|
10982
|
-
canvasRef.current.width = vw;
|
|
10983
|
-
canvasRef.current.height = vh;
|
|
10984
|
-
if (!(ctx && videoRef.current.readyState === 4)) return [3 /*break*/, 4];
|
|
10985
|
-
ctx.translate(vw, 0);
|
|
10986
|
-
ctx.scale(-1, 1);
|
|
10987
|
-
ctx.drawImage(videoRef.current, 0, 0, vw, vh);
|
|
10988
|
-
_b.label = 1;
|
|
10989
|
-
case 1:
|
|
10990
|
-
_b.trys.push([1, 3,, 4]);
|
|
10991
|
-
faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
|
|
10992
|
-
return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces)];
|
|
10993
|
-
case 2:
|
|
10994
|
-
_b.sent();
|
|
10995
|
-
return [3 /*break*/, 4];
|
|
10996
|
-
case 3:
|
|
10997
|
-
e_1 = _b.sent();
|
|
10998
|
-
error('caught face detection error', e_1);
|
|
10999
|
-
return [3 /*break*/, 4];
|
|
11000
|
-
case 4:
|
|
11001
|
-
return [2 /*return*/];
|
|
11002
|
-
}
|
|
11003
|
-
});
|
|
11004
|
-
});
|
|
11005
|
-
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
11006
|
-
throttleMs: throttleMs,
|
|
11007
|
-
autoStart: autoStart
|
|
11008
|
-
}),
|
|
11009
|
-
start = _f.start,
|
|
11010
|
-
stop = _f.stop;
|
|
11011
|
-
var onPredictionMade = React.useCallback(function (handler) {
|
|
11012
|
-
onPredictionHandler.current = handler;
|
|
10099
|
+
}, [cameraReady, detector, modelError, ready, videoLoaded, videoRef]), {
|
|
10100
|
+
throttleMs: throttleMs,
|
|
10101
|
+
autoStart: autoStart
|
|
10102
|
+
}),
|
|
10103
|
+
start = _f.start,
|
|
10104
|
+
stop = _f.stop;
|
|
10105
|
+
var onPredictionMade = React.useCallback(function (handler) {
|
|
10106
|
+
onPredictionHandler.current = handler;
|
|
11013
10107
|
}, []);
|
|
11014
10108
|
var value = React.useMemo(function () {
|
|
11015
10109
|
return {
|
|
@@ -11173,11 +10267,11 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
11173
10267
|
className: classNames.container
|
|
11174
10268
|
}, /*#__PURE__*/React__namespace.default.createElement(StyledOverlayInner$1, {
|
|
11175
10269
|
className: classNames.inner
|
|
11176
|
-
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10270
|
+
}, silentFallback ? invalidSelfie && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
11177
10271
|
className: classNames.heading
|
|
11178
10272
|
}, verbiage.livenessFailedText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
11179
10273
|
className: classNames.description
|
|
11180
|
-
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10274
|
+
}, verbiage.livenessFailedReasonText || verbiage.descriptionText))) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(Heading$6, {
|
|
11181
10275
|
className: classNames.heading
|
|
11182
10276
|
}, invalidSelfie ? verbiage.livenessFailedText : verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(Description$2, {
|
|
11183
10277
|
className: classNames.description
|
|
@@ -11222,21 +10316,18 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
11222
10316
|
}
|
|
11223
10317
|
}, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
11224
10318
|
};
|
|
11225
|
-
var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
11226
|
-
var Heading$
|
|
11227
|
-
var Description$2 = styled__default.default.p(templateObject_3$
|
|
11228
|
-
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$
|
|
11229
|
-
var StyledButtonsRow$7 = styled__default.default(ButtonsRow
|
|
11230
|
-
var templateObject_1$
|
|
10319
|
+
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"])));
|
|
10320
|
+
var Heading$6 = styled__default.default.h3(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10321
|
+
var Description$2 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
10322
|
+
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10323
|
+
var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
10324
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$3;
|
|
11231
10325
|
|
|
11232
10326
|
var initialState$3 = {
|
|
11233
10327
|
videoWidth: 0,
|
|
11234
10328
|
videoHeight: 0,
|
|
11235
|
-
requireVerticalFaceCentering: true,
|
|
11236
|
-
busy: false,
|
|
11237
10329
|
frame: null,
|
|
11238
10330
|
faces: [],
|
|
11239
|
-
faceNotDetected: false,
|
|
11240
10331
|
faceNotCentered: false,
|
|
11241
10332
|
faceLookingAway: false,
|
|
11242
10333
|
faceTooClose: false,
|
|
@@ -11250,11 +10341,9 @@ var reducer$3 = function reducer(state, action) {
|
|
|
11250
10341
|
return _assign(_assign({}, state), action.payload);
|
|
11251
10342
|
case 'facesDetected':
|
|
11252
10343
|
{
|
|
11253
|
-
if (state.busy) return state;
|
|
11254
10344
|
var faces = action.payload.faces;
|
|
11255
10345
|
var face = faces[0];
|
|
11256
|
-
var
|
|
11257
|
-
var faceNotCentered = state.requireVerticalFaceCentering,
|
|
10346
|
+
var faceNotCentered = true,
|
|
11258
10347
|
faceLookingAway = false,
|
|
11259
10348
|
faceTooClose = false,
|
|
11260
10349
|
faceTooFar = false,
|
|
@@ -11272,10 +10361,8 @@ var reducer$3 = function reducer(state, action) {
|
|
|
11272
10361
|
var fTH = face.box.height * 0.2;
|
|
11273
10362
|
var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
|
|
11274
10363
|
if (nose) {
|
|
10364
|
+
faceNotCentered = Math.abs(vCX - fCX) > vTX || Math.abs(vCY + 50 - fCY) > vTY;
|
|
11275
10365
|
faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
|
|
11276
|
-
var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
|
|
11277
|
-
var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
|
|
11278
|
-
faceNotCentered = faceNotCenteredHorizontally || state.requireVerticalFaceCentering && faceNotCenteredVertically;
|
|
11279
10366
|
}
|
|
11280
10367
|
var isMobile = state.videoWidth < state.videoHeight;
|
|
11281
10368
|
var tooCloseMultiple = isMobile ? 2 : 4.5;
|
|
@@ -11283,7 +10370,7 @@ var reducer$3 = function reducer(state, action) {
|
|
|
11283
10370
|
faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
|
|
11284
10371
|
faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
|
|
11285
10372
|
}
|
|
11286
|
-
var faceReady = !
|
|
10373
|
+
var faceReady = !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
|
|
11287
10374
|
if (!faceReady) {
|
|
11288
10375
|
faceReadyAt = null;
|
|
11289
10376
|
} else if (!state.faceReady) {
|
|
@@ -11291,31 +10378,20 @@ var reducer$3 = function reducer(state, action) {
|
|
|
11291
10378
|
}
|
|
11292
10379
|
return _assign(_assign({}, state), {
|
|
11293
10380
|
faces: faces,
|
|
11294
|
-
faceNotDetected: faceNotDetected,
|
|
11295
10381
|
faceNotCentered: faceNotCentered,
|
|
11296
10382
|
faceLookingAway: faceLookingAway,
|
|
11297
10383
|
faceTooClose: faceTooClose,
|
|
11298
10384
|
faceTooFar: faceTooFar,
|
|
11299
10385
|
faceReady: faceReady,
|
|
11300
|
-
faceReadyAt: faceReadyAt
|
|
11301
|
-
busy: faceReady
|
|
10386
|
+
faceReadyAt: faceReadyAt
|
|
11302
10387
|
});
|
|
11303
10388
|
}
|
|
11304
|
-
case 'captureStarted':
|
|
11305
|
-
return _assign(_assign({}, state), {
|
|
11306
|
-
busy: true
|
|
11307
|
-
});
|
|
11308
|
-
case 'captureCompleted':
|
|
11309
|
-
return _assign(_assign({}, state), {
|
|
11310
|
-
busy: false
|
|
11311
|
-
});
|
|
11312
10389
|
}
|
|
11313
10390
|
};
|
|
11314
10391
|
var SelfieCapture = function SelfieCapture(_a) {
|
|
11315
10392
|
var _b;
|
|
11316
10393
|
var onGuidanceSatisfied = _a.onGuidanceSatisfied,
|
|
11317
10394
|
onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
|
|
11318
|
-
onSelfieCaptureStarted = _a.onSelfieCaptureStarted,
|
|
11319
10395
|
onSelfieCaptured = _a.onSelfieCaptured,
|
|
11320
10396
|
onTimeout = _a.onTimeout,
|
|
11321
10397
|
onExit = _a.onExit,
|
|
@@ -11323,91 +10399,80 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
11323
10399
|
timeoutDurationMs = _c === void 0 ? 15000 : _c,
|
|
11324
10400
|
guidanceMessage = _a.guidanceMessage,
|
|
11325
10401
|
guidanceSatisfied = _a.guidanceSatisfied,
|
|
11326
|
-
|
|
11327
|
-
|
|
11328
|
-
|
|
11329
|
-
|
|
11330
|
-
|
|
11331
|
-
|
|
11332
|
-
|
|
11333
|
-
|
|
11334
|
-
|
|
11335
|
-
|
|
11336
|
-
|
|
11337
|
-
|
|
11338
|
-
|
|
11339
|
-
|
|
11340
|
-
|
|
11341
|
-
|
|
11342
|
-
|
|
11343
|
-
_m = _k.height,
|
|
11344
|
-
height = _m === void 0 ? 1 : _m;
|
|
11345
|
-
var _o = React.useReducer(reducer$3, initialState$3),
|
|
11346
|
-
state = _o[0],
|
|
11347
|
-
dispatch = _o[1];
|
|
10402
|
+
_d = _a.classNames,
|
|
10403
|
+
classNames = _d === void 0 ? {} : _d,
|
|
10404
|
+
_e = _a.colors,
|
|
10405
|
+
colors = _e === void 0 ? {} : _e,
|
|
10406
|
+
_f = _a.verbiage,
|
|
10407
|
+
rawVerbiage = _f === void 0 ? {} : _f,
|
|
10408
|
+
_g = _a.debugMode,
|
|
10409
|
+
debugMode = _g === void 0 ? false : _g;
|
|
10410
|
+
var _h = useResizeObserver__default.default(),
|
|
10411
|
+
ref = _h.ref,
|
|
10412
|
+
_j = _h.width,
|
|
10413
|
+
width = _j === void 0 ? 1 : _j,
|
|
10414
|
+
_k = _h.height,
|
|
10415
|
+
height = _k === void 0 ? 1 : _k;
|
|
10416
|
+
var _l = React.useReducer(reducer$3, initialState$3),
|
|
10417
|
+
state = _l[0],
|
|
10418
|
+
dispatch = _l[1];
|
|
11348
10419
|
var lastPredictionCanvas = React.useRef(null);
|
|
11349
|
-
var
|
|
11350
|
-
cameraRef =
|
|
11351
|
-
cameraReady =
|
|
11352
|
-
videoRef =
|
|
11353
|
-
var
|
|
11354
|
-
onPredictionMade =
|
|
11355
|
-
|
|
11356
|
-
guidanceError = _q.error;
|
|
10420
|
+
var _m = React.useContext(CameraStateContext),
|
|
10421
|
+
cameraRef = _m.cameraRef,
|
|
10422
|
+
cameraReady = _m.cameraReady,
|
|
10423
|
+
videoRef = _m.videoRef;
|
|
10424
|
+
var _o = React.useContext(SelfieGuidanceModelsContext),
|
|
10425
|
+
onPredictionMade = _o.onPredictionMade,
|
|
10426
|
+
guidanceError = _o.error;
|
|
11357
10427
|
React.useEffect(function () {
|
|
11358
10428
|
if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
|
|
11359
10429
|
dispatch({
|
|
11360
10430
|
type: 'configure',
|
|
11361
10431
|
payload: {
|
|
11362
10432
|
videoWidth: videoRef.current.videoWidth,
|
|
11363
|
-
videoHeight: videoRef.current.videoHeight
|
|
11364
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering
|
|
10433
|
+
videoHeight: videoRef.current.videoHeight
|
|
11365
10434
|
}
|
|
11366
10435
|
});
|
|
11367
10436
|
}
|
|
11368
|
-
}, [cameraReady,
|
|
11369
|
-
onPredictionMade(useDebounce.useThrottledCallback(
|
|
11370
|
-
|
|
11371
|
-
|
|
11372
|
-
|
|
11373
|
-
|
|
11374
|
-
type: 'facesDetected',
|
|
11375
|
-
payload: {
|
|
11376
|
-
faces: prediction
|
|
11377
|
-
}
|
|
11378
|
-
});
|
|
10437
|
+
}, [cameraReady, videoRef]);
|
|
10438
|
+
onPredictionMade(useDebounce.useThrottledCallback(function (prediction) {
|
|
10439
|
+
dispatch({
|
|
10440
|
+
type: 'facesDetected',
|
|
10441
|
+
payload: {
|
|
10442
|
+
faces: prediction
|
|
11379
10443
|
}
|
|
11380
|
-
resolve();
|
|
11381
10444
|
});
|
|
11382
|
-
},
|
|
10445
|
+
}, 16));
|
|
10446
|
+
var _p = React.useState(false),
|
|
10447
|
+
captureReady = _p[0],
|
|
10448
|
+
setCaptureReady = _p[1];
|
|
11383
10449
|
React.useEffect(function () {
|
|
11384
|
-
|
|
10450
|
+
var timer;
|
|
10451
|
+
if (state.faceReady) {
|
|
10452
|
+
onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied();
|
|
10453
|
+
timer = setTimeout(function () {
|
|
10454
|
+
setCaptureReady(true);
|
|
10455
|
+
}, 1000);
|
|
10456
|
+
} else {
|
|
10457
|
+
onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
|
|
10458
|
+
}
|
|
10459
|
+
return function () {
|
|
10460
|
+
if (timer) clearTimeout(timer);
|
|
10461
|
+
};
|
|
11385
10462
|
}, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
|
|
11386
10463
|
React.useEffect(function () {
|
|
11387
|
-
if (
|
|
11388
|
-
|
|
11389
|
-
|
|
11390
|
-
type: 'captureStarted'
|
|
11391
|
-
});
|
|
11392
|
-
onSelfieCaptureStarted === null || onSelfieCaptureStarted === void 0 ? void 0 : onSelfieCaptureStarted();
|
|
11393
|
-
var frame = lastPredictionCanvas.current;
|
|
11394
|
-
if (!frame) return;
|
|
11395
|
-
var ctx = frame.getContext('2d');
|
|
10464
|
+
if (captureReady && videoRef.current && lastPredictionCanvas.current && state.faces.length > 0) {
|
|
10465
|
+
drawToCanvas(lastPredictionCanvas.current, videoRef.current);
|
|
10466
|
+
var ctx = lastPredictionCanvas.current.getContext('2d');
|
|
11396
10467
|
if (!ctx) return;
|
|
11397
|
-
var imageData = ctx.getImageData(0, 0,
|
|
10468
|
+
var imageData = ctx.getImageData(0, 0, videoRef.current.videoWidth, videoRef.current.videoHeight);
|
|
11398
10469
|
onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
|
|
11399
|
-
clearCanvas(
|
|
11400
|
-
|
|
11401
|
-
|
|
11402
|
-
|
|
11403
|
-
|
|
11404
|
-
|
|
11405
|
-
if (timer) clearTimeout(timer);
|
|
11406
|
-
};
|
|
11407
|
-
}, [onSelfieCaptureStarted, onSelfieCaptured, state.faceReady, state.faces]);
|
|
11408
|
-
var _r = useTimeout(timeoutDurationMs, onTimeout),
|
|
11409
|
-
timedOut = _r.timedOut,
|
|
11410
|
-
timeoutStartedAt = _r.timeoutStartedAt;
|
|
10470
|
+
clearCanvas(lastPredictionCanvas.current);
|
|
10471
|
+
}
|
|
10472
|
+
}, [captureReady, onSelfieCaptured, state.faces, videoRef]);
|
|
10473
|
+
var _q = useTimeout(timeoutDurationMs, onTimeout),
|
|
10474
|
+
timedOut = _q.timedOut,
|
|
10475
|
+
timeoutStartedAt = _q.timeoutStartedAt;
|
|
11411
10476
|
var debugScalingDetails = useDebugScalingDetails({
|
|
11412
10477
|
enabled: debugMode,
|
|
11413
10478
|
pageWidth: width,
|
|
@@ -11422,26 +10487,24 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
11422
10487
|
guidanceLookStraightText: 'Look straight into the camera...',
|
|
11423
10488
|
guidanceMoveBackText: 'Move back...',
|
|
11424
10489
|
guidanceMoveForwardText: 'Move forward...',
|
|
11425
|
-
guidanceMoveToCenterText: 'Move to the center...'
|
|
11426
|
-
guidanceNoFaceDetectedText: 'Waiting for face to be detected...'
|
|
10490
|
+
guidanceMoveToCenterText: 'Move to the center...'
|
|
11427
10491
|
});
|
|
11428
10492
|
var satisfied = state.faceReady;
|
|
11429
10493
|
if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
|
|
11430
|
-
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText :
|
|
10494
|
+
guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
|
|
11431
10495
|
if (guidanceError) {
|
|
11432
10496
|
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
11433
10497
|
classNames: classNames.fallback
|
|
11434
10498
|
});
|
|
11435
10499
|
}
|
|
11436
|
-
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11437
10500
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
11438
10501
|
ref: ref,
|
|
11439
10502
|
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
11440
10503
|
}, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11441
10504
|
ref: lastPredictionCanvas
|
|
11442
|
-
}), /*#__PURE__*/React__namespace.default.createElement(
|
|
10505
|
+
}), /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideOverlay, {
|
|
11443
10506
|
classNames: classNames.guides,
|
|
11444
|
-
|
|
10507
|
+
variant: satisfied ? 'satisfied' : 'unsatisfied'
|
|
11445
10508
|
}), guidanceMessage !== '' && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
|
|
11446
10509
|
className: classNames.guidanceMessageContainer
|
|
11447
10510
|
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
@@ -11473,26 +10536,15 @@ var initialState$2 = {
|
|
|
11473
10536
|
phoneDetected: false,
|
|
11474
10537
|
timesLivenessCheckFailed: 0
|
|
11475
10538
|
};
|
|
10539
|
+
/** 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.
|
|
10540
|
+
* There may also be some crossing of wires in how error/failed are used.
|
|
10541
|
+
*/
|
|
11476
10542
|
var reducer$2 = function reducer(state, action) {
|
|
11477
10543
|
var _a, _b;
|
|
11478
10544
|
switch (action.type) {
|
|
11479
|
-
case 'resetLivenessCheck':
|
|
11480
|
-
return _assign(_assign({}, initialState$2), {
|
|
11481
|
-
timesLivenessCheckFailed: state.timesLivenessCheckFailed
|
|
11482
|
-
});
|
|
11483
|
-
case 'guidanceUnsatisfied':
|
|
11484
|
-
return _assign({}, state);
|
|
11485
|
-
case 'guidanceSatisfied':
|
|
11486
|
-
return _assign(_assign({}, state), {
|
|
11487
|
-
requestState: 'GUIDANCE_SATISFIED'
|
|
11488
|
-
});
|
|
11489
|
-
case 'selfieCaptureStarted':
|
|
11490
|
-
return _assign(_assign({}, state), {
|
|
11491
|
-
requestState: 'CAPTURE_STARTED'
|
|
11492
|
-
});
|
|
11493
10545
|
case 'livenessReady':
|
|
11494
10546
|
{
|
|
11495
|
-
var allowedStates = ['
|
|
10547
|
+
var allowedStates = ['CAPTURING', 'FAILED', 'ERROR'];
|
|
11496
10548
|
if (allowedStates.includes(state.requestState)) {
|
|
11497
10549
|
return _assign(_assign({}, state), {
|
|
11498
10550
|
requestState: 'CAPTURED',
|
|
@@ -11557,45 +10609,36 @@ var reducer$2 = function reducer(state, action) {
|
|
|
11557
10609
|
}
|
|
11558
10610
|
};
|
|
11559
10611
|
var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
11560
|
-
var _b, _c, _d
|
|
10612
|
+
var _b, _c, _d;
|
|
11561
10613
|
var onCapture = _a.onCapture,
|
|
11562
10614
|
onSuccess = _a.onSuccess,
|
|
11563
10615
|
onTimeout = _a.onTimeout,
|
|
11564
10616
|
onExit = _a.onExit,
|
|
11565
|
-
|
|
11566
|
-
timeoutDurationMs =
|
|
11567
|
-
|
|
11568
|
-
silentFallback =
|
|
11569
|
-
|
|
11570
|
-
|
|
11571
|
-
_h = _a.
|
|
11572
|
-
|
|
11573
|
-
_j = _a.
|
|
11574
|
-
|
|
11575
|
-
_k = _a.colors,
|
|
11576
|
-
colors = _k === void 0 ? {} : _k,
|
|
11577
|
-
_l = _a.verbiage,
|
|
11578
|
-
rawVerbiage = _l === void 0 ? {} : _l,
|
|
10617
|
+
_e = _a.timeoutDurationMs,
|
|
10618
|
+
timeoutDurationMs = _e === void 0 ? 15000 : _e,
|
|
10619
|
+
_f = _a.silentFallback,
|
|
10620
|
+
silentFallback = _f === void 0 ? false : _f,
|
|
10621
|
+
_g = _a.classNames,
|
|
10622
|
+
classNames = _g === void 0 ? {} : _g,
|
|
10623
|
+
_h = _a.colors,
|
|
10624
|
+
colors = _h === void 0 ? {} : _h,
|
|
10625
|
+
_j = _a.verbiage,
|
|
10626
|
+
rawVerbiage = _j === void 0 ? {} : _j,
|
|
11579
10627
|
debugMode = _a.debugMode;
|
|
11580
|
-
var
|
|
11581
|
-
checkLiveness =
|
|
11582
|
-
submissionError =
|
|
10628
|
+
var _k = React.useContext(SubmissionContext),
|
|
10629
|
+
checkLiveness = _k.checkLiveness,
|
|
10630
|
+
submissionError = _k.submissionError;
|
|
11583
10631
|
var modelError = React.useContext(SelfieGuidanceModelsContext).error;
|
|
11584
|
-
var
|
|
11585
|
-
state =
|
|
11586
|
-
dispatch =
|
|
11587
|
-
var
|
|
11588
|
-
imageUrl =
|
|
11589
|
-
setImageUrl =
|
|
10632
|
+
var _l = React.useReducer(reducer$2, initialState$2),
|
|
10633
|
+
state = _l[0],
|
|
10634
|
+
dispatch = _l[1];
|
|
10635
|
+
var _m = React.useState(null),
|
|
10636
|
+
imageUrl = _m[0],
|
|
10637
|
+
setImageUrl = _m[1];
|
|
11590
10638
|
var rawCanvas = React.useRef(null);
|
|
11591
10639
|
var cropCanvas = React.useRef(null);
|
|
11592
10640
|
var resizeCanvas = React.useRef(null);
|
|
11593
10641
|
var theme = styled.useTheme();
|
|
11594
|
-
var onSelfieCaptureStarted = React.useCallback(function () {
|
|
11595
|
-
dispatch({
|
|
11596
|
-
type: 'selfieCaptureStarted'
|
|
11597
|
-
});
|
|
11598
|
-
}, []);
|
|
11599
10642
|
var onSelfieCaptured = React.useCallback(function (frame, face) {
|
|
11600
10643
|
onCapture === null || onCapture === void 0 ? void 0 : onCapture();
|
|
11601
10644
|
dispatch({
|
|
@@ -11705,53 +10748,24 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
|
11705
10748
|
});
|
|
11706
10749
|
});
|
|
11707
10750
|
}, [checkLiveness, onTimeout]);
|
|
11708
|
-
React.useEffect(function () {
|
|
11709
|
-
if (state.requestState === 'FAILED' || state.requestState === 'ERROR') {
|
|
11710
|
-
setTimeout(function () {
|
|
11711
|
-
dispatch({
|
|
11712
|
-
type: 'resetLivenessCheck'
|
|
11713
|
-
});
|
|
11714
|
-
}, 1000);
|
|
11715
|
-
}
|
|
11716
|
-
}, [state.requestState]);
|
|
11717
10751
|
React.useEffect(function callSuccessIfAvailable() {
|
|
11718
10752
|
if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
|
|
11719
10753
|
}, [onSuccess, state.imageUrl, isPassed]);
|
|
11720
10754
|
React.useEffect(function timeoutOnTooManyLivenessCheckFailures() {
|
|
11721
10755
|
if (modelError) return;
|
|
11722
10756
|
var allowedFailures = 2;
|
|
11723
|
-
if (state.timesLivenessCheckFailed
|
|
10757
|
+
if (state.timesLivenessCheckFailed >= allowedFailures) {
|
|
11724
10758
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
|
|
11725
10759
|
}
|
|
11726
10760
|
}, [modelError, onTimeout, state.timesLivenessCheckFailed]);
|
|
11727
10761
|
useTimeout(timeoutDurationMs, onTimeout, state.requestState === 'PASSED' || !!modelError, state.requestState === 'IN_PROGRESS');
|
|
11728
10762
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11729
|
-
guidanceLivenessCheckFailedText: 'Could not verify your face.',
|
|
11730
|
-
guidanceLivenessCheckErrorText: 'An error occurred while verifying your face.',
|
|
11731
10763
|
guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
|
|
11732
10764
|
guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
|
|
11733
10765
|
guidanceRemoveMaskText: 'Please remove your mask...',
|
|
11734
10766
|
progressPreviewText: 'Processing...'
|
|
11735
10767
|
});
|
|
11736
|
-
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText :
|
|
11737
|
-
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);
|
|
11738
|
-
var guidesByRequestState = React.useCallback(function (props) {
|
|
11739
|
-
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
|
|
11740
|
-
var status = ['IN_PROGRESS', 'CAPTURE_STARTED', 'GUIDANCE_SATISFIED', 'CAPTURED'].includes(state.requestState) ? 'processing' : ['FAILED', 'ERROR'].includes(state.requestState) ? 'failure' : 'ready';
|
|
11741
|
-
return /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, _assign({}, props, {
|
|
11742
|
-
status: status
|
|
11743
|
-
}));
|
|
11744
|
-
}, [guidesComponent, state.requestState]);
|
|
11745
|
-
var onGuidanceSatisfied = React.useCallback(function () {
|
|
11746
|
-
dispatch({
|
|
11747
|
-
type: 'guidanceSatisfied'
|
|
11748
|
-
});
|
|
11749
|
-
}, []);
|
|
11750
|
-
var onGuidanceNotSatisfied = React.useCallback(function () {
|
|
11751
|
-
dispatch({
|
|
11752
|
-
type: 'guidanceUnsatisfied'
|
|
11753
|
-
});
|
|
11754
|
-
}, []);
|
|
10768
|
+
var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
|
|
11755
10769
|
if (modelError) {
|
|
11756
10770
|
return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
|
|
11757
10771
|
key: state.timesLivenessCheckFailed,
|
|
@@ -11768,25 +10782,19 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
|
|
|
11768
10782
|
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
11769
10783
|
ref: resizeCanvas
|
|
11770
10784
|
}), /*#__PURE__*/React__namespace.default.createElement(SelfieCapture, {
|
|
11771
|
-
shouldCapture: state.requestState === 'CAPTURING',
|
|
11772
|
-
onSelfieCaptureStarted: onSelfieCaptureStarted,
|
|
11773
10785
|
onSelfieCaptured: onSelfieCaptured,
|
|
11774
10786
|
onExit: onExit,
|
|
11775
10787
|
timeoutDurationMs: timeoutDurationMs,
|
|
11776
10788
|
guidanceMessage: guidanceMessage,
|
|
11777
10789
|
guidanceSatisfied: guidanceMessage ? false : undefined,
|
|
11778
|
-
onGuidanceSatisfied: onGuidanceSatisfied,
|
|
11779
|
-
onGuidanceNotSatisfied: onGuidanceNotSatisfied,
|
|
11780
|
-
guidesComponent: guidesByRequestState,
|
|
11781
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
11782
10790
|
classNames: classNames,
|
|
11783
10791
|
colors: colors,
|
|
11784
10792
|
verbiage: verbiage,
|
|
11785
10793
|
debugMode: debugMode
|
|
11786
|
-
}), !
|
|
10794
|
+
}), !((_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, {
|
|
11787
10795
|
classNames: classNames.imagePreview,
|
|
11788
10796
|
imageUrl: imageUrl,
|
|
11789
|
-
text: (
|
|
10797
|
+
text: (_d = verbiage.progressPreviewText) !== null && _d !== void 0 ? _d : ''
|
|
11790
10798
|
})));
|
|
11791
10799
|
};
|
|
11792
10800
|
|
|
@@ -11809,7 +10817,7 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11809
10817
|
className: classNames.container
|
|
11810
10818
|
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11811
10819
|
className: classNames.inner
|
|
11812
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Heading$
|
|
10820
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Heading$5, {
|
|
11813
10821
|
className: classNames.heading
|
|
11814
10822
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
11815
10823
|
className: classNames.imageContainer
|
|
@@ -11817,7 +10825,7 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11817
10825
|
alt: verbiage.headingText,
|
|
11818
10826
|
src: imageUrl,
|
|
11819
10827
|
className: classNames.image
|
|
11820
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
10828
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
11821
10829
|
className: classNames.buttonsRow
|
|
11822
10830
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11823
10831
|
variant: "warning",
|
|
@@ -11833,8 +10841,8 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
11833
10841
|
finished: true
|
|
11834
10842
|
}, verbiage.doneBtnText))));
|
|
11835
10843
|
};
|
|
11836
|
-
var Heading$
|
|
11837
|
-
var templateObject_1$
|
|
10844
|
+
var Heading$5 = styled__default.default.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
10845
|
+
var templateObject_1$i;
|
|
11838
10846
|
|
|
11839
10847
|
var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
11840
10848
|
var _b = _a.canRetry,
|
|
@@ -11849,48 +10857,42 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
|
11849
10857
|
colors = _e === void 0 ? {} : _e,
|
|
11850
10858
|
_f = _a.verbiage,
|
|
11851
10859
|
rawVerbiage = _f === void 0 ? {} : _f;
|
|
11852
|
-
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/
|
|
10860
|
+
assets.imageUrl || (assets.imageUrl = "".concat(DEFAULT_CDN_URL, "/manual_capture.png"));
|
|
11853
10861
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11854
10862
|
headingText: 'Live face not detected, please try again',
|
|
11855
10863
|
retryBtnText: 'Retry',
|
|
11856
10864
|
exitBtnText: 'Exit'
|
|
11857
10865
|
});
|
|
11858
|
-
return /*#__PURE__*/React__namespace.default.createElement(
|
|
10866
|
+
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
11859
10867
|
className: classNames.container
|
|
11860
10868
|
}, /*#__PURE__*/React__namespace.default.createElement(OverlayInner$2, {
|
|
11861
10869
|
className: classNames.inner
|
|
11862
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
10870
|
+
}, /*#__PURE__*/React__namespace.default.createElement("h3", {
|
|
10871
|
+
className: classNames.heading
|
|
10872
|
+
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ImageContainer$4, {
|
|
11863
10873
|
className: classNames.imageContainer
|
|
11864
10874
|
}, /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
11865
10875
|
alt: verbiage.headingText,
|
|
11866
10876
|
src: assets.imageUrl,
|
|
11867
10877
|
className: classNames.image
|
|
11868
|
-
})), /*#__PURE__*/React__namespace.default.createElement(
|
|
11869
|
-
className: classNames.heading
|
|
11870
|
-
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
10878
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
11871
10879
|
className: classNames.buttonsRow
|
|
11872
|
-
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(
|
|
11873
|
-
variant: "
|
|
10880
|
+
}, canRetry && ( /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
10881
|
+
variant: "warning",
|
|
11874
10882
|
className: classNames.retryBtn,
|
|
11875
10883
|
onClick: onRetryClick,
|
|
11876
10884
|
colors: colors.retryBtn,
|
|
11877
10885
|
finished: true
|
|
11878
|
-
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(
|
|
10886
|
+
}, verbiage.retryBtnText)), /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
11879
10887
|
variant: "secondary",
|
|
11880
10888
|
className: classNames.exitBtn,
|
|
11881
10889
|
onClick: onExitClick,
|
|
11882
10890
|
colors: colors.exitBtn,
|
|
11883
10891
|
finished: true
|
|
11884
|
-
}, verbiage.exitBtnText))))
|
|
10892
|
+
}, verbiage.exitBtnText))));
|
|
11885
10893
|
};
|
|
11886
|
-
var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$
|
|
11887
|
-
var
|
|
11888
|
-
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
11889
|
-
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"])));
|
|
11890
|
-
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"])));
|
|
11891
|
-
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"])));
|
|
11892
|
-
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"])));
|
|
11893
|
-
var templateObject_1$g, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$3, templateObject_6$3, templateObject_7$2;
|
|
10894
|
+
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"])));
|
|
10895
|
+
var templateObject_1$h;
|
|
11894
10896
|
|
|
11895
10897
|
var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
11896
10898
|
var _b;
|
|
@@ -11931,11 +10933,11 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
|
11931
10933
|
finished: true
|
|
11932
10934
|
}, verbiage.retryBtnText)));
|
|
11933
10935
|
};
|
|
11934
|
-
var StyledOverlayInner = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
10936
|
+
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"])));
|
|
11935
10937
|
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
11936
10938
|
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"])));
|
|
11937
10939
|
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"])));
|
|
11938
|
-
var templateObject_1$
|
|
10940
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$6;
|
|
11939
10941
|
|
|
11940
10942
|
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
11941
10943
|
var onDismissed = _a.onDismissed,
|
|
@@ -12014,9 +11016,273 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
|
|
|
12014
11016
|
}
|
|
12015
11017
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
12016
11018
|
};
|
|
12017
|
-
var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$
|
|
12018
|
-
var StyledButtonsRow$6 = styled__default.default(ButtonsRow
|
|
12019
|
-
var templateObject_1$
|
|
11019
|
+
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"])));
|
|
11020
|
+
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"])));
|
|
11021
|
+
var templateObject_1$f, templateObject_2$b;
|
|
11022
|
+
|
|
11023
|
+
function SelfieCaptureLoadingGraphic(_a) {
|
|
11024
|
+
var _b, _c, _d;
|
|
11025
|
+
var _e = _a.width,
|
|
11026
|
+
width = _e === void 0 ? 840 : _e,
|
|
11027
|
+
_f = _a.height,
|
|
11028
|
+
height = _f === void 0 ? 740 : _f,
|
|
11029
|
+
className = _a.className;
|
|
11030
|
+
var _g = React.useState(1),
|
|
11031
|
+
frame = _g[0],
|
|
11032
|
+
setFrame = _g[1];
|
|
11033
|
+
React.useEffect(function () {
|
|
11034
|
+
var i = setInterval(function () {
|
|
11035
|
+
setFrame(function (n) {
|
|
11036
|
+
return (n + 1) % 10;
|
|
11037
|
+
});
|
|
11038
|
+
}, 750);
|
|
11039
|
+
return function () {
|
|
11040
|
+
clearInterval(i);
|
|
11041
|
+
};
|
|
11042
|
+
}, []);
|
|
11043
|
+
var theme = styled.useTheme();
|
|
11044
|
+
var accentColor = (_d = (_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.loadingGraphicAccentColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
11045
|
+
return /*#__PURE__*/React__namespace.default.createElement("svg", {
|
|
11046
|
+
width: width,
|
|
11047
|
+
height: height,
|
|
11048
|
+
className: className,
|
|
11049
|
+
viewBox: "0 0 840 740",
|
|
11050
|
+
fill: "none",
|
|
11051
|
+
preserveAspectRatio: "xMidYMax slice",
|
|
11052
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
11053
|
+
}, /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
11054
|
+
clipPath: "url(#clip0_428_1188)"
|
|
11055
|
+
}, /*#__PURE__*/React__namespace.default.createElement("mask", {
|
|
11056
|
+
id: "mask0_428_1188",
|
|
11057
|
+
style: {
|
|
11058
|
+
maskType: 'alpha'
|
|
11059
|
+
},
|
|
11060
|
+
maskUnits: "userSpaceOnUse",
|
|
11061
|
+
x: "0",
|
|
11062
|
+
y: "0",
|
|
11063
|
+
width: "840",
|
|
11064
|
+
height: "740"
|
|
11065
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
11066
|
+
width: "840",
|
|
11067
|
+
height: "740",
|
|
11068
|
+
fill: "#D9D9D9"
|
|
11069
|
+
})), /*#__PURE__*/React__namespace.default.createElement("g", {
|
|
11070
|
+
mask: "url(#mask0_428_1188)"
|
|
11071
|
+
}, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11072
|
+
d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
|
|
11073
|
+
fill: "#D2D4DA"
|
|
11074
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11075
|
+
d: "M574.88 244.97C647.073 163.885 598.921 362.155 558.945 338.928C488.709 298.211 574.88 244.97 574.88 244.97Z",
|
|
11076
|
+
fill: "#F7A69C"
|
|
11077
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11078
|
+
d: "M816.983 742.838C779.698 781.432 736.86 814.612 689.786 841.127C617.161 882.012 534.399 906.862 446.153 911.027C437.335 911.513 428.448 911.721 419.491 911.721C374.986 911.721 331.731 906.446 290.281 896.519C232.514 882.706 178.358 859.8 129.271 829.397C89.9033 805.033 53.9382 775.948 22 742.838L31.512 705.355C45.8842 649.061 90.2505 605.33 146.837 591.795L153.085 590.337L222.447 573.747L241.401 569.235C249.386 567.292 257.023 564.585 264.244 561.114C270.285 558.199 276.047 554.797 281.463 550.91C287.295 546.745 292.78 542.025 297.71 536.819C310.971 522.867 320.761 505.653 325.76 486.286L333.119 457.688L335.064 449.983L335.202 449.358L344.645 412.916L347.422 402.019H491.491L502.253 443.667L503.225 447.415L503.78 449.497V449.983L505.863 457.757L513.223 486.286C520.097 512.802 535.996 535.5 557.589 550.91C569.393 559.448 582.932 565.765 597.581 569.235L615.078 573.4L692.146 591.795C748.732 605.33 793.099 649.061 807.471 705.355L816.983 742.838Z",
|
|
11079
|
+
fill: "#F7A69C"
|
|
11080
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11081
|
+
d: "M503.781 449.497C491.561 503.154 458.442 541.609 419.561 541.609C380.68 541.609 347.492 503.015 335.272 449.358L344.645 412.916L347.492 402.019H491.561L502.253 443.667L503.225 447.415L503.781 449.497Z",
|
|
11082
|
+
fill: "#DC968D"
|
|
11083
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11084
|
+
d: "M264.123 244.97C191.93 163.885 240.082 362.155 280.058 338.928C350.294 298.211 264.123 244.97 264.123 244.97Z",
|
|
11085
|
+
fill: "#F7A69C"
|
|
11086
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11087
|
+
d: "M586.473 187.324C586.473 193.432 586.126 199.402 585.432 205.371C584.876 210.785 582.446 233.9 578.141 263.331C575.781 279.713 572.726 297.969 569.115 316.294C569.115 316.502 569.115 316.78 568.976 316.988C560.159 361.621 547.731 406.045 531.484 422.219C513.154 440.544 498.435 457.203 481.632 469.211C464.83 481.289 446.014 488.786 419.631 488.786C393.247 488.786 374.431 481.289 357.629 469.211C340.896 457.203 326.107 440.544 307.778 422.219C291.531 405.976 279.103 361.482 270.216 316.918C270.216 316.918 270.216 316.71 270.216 316.641C269.105 310.879 268.063 305.118 267.022 299.426C266.605 297.066 266.189 294.706 265.772 292.346C264.036 282.351 262.509 272.563 261.12 263.401C256.121 229.596 253.691 204.122 253.691 204.122C253.136 198.638 252.858 193.016 252.858 187.324C252.858 185.866 252.858 184.408 252.858 182.951C253.205 169.832 255.01 157.06 258.274 144.843C258.412 144.287 258.551 143.732 258.69 143.177C277.228 75.4294 337.425 24.8271 410.049 20.8011C413.243 20.5928 416.368 20.5234 419.631 20.5234C465.733 20.5234 507.461 39.1956 537.663 69.3904C563.769 95.4205 581.266 130.127 585.501 168.79C586.195 174.899 586.542 181.077 586.542 187.324H586.473Z",
|
|
11088
|
+
fill: "#FEAEA5"
|
|
11089
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11090
|
+
d: "M445.867 337.327C445.867 348.849 434.133 358.151 419.622 358.151C405.111 358.151 393.447 348.849 393.447 337.327C393.447 335.939 393.586 334.55 394.002 333.301C396.293 342.88 406.916 350.099 419.622 350.099C432.328 350.099 443.02 342.88 445.312 333.301C445.728 334.62 445.867 335.939 445.867 337.327Z",
|
|
11091
|
+
fill: "#F7A69C"
|
|
11092
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11093
|
+
d: "M817.053 743.187C716.586 847.238 575.642 912 419.561 912C263.481 912 122.467 847.238 22.0698 743.118L31.5818 705.704C45.954 649.34 90.3203 605.61 146.906 592.074L222.655 574.027L241.471 569.515C249.942 567.502 258.135 564.517 265.772 560.699C304.237 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.351 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471L692.216 592.074C748.802 605.61 793.168 649.34 807.471 705.704L817.053 743.187Z",
|
|
11094
|
+
fill: "#6E7174"
|
|
11095
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11096
|
+
d: "M614.106 573.471C597.165 594.018 534.886 659.058 419.561 663.639C286.671 668.984 226.266 579.441 222.655 574.027L241.471 569.515C249.942 567.502 258.134 564.517 265.772 560.699C304.236 601.653 358.879 627.267 419.561 627.267C480.244 627.267 534.886 601.653 573.35 560.699C580.988 564.448 589.111 567.502 597.651 569.515L614.106 573.471Z",
|
|
11097
|
+
fill: "#555A5E"
|
|
11098
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11099
|
+
d: "M249.898 196.144C249.898 249.777 270.317 315.623 270.317 315.623C270.317 315.623 266.862 205.572 314.892 164.108C347.514 135.946 374.019 167.565 417.115 167.565C456.137 167.565 492.558 136.481 525.436 164.108C578.852 208.994 568.738 315.623 568.738 315.623C568.738 315.623 589.157 250.557 589.157 196.144C589.157 76.4319 542.638 20 417.115 20C302.8 20 249.898 75.8365 249.898 196.144Z",
|
|
11100
|
+
fill: "#525252"
|
|
11101
|
+
})), frame >= 8 ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11102
|
+
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",
|
|
11103
|
+
stroke: accentColor,
|
|
11104
|
+
strokeWidth: "5"
|
|
11105
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11106
|
+
cx: "518.5",
|
|
11107
|
+
cy: "438.5",
|
|
11108
|
+
r: "25.5",
|
|
11109
|
+
fill: accentColor
|
|
11110
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11111
|
+
d: "M504 440.5L512 448L531 427",
|
|
11112
|
+
stroke: "white",
|
|
11113
|
+
strokeWidth: "5",
|
|
11114
|
+
strokeLinecap: "round",
|
|
11115
|
+
strokeLinejoin: "round"
|
|
11116
|
+
}))) : ( /*#__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, frame > 5 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11117
|
+
d: "M298.5 182.5L419 164.5L540 182",
|
|
11118
|
+
stroke: "white",
|
|
11119
|
+
strokeWidth: "2",
|
|
11120
|
+
strokeLinecap: "round",
|
|
11121
|
+
strokeLinejoin: "round"
|
|
11122
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11123
|
+
cx: "419",
|
|
11124
|
+
cy: "165",
|
|
11125
|
+
r: "7",
|
|
11126
|
+
fill: "white"
|
|
11127
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11128
|
+
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",
|
|
11129
|
+
stroke: "white",
|
|
11130
|
+
strokeOpacity: frame > 7 ? 0.8 : frame > 5 ? 0.3 : 0.1,
|
|
11131
|
+
strokeWidth: "5"
|
|
11132
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11133
|
+
d: "M299.939 262.805L419 478.5L538.5 261.5",
|
|
11134
|
+
stroke: "white",
|
|
11135
|
+
strokeWidth: "2",
|
|
11136
|
+
strokeLinecap: "round",
|
|
11137
|
+
strokeLinejoin: "round"
|
|
11138
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11139
|
+
d: "M298.5 182.5L418.871 230.054L540 182",
|
|
11140
|
+
stroke: "white",
|
|
11141
|
+
strokeWidth: "2",
|
|
11142
|
+
strokeLinecap: "round",
|
|
11143
|
+
strokeLinejoin: "round"
|
|
11144
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11145
|
+
d: "M298.5 182.5L299.939 262.805",
|
|
11146
|
+
stroke: "white",
|
|
11147
|
+
strokeWidth: "2",
|
|
11148
|
+
strokeLinecap: "round",
|
|
11149
|
+
strokeLinejoin: "round"
|
|
11150
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11151
|
+
d: "M540.001 182L538.501 261.5",
|
|
11152
|
+
stroke: "white",
|
|
11153
|
+
strokeWidth: "2",
|
|
11154
|
+
strokeLinecap: "round",
|
|
11155
|
+
strokeLinejoin: "round"
|
|
11156
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11157
|
+
cx: "299.914",
|
|
11158
|
+
cy: "182",
|
|
11159
|
+
r: "7",
|
|
11160
|
+
fill: "white"
|
|
11161
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11162
|
+
cx: "540",
|
|
11163
|
+
cy: "182",
|
|
11164
|
+
r: "7",
|
|
11165
|
+
fill: "white"
|
|
11166
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11167
|
+
d: "M418.828 230L419 342.5",
|
|
11168
|
+
stroke: "white",
|
|
11169
|
+
strokeWidth: "2",
|
|
11170
|
+
strokeLinecap: "round",
|
|
11171
|
+
strokeLinejoin: "round",
|
|
11172
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11173
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11174
|
+
d: "M300 263.001L419 342.501",
|
|
11175
|
+
stroke: "white",
|
|
11176
|
+
strokeWidth: "2",
|
|
11177
|
+
strokeLinecap: "round",
|
|
11178
|
+
strokeLinejoin: "round",
|
|
11179
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11180
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11181
|
+
d: "M538.5 261.5L419 342.5",
|
|
11182
|
+
stroke: "white",
|
|
11183
|
+
strokeWidth: "2",
|
|
11184
|
+
strokeLinecap: "round",
|
|
11185
|
+
strokeLinejoin: "round",
|
|
11186
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11187
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11188
|
+
d: "M301.5 409L419 342.5",
|
|
11189
|
+
stroke: "white",
|
|
11190
|
+
strokeWidth: "2",
|
|
11191
|
+
strokeLinecap: "round",
|
|
11192
|
+
strokeLinejoin: "round",
|
|
11193
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11194
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11195
|
+
d: "M536.5 410L419 342.5",
|
|
11196
|
+
stroke: "white",
|
|
11197
|
+
strokeWidth: "2",
|
|
11198
|
+
strokeLinecap: "round",
|
|
11199
|
+
strokeLinejoin: "round",
|
|
11200
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11201
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11202
|
+
d: "M300 263L419 230",
|
|
11203
|
+
stroke: "white",
|
|
11204
|
+
strokeWidth: "2",
|
|
11205
|
+
strokeLinecap: "round",
|
|
11206
|
+
strokeLinejoin: "round",
|
|
11207
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11208
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11209
|
+
d: "M538.5 261.5L419 230",
|
|
11210
|
+
stroke: "white",
|
|
11211
|
+
strokeWidth: "2",
|
|
11212
|
+
strokeLinecap: "round",
|
|
11213
|
+
strokeLinejoin: "round",
|
|
11214
|
+
strokeOpacity: frame > 4 && frame < 7 ? 0.3 : 1
|
|
11215
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11216
|
+
cx: "419",
|
|
11217
|
+
cy: "229.971",
|
|
11218
|
+
r: "7",
|
|
11219
|
+
fill: "white"
|
|
11220
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11221
|
+
cx: "419",
|
|
11222
|
+
cy: "342.4",
|
|
11223
|
+
r: "7",
|
|
11224
|
+
fill: "white"
|
|
11225
|
+
}))), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11226
|
+
d: "M538.5 261.5L536.5 410",
|
|
11227
|
+
stroke: "white",
|
|
11228
|
+
strokeWidth: "2",
|
|
11229
|
+
strokeLinecap: "round",
|
|
11230
|
+
strokeLinejoin: "round",
|
|
11231
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
11232
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11233
|
+
d: "M419 478.5L536.5 410",
|
|
11234
|
+
stroke: "white",
|
|
11235
|
+
strokeWidth: "2",
|
|
11236
|
+
strokeLinecap: "round",
|
|
11237
|
+
strokeLinejoin: "round",
|
|
11238
|
+
strokeOpacity: frame > 3 && frame < 7 ? 0.3 : 1
|
|
11239
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11240
|
+
cx: "537",
|
|
11241
|
+
cy: "263",
|
|
11242
|
+
r: "7",
|
|
11243
|
+
fill: "white"
|
|
11244
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11245
|
+
cx: "537",
|
|
11246
|
+
cy: "409",
|
|
11247
|
+
r: "7",
|
|
11248
|
+
fill: "white"
|
|
11249
|
+
}))), frame > 1 && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11250
|
+
d: "M301.501 409L300.001 263",
|
|
11251
|
+
stroke: "white",
|
|
11252
|
+
strokeWidth: "2",
|
|
11253
|
+
strokeLinecap: "round",
|
|
11254
|
+
strokeLinejoin: "round",
|
|
11255
|
+
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
11256
|
+
}), /*#__PURE__*/React__namespace.default.createElement("path", {
|
|
11257
|
+
d: "M301.501 409L419.001 478.5",
|
|
11258
|
+
stroke: "white",
|
|
11259
|
+
strokeWidth: "2",
|
|
11260
|
+
strokeLinecap: "round",
|
|
11261
|
+
strokeLinejoin: "round",
|
|
11262
|
+
strokeOpacity: frame > 2 && frame < 7 ? 0.3 : 1
|
|
11263
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11264
|
+
cx: "419",
|
|
11265
|
+
cy: "477.576",
|
|
11266
|
+
r: "7",
|
|
11267
|
+
fill: "white"
|
|
11268
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11269
|
+
cx: "301.914",
|
|
11270
|
+
cy: "263",
|
|
11271
|
+
r: "7",
|
|
11272
|
+
fill: "white"
|
|
11273
|
+
}), /*#__PURE__*/React__namespace.default.createElement("circle", {
|
|
11274
|
+
cx: "301.444",
|
|
11275
|
+
cy: "409",
|
|
11276
|
+
r: "7",
|
|
11277
|
+
fill: "white"
|
|
11278
|
+
})))))), /*#__PURE__*/React__namespace.default.createElement("defs", null, /*#__PURE__*/React__namespace.default.createElement("clipPath", {
|
|
11279
|
+
id: "clip0_428_1188"
|
|
11280
|
+
}, /*#__PURE__*/React__namespace.default.createElement("rect", {
|
|
11281
|
+
width: "840",
|
|
11282
|
+
height: "740",
|
|
11283
|
+
fill: "white"
|
|
11284
|
+
}))));
|
|
11285
|
+
}
|
|
12020
11286
|
|
|
12021
11287
|
var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
|
|
12022
11288
|
var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
|
|
@@ -12130,7 +11396,7 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
|
|
|
12130
11396
|
}
|
|
12131
11397
|
}, verbiage.continueText))))));
|
|
12132
11398
|
};
|
|
12133
|
-
var OverlayInner = styled__default.default.div(templateObject_1$
|
|
11399
|
+
var OverlayInner = styled__default.default.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
12134
11400
|
var _a, _b, _c, _d;
|
|
12135
11401
|
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';
|
|
12136
11402
|
}, function (props) {
|
|
@@ -12144,7 +11410,7 @@ var OverlayHeader = styled__default.default.div(templateObject_2$a || (templateO
|
|
|
12144
11410
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
12145
11411
|
});
|
|
12146
11412
|
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$a || (templateObject_3$a = __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"])));
|
|
12147
|
-
var StyledButtonsRow$5 = styled__default.default(ButtonsRow
|
|
11413
|
+
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) {
|
|
12148
11414
|
var _a, _b, _c, _d;
|
|
12149
11415
|
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';
|
|
12150
11416
|
}, function (props) {
|
|
@@ -12154,7 +11420,7 @@ var StyledButtonsRow$5 = styled__default.default(ButtonsRow$1)(templateObject_4$
|
|
|
12154
11420
|
var StyledOverlayImageContainer = styled__default.default(OverlayImageContainer)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"])));
|
|
12155
11421
|
var LoadingListContainer = styled__default.default.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n display: flex;\n position: relative;\n z-index: 2;\n"], ["\n display: flex;\n position: relative;\n z-index: 2;\n"])));
|
|
12156
11422
|
var LoadingList = styled__default.default.ul(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"], ["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"])));
|
|
12157
|
-
var LoadingListItem = styled__default.default.li(templateObject_8
|
|
11423
|
+
var LoadingListItem = styled__default.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"])));
|
|
12158
11424
|
var ProgressContainer = styled__default.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
12159
11425
|
var ProgressBarBackground = styled__default.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
12160
11426
|
var _a, _b, _c, _d;
|
|
@@ -12179,7 +11445,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
|
|
|
12179
11445
|
var _a, _b, _c, _d, _e, _f;
|
|
12180
11446
|
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, ";") : '';
|
|
12181
11447
|
});
|
|
12182
|
-
var templateObject_1$
|
|
11448
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$a, 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;
|
|
12183
11449
|
|
|
12184
11450
|
var components = {
|
|
12185
11451
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -12216,44 +11482,40 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
12216
11482
|
releaseCameraAccessOnExit = _k === void 0 ? true : _k,
|
|
12217
11483
|
_l = _a.silentFallback,
|
|
12218
11484
|
silentFallback = _l === void 0 ? false : _l,
|
|
12219
|
-
|
|
12220
|
-
|
|
12221
|
-
|
|
12222
|
-
|
|
12223
|
-
|
|
12224
|
-
|
|
12225
|
-
|
|
12226
|
-
|
|
12227
|
-
|
|
12228
|
-
|
|
12229
|
-
|
|
12230
|
-
|
|
12231
|
-
|
|
12232
|
-
|
|
12233
|
-
|
|
12234
|
-
|
|
12235
|
-
|
|
12236
|
-
|
|
12237
|
-
|
|
12238
|
-
var _u = React.
|
|
12239
|
-
|
|
12240
|
-
|
|
12241
|
-
|
|
12242
|
-
|
|
12243
|
-
|
|
12244
|
-
|
|
12245
|
-
|
|
12246
|
-
|
|
12247
|
-
setRetryCount = _w[1];
|
|
12248
|
-
var _x = React.useState('LOADING'),
|
|
12249
|
-
captureState = _x[0],
|
|
12250
|
-
setCaptureState = _x[1];
|
|
11485
|
+
_m = _a.assets,
|
|
11486
|
+
assets = _m === void 0 ? {} : _m,
|
|
11487
|
+
_o = _a.classNames,
|
|
11488
|
+
classNames = _o === void 0 ? {} : _o,
|
|
11489
|
+
_p = _a.colors,
|
|
11490
|
+
colors = _p === void 0 ? {} : _p,
|
|
11491
|
+
_q = _a.verbiage,
|
|
11492
|
+
verbiage = _q === void 0 ? {} : _q,
|
|
11493
|
+
_r = _a.debugMode,
|
|
11494
|
+
debugMode = _r === void 0 ? false : _r;
|
|
11495
|
+
var _s = React.useContext(SubmissionContext),
|
|
11496
|
+
submissionResponse = _s.submissionResponse,
|
|
11497
|
+
livenessCheckRequest = _s.livenessCheckRequest,
|
|
11498
|
+
setSelfieImage = _s.setSelfieImage,
|
|
11499
|
+
logSelfieCaptureAttempt = _s.logSelfieCaptureAttempt;
|
|
11500
|
+
var _t = React.useContext(CameraStateContext),
|
|
11501
|
+
cameraAccessDenied = _t.cameraAccessDenied,
|
|
11502
|
+
requestCameraAccess = _t.requestCameraAccess,
|
|
11503
|
+
releaseCameraAccess = _t.releaseCameraAccess;
|
|
11504
|
+
var _u = React.useState(''),
|
|
11505
|
+
faceCropImageUrl = _u[0],
|
|
11506
|
+
setFaceCropImageUrl = _u[1];
|
|
11507
|
+
var _v = React.useState(0),
|
|
11508
|
+
retryCount = _v[0],
|
|
11509
|
+
setRetryCount = _v[1];
|
|
11510
|
+
var _w = React.useState('LOADING'),
|
|
11511
|
+
captureState = _w[0],
|
|
11512
|
+
setCaptureState = _w[1];
|
|
12251
11513
|
var captureStartedAt = React.useRef();
|
|
12252
11514
|
var captureEndedAt = React.useRef();
|
|
12253
11515
|
var operationStartedAt = React.useRef();
|
|
12254
|
-
var
|
|
12255
|
-
start =
|
|
12256
|
-
stop =
|
|
11516
|
+
var _x = React.useContext(SelfieGuidanceModelsContext),
|
|
11517
|
+
start = _x.start,
|
|
11518
|
+
stop = _x.stop;
|
|
12257
11519
|
React.useEffect(function () {
|
|
12258
11520
|
operationStartedAt.current = new Date();
|
|
12259
11521
|
}, []);
|
|
@@ -12301,9 +11563,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
12301
11563
|
setCaptureState('FAILED');
|
|
12302
11564
|
onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
|
|
12303
11565
|
}, [onTimeout, livenessCheckRequest, submissionResponse]);
|
|
12304
|
-
var
|
|
12305
|
-
attempt =
|
|
12306
|
-
setAttempt =
|
|
11566
|
+
var _y = React.useState(0),
|
|
11567
|
+
attempt = _y[0],
|
|
11568
|
+
setAttempt = _y[1];
|
|
12307
11569
|
var onExitCallback = React.useCallback(function () {
|
|
12308
11570
|
setAttempt(function (n) {
|
|
12309
11571
|
return n + 1;
|
|
@@ -12356,9 +11618,6 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
12356
11618
|
onExit: onExitCallback,
|
|
12357
11619
|
timeoutDurationMs: timeoutDurationMs,
|
|
12358
11620
|
silentFallback: silentFallback,
|
|
12359
|
-
guidesComponent: guidesComponent,
|
|
12360
|
-
disableCapturePreview: disableCapturePreview,
|
|
12361
|
-
requireVerticalFaceCentering: requireVerticalFaceCentering,
|
|
12362
11621
|
classNames: classNames.capture,
|
|
12363
11622
|
colors: colors,
|
|
12364
11623
|
verbiage: verbiage,
|
|
@@ -12527,7 +11786,7 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
12527
11786
|
}
|
|
12528
11787
|
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
12529
11788
|
className: classNames.container
|
|
12530
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Inner
|
|
11789
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Inner, {
|
|
12531
11790
|
className: classNames.inner
|
|
12532
11791
|
}, /*#__PURE__*/React__namespace.default.createElement(Heading$4, {
|
|
12533
11792
|
className: classNames.heading
|
|
@@ -12557,11 +11816,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
12557
11816
|
}
|
|
12558
11817
|
}, verbiage.captureBtnText)))));
|
|
12559
11818
|
};
|
|
12560
|
-
var Inner
|
|
11819
|
+
var Inner = styled__default.default(OverlayInner$2)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
12561
11820
|
var Heading$4 = styled__default.default.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
12562
11821
|
var Description = styled__default.default.p(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
12563
|
-
var StyledButtonsRow$4 = styled__default.default(ButtonsRow
|
|
12564
|
-
var templateObject_1$
|
|
11822
|
+
var StyledButtonsRow$4 = styled__default.default(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11823
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$4;
|
|
12565
11824
|
|
|
12566
11825
|
var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
|
|
12567
11826
|
var documents = _a.documents,
|
|
@@ -12705,7 +11964,7 @@ function convertSVGtoImg(svgData_1) {
|
|
|
12705
11964
|
});
|
|
12706
11965
|
}
|
|
12707
11966
|
|
|
12708
|
-
var SignaturePaperBacking = styled__default.default.div(templateObject_1$
|
|
11967
|
+
var SignaturePaperBacking = styled__default.default.div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
12709
11968
|
var _a, _b;
|
|
12710
11969
|
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, ";") : "";
|
|
12711
11970
|
}, function (props) {
|
|
@@ -12726,8 +11985,8 @@ var SignaturePad = styled__default.default.div(templateObject_3$8 || (templateOb
|
|
|
12726
11985
|
var _a, _b, _c;
|
|
12727
11986
|
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';
|
|
12728
11987
|
});
|
|
12729
|
-
var SignatureButtonsContainer = styled__default.default(ButtonsRow
|
|
12730
|
-
var templateObject_1$
|
|
11988
|
+
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"])));
|
|
11989
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
|
|
12731
11990
|
|
|
12732
11991
|
var SignatureCapture = function SignatureCapture(_a) {
|
|
12733
11992
|
var _b;
|
|
@@ -12798,8 +12057,8 @@ var SignatureCapture = function SignatureCapture(_a) {
|
|
|
12798
12057
|
finished: true
|
|
12799
12058
|
}, verbiage.acceptBtnText)))));
|
|
12800
12059
|
};
|
|
12801
|
-
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$
|
|
12802
|
-
var templateObject_1$
|
|
12060
|
+
var AcceptBtn$1 = styled__default.default(LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12061
|
+
var templateObject_1$b;
|
|
12803
12062
|
|
|
12804
12063
|
var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStreams) {
|
|
12805
12064
|
if (mergeAVStreams === void 0) {
|
|
@@ -13156,8 +12415,8 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
13156
12415
|
ref: outputCanvas
|
|
13157
12416
|
}));
|
|
13158
12417
|
};
|
|
13159
|
-
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$
|
|
13160
|
-
var templateObject_1$
|
|
12418
|
+
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
12419
|
+
var templateObject_1$a;
|
|
13161
12420
|
|
|
13162
12421
|
var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
13163
12422
|
var videoUrl = _a.videoUrl,
|
|
@@ -13196,7 +12455,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
13196
12455
|
style: {
|
|
13197
12456
|
display: 'none'
|
|
13198
12457
|
}
|
|
13199
|
-
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
12458
|
+
})), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
13200
12459
|
className: classNames.buttonsRow
|
|
13201
12460
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
13202
12461
|
variant: "warning",
|
|
@@ -13212,8 +12471,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
13212
12471
|
finished: true
|
|
13213
12472
|
}, verbiage.doneBtnText))));
|
|
13214
12473
|
};
|
|
13215
|
-
var StyledVideo$1 = styled__default.default.video(templateObject_1$
|
|
13216
|
-
var templateObject_1$
|
|
12474
|
+
var StyledVideo$1 = styled__default.default.video(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
12475
|
+
var templateObject_1$9;
|
|
13217
12476
|
|
|
13218
12477
|
var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
13219
12478
|
var _b;
|
|
@@ -13392,116 +12651,181 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13392
12651
|
}));
|
|
13393
12652
|
};
|
|
13394
12653
|
|
|
12654
|
+
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
12655
|
+
var _b;
|
|
12656
|
+
var className = _a.className,
|
|
12657
|
+
imageWidth = _a.imageWidth,
|
|
12658
|
+
imageHeight = _a.imageHeight,
|
|
12659
|
+
_c = _a.borderWidth,
|
|
12660
|
+
borderWidth = _c === void 0 ? 4 : _c,
|
|
12661
|
+
_d = _a.assets,
|
|
12662
|
+
assets = _d === void 0 ? {} : _d;
|
|
12663
|
+
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
12664
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12665
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
12666
|
+
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
12667
|
+
var _e = React.useState(1),
|
|
12668
|
+
transitionTime = _e[0],
|
|
12669
|
+
setTransitionTime = _e[1];
|
|
12670
|
+
var _f = React.useState(0),
|
|
12671
|
+
rotationAngle = _f[0],
|
|
12672
|
+
setRotationAngle = _f[1];
|
|
12673
|
+
var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
|
|
12674
|
+
if (isMirrored) frontTransforms.push('scaleX(-1)');
|
|
12675
|
+
var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
|
|
12676
|
+
if (isMirrored) backTransforms.push('scaleX(-1)');
|
|
12677
|
+
React.useEffect(function () {
|
|
12678
|
+
var timeout;
|
|
12679
|
+
function doFlip() {
|
|
12680
|
+
setTransitionTime(1);
|
|
12681
|
+
setRotationAngle(180);
|
|
12682
|
+
timeout = setTimeout(function () {
|
|
12683
|
+
setTransitionTime(0);
|
|
12684
|
+
setRotationAngle(0);
|
|
12685
|
+
}, 1500);
|
|
12686
|
+
}
|
|
12687
|
+
var interval = setInterval(doFlip, 2500);
|
|
12688
|
+
timeout = setTimeout(doFlip, 250);
|
|
12689
|
+
return function () {
|
|
12690
|
+
clearInterval(interval);
|
|
12691
|
+
clearTimeout(timeout);
|
|
12692
|
+
};
|
|
12693
|
+
}, []);
|
|
12694
|
+
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(FlipImage, {
|
|
12695
|
+
src: assets.frontImageUrl,
|
|
12696
|
+
alt: "",
|
|
12697
|
+
className: className,
|
|
12698
|
+
"$transforms": frontTransforms.join(' '),
|
|
12699
|
+
"$transitionTime": transitionTime,
|
|
12700
|
+
"$borderWidth": borderWidth,
|
|
12701
|
+
"$imageWidth": imageWidth,
|
|
12702
|
+
"$imageHeight": imageHeight
|
|
12703
|
+
}), /*#__PURE__*/React__namespace.default.createElement(FlipImage, {
|
|
12704
|
+
src: assets.backImageUrl,
|
|
12705
|
+
alt: "",
|
|
12706
|
+
className: className,
|
|
12707
|
+
"$transforms": backTransforms.join(' '),
|
|
12708
|
+
"$transitionTime": transitionTime,
|
|
12709
|
+
"$borderWidth": borderWidth,
|
|
12710
|
+
"$imageWidth": imageWidth,
|
|
12711
|
+
"$imageHeight": imageHeight,
|
|
12712
|
+
"$isBack": true
|
|
12713
|
+
}));
|
|
12714
|
+
};
|
|
12715
|
+
var FlipImage = styled__default.default.img(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: ", ";\n display: block;\n top: ", "px;\n width: ", "px;\n height: ", "px;\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: ", ";\n display: block;\n top: ", "px;\n width: ", "px;\n height: ", "px;\n"])), function (props) {
|
|
12716
|
+
return props.$transitionTime;
|
|
12717
|
+
}, function (props) {
|
|
12718
|
+
return props.$transforms;
|
|
12719
|
+
}, function (props) {
|
|
12720
|
+
return props.$isBack ? 'absolute' : 'relative';
|
|
12721
|
+
}, function (props) {
|
|
12722
|
+
return -props.$borderWidth / 2;
|
|
12723
|
+
}, function (props) {
|
|
12724
|
+
return props.$imageWidth;
|
|
12725
|
+
}, function (props) {
|
|
12726
|
+
return props.$imageHeight + props.$borderWidth;
|
|
12727
|
+
});
|
|
12728
|
+
var templateObject_1$8;
|
|
12729
|
+
|
|
13395
12730
|
var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
13396
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x
|
|
13397
|
-
var
|
|
13398
|
-
requestedAction =
|
|
13399
|
-
|
|
13400
|
-
satisfied =
|
|
13401
|
-
_2 = _a.faceGuideStatus,
|
|
13402
|
-
faceGuideStatus = _2 === void 0 ? 'success' : _2,
|
|
12731
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
12732
|
+
var _y = _a.requestedAction,
|
|
12733
|
+
requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
|
|
12734
|
+
_z = _a.satisfied,
|
|
12735
|
+
satisfied = _z === void 0 ? false : _z,
|
|
13403
12736
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
13404
12737
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
13405
|
-
_3 = _a.idCardGuideStatus,
|
|
13406
|
-
idCardGuideStatus = _3 === void 0 ? 'ready' : _3,
|
|
13407
12738
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
13408
12739
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
13409
|
-
|
|
13410
|
-
|
|
13411
|
-
|
|
13412
|
-
|
|
13413
|
-
|
|
13414
|
-
|
|
13415
|
-
_7 = _a.verbiage,
|
|
13416
|
-
rawVerbiage = _7 === void 0 ? {} : _7;
|
|
12740
|
+
_0 = _a.assets,
|
|
12741
|
+
assets = _0 === void 0 ? {} : _0,
|
|
12742
|
+
_1 = _a.classNames,
|
|
12743
|
+
classNames = _1 === void 0 ? {} : _1,
|
|
12744
|
+
_2 = _a.verbiage,
|
|
12745
|
+
rawVerbiage = _2 === void 0 ? {} : _2;
|
|
13417
12746
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
13418
12747
|
var imageRef = React.useRef(null);
|
|
13419
|
-
|
|
13420
|
-
|
|
12748
|
+
var _3 = React.useState(0),
|
|
12749
|
+
imageWidth = _3[0],
|
|
12750
|
+
setImageWidth = _3[1];
|
|
12751
|
+
var _4 = React.useState(0),
|
|
12752
|
+
imageHeight = _4[0],
|
|
12753
|
+
setImageHeight = _4[1];
|
|
12754
|
+
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
12755
|
+
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
13421
12756
|
var verbiage = useTranslations(rawVerbiage, {
|
|
13422
12757
|
idFrontInstructionText: 'Display the front of your ID card...',
|
|
13423
12758
|
idBackInstructionText: 'Display the back of your ID card...',
|
|
13424
|
-
flipIdInstructionText: 'Please flip your ID card...'
|
|
13425
|
-
verifyLivenessInstructionText: 'Performing facial recognition, please hold still...'
|
|
12759
|
+
flipIdInstructionText: 'Please flip your ID card...'
|
|
13426
12760
|
});
|
|
13427
|
-
var instructionText = requestedAction === '
|
|
12761
|
+
var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
|
|
13428
12762
|
var theme = styled.useTheme();
|
|
13429
|
-
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 :
|
|
13430
|
-
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 : '
|
|
13431
|
-
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 :
|
|
13432
|
-
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 : '
|
|
13433
|
-
var
|
|
13434
|
-
|
|
13435
|
-
|
|
13436
|
-
|
|
13437
|
-
|
|
13438
|
-
idCardGuideHeight = _10 === void 0 ? 0 : _10;
|
|
13439
|
-
var idCardImageStyle = React.useMemo(function () {
|
|
13440
|
-
return {
|
|
13441
|
-
maxWidth: idCardGuideWidth > 0 ? idCardGuideWidth : undefined,
|
|
13442
|
-
maxHeight: idCardGuideHeight,
|
|
13443
|
-
height: '100%'
|
|
13444
|
-
};
|
|
13445
|
-
}, [idCardGuideWidth, idCardGuideHeight]);
|
|
13446
|
-
var aspectRatio = ((_u = (_t = imageRef.current) === null || _t === void 0 ? void 0 : _t.naturalHeight) !== null && _u !== void 0 ? _u : 0) > 0 ? imageRef.current.naturalWidth / imageRef.current.naturalHeight : undefined;
|
|
12763
|
+
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 : 4;
|
|
12764
|
+
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 : 'white';
|
|
12765
|
+
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 : 4;
|
|
12766
|
+
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 : 'white';
|
|
12767
|
+
var captureImageSize = function captureImageSize() {
|
|
12768
|
+
var _a, _b, _c, _d;
|
|
12769
|
+
if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
|
|
12770
|
+
if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
|
|
12771
|
+
};
|
|
13447
12772
|
return /*#__PURE__*/React__namespace.default.createElement(Container, {
|
|
13448
12773
|
className: classNames.container
|
|
13449
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
13450
|
-
className: classNames.faceGuideContainer
|
|
13451
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask, {
|
|
12774
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceGuide, {
|
|
13452
12775
|
className: classNames.faceGuide,
|
|
13453
|
-
|
|
13454
|
-
|
|
13455
|
-
|
|
13456
|
-
|
|
13457
|
-
}
|
|
13458
|
-
className: classNames.idCardGuideContainer,
|
|
13459
|
-
ref: idCardGuideRef
|
|
13460
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInner, {
|
|
13461
|
-
className: classNames.idCardGuideInner,
|
|
13462
|
-
style: {
|
|
13463
|
-
aspectRatio: aspectRatio
|
|
13464
|
-
}
|
|
13465
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
|
|
13466
|
-
className: classNames.idCardGuideImageContainer,
|
|
13467
|
-
status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
|
|
13468
|
-
borderWidth: idCardGuideBorderWidth,
|
|
13469
|
-
borderColor: idCardGuideBorderColor,
|
|
13470
|
-
"$isVisible": requestedAction !== 'FLIP_ID',
|
|
13471
|
-
progress: requestedAction === 'VERIFY_LIVENESS' ? 0 : idCardCaptureProgress
|
|
13472
|
-
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
13473
|
-
alt: "",
|
|
13474
|
-
ref: imageRef,
|
|
13475
|
-
className: classNames.idCardGuideImage,
|
|
13476
|
-
"$isMirrored": !((_v = cameraRef.current) === null || _v === void 0 ? void 0 : _v.isRearFacing),
|
|
13477
|
-
style: idCardImageStyle,
|
|
13478
|
-
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
|
|
13479
|
-
})), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
13480
|
-
assets: assets,
|
|
13481
|
-
classNames: classNames.flipIdPrompt,
|
|
13482
|
-
borderWidth: idCardGuideBorderWidth,
|
|
13483
|
-
borderColor: idCardGuideBorderColor,
|
|
13484
|
-
imageStyle: idCardImageStyle
|
|
13485
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructionsContainer, {
|
|
12776
|
+
"$borderWidth": faceGuideBorderWidth,
|
|
12777
|
+
"$borderColor": faceGuideBorderColor
|
|
12778
|
+
}), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideContainer, {
|
|
12779
|
+
className: classNames.idCardGuideContainer
|
|
12780
|
+
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructionsContainer, {
|
|
13486
12781
|
className: classNames.idCardGuideInstructionsContainer
|
|
13487
12782
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructions, {
|
|
13488
12783
|
className: classNames.idCardGuideInstructions,
|
|
13489
|
-
"$textColor": (
|
|
13490
|
-
"$background": (
|
|
13491
|
-
}, instructionText))
|
|
12784
|
+
"$textColor": (_u = (_t = theme.idVideoCapture) === null || _t === void 0 ? void 0 : _t.idCardGuides) === null || _u === void 0 ? void 0 : _u.instructionsTextColor,
|
|
12785
|
+
"$background": (_w = (_v = theme.idVideoCapture) === null || _v === void 0 ? void 0 : _v.idCardGuides) === null || _w === void 0 ? void 0 : _w.instructionsBackgroundColor
|
|
12786
|
+
}, instructionText)), /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImageContainer, {
|
|
12787
|
+
"$borderWidth": idCardGuideBorderWidth,
|
|
12788
|
+
"$borderColor": idCardGuideBorderColor,
|
|
12789
|
+
className: classNames.idCardGuideImageContainer
|
|
12790
|
+
}, requestedAction === 'FLIP_ID' ? ( /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
12791
|
+
assets: assets,
|
|
12792
|
+
imageWidth: imageWidth,
|
|
12793
|
+
imageHeight: imageHeight,
|
|
12794
|
+
borderWidth: idCardGuideBorderWidth,
|
|
12795
|
+
className: classNames.flipIdPromptImage
|
|
12796
|
+
})) : ( /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
12797
|
+
ref: imageRef,
|
|
12798
|
+
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
12799
|
+
alt: "",
|
|
12800
|
+
className: classNames.idCardGuideImage,
|
|
12801
|
+
"$isMirrored": !((_x = cameraRef.current) === null || _x === void 0 ? void 0 : _x.isRearFacing),
|
|
12802
|
+
onLoad: captureImageSize,
|
|
12803
|
+
onResize: captureImageSize
|
|
12804
|
+
})))));
|
|
13492
12805
|
};
|
|
13493
|
-
var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n
|
|
12806
|
+
var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n font-family: ", ";\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n font-family: ", ";\n"])), function (props) {
|
|
13494
12807
|
var _a;
|
|
13495
12808
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
13496
12809
|
});
|
|
13497
|
-
var
|
|
13498
|
-
var
|
|
13499
|
-
|
|
13500
|
-
|
|
13501
|
-
var
|
|
13502
|
-
|
|
13503
|
-
|
|
13504
|
-
var
|
|
12810
|
+
var FaceGuide = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n min-height: 33dvh;\n margin: 4% auto auto;\n"], ["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n min-height: 33dvh;\n margin: 4% auto auto;\n"])), function (props) {
|
|
12811
|
+
var _a;
|
|
12812
|
+
return (_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 0;
|
|
12813
|
+
}, function (props) {
|
|
12814
|
+
var _a;
|
|
12815
|
+
return (_a = props.$borderColor) !== null && _a !== void 0 ? _a : 'white';
|
|
12816
|
+
});
|
|
12817
|
+
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"])));
|
|
12818
|
+
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"])));
|
|
12819
|
+
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"])));
|
|
12820
|
+
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) {
|
|
12821
|
+
return props.$borderWidth;
|
|
12822
|
+
}, function (props) {
|
|
12823
|
+
return props.$borderColor;
|
|
12824
|
+
});
|
|
12825
|
+
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) {
|
|
12826
|
+
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
12827
|
+
});
|
|
12828
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
13505
12829
|
|
|
13506
12830
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
13507
12831
|
var text = _a.text,
|
|
@@ -13591,7 +12915,7 @@ var ReadTextPromptText = styled__default.default.div(templateObject_3$6 || (temp
|
|
|
13591
12915
|
var _a, _b, _c, _d, _e, _f;
|
|
13592
12916
|
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, ";") : "";
|
|
13593
12917
|
});
|
|
13594
|
-
var ReadTextPromptButtonsRow = styled__default.default(ButtonsRow
|
|
12918
|
+
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"])));
|
|
13595
12919
|
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) {
|
|
13596
12920
|
var _a, _b, _c, _d, _e, _f;
|
|
13597
12921
|
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, ";") : "";
|
|
@@ -13609,7 +12933,7 @@ var edgeBoundary = 0.05;
|
|
|
13609
12933
|
var defaultVideoIdCaptureThresholds = {
|
|
13610
12934
|
detection: {
|
|
13611
12935
|
idCardFront: 0.6,
|
|
13612
|
-
idCardBack: 0.
|
|
12936
|
+
idCardBack: 0.6,
|
|
13613
12937
|
passport: 1
|
|
13614
12938
|
},
|
|
13615
12939
|
focus: {
|
|
@@ -13706,8 +13030,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13706
13030
|
setIdCaptureVideoAudioStartsAt = _19.setIdCaptureVideoAudioStartsAt,
|
|
13707
13031
|
setExpectedAudioText = _19.setExpectedAudioText;
|
|
13708
13032
|
var _20 = React.useContext(SelfieGuidanceModelsContext),
|
|
13709
|
-
startSelfieGuidance = _20.start,
|
|
13710
|
-
stopSelfieGuidance = _20.stop,
|
|
13711
13033
|
onSelfiePredictionMade = _20.onPredictionMade,
|
|
13712
13034
|
selfieModelError = _20.error;
|
|
13713
13035
|
var _21 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
|
|
@@ -13926,22 +13248,19 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13926
13248
|
}
|
|
13927
13249
|
}, [captureFrame, countdownRemaining]);
|
|
13928
13250
|
var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, stopRecording, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
|
|
13929
|
-
React.useEffect(function () {
|
|
13930
|
-
startSelfieGuidance();
|
|
13931
|
-
return function () {
|
|
13932
|
-
stopSelfieGuidance();
|
|
13933
|
-
};
|
|
13934
|
-
}, [startSelfieGuidance, stopSelfieGuidance]);
|
|
13935
13251
|
var _29 = React.useState(0),
|
|
13936
13252
|
numFramesWithoutFaces = _29[0],
|
|
13937
13253
|
setNumFramesWithoutFaces = _29[1];
|
|
13938
|
-
|
|
13939
|
-
if (selfieModelError)
|
|
13940
|
-
|
|
13941
|
-
|
|
13942
|
-
|
|
13943
|
-
|
|
13944
|
-
|
|
13254
|
+
React.useEffect(function () {
|
|
13255
|
+
if (!selfieModelError) {
|
|
13256
|
+
onSelfiePredictionMade(function (faces) {
|
|
13257
|
+
setFaces(faces);
|
|
13258
|
+
setNumFramesWithoutFaces(function (n) {
|
|
13259
|
+
return faces.length === 0 ? n + 1 : 0;
|
|
13260
|
+
});
|
|
13261
|
+
});
|
|
13262
|
+
}
|
|
13263
|
+
}, [onSelfiePredictionMade, selfieModelError]);
|
|
13945
13264
|
React.useEffect(function () {
|
|
13946
13265
|
var ignoreMissingFaces = disableFaceDetectionWhileAudioCapture && (timeoutStartedAt === null || timeoutStartedAt === void 0 ? void 0 : timeoutStartedAt.getTime()) && new Date().getTime() - (timeoutStartedAt === null || timeoutStartedAt === void 0 ? void 0 : timeoutStartedAt.getTime()) > disableFaceDetectionWhileAudioCaptureMsDelay;
|
|
13947
13266
|
if (!ignoreMissingFaces && numFramesWithoutFaces >= 2) {
|
|
@@ -13951,10 +13270,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13951
13270
|
var theme = styled.useTheme();
|
|
13952
13271
|
var _30 = useTranslations(rawVerbiage, {
|
|
13953
13272
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
13273
|
+
searchingForIdCardText: 'Searching for ID card...',
|
|
13954
13274
|
captureBtnText: 'Capture'
|
|
13955
13275
|
}),
|
|
13956
13276
|
captureBtnText = _30.captureBtnText,
|
|
13957
|
-
faceNotCenteredText = _30.faceNotCenteredText
|
|
13277
|
+
faceNotCenteredText = _30.faceNotCenteredText,
|
|
13278
|
+
searchingForIdCardText = _30.searchingForIdCardText;
|
|
13958
13279
|
var debugScalingDetails = useDebugScalingDetails({
|
|
13959
13280
|
enabled: debugMode,
|
|
13960
13281
|
pageWidth: width,
|
|
@@ -13963,9 +13284,8 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13963
13284
|
videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
|
|
13964
13285
|
});
|
|
13965
13286
|
var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
|
|
13966
|
-
|
|
13967
|
-
|
|
13968
|
-
var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
|
|
13287
|
+
var searchingForIdCard = idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet;
|
|
13288
|
+
var guidanceText = !faceCentered ? faceNotCenteredText : searchingForIdCard ? searchingForIdCardText : undefined;
|
|
13969
13289
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13970
13290
|
ref: ref,
|
|
13971
13291
|
className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
|
|
@@ -13985,8 +13305,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
13985
13305
|
verbiage: rawVerbiage.guides,
|
|
13986
13306
|
requestedAction: requestedAction,
|
|
13987
13307
|
satisfied: satisfied,
|
|
13988
|
-
idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
|
|
13989
|
-
idCardCaptureProgress: countdownStartedAt ? 1 : 0,
|
|
13990
13308
|
faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
|
|
13991
13309
|
idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
|
|
13992
13310
|
}), debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
|
|
@@ -14134,7 +13452,7 @@ var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
|
|
|
14134
13452
|
})) : ( /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
14135
13453
|
src: idBackImageUrl,
|
|
14136
13454
|
alt: "ID Back Image"
|
|
14137
|
-
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow
|
|
13455
|
+
}))), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
|
|
14138
13456
|
className: classNames.buttonsRow
|
|
14139
13457
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
14140
13458
|
variant: "warning",
|
|
@@ -14156,7 +13474,7 @@ var AssetSelectorOption = styled__default.default.div(templateObject_3$4 || (tem
|
|
|
14156
13474
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
14157
13475
|
|
|
14158
13476
|
var VideoIdWizard = function VideoIdWizard(_a) {
|
|
14159
|
-
var _b, _c, _d, _e, _f
|
|
13477
|
+
var _b, _c, _d, _e, _f;
|
|
14160
13478
|
var onComplete = _a.onComplete,
|
|
14161
13479
|
onExitCapture = _a.onExitCapture,
|
|
14162
13480
|
onExitAfterFailure = _a.onExitAfterFailure,
|
|
@@ -14164,66 +13482,66 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14164
13482
|
onIdCaptureModelError = _a.onIdCaptureModelError,
|
|
14165
13483
|
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
14166
13484
|
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
14167
|
-
|
|
14168
|
-
idCaptureProps =
|
|
14169
|
-
|
|
14170
|
-
faceLivenessProps =
|
|
14171
|
-
|
|
14172
|
-
idCaptureModelsEnabled =
|
|
14173
|
-
|
|
14174
|
-
videoIdCaptureThresholds =
|
|
13485
|
+
_g = _a.idCaptureProps,
|
|
13486
|
+
idCaptureProps = _g === void 0 ? {} : _g,
|
|
13487
|
+
_h = _a.faceLivenessProps,
|
|
13488
|
+
faceLivenessProps = _h === void 0 ? {} : _h,
|
|
13489
|
+
_j = _a.idCaptureModelsEnabled,
|
|
13490
|
+
idCaptureModelsEnabled = _j === void 0 ? true : _j,
|
|
13491
|
+
_k = _a.videoIdCaptureThresholds,
|
|
13492
|
+
videoIdCaptureThresholds = _k === void 0 ? defaultVideoIdCaptureThresholds : _k,
|
|
14175
13493
|
readTextPrompt = _a.readTextPrompt,
|
|
14176
13494
|
readTextTimeoutDurationMs = _a.readTextTimeoutDurationMs,
|
|
14177
13495
|
readTextMinReadingMs = _a.readTextMinReadingMs,
|
|
14178
|
-
|
|
14179
|
-
skipIdCapture =
|
|
14180
|
-
|
|
14181
|
-
skipShowIdCardBack =
|
|
14182
|
-
|
|
14183
|
-
skipSuccessScreen =
|
|
14184
|
-
|
|
14185
|
-
idCaptureLoadingOverlayMode =
|
|
14186
|
-
|
|
14187
|
-
idCaptureGuideType =
|
|
14188
|
-
|
|
14189
|
-
idCapturePortraitGuidesOnMobile =
|
|
14190
|
-
|
|
14191
|
-
idCaptureRotateLoadingOverlayImageWhenPortrait =
|
|
14192
|
-
|
|
14193
|
-
idCaptureModelLoadTimeoutMs =
|
|
14194
|
-
|
|
14195
|
-
faceLivenessLoadingOverlayMode =
|
|
14196
|
-
|
|
14197
|
-
disableFaceDetectionWhileAudioCapture =
|
|
14198
|
-
|
|
14199
|
-
disableFaceDetectionWhileAudioCaptureMsDelay =
|
|
14200
|
-
|
|
14201
|
-
silentFallback =
|
|
14202
|
-
|
|
14203
|
-
mergeAVStreams =
|
|
14204
|
-
|
|
14205
|
-
assets =
|
|
14206
|
-
|
|
14207
|
-
classNames =
|
|
14208
|
-
|
|
14209
|
-
colors =
|
|
14210
|
-
|
|
14211
|
-
verbiage =
|
|
14212
|
-
|
|
14213
|
-
debugMode =
|
|
14214
|
-
var
|
|
14215
|
-
submissionStatus =
|
|
14216
|
-
idCaptureVideoUrl =
|
|
14217
|
-
idCaptureVideoAudioUrl =
|
|
14218
|
-
idCaptureVideoIdFrontImage =
|
|
14219
|
-
idCaptureVideoIdBackImage =
|
|
14220
|
-
setIdCaptureVideoUrl =
|
|
14221
|
-
setIdCaptureVideoIdFrontImage =
|
|
14222
|
-
setIdCaptureVideoIdBackImage =
|
|
14223
|
-
setIdCaptureVideoAudioUrl =
|
|
14224
|
-
var
|
|
14225
|
-
captureState =
|
|
14226
|
-
setCaptureState =
|
|
13496
|
+
_l = _a.skipIdCapture,
|
|
13497
|
+
skipIdCapture = _l === void 0 ? false : _l,
|
|
13498
|
+
_m = _a.skipShowIdCardBack,
|
|
13499
|
+
skipShowIdCardBack = _m === void 0 ? false : _m,
|
|
13500
|
+
_o = _a.skipSuccessScreen,
|
|
13501
|
+
skipSuccessScreen = _o === void 0 ? false : _o,
|
|
13502
|
+
_p = _a.idCaptureLoadingOverlayMode,
|
|
13503
|
+
idCaptureLoadingOverlayMode = _p === void 0 ? 'default' : _p,
|
|
13504
|
+
_q = _a.idCaptureGuideType,
|
|
13505
|
+
idCaptureGuideType = _q === void 0 ? 'fit' : _q,
|
|
13506
|
+
_r = _a.idCapturePortraitGuidesOnMobile,
|
|
13507
|
+
idCapturePortraitGuidesOnMobile = _r === void 0 ? true : _r,
|
|
13508
|
+
_s = _a.idCaptureRotateLoadingOverlayImageWhenPortrait,
|
|
13509
|
+
idCaptureRotateLoadingOverlayImageWhenPortrait = _s === void 0 ? true : _s,
|
|
13510
|
+
_t = _a.idCaptureModelLoadTimeoutMs,
|
|
13511
|
+
idCaptureModelLoadTimeoutMs = _t === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _t,
|
|
13512
|
+
_u = _a.faceLivenessLoadingOverlayMode,
|
|
13513
|
+
faceLivenessLoadingOverlayMode = _u === void 0 ? 'default' : _u,
|
|
13514
|
+
_v = _a.disableFaceDetectionWhileAudioCapture,
|
|
13515
|
+
disableFaceDetectionWhileAudioCapture = _v === void 0 ? true : _v,
|
|
13516
|
+
_w = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
|
|
13517
|
+
disableFaceDetectionWhileAudioCaptureMsDelay = _w === void 0 ? 2000 : _w,
|
|
13518
|
+
_x = _a.silentFallback,
|
|
13519
|
+
silentFallback = _x === void 0 ? false : _x,
|
|
13520
|
+
_y = _a.mergeAVStreams,
|
|
13521
|
+
mergeAVStreams = _y === void 0 ? false : _y,
|
|
13522
|
+
_z = _a.assets,
|
|
13523
|
+
assets = _z === void 0 ? {} : _z,
|
|
13524
|
+
_0 = _a.classNames,
|
|
13525
|
+
classNames = _0 === void 0 ? {} : _0,
|
|
13526
|
+
_1 = _a.colors,
|
|
13527
|
+
colors = _1 === void 0 ? {} : _1,
|
|
13528
|
+
_2 = _a.verbiage,
|
|
13529
|
+
verbiage = _2 === void 0 ? {} : _2,
|
|
13530
|
+
_3 = _a.debugMode,
|
|
13531
|
+
debugMode = _3 === void 0 ? false : _3;
|
|
13532
|
+
var _4 = React.useContext(SubmissionContext),
|
|
13533
|
+
submissionStatus = _4.submissionStatus,
|
|
13534
|
+
idCaptureVideoUrl = _4.idCaptureVideoUrl,
|
|
13535
|
+
idCaptureVideoAudioUrl = _4.idCaptureVideoAudioUrl,
|
|
13536
|
+
idCaptureVideoIdFrontImage = _4.idCaptureVideoIdFrontImage,
|
|
13537
|
+
idCaptureVideoIdBackImage = _4.idCaptureVideoIdBackImage,
|
|
13538
|
+
setIdCaptureVideoUrl = _4.setIdCaptureVideoUrl,
|
|
13539
|
+
setIdCaptureVideoIdFrontImage = _4.setIdCaptureVideoIdFrontImage,
|
|
13540
|
+
setIdCaptureVideoIdBackImage = _4.setIdCaptureVideoIdBackImage,
|
|
13541
|
+
setIdCaptureVideoAudioUrl = _4.setIdCaptureVideoAudioUrl;
|
|
13542
|
+
var _5 = React.useState('CAPTURING_ID'),
|
|
13543
|
+
captureState = _5[0],
|
|
13544
|
+
setCaptureState = _5[1];
|
|
14227
13545
|
React.useEffect(function () {
|
|
14228
13546
|
if (skipIdCapture && captureState === 'CAPTURING_ID') setCaptureState('CHECKING_LIVENESS');
|
|
14229
13547
|
}, [captureState, skipIdCapture]);
|
|
@@ -14254,9 +13572,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14254
13572
|
var onVideoCaptureFaceNotDetected = React.useCallback(function () {
|
|
14255
13573
|
setCaptureState('CHECKING_LIVENESS');
|
|
14256
13574
|
}, []);
|
|
14257
|
-
var
|
|
14258
|
-
attempt =
|
|
14259
|
-
setAttempt =
|
|
13575
|
+
var _6 = React.useState(0),
|
|
13576
|
+
attempt = _6[0],
|
|
13577
|
+
setAttempt = _6[1];
|
|
14260
13578
|
var userSuppliedExitAfterFailure = onExitAfterFailure !== null && onExitAfterFailure !== void 0 ? onExitAfterFailure : faceLivenessProps.onExitAfterFailure;
|
|
14261
13579
|
var onFaceCaptureExitAfterFailure = React.useCallback(function (resp, req) {
|
|
14262
13580
|
userSuppliedExitAfterFailure === null || userSuppliedExitAfterFailure === void 0 ? void 0 : userSuppliedExitAfterFailure(resp, req);
|
|
@@ -14287,19 +13605,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14287
13605
|
});
|
|
14288
13606
|
onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
|
|
14289
13607
|
}, [onExitCapture]);
|
|
14290
|
-
var faceLivenessGuides = React.useCallback(function (_a) {
|
|
14291
|
-
var _b, _c, _d, _e, _f;
|
|
14292
|
-
var status = _a.status;
|
|
14293
|
-
return /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureGuides, {
|
|
14294
|
-
assets: (_b = assets.idVideoCapture) === null || _b === void 0 ? void 0 : _b.guides,
|
|
14295
|
-
classNames: (_c = classNames.idVideoCapture) === null || _c === void 0 ? void 0 : _c.guides,
|
|
14296
|
-
verbiage: (_d = verbiage.idVideoCapture) === null || _d === void 0 ? void 0 : _d.guides,
|
|
14297
|
-
requestedAction: "VERIFY_LIVENESS",
|
|
14298
|
-
faceGuideStatus: status,
|
|
14299
|
-
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,
|
|
14300
|
-
idCardGuideStatus: "disabled"
|
|
14301
|
-
});
|
|
14302
|
-
}, [(_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]);
|
|
14303
13608
|
if (submissionStatus === SubmissionStatus.SUBMITTING) {
|
|
14304
13609
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
14305
13610
|
className: "flex"
|
|
@@ -14317,8 +13622,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14317
13622
|
debugMode: debugMode
|
|
14318
13623
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
|
|
14319
13624
|
autoStart: false,
|
|
14320
|
-
documentDetectionModelUrl: (
|
|
14321
|
-
focusModelUrl: (
|
|
13625
|
+
documentDetectionModelUrl: (_c = (_b = idCaptureProps.assets) === null || _b === void 0 ? void 0 : _b.documentDetectionModelUrl) !== null && _c !== void 0 ? _c : '',
|
|
13626
|
+
focusModelUrl: (_e = (_d = idCaptureProps.assets) === null || _d === void 0 ? void 0 : _d.focusModelUrl) !== null && _e !== void 0 ? _e : '',
|
|
14322
13627
|
onModelError: onIdCaptureModelError,
|
|
14323
13628
|
modelLoadTimeoutMs: idCaptureModelLoadTimeoutMs
|
|
14324
13629
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
@@ -14326,7 +13631,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14326
13631
|
onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
|
|
14327
13632
|
modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
|
|
14328
13633
|
}, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
14329
|
-
className: "flex ".concat((
|
|
13634
|
+
className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
|
|
14330
13635
|
}, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
|
|
14331
13636
|
className: classNames.cameraFeed
|
|
14332
13637
|
}), function () {
|
|
@@ -14364,9 +13669,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
14364
13669
|
skipSuccessScreen: true,
|
|
14365
13670
|
renderCameraFeed: false,
|
|
14366
13671
|
releaseCameraAccessOnExit: false,
|
|
14367
|
-
disableCapturePreview: !debugMode,
|
|
14368
|
-
requireVerticalFaceCentering: false,
|
|
14369
|
-
guidesComponent: faceLivenessGuides,
|
|
14370
13672
|
assets: assets.faceLiveness,
|
|
14371
13673
|
classNames: classNames.faceLiveness,
|
|
14372
13674
|
colors: colors.faceLiveness,
|
|
@@ -15854,8 +15156,8 @@ var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
|
|
|
15854
15156
|
}, verbiage.doneBtnText))));
|
|
15855
15157
|
};
|
|
15856
15158
|
var Heading$3 = styled__default.default.h3(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15857
|
-
var ImageContainer$3 = styled__default.default(ButtonsRow
|
|
15858
|
-
var StyledButtonsRow$3 = styled__default.default(ButtonsRow
|
|
15159
|
+
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"])));
|
|
15160
|
+
var StyledButtonsRow$3 = styled__default.default(ButtonsRow)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15859
15161
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
15860
15162
|
|
|
15861
15163
|
var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
@@ -15906,8 +15208,8 @@ var CustomerVerificationFailure = function CustomerVerificationFailure(_a) {
|
|
|
15906
15208
|
}, verbiage.exitBtnText))));
|
|
15907
15209
|
};
|
|
15908
15210
|
var Heading$2 = styled__default.default.h3(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
15909
|
-
var ImageContainer$2 = styled__default.default(ButtonsRow
|
|
15910
|
-
var StyledButtonsRow$2 = styled__default.default(ButtonsRow
|
|
15211
|
+
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"])));
|
|
15212
|
+
var StyledButtonsRow$2 = styled__default.default(ButtonsRow)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
15911
15213
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
15912
15214
|
|
|
15913
15215
|
var ALLOWED_RETRIES$2 = 2;
|
|
@@ -16412,8 +15714,8 @@ var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {
|
|
|
16412
15714
|
}, verbiage.doneBtnText))));
|
|
16413
15715
|
};
|
|
16414
15716
|
var Heading$1 = styled__default.default.h3(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
16415
|
-
var ImageContainer$1 = styled__default.default(ButtonsRow
|
|
16416
|
-
var StyledButtonsRow$1 = styled__default.default(ButtonsRow
|
|
15717
|
+
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"])));
|
|
15718
|
+
var StyledButtonsRow$1 = styled__default.default(ButtonsRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16417
15719
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
16418
15720
|
|
|
16419
15721
|
var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
@@ -16464,8 +15766,8 @@ var CustomerIdentificationFailure = function CustomerIdentificationFailure(_a) {
|
|
|
16464
15766
|
}, verbiage.exitBtnText))));
|
|
16465
15767
|
};
|
|
16466
15768
|
var Heading = styled__default.default.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
16467
|
-
var ImageContainer = styled__default.default(ButtonsRow
|
|
16468
|
-
var StyledButtonsRow = styled__default.default(ButtonsRow
|
|
15769
|
+
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"])));
|
|
15770
|
+
var StyledButtonsRow = styled__default.default(ButtonsRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
16469
15771
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
16470
15772
|
|
|
16471
15773
|
var ALLOWED_RETRIES = 2;
|