idmission-web-sdk 2.1.42 → 2.1.44
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/id_capture/IdCapture.d.ts +2 -0
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts +2 -0
- package/dist/components/video_signature_capture/VideoSignatureCapture.d.ts +4 -10
- package/dist/components/video_signature_capture/VideoSignatureContext.d.ts +18 -0
- package/dist/components/video_signature_capture/VideoSignatureGuides.d.ts +28 -0
- package/dist/components/video_signature_capture/VideoSignatureSuccess.d.ts +1 -2
- package/dist/contexts/SubmissionContext.d.ts +4 -2
- package/dist/lib/locales/es/translation.d.ts +2 -0
- package/dist/lib/locales/index.d.ts +2 -0
- package/dist/sdk2.cjs.development.js +402 -253
- 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 +402 -253
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +402 -253
- 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 +6 -0
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
|
@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
234
234
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
235
235
|
};
|
|
236
236
|
|
|
237
|
-
var webSdkVersion = '2.1.
|
|
237
|
+
var webSdkVersion = '2.1.44';
|
|
238
238
|
|
|
239
239
|
function getPlatform() {
|
|
240
240
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -438,15 +438,15 @@ var OverlayContainer = styled__default.default(PageContainer)(templateObject_1$H
|
|
|
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$w || (templateObject_2$w = __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$H, templateObject_2$
|
|
447
|
+
var OverlayImageContainer = styled__default.default.div(templateObject_3$q || (templateObject_3$q = __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$k || (templateObject_4$k = __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$H, templateObject_2$w, templateObject_3$q, templateObject_4$k;
|
|
450
450
|
|
|
451
451
|
var LoaderButton = function LoaderButton(_a) {
|
|
452
452
|
var children = _a.children,
|
|
@@ -6148,6 +6148,8 @@ var initialState$4 = {
|
|
|
6148
6148
|
documentTooClose: false,
|
|
6149
6149
|
flipRequired: false,
|
|
6150
6150
|
backDetectedFirst: false,
|
|
6151
|
+
idCardDetectedButNotAllowed: false,
|
|
6152
|
+
passportDetectedButNotAllowed: false,
|
|
6151
6153
|
enableOverrideWrongDocumentTypeDialog: false,
|
|
6152
6154
|
allowOverrideWrongDocumentTypeAfterMs: 8000,
|
|
6153
6155
|
allowOverrideWrongDocumentTypeGuidance: false,
|
|
@@ -6275,6 +6277,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6275
6277
|
goodFramesThreshold = Math.ceil(3 * frameCaptureRate);
|
|
6276
6278
|
}
|
|
6277
6279
|
}
|
|
6280
|
+
var idCardDetectedButNotAllowed = !state.captureRequirement.includes('idCard') && detectedDocumentType.includes('idCard');
|
|
6281
|
+
var passportDetectedButNotAllowed = !state.captureRequirement.toLowerCase().includes('passport') && detectedDocumentType === 'passport';
|
|
6278
6282
|
var flipRequired = !state.overrideWrongDocumentTypeGuidance && (state.allowIdCardBackToFrontCapture ? 'idCardFront' in state.capturedDocuments && detectedDocumentType === 'idCardFront' : state.requestedDocumentType === 'idCardBack' && detectedDocumentType === 'idCardFront');
|
|
6279
6283
|
var backDetectedFirst = !state.overrideWrongDocumentTypeGuidance && (state.allowIdCardBackToFrontCapture ? 'idCardBack' in state.capturedDocuments && detectedDocumentType === 'idCardBack' : state.requestedDocumentType === 'idCardFront' && detectedDocumentType === 'idCardBack');
|
|
6280
6284
|
var wrongDocumentTypePredictions = state.wrongDocumentTypePredictions;
|
|
@@ -6318,6 +6322,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6318
6322
|
documentTooClose: documentTooClose,
|
|
6319
6323
|
flipRequired: flipRequired,
|
|
6320
6324
|
backDetectedFirst: backDetectedFirst,
|
|
6325
|
+
idCardDetectedButNotAllowed: idCardDetectedButNotAllowed,
|
|
6326
|
+
passportDetectedButNotAllowed: passportDetectedButNotAllowed,
|
|
6321
6327
|
allowOverrideWrongDocumentTypeGuidance: allowOverrideFlipRequirement,
|
|
6322
6328
|
wrongDocumentTypePredictions: wrongDocumentTypePredictions,
|
|
6323
6329
|
idCardFrontDetectionScore: idCardFrontDetectionScore,
|
|
@@ -6499,11 +6505,11 @@ function DebugStatsPane(_a) {
|
|
|
6499
6505
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6500
6506
|
}
|
|
6501
6507
|
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
6502
|
-
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$
|
|
6508
|
+
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$v || (templateObject_2$v = __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
6509
|
var $flipX = _a.$flipX;
|
|
6504
6510
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6505
6511
|
});
|
|
6506
|
-
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$
|
|
6512
|
+
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$p || (templateObject_3$p = __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
6513
|
var $color = _a.$color;
|
|
6508
6514
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
6509
6515
|
}, function (_a) {
|
|
@@ -6513,7 +6519,7 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$o ||
|
|
|
6513
6519
|
var $flipX = _a.$flipX;
|
|
6514
6520
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6515
6521
|
});
|
|
6516
|
-
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$
|
|
6522
|
+
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$j || (templateObject_4$j = __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
6523
|
var $color = _a.$color;
|
|
6518
6524
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
6519
6525
|
}, function (_a) {
|
|
@@ -6704,7 +6710,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
6704
6710
|
}
|
|
6705
6711
|
});
|
|
6706
6712
|
}
|
|
6707
|
-
var templateObject_1$D, templateObject_2$
|
|
6713
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$p, templateObject_4$j;
|
|
6708
6714
|
|
|
6709
6715
|
var enTranslation = {};
|
|
6710
6716
|
|
|
@@ -6736,6 +6742,8 @@ var esTranslation = {
|
|
|
6736
6742
|
'Document out of focus – try improving the lighting': 'Documento no enfocado - hay que tratar de mejorar la iluminación',
|
|
6737
6743
|
'ID card front detected - please flip your ID card': 'Anverso de ID detectado, por favor voltea tu identificación',
|
|
6738
6744
|
'ID card back detected - please flip your ID card': 'Reverso de ID detectado, por favor voltea tu identificación',
|
|
6745
|
+
'ID card detected, please scan a passport instead': 'Se ha detectado una credencial, por favor hay que escanear un pasaporte',
|
|
6746
|
+
'Passport detected, please scan an ID card instead': 'Se ha detectado un pasaporte, por favor hay que escanear una credencial',
|
|
6739
6747
|
'Document detected, hold still...': 'Se ha detectado el documento, no moverse por favor...',
|
|
6740
6748
|
'ID card front detected, hold still...': 'Anverso de ID detectado, no mover...',
|
|
6741
6749
|
'ID card back detected, hold still...': 'Reverso de ID detectado, no mover...',
|
|
@@ -6889,14 +6897,14 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
6889
6897
|
if (!portalLocation) return element;
|
|
6890
6898
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
6891
6899
|
};
|
|
6892
|
-
var GuidanceMessage = styled__default.default.div(templateObject_2$
|
|
6900
|
+
var GuidanceMessage = styled__default.default.div(templateObject_2$u || (templateObject_2$u = __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
6901
|
var _a, _b, _c, _d, _e, _f;
|
|
6894
6902
|
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
6903
|
}, function (props) {
|
|
6896
6904
|
var _a, _b, _c, _d, _e, _f;
|
|
6897
6905
|
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
6906
|
});
|
|
6899
|
-
var templateObject_1$C, templateObject_2$
|
|
6907
|
+
var templateObject_1$C, templateObject_2$u;
|
|
6900
6908
|
|
|
6901
6909
|
var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
|
|
6902
6910
|
|
|
@@ -6913,7 +6921,7 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
6913
6921
|
buttonText: 'OK'
|
|
6914
6922
|
});
|
|
6915
6923
|
if (!state.allowOverrideWrongDocumentTypeGuidance) return null;
|
|
6916
|
-
return /*#__PURE__*/React__namespace.default.createElement(Container$
|
|
6924
|
+
return /*#__PURE__*/React__namespace.default.createElement(Container$2, {
|
|
6917
6925
|
className: classNames.container
|
|
6918
6926
|
}, /*#__PURE__*/React__namespace.default.createElement(InnerContainer, {
|
|
6919
6927
|
className: classNames.inner
|
|
@@ -6931,18 +6939,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
6931
6939
|
}
|
|
6932
6940
|
}, verbiage.buttonText))));
|
|
6933
6941
|
}
|
|
6934
|
-
var Container$
|
|
6942
|
+
var Container$2 = styled__default.default.div(templateObject_1$B || (templateObject_1$B = __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
6943
|
var _a, _b, _c;
|
|
6936
6944
|
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
6945
|
}, function (props) {
|
|
6938
6946
|
var _a, _b, _c;
|
|
6939
6947
|
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
6948
|
});
|
|
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$B, templateObject_2$
|
|
6949
|
+
var InnerContainer = styled__default.default.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
6950
|
+
var Message = styled__default.default.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
|
|
6951
|
+
var ButtonContainer = styled__default.default.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
6952
|
+
var Button = styled__default.default(LoaderButton)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
6953
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c;
|
|
6946
6954
|
|
|
6947
6955
|
var IdCapture = function IdCapture(_a) {
|
|
6948
6956
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -7056,7 +7064,9 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7056
7064
|
guidanceTooBlurryText: 'Document out of focus – try improving the lighting',
|
|
7057
7065
|
guidanceNotCenteredText: 'Document is not centered',
|
|
7058
7066
|
guidanceTooCloseText: 'Document too close, please back up',
|
|
7059
|
-
guidanceNotDetectedText: 'Document not detected'
|
|
7067
|
+
guidanceNotDetectedText: 'Document not detected',
|
|
7068
|
+
guidanceIdCardNotAllowedText: 'ID card detected, please scan a passport instead',
|
|
7069
|
+
guidancePassportNotAllowedText: 'Passport detected, please scan an ID card instead'
|
|
7060
7070
|
});
|
|
7061
7071
|
var debugScalingDetails = useDebugScalingDetails({
|
|
7062
7072
|
enabled: debugMode,
|
|
@@ -7067,7 +7077,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7067
7077
|
});
|
|
7068
7078
|
var satisfied = state.isGoodFrame;
|
|
7069
7079
|
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 : '');
|
|
7080
|
+
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
7081
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
7072
7082
|
ref: ref,
|
|
7073
7083
|
className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
|
|
@@ -7139,10 +7149,10 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7139
7149
|
}, verbiage.retryBtnText)));
|
|
7140
7150
|
};
|
|
7141
7151
|
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$A || (templateObject_1$A = __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$
|
|
7143
|
-
var Description$4 = styled__default.default.p(templateObject_3$
|
|
7144
|
-
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$
|
|
7145
|
-
var templateObject_1$A, templateObject_2$
|
|
7152
|
+
var StyledOverlayImageContainer$3 = styled__default.default(OverlayImageContainer)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7153
|
+
var Description$4 = styled__default.default.p(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
7154
|
+
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7155
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$n, templateObject_4$h;
|
|
7146
7156
|
|
|
7147
7157
|
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$z || (templateObject_1$z = __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
7158
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
@@ -7833,17 +7843,17 @@ var OverlayInner$1 = styled__default.default.div(templateObject_1$x || (template
|
|
|
7833
7843
|
var _a, _b, _c, _d;
|
|
7834
7844
|
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
7845
|
});
|
|
7836
|
-
var OverlayHeader$1 = styled__default.default.div(templateObject_2$
|
|
7846
|
+
var OverlayHeader$1 = styled__default.default.div(templateObject_2$r || (templateObject_2$r = __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
7847
|
var _a;
|
|
7838
7848
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
7839
7849
|
}, function (props) {
|
|
7840
7850
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
7841
7851
|
});
|
|
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$
|
|
7852
|
+
var StyledGuidanceMessage$2 = styled__default.default(GuidanceMessage)(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
7853
|
+
var StyledOverlayImageContainer$2 = styled__default.default(OverlayImageContainer)(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
7854
|
+
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
7855
|
+
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_6$9 || (templateObject_6$9 = __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"])));
|
|
7856
|
+
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7847
7857
|
var StyledButtonsRow$a = styled__default.default(ButtonsRow$1)(templateObject_8$4 || (templateObject_8$4 = __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
7858
|
var _a, _b, _c, _d;
|
|
7849
7859
|
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';
|
|
@@ -7878,10 +7888,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_18 |
|
|
|
7878
7888
|
var _a, _b, _c, _d, _e, _f;
|
|
7879
7889
|
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
7890
|
});
|
|
7881
|
-
var templateObject_1$x, templateObject_2$
|
|
7891
|
+
var templateObject_1$x, templateObject_2$r, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$4, 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
7892
|
|
|
7883
7893
|
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$w || (templateObject_1$w = __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$
|
|
7894
|
+
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7885
7895
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
7886
7896
|
var _b, _c, _d, _e;
|
|
7887
7897
|
var onDismissed = _a.onDismissed,
|
|
@@ -7992,7 +8002,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
7992
8002
|
}
|
|
7993
8003
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
7994
8004
|
};
|
|
7995
|
-
var templateObject_1$w, templateObject_2$
|
|
8005
|
+
var templateObject_1$w, templateObject_2$q;
|
|
7996
8006
|
|
|
7997
8007
|
var components$1 = {
|
|
7998
8008
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8135,17 +8145,17 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8135
8145
|
finished: true
|
|
8136
8146
|
}, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
|
|
8137
8147
|
};
|
|
8138
|
-
var Heading$a = styled__default.default.h1(templateObject_2$
|
|
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$
|
|
8148
|
+
var Heading$a = styled__default.default.h1(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
|
|
8149
|
+
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
|
|
8150
|
+
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
|
|
8151
|
+
var ImageCol$1 = styled__default.default.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
|
|
8152
|
+
var ImageHeading = styled__default.default.h3(templateObject_6$8 || (templateObject_6$8 = __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"])));
|
|
8153
|
+
var CapturedImageWrapper = styled__default.default.div(templateObject_7$6 || (templateObject_7$6 = __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
8154
|
var _a, _b, _c;
|
|
8145
8155
|
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
8156
|
});
|
|
8147
8157
|
var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
|
|
8148
|
-
var templateObject_1$v, templateObject_2$
|
|
8158
|
+
var templateObject_1$v, templateObject_2$p, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$3;
|
|
8149
8159
|
|
|
8150
8160
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8151
8161
|
var _this = this;
|
|
@@ -8215,33 +8225,34 @@ var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
|
8215
8225
|
var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n position: relative;\n ", "\n box-sizing: border-box;\n"], ["\n position: relative;\n ", "\n box-sizing: border-box;\n"])), function (props) {
|
|
8216
8226
|
return props.$isVisible ? '' : 'opacity: 0;';
|
|
8217
8227
|
});
|
|
8218
|
-
var IdCardGuideImage = styled__default.default.img(templateObject_2$
|
|
8228
|
+
var IdCardGuideImage = styled__default.default.img(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), function (props) {
|
|
8219
8229
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8220
8230
|
}, function (props) {
|
|
8221
8231
|
return props.$isInvisible ? 'opacity: 0;' : '';
|
|
8222
8232
|
});
|
|
8223
8233
|
function IdCardBorder(_a) {
|
|
8234
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
8224
8235
|
var children = _a.children,
|
|
8225
|
-
|
|
8226
|
-
status =
|
|
8227
|
-
|
|
8228
|
-
borderWidth =
|
|
8229
|
-
|
|
8230
|
-
borderRadius =
|
|
8231
|
-
|
|
8232
|
-
borderColor =
|
|
8233
|
-
|
|
8234
|
-
progress =
|
|
8236
|
+
_l = _a.status,
|
|
8237
|
+
status = _l === void 0 ? 'ready' : _l,
|
|
8238
|
+
_m = _a.borderWidth,
|
|
8239
|
+
borderWidth = _m === void 0 ? 20 : _m,
|
|
8240
|
+
_o = _a.borderRadius,
|
|
8241
|
+
borderRadius = _o === void 0 ? 25 : _o,
|
|
8242
|
+
_p = _a.borderColor,
|
|
8243
|
+
borderColor = _p === void 0 ? 'white' : _p,
|
|
8244
|
+
_q = _a.progress,
|
|
8245
|
+
progress = _q === void 0 ? 0 : _q,
|
|
8235
8246
|
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "progress"]);
|
|
8236
|
-
var
|
|
8237
|
-
ref =
|
|
8238
|
-
|
|
8239
|
-
width =
|
|
8240
|
-
|
|
8241
|
-
height =
|
|
8242
|
-
var
|
|
8243
|
-
progressResets =
|
|
8244
|
-
setProgressResets =
|
|
8247
|
+
var _r = useResizeObserver__default.default(),
|
|
8248
|
+
ref = _r.ref,
|
|
8249
|
+
_s = _r.width,
|
|
8250
|
+
width = _s === void 0 ? 0 : _s,
|
|
8251
|
+
_t = _r.height,
|
|
8252
|
+
height = _t === void 0 ? 0 : _t;
|
|
8253
|
+
var _u = React.useState(0),
|
|
8254
|
+
progressResets = _u[0],
|
|
8255
|
+
setProgressResets = _u[1];
|
|
8245
8256
|
React.useEffect(function () {
|
|
8246
8257
|
if (progress === 0 && status === 'capturing') {
|
|
8247
8258
|
setProgressResets(function (n) {
|
|
@@ -8249,14 +8260,18 @@ function IdCardBorder(_a) {
|
|
|
8249
8260
|
});
|
|
8250
8261
|
}
|
|
8251
8262
|
}, [progress, status]);
|
|
8263
|
+
var theme = styled.useTheme();
|
|
8264
|
+
var wavesDisabled = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.wavesDisabled) !== null && _d !== void 0 ? _d : false;
|
|
8265
|
+
var wavesColor = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.wavesColor) !== null && _g !== void 0 ? _g : '#287ec6';
|
|
8266
|
+
var progressBarColor = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.progressBarColor) !== null && _k !== void 0 ? _k : '#287ec6';
|
|
8252
8267
|
return /*#__PURE__*/React__namespace.default.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React__namespace.default.createElement("div", {
|
|
8253
8268
|
ref: ref
|
|
8254
|
-
}, children), status === 'ready' && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
8269
|
+
}, children), status === 'ready' && !wavesDisabled && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
8255
8270
|
width: width,
|
|
8256
8271
|
height: height,
|
|
8257
8272
|
borderRadius: borderRadius,
|
|
8258
8273
|
borderOpacity: 0.25,
|
|
8259
|
-
borderColor:
|
|
8274
|
+
borderColor: wavesColor,
|
|
8260
8275
|
borderWidth: borderWidth,
|
|
8261
8276
|
className: "pulse"
|
|
8262
8277
|
}), /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
@@ -8264,7 +8279,7 @@ function IdCardBorder(_a) {
|
|
|
8264
8279
|
height: height,
|
|
8265
8280
|
borderRadius: borderRadius,
|
|
8266
8281
|
borderOpacity: 0.25,
|
|
8267
|
-
borderColor:
|
|
8282
|
+
borderColor: wavesColor,
|
|
8268
8283
|
borderWidth: borderWidth,
|
|
8269
8284
|
className: "pulse"
|
|
8270
8285
|
}), /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
@@ -8272,7 +8287,7 @@ function IdCardBorder(_a) {
|
|
|
8272
8287
|
height: height,
|
|
8273
8288
|
borderRadius: borderRadius,
|
|
8274
8289
|
borderOpacity: 0.25,
|
|
8275
|
-
borderColor:
|
|
8290
|
+
borderColor: wavesColor,
|
|
8276
8291
|
borderWidth: borderWidth,
|
|
8277
8292
|
className: "pulse"
|
|
8278
8293
|
}))), /*#__PURE__*/React__namespace.default.createElement(IdCardBorderSvg, {
|
|
@@ -8287,7 +8302,7 @@ function IdCardBorder(_a) {
|
|
|
8287
8302
|
width: width,
|
|
8288
8303
|
height: height,
|
|
8289
8304
|
borderRadius: borderRadius,
|
|
8290
|
-
borderColor:
|
|
8305
|
+
borderColor: progressBarColor,
|
|
8291
8306
|
borderWidth: borderWidth,
|
|
8292
8307
|
isProgressBar: true,
|
|
8293
8308
|
progress: progress,
|
|
@@ -8350,16 +8365,16 @@ function IdCardBorderSvg(_a) {
|
|
|
8350
8365
|
className: isProgressBar ? "progress ".concat(progressPaused ? 'paused' : '') : ''
|
|
8351
8366
|
}));
|
|
8352
8367
|
}
|
|
8353
|
-
var IdCardBorderContainer = styled__default.default.div(templateObject_3$
|
|
8354
|
-
var SvgOverlay = styled__default.default.svg(templateObject_4$
|
|
8355
|
-
var IdCardBorderRect = styled__default.default.rect(templateObject_5$
|
|
8368
|
+
var IdCardBorderContainer = styled__default.default.div(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
8369
|
+
var SvgOverlay = styled__default.default.svg(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
8370
|
+
var IdCardBorderRect = styled__default.default.rect(templateObject_5$9 || (templateObject_5$9 = __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) {
|
|
8356
8371
|
var _a;
|
|
8357
8372
|
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
8358
8373
|
}, function (props) {
|
|
8359
8374
|
var _a;
|
|
8360
8375
|
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
8361
8376
|
});
|
|
8362
|
-
var templateObject_1$u, templateObject_2$
|
|
8377
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$k, templateObject_4$e, templateObject_5$9;
|
|
8363
8378
|
|
|
8364
8379
|
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
8365
8380
|
var _b;
|
|
@@ -8557,7 +8572,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
|
8557
8572
|
borderWidth = _a.borderWidth,
|
|
8558
8573
|
borderColor = _a.borderColor,
|
|
8559
8574
|
_y = _a.idCardBorderWidth,
|
|
8560
|
-
idCardBorderWidth = _y === void 0 ?
|
|
8575
|
+
idCardBorderWidth = _y === void 0 ? '2.5%' : _y,
|
|
8561
8576
|
_z = _a.idCardBorderColor,
|
|
8562
8577
|
idCardBorderColor = _z === void 0 ? 'white' : _z,
|
|
8563
8578
|
maskColor = _a.maskColor,
|
|
@@ -8639,7 +8654,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
|
8639
8654
|
(_q = assets.flipIdPrompt).idCardFrontLandscapeImageUrl || (_q.idCardFrontLandscapeImageUrl = images.landscape.SHOW_ID_FRONT);
|
|
8640
8655
|
(_r = assets.flipIdPrompt).idCardBackPortraitImageUrl || (_r.idCardBackPortraitImageUrl = images.portrait.SHOW_ID_BACK);
|
|
8641
8656
|
(_s = assets.flipIdPrompt).idCardBackLandscapeImageUrl || (_s.idCardBackLandscapeImageUrl = images.landscape.SHOW_ID_BACK);
|
|
8642
|
-
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 :
|
|
8657
|
+
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 : 50;
|
|
8643
8658
|
var imageWidth = state.guideRectWidth - imagePadding * 2;
|
|
8644
8659
|
var imageHeight = state.guideRectHeight - imagePadding * 2;
|
|
8645
8660
|
var centerRegionMinWidth = imageAspectRatio >= wrapperAspectRatio ? wrapperWidth - paddingAndBorderPx : undefined;
|
|
@@ -8716,9 +8731,9 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
8716
8731
|
}).join(' ');
|
|
8717
8732
|
};
|
|
8718
8733
|
var StyledPageContainer = styled__default.default(PageContainerDiv)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n z-index: 1000;\n overflow-y: hidden;\n"], ["\n z-index: 1000;\n overflow-y: hidden;\n"])));
|
|
8719
|
-
var GuidesContainer = styled__default.default.div(templateObject_2$
|
|
8720
|
-
var GuideCenterRow = styled__default.default.div(templateObject_3$
|
|
8721
|
-
var GuideRegion = styled__default.default.div(templateObject_4$
|
|
8734
|
+
var GuidesContainer = styled__default.default.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100dvw;\n height: 100dvh;\n"])));
|
|
8735
|
+
var GuideCenterRow = styled__default.default.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n min-height: 0;\n flex: 1;\n"], ["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n min-height: 0;\n flex: 1;\n"])));
|
|
8736
|
+
var GuideRegion = styled__default.default.div(templateObject_4$d || (templateObject_4$d = __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) {
|
|
8722
8737
|
var _a, _b, _c, _d, _e;
|
|
8723
8738
|
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)';
|
|
8724
8739
|
}, function (props) {
|
|
@@ -8729,13 +8744,13 @@ var GuideRegion = styled__default.default.div(templateObject_4$c || (templateObj
|
|
|
8729
8744
|
}, function (props) {
|
|
8730
8745
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
8731
8746
|
});
|
|
8732
|
-
var Spacer = styled__default.default(GuideRegion)(templateObject_5$
|
|
8733
|
-
var GuideCenterRegion = styled__default.default.div(templateObject_6$
|
|
8747
|
+
var Spacer = styled__default.default(GuideRegion)(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
8748
|
+
var GuideCenterRegion = styled__default.default.div(templateObject_6$7 || (templateObject_6$7 = __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) {
|
|
8734
8749
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
8735
8750
|
}, function (props) {
|
|
8736
8751
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8737
8752
|
});
|
|
8738
|
-
var GuideCenterBorder = styled__default.default.div(templateObject_7$
|
|
8753
|
+
var GuideCenterBorder = styled__default.default.div(templateObject_7$5 || (templateObject_7$5 = __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) {
|
|
8739
8754
|
var _a, _b;
|
|
8740
8755
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
8741
8756
|
}, function (props) {
|
|
@@ -8743,7 +8758,7 @@ var GuideCenterBorder = styled__default.default.div(templateObject_7$4 || (templ
|
|
|
8743
8758
|
});
|
|
8744
8759
|
var GuideText = styled__default.default.span(templateObject_8$2 || (templateObject_8$2 = __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"])));
|
|
8745
8760
|
var GuideCenterInner = styled__default.default.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n position: relative;\n margin: auto;\n"], ["\n position: relative;\n margin: auto;\n"])));
|
|
8746
|
-
var templateObject_1$s, templateObject_2$
|
|
8761
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$1;
|
|
8747
8762
|
|
|
8748
8763
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
8749
8764
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -8889,8 +8904,8 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
8889
8904
|
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"])), function (props) {
|
|
8890
8905
|
return props.$maskColor;
|
|
8891
8906
|
});
|
|
8892
|
-
var Canvas$1 = styled__default.default.canvas(templateObject_2$
|
|
8893
|
-
var templateObject_1$r, templateObject_2$
|
|
8907
|
+
var Canvas$1 = styled__default.default.canvas(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
8908
|
+
var templateObject_1$r, templateObject_2$m;
|
|
8894
8909
|
|
|
8895
8910
|
function IdCaptureGuides(_a) {
|
|
8896
8911
|
var _b, _c;
|
|
@@ -9033,10 +9048,10 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
9033
9048
|
})));
|
|
9034
9049
|
};
|
|
9035
9050
|
var StyledSpinner = styled__default.default(Spinner)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"], ["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"])));
|
|
9036
|
-
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$
|
|
9037
|
-
var ImagePreviewText = styled__default.default.div(templateObject_3$
|
|
9038
|
-
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$
|
|
9039
|
-
var templateObject_1$q, templateObject_2$
|
|
9051
|
+
var ImagePreviewWrapper = styled__default.default.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: column;\n height: 33%;\n bottom: 12px;\n right: 12px;\n"], ["\n position: absolute;\n display: flex;\n flex-direction: column;\n height: 33%;\n bottom: 12px;\n right: 12px;\n"])));
|
|
9052
|
+
var ImagePreviewText = styled__default.default.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"], ["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"])));
|
|
9053
|
+
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
9054
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$c;
|
|
9040
9055
|
|
|
9041
9056
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
9042
9057
|
var _b;
|
|
@@ -9437,8 +9452,8 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
9437
9452
|
var CanvasWrapper = styled__default.default.div(templateObject_1$o || (templateObject_1$o = __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) {
|
|
9438
9453
|
return props.$maskColor;
|
|
9439
9454
|
});
|
|
9440
|
-
var Canvas = styled__default.default.canvas(templateObject_2$
|
|
9441
|
-
var templateObject_1$o, templateObject_2$
|
|
9455
|
+
var Canvas = styled__default.default.canvas(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9456
|
+
var templateObject_1$o, templateObject_2$k;
|
|
9442
9457
|
|
|
9443
9458
|
var CameraFeedWrapper = styled__default.default.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
9444
9459
|
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;") : "";
|
|
@@ -9594,20 +9609,20 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
9594
9609
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
9595
9610
|
};
|
|
9596
9611
|
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"])));
|
|
9597
|
-
var HeadingRow = styled__default.default.div(templateObject_2$
|
|
9612
|
+
var HeadingRow = styled__default.default.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
|
|
9598
9613
|
return props.$maskColor;
|
|
9599
9614
|
});
|
|
9600
|
-
var Heading$9 = styled__default.default.h1(templateObject_3$
|
|
9601
|
-
var FooterRow = styled__default.default.div(templateObject_4$
|
|
9615
|
+
var Heading$9 = styled__default.default.h1(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
|
|
9616
|
+
var FooterRow = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __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) {
|
|
9602
9617
|
return props.$maskColor;
|
|
9603
9618
|
});
|
|
9604
|
-
var Instructions = styled__default.default.div(templateObject_5$
|
|
9619
|
+
var Instructions = styled__default.default.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
|
|
9605
9620
|
var _a, _b, _c;
|
|
9606
9621
|
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';
|
|
9607
9622
|
});
|
|
9608
|
-
var StyledButtonsRow$9 = styled__default.default(ButtonsRow$1)(templateObject_6$
|
|
9609
|
-
var PreviewImage = styled__default.default.img(templateObject_7$
|
|
9610
|
-
var templateObject_1$m, templateObject_2$
|
|
9623
|
+
var StyledButtonsRow$9 = styled__default.default(ButtonsRow$1)(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
|
|
9624
|
+
var PreviewImage = styled__default.default.img(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
|
|
9625
|
+
var templateObject_1$m, templateObject_2$j, templateObject_3$h, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$4;
|
|
9611
9626
|
|
|
9612
9627
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
9613
9628
|
var onSuccess = _a.onSuccess,
|
|
@@ -9877,12 +9892,12 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
9877
9892
|
}, verbiage.doneBtnText))))));
|
|
9878
9893
|
};
|
|
9879
9894
|
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"])));
|
|
9880
|
-
var Heading$8 = styled__default.default.h3(templateObject_2$
|
|
9881
|
-
var Description$3 = styled__default.default.p(templateObject_3$
|
|
9882
|
-
var Instruction = styled__default.default.p(templateObject_4$
|
|
9883
|
-
var ImageCol = styled__default.default.div(templateObject_5$
|
|
9884
|
-
var StyledButtonsRow$8 = styled__default.default(ButtonsRow$1)(templateObject_6$
|
|
9885
|
-
var templateObject_1$l, templateObject_2$
|
|
9895
|
+
var Heading$8 = styled__default.default.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9896
|
+
var Description$3 = styled__default.default.p(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
9897
|
+
var Instruction = styled__default.default.p(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
9898
|
+
var ImageCol = styled__default.default.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
9899
|
+
var StyledButtonsRow$8 = styled__default.default(ButtonsRow$1)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
9900
|
+
var templateObject_1$l, templateObject_2$i, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
9886
9901
|
|
|
9887
9902
|
function ScalingCameraFeed() {
|
|
9888
9903
|
var _a = React.useContext(IdCaptureStateContext),
|
|
@@ -10630,8 +10645,8 @@ function HeadGuide(_a) {
|
|
|
10630
10645
|
status: status
|
|
10631
10646
|
})));
|
|
10632
10647
|
}
|
|
10633
|
-
var RelativeSvg = styled__default.default.svg(templateObject_2$
|
|
10634
|
-
var RelativeSvgContainer = styled__default.default.div(templateObject_3$
|
|
10648
|
+
var RelativeSvg = styled__default.default.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
10649
|
+
var RelativeSvgContainer = styled__default.default.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"])), function (props) {
|
|
10635
10650
|
return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
|
|
10636
10651
|
});
|
|
10637
10652
|
function SelfieCaptureAnimatedMask(_a) {
|
|
@@ -10858,7 +10873,7 @@ function SelfieCaptureAnimatedMaskWithStatus(_a) {
|
|
|
10858
10873
|
status: status
|
|
10859
10874
|
}));
|
|
10860
10875
|
}
|
|
10861
|
-
var templateObject_1$k, templateObject_2$
|
|
10876
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$f;
|
|
10862
10877
|
|
|
10863
10878
|
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"
|
|
10864
10879
|
// const FaceCaptureGuideOval = styled.div<{
|
|
@@ -10894,7 +10909,7 @@ var FaceCaptureGuideContainer = styled__default.default.div(templateObject_1$j |
|
|
|
10894
10909
|
// height: 50%;
|
|
10895
10910
|
// margin: auto;
|
|
10896
10911
|
// `
|
|
10897
|
-
var StyledSelfieCaptureAnimatedMask$
|
|
10912
|
+
var StyledSelfieCaptureAnimatedMask$2 = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n max-width: 100%;\n max-height: 100%;\n height: 60%;\n"], ["\n max-width: 100%;\n max-height: 100%;\n height: 60%;\n"])));
|
|
10898
10913
|
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
10899
10914
|
var _b = _a.classNames,
|
|
10900
10915
|
classNames = _b === void 0 ? {} : _b,
|
|
@@ -10908,7 +10923,7 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
|
10908
10923
|
borderOpacity = _f === void 0 ? 0.8 : _f;
|
|
10909
10924
|
return /*#__PURE__*/React__namespace.default.createElement(FaceCaptureGuideContainer, {
|
|
10910
10925
|
className: classNames.container
|
|
10911
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$
|
|
10926
|
+
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$2, {
|
|
10912
10927
|
status: status,
|
|
10913
10928
|
borderColor: borderColor,
|
|
10914
10929
|
borderWidth: borderWidth,
|
|
@@ -10916,7 +10931,7 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
|
10916
10931
|
verticalAlign: "center"
|
|
10917
10932
|
}));
|
|
10918
10933
|
};
|
|
10919
|
-
var templateObject_1$j, templateObject_2$
|
|
10934
|
+
var templateObject_1$j, templateObject_2$g;
|
|
10920
10935
|
|
|
10921
10936
|
var SelfieGuidanceModelsContext = /*#__PURE__*/React.createContext({
|
|
10922
10937
|
start: function start() {
|
|
@@ -11213,11 +11228,11 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
11213
11228
|
}, !image ? invalidSelfie ? verbiage.retryButtonText : verbiage.captureBtnText : loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
11214
11229
|
};
|
|
11215
11230
|
var StyledOverlayInner$1 = styled__default.default(OverlayInner$2)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
11216
|
-
var Heading$7 = styled__default.default.h3(templateObject_2$
|
|
11217
|
-
var Description$2 = styled__default.default.p(templateObject_3$
|
|
11218
|
-
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$
|
|
11219
|
-
var StyledButtonsRow$7 = styled__default.default(ButtonsRow$1)(templateObject_5$
|
|
11220
|
-
var templateObject_1$i, templateObject_2$
|
|
11231
|
+
var Heading$7 = styled__default.default.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11232
|
+
var Description$2 = styled__default.default.p(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11233
|
+
var ImageContainer$5 = styled__default.default(OverlayImageContainer)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11234
|
+
var StyledButtonsRow$7 = styled__default.default(ButtonsRow$1)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11235
|
+
var templateObject_1$i, templateObject_2$f, templateObject_3$e, templateObject_4$9, templateObject_5$5;
|
|
11221
11236
|
|
|
11222
11237
|
var initialState$3 = {
|
|
11223
11238
|
videoWidth: 0,
|
|
@@ -11874,13 +11889,13 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
|
11874
11889
|
}, verbiage.exitBtnText)))));
|
|
11875
11890
|
};
|
|
11876
11891
|
var ImageContainer$4 = styled__default.default(OverlayImageContainer)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n"], ["\n max-height: calc(100vh - 185px);\n"])));
|
|
11877
|
-
var Heading$5 = styled__default.default.h3(templateObject_2$
|
|
11878
|
-
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_3$
|
|
11879
|
-
var Card = styled__default.default.div(templateObject_4$
|
|
11880
|
-
var WideButton = styled__default.default(LoaderButton)(templateObject_5$
|
|
11881
|
-
var ButtonsRow = styled__default.default.div(templateObject_6$
|
|
11882
|
-
var WideBorderButton = styled__default.default(WideButton)(templateObject_7$
|
|
11883
|
-
var templateObject_1$g, templateObject_2$
|
|
11892
|
+
var Heading$5 = styled__default.default.h3(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-bottom: 36px;\n"], ["\n margin-bottom: 36px;\n"])));
|
|
11893
|
+
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
11894
|
+
var Card = styled__default.default.div(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
11895
|
+
var WideButton = styled__default.default(LoaderButton)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
11896
|
+
var ButtonsRow = styled__default.default.div(templateObject_6$4 || (templateObject_6$4 = __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"])));
|
|
11897
|
+
var WideBorderButton = styled__default.default(WideButton)(templateObject_7$3 || (templateObject_7$3 = __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"])));
|
|
11898
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$4, templateObject_7$3;
|
|
11884
11899
|
|
|
11885
11900
|
var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
11886
11901
|
var _b;
|
|
@@ -11922,10 +11937,10 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
|
11922
11937
|
}, verbiage.retryBtnText)));
|
|
11923
11938
|
};
|
|
11924
11939
|
var StyledOverlayInner = styled__default.default(OverlayInner$2)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
11925
|
-
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
11926
|
-
var Description$1 = styled__default.default.p(templateObject_3$
|
|
11927
|
-
var RetryButton = styled__default.default(LoaderButton)(templateObject_4$
|
|
11928
|
-
var templateObject_1$f, templateObject_2$
|
|
11940
|
+
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
11941
|
+
var Description$1 = styled__default.default.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
11942
|
+
var RetryButton = styled__default.default(LoaderButton)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
11943
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$7;
|
|
11929
11944
|
|
|
11930
11945
|
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
11931
11946
|
var onDismissed = _a.onDismissed,
|
|
@@ -12005,8 +12020,8 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
|
|
|
12005
12020
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
12006
12021
|
};
|
|
12007
12022
|
var StyledGuidanceMessage$1 = styled__default.default(GuidanceMessage)(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
12008
|
-
var StyledButtonsRow$6 = styled__default.default(ButtonsRow$1)(templateObject_2$
|
|
12009
|
-
var templateObject_1$e, templateObject_2$
|
|
12023
|
+
var StyledButtonsRow$6 = styled__default.default(ButtonsRow$1)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-direction: column;\n padding-top: 25px;\n"], ["\n flex-direction: column;\n padding-top: 25px;\n"])));
|
|
12024
|
+
var templateObject_1$e, templateObject_2$c;
|
|
12010
12025
|
|
|
12011
12026
|
var legacyInstructionImageUrl = "".concat(DEFAULT_CDN_URL, "/Selfie-Image-1.png");
|
|
12012
12027
|
var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDefault(_a) {
|
|
@@ -12127,23 +12142,23 @@ var OverlayInner = styled__default.default.div(templateObject_1$d || (templateOb
|
|
|
12127
12142
|
var _a, _b, _c, _d;
|
|
12128
12143
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
12129
12144
|
});
|
|
12130
|
-
var OverlayHeader = styled__default.default.div(templateObject_2$
|
|
12145
|
+
var OverlayHeader = styled__default.default.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"])), function (props) {
|
|
12131
12146
|
var _a;
|
|
12132
12147
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
12133
12148
|
}, function (props) {
|
|
12134
12149
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
12135
12150
|
});
|
|
12136
|
-
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
12137
|
-
var StyledButtonsRow$5 = styled__default.default(ButtonsRow$1)(templateObject_4$
|
|
12151
|
+
var StyledGuidanceMessage = styled__default.default(GuidanceMessage)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
12152
|
+
var StyledButtonsRow$5 = styled__default.default(ButtonsRow$1)(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
12138
12153
|
var _a, _b, _c, _d;
|
|
12139
12154
|
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';
|
|
12140
12155
|
}, function (props) {
|
|
12141
12156
|
var _a, _b, _c, _d, _e, _f;
|
|
12142
12157
|
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.progressBarFontSize) ? "font-size: ".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.progressBarFontSize, ";") : '';
|
|
12143
12158
|
});
|
|
12144
|
-
var StyledOverlayImageContainer = styled__default.default(OverlayImageContainer)(templateObject_5$
|
|
12145
|
-
var LoadingListContainer = styled__default.default.div(templateObject_6$
|
|
12146
|
-
var LoadingList = styled__default.default.ul(templateObject_7$
|
|
12159
|
+
var StyledOverlayImageContainer = styled__default.default(OverlayImageContainer)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"])));
|
|
12160
|
+
var LoadingListContainer = styled__default.default.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n position: relative;\n z-index: 2;\n"], ["\n display: flex;\n position: relative;\n z-index: 2;\n"])));
|
|
12161
|
+
var LoadingList = styled__default.default.ul(templateObject_7$2 || (templateObject_7$2 = __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"])));
|
|
12147
12162
|
var LoadingListItem = styled__default.default.li(templateObject_8$1 || (templateObject_8$1 = __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"])));
|
|
12148
12163
|
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"])));
|
|
12149
12164
|
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) {
|
|
@@ -12169,7 +12184,7 @@ var ContinueButton = styled__default.default(LoaderButton)(templateObject_15 ||
|
|
|
12169
12184
|
var _a, _b, _c, _d, _e, _f;
|
|
12170
12185
|
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, ";") : '';
|
|
12171
12186
|
});
|
|
12172
|
-
var templateObject_1$d, templateObject_2$
|
|
12187
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
12173
12188
|
|
|
12174
12189
|
var components = {
|
|
12175
12190
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -12517,7 +12532,7 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
12517
12532
|
}
|
|
12518
12533
|
return /*#__PURE__*/React__namespace.default.createElement(OverlayContainer, {
|
|
12519
12534
|
className: classNames.container
|
|
12520
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Inner$
|
|
12535
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Inner$2, {
|
|
12521
12536
|
className: classNames.inner
|
|
12522
12537
|
}, /*#__PURE__*/React__namespace.default.createElement(Heading$4, {
|
|
12523
12538
|
className: classNames.heading
|
|
@@ -12547,11 +12562,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
12547
12562
|
}
|
|
12548
12563
|
}, verbiage.captureBtnText)))));
|
|
12549
12564
|
};
|
|
12550
|
-
var Inner$
|
|
12551
|
-
var Heading$4 = styled__default.default.h3(templateObject_2$
|
|
12552
|
-
var Description = styled__default.default.p(templateObject_3$
|
|
12553
|
-
var StyledButtonsRow$4 = styled__default.default(ButtonsRow$1)(templateObject_4$
|
|
12554
|
-
var templateObject_1$c, templateObject_2$
|
|
12565
|
+
var Inner$2 = styled__default.default(OverlayInner$2)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
12566
|
+
var Heading$4 = styled__default.default.h3(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
12567
|
+
var Description = styled__default.default.p(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
12568
|
+
var StyledButtonsRow$4 = styled__default.default(ButtonsRow$1)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
12569
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$5;
|
|
12555
12570
|
|
|
12556
12571
|
var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
|
|
12557
12572
|
var documents = _a.documents,
|
|
@@ -12705,8 +12720,8 @@ var SignaturePaperBacking = styled__default.default.div(templateObject_1$b || (t
|
|
|
12705
12720
|
var _a, _b;
|
|
12706
12721
|
return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.backgroundPosition) ? "background-position: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.backgroundPosition, ";") : "";
|
|
12707
12722
|
});
|
|
12708
|
-
var SignatureCanvasContainer = styled__default.default.div(templateObject_2$
|
|
12709
|
-
var SignaturePad = styled__default.default.div(templateObject_3$
|
|
12723
|
+
var SignatureCanvasContainer$1 = styled__default.default.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n position: absolute;\n top: 25%;\n left: 15%;\n width: 70%;\n height: 50%;\n\n @media (max-width: 800px) {\n top: 15%;\n left: 2%;\n width: 96%;\n height: 70%;\n }\n"], ["\n position: absolute;\n top: 25%;\n left: 15%;\n width: 70%;\n height: 50%;\n\n @media (max-width: 800px) {\n top: 15%;\n left: 2%;\n width: 96%;\n height: 70%;\n }\n"])));
|
|
12724
|
+
var SignaturePad = styled__default.default.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n"], ["\n position: relative;\n background: ", ";\n border: ", ";\n border-radius: ", ";\n flex-grow: 1;\n z-index: 100;\n height: 100%;\n"])), function (props) {
|
|
12710
12725
|
var _a, _b, _c;
|
|
12711
12726
|
return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.background) !== null && _c !== void 0 ? _c : 'rgba(255, 255, 255, 0.5)';
|
|
12712
12727
|
}, function (props) {
|
|
@@ -12716,8 +12731,8 @@ var SignaturePad = styled__default.default.div(templateObject_3$8 || (templateOb
|
|
|
12716
12731
|
var _a, _b, _c;
|
|
12717
12732
|
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';
|
|
12718
12733
|
});
|
|
12719
|
-
var SignatureButtonsContainer = styled__default.default(ButtonsRow$1)(templateObject_4$
|
|
12720
|
-
var templateObject_1$b, templateObject_2$
|
|
12734
|
+
var SignatureButtonsContainer = styled__default.default(ButtonsRow$1)(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
12735
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$9, templateObject_4$4;
|
|
12721
12736
|
|
|
12722
12737
|
var SignatureCapture = function SignatureCapture(_a) {
|
|
12723
12738
|
var _b;
|
|
@@ -12762,7 +12777,7 @@ var SignatureCapture = function SignatureCapture(_a) {
|
|
|
12762
12777
|
"$top": "5vh"
|
|
12763
12778
|
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
12764
12779
|
className: classNames.guidanceMessage
|
|
12765
|
-
}, verbiage.headingText)), /*#__PURE__*/React__namespace.default.createElement(SignatureCanvasContainer, {
|
|
12780
|
+
}, verbiage.headingText)), /*#__PURE__*/React__namespace.default.createElement(SignatureCanvasContainer$1, {
|
|
12766
12781
|
className: classNames.canvasContainer
|
|
12767
12782
|
}, /*#__PURE__*/React__namespace.default.createElement(SignaturePad, {
|
|
12768
12783
|
ref: ref,
|
|
@@ -12931,58 +12946,69 @@ var useVideoRecorder = function useVideoRecorder(camera, audioStream, mergeAVStr
|
|
|
12931
12946
|
};
|
|
12932
12947
|
};
|
|
12933
12948
|
|
|
12934
|
-
var
|
|
12935
|
-
|
|
12936
|
-
|
|
12937
|
-
|
|
12938
|
-
|
|
12939
|
-
|
|
12940
|
-
|
|
12941
|
-
|
|
12942
|
-
|
|
12943
|
-
|
|
12944
|
-
|
|
12945
|
-
|
|
12946
|
-
|
|
12947
|
-
|
|
12948
|
-
|
|
12949
|
-
|
|
12950
|
-
|
|
12951
|
-
|
|
12952
|
-
|
|
12953
|
-
|
|
12949
|
+
var videoSignatureInitialState = {
|
|
12950
|
+
startRecording: function startRecording() {
|
|
12951
|
+
return null;
|
|
12952
|
+
},
|
|
12953
|
+
stopRecording: function stopRecording() {
|
|
12954
|
+
return null;
|
|
12955
|
+
},
|
|
12956
|
+
signatureData: null,
|
|
12957
|
+
signatureDataUrl: null,
|
|
12958
|
+
signatureVideoData: null,
|
|
12959
|
+
signatureVideoUrl: null,
|
|
12960
|
+
onAcceptClicked: function onAcceptClicked() {
|
|
12961
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
12962
|
+
return __generator(this, function (_a) {
|
|
12963
|
+
return [2 /*return*/, void 0];
|
|
12964
|
+
});
|
|
12965
|
+
});
|
|
12966
|
+
}
|
|
12967
|
+
};
|
|
12968
|
+
var VideoSignatureContext = /*#__PURE__*/React.createContext(videoSignatureInitialState);
|
|
12969
|
+
function VideoSignatureContextProvider(_a) {
|
|
12970
|
+
var _this = this;
|
|
12971
|
+
var children = _a.children;
|
|
12954
12972
|
var signaturePad = React.useRef(null);
|
|
12973
|
+
var _b = React.useState(null),
|
|
12974
|
+
signatureData = _b[0],
|
|
12975
|
+
setSignatureData = _b[1];
|
|
12976
|
+
var _c = React.useState(null),
|
|
12977
|
+
signatureDataUrl = _c[0],
|
|
12978
|
+
setSignatureDataUrl = _c[1];
|
|
12979
|
+
var _d = React.useState(null),
|
|
12980
|
+
signatureVideoData = _d[0],
|
|
12981
|
+
setSignatureVideoData = _d[1];
|
|
12982
|
+
var _e = React.useState(null),
|
|
12983
|
+
signatureVideoUrl = _e[0],
|
|
12984
|
+
setSignatureVideoUrl = _e[1];
|
|
12955
12985
|
var signatureRecorder = React.useRef(null);
|
|
12956
12986
|
var recordedChunks = React.useRef([]);
|
|
12957
|
-
var
|
|
12958
|
-
|
|
12959
|
-
|
|
12960
|
-
|
|
12961
|
-
|
|
12962
|
-
|
|
12963
|
-
|
|
12964
|
-
|
|
12965
|
-
setSignatureData = _o[1];
|
|
12966
|
-
var _p = React.useState(null),
|
|
12967
|
-
signatureDataUrl = _p[0],
|
|
12968
|
-
setSignatureDataUrl = _p[1];
|
|
12969
|
-
var _q = React.useState(null),
|
|
12970
|
-
signatureVideoData = _q[0],
|
|
12971
|
-
setSignatureVideoData = _q[1];
|
|
12972
|
-
colors.guidanceMessageBackgroundColor || (colors.guidanceMessageBackgroundColor = '#ccc');
|
|
12973
|
-
colors.guidanceMessageTextColor || (colors.guidanceMessageTextColor = 'black');
|
|
12974
|
-
var verbiage = useTranslations(rawVerbiage, {
|
|
12975
|
-
guidanceMessageText: 'Please sign the box below',
|
|
12976
|
-
acceptBtnText: 'Accept',
|
|
12977
|
-
clearBtnText: 'Clear'
|
|
12978
|
-
});
|
|
12987
|
+
var _f = React.useContext(CameraStateContext),
|
|
12988
|
+
cameraRef = _f.cameraRef,
|
|
12989
|
+
videoRef = _f.videoRef;
|
|
12990
|
+
var _g = useVideoRecorder(cameraRef.current),
|
|
12991
|
+
isRecordingVideo = _g.isRecordingVideo,
|
|
12992
|
+
startRecordingVideo = _g.startRecordingVideo,
|
|
12993
|
+
stopRecordingVideo = _g.stopRecordingVideo,
|
|
12994
|
+
videoUrl = _g.videoUrl;
|
|
12979
12995
|
var outputCanvas = React.useRef(null);
|
|
12980
12996
|
var recordingLock = React.useRef(false);
|
|
12997
|
+
var _h = React.useState(false),
|
|
12998
|
+
isRecording = _h[0],
|
|
12999
|
+
setIsRecording = _h[1];
|
|
13000
|
+
var startRecording = React.useCallback(function () {
|
|
13001
|
+
setIsRecording(true);
|
|
13002
|
+
}, []);
|
|
13003
|
+
var stopRecording = React.useCallback(function () {
|
|
13004
|
+
setIsRecording(false);
|
|
13005
|
+
}, []);
|
|
12981
13006
|
React.useEffect(function () {
|
|
13007
|
+
if (!isRecording) return;
|
|
12982
13008
|
if (recordingLock.current) return;
|
|
12983
13009
|
recordingLock.current = true;
|
|
12984
13010
|
(function () {
|
|
12985
|
-
return __awaiter(
|
|
13011
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
12986
13012
|
var stream;
|
|
12987
13013
|
return __generator(this, function (_a) {
|
|
12988
13014
|
switch (_a.label) {
|
|
@@ -13018,22 +13044,18 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
13018
13044
|
type: 'video/mp4'
|
|
13019
13045
|
});
|
|
13020
13046
|
setSignatureVideoData(blob);
|
|
13047
|
+
setSignatureVideoUrl(URL.createObjectURL(blob));
|
|
13021
13048
|
};
|
|
13022
13049
|
return [2 /*return*/];
|
|
13023
13050
|
}
|
|
13024
13051
|
});
|
|
13025
13052
|
});
|
|
13026
13053
|
})();
|
|
13027
|
-
}, [isRecordingVideo, startRecordingVideo, videoUrl]);
|
|
13028
|
-
React.useEffect(function () {
|
|
13029
|
-
if (signatureVideoData && signatureData && signatureDataUrl) {
|
|
13030
|
-
onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
|
|
13031
|
-
}
|
|
13032
|
-
}, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
|
|
13054
|
+
}, [isRecording, isRecordingVideo, startRecordingVideo, videoUrl]);
|
|
13033
13055
|
var animationFrame = React.useRef(0);
|
|
13034
13056
|
React.useEffect(function () {
|
|
13035
13057
|
var _a;
|
|
13036
|
-
if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !cameraRef.current || !isRecordingVideo) return;
|
|
13058
|
+
if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !cameraRef.current || !isRecording || !isRecordingVideo) return;
|
|
13037
13059
|
var _b = [cameraRef.current.width, cameraRef.current.height],
|
|
13038
13060
|
w = _b[0],
|
|
13039
13061
|
h = _b[1];
|
|
@@ -13067,24 +13089,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
13067
13089
|
return function () {
|
|
13068
13090
|
cancelAnimationFrame(animationFrame.current);
|
|
13069
13091
|
};
|
|
13070
|
-
}, [cameraRef,
|
|
13071
|
-
var
|
|
13072
|
-
|
|
13073
|
-
setNumFramesWithoutFaces = _r[1];
|
|
13074
|
-
React.useEffect(function () {
|
|
13075
|
-
onPredictionMade(function (faces) {
|
|
13076
|
-
setNumFramesWithoutFaces(function (n) {
|
|
13077
|
-
return faces.length === 0 ? n + 1 : 0;
|
|
13078
|
-
});
|
|
13079
|
-
});
|
|
13080
|
-
}, [onPredictionMade]);
|
|
13081
|
-
React.useEffect(function () {
|
|
13082
|
-
if (numFramesWithoutFaces >= 2) {
|
|
13083
|
-
onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
|
|
13084
|
-
}
|
|
13085
|
-
}, [numFramesWithoutFaces, onFaceNotDetected]);
|
|
13086
|
-
function onAcceptClicked() {
|
|
13087
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
13092
|
+
}, [cameraRef, isRecording, isRecordingVideo, videoRef]);
|
|
13093
|
+
var onAcceptClicked = React.useCallback(function () {
|
|
13094
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
13088
13095
|
var imageUrl;
|
|
13089
13096
|
var _a;
|
|
13090
13097
|
return __generator(this, function (_b) {
|
|
@@ -13102,56 +13109,187 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
13102
13109
|
}
|
|
13103
13110
|
});
|
|
13104
13111
|
});
|
|
13105
|
-
}
|
|
13106
|
-
|
|
13107
|
-
|
|
13108
|
-
|
|
13109
|
-
|
|
13110
|
-
|
|
13111
|
-
|
|
13112
|
-
|
|
13113
|
-
|
|
13114
|
-
|
|
13115
|
-
|
|
13116
|
-
|
|
13112
|
+
}, [stopRecordingVideo]);
|
|
13113
|
+
var value = React.useMemo(function () {
|
|
13114
|
+
return {
|
|
13115
|
+
startRecording: startRecording,
|
|
13116
|
+
stopRecording: stopRecording,
|
|
13117
|
+
signaturePad: signaturePad,
|
|
13118
|
+
signatureData: signatureData,
|
|
13119
|
+
signatureDataUrl: signatureDataUrl,
|
|
13120
|
+
signatureVideoData: signatureVideoData,
|
|
13121
|
+
signatureVideoUrl: signatureVideoUrl,
|
|
13122
|
+
onAcceptClicked: onAcceptClicked
|
|
13123
|
+
};
|
|
13124
|
+
}, [onAcceptClicked, signatureData, signatureDataUrl, signatureVideoData, signatureVideoUrl, startRecording, stopRecording]);
|
|
13125
|
+
return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureContext.Provider, {
|
|
13126
|
+
value: value
|
|
13127
|
+
}, children, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
13128
|
+
ref: outputCanvas
|
|
13129
|
+
}));
|
|
13130
|
+
}
|
|
13131
|
+
function useVideoSignatureContext() {
|
|
13132
|
+
var ctx = React.useContext(VideoSignatureContext);
|
|
13133
|
+
if (!ctx) throw new Error('useVideoSignatureContext cannot be used without ContextProvider');
|
|
13134
|
+
return ctx;
|
|
13135
|
+
}
|
|
13136
|
+
|
|
13137
|
+
function VideoSignatureGuides(_a) {
|
|
13138
|
+
var _b;
|
|
13139
|
+
var _c = _a.requestedAction,
|
|
13140
|
+
requestedAction = _c === void 0 ? 'VERIFY_LIVENESS' : _c,
|
|
13141
|
+
_d = _a.faceGuideStatus,
|
|
13142
|
+
faceGuideStatus = _d === void 0 ? 'success' : _d,
|
|
13143
|
+
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
13144
|
+
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
13145
|
+
_e = _a.classNames,
|
|
13146
|
+
classNames = _e === void 0 ? {} : _e,
|
|
13147
|
+
_f = _a.verbiage,
|
|
13148
|
+
rawVerbiage = _f === void 0 ? {} : _f;
|
|
13149
|
+
var _g = useResizeObserver__default.default(),
|
|
13150
|
+
ref = _g.ref,
|
|
13151
|
+
width = _g.width,
|
|
13152
|
+
height = _g.height;
|
|
13153
|
+
var _h = useVideoSignatureContext(),
|
|
13154
|
+
signaturePad = _h.signaturePad,
|
|
13155
|
+
onAcceptClicked = _h.onAcceptClicked;
|
|
13156
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
13157
|
+
clearSignatureBtnText: 'Clear',
|
|
13158
|
+
acceptSignatureBtnText: 'Accept'
|
|
13159
|
+
});
|
|
13160
|
+
var canvasProps = React.useMemo(function () {
|
|
13161
|
+
return {
|
|
13162
|
+
width: width,
|
|
13163
|
+
height: height,
|
|
13164
|
+
className: classNames.signatureCanvas
|
|
13165
|
+
};
|
|
13166
|
+
}, [classNames.signatureCanvas, height, width]);
|
|
13167
|
+
return /*#__PURE__*/React__namespace.default.createElement(Container$1, {
|
|
13168
|
+
className: classNames.container
|
|
13169
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Inner$1, {
|
|
13170
|
+
className: classNames.inner
|
|
13171
|
+
}, /*#__PURE__*/React__namespace.default.createElement(FaceGuideContainer$1, {
|
|
13172
|
+
className: classNames.faceGuideContainer
|
|
13173
|
+
}, /*#__PURE__*/React__namespace.default.createElement(StyledSelfieCaptureAnimatedMask$1, {
|
|
13174
|
+
className: classNames.faceGuide,
|
|
13175
|
+
status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
|
|
13176
|
+
borderWidth: faceGuideBorderWidth,
|
|
13177
|
+
borderColor: faceGuideBorderColor,
|
|
13178
|
+
verticalAlign: "bottom"
|
|
13179
|
+
})), /*#__PURE__*/React__namespace.default.createElement(SignaturePadContainer, {
|
|
13180
|
+
className: classNames.signaturePadContainer
|
|
13181
|
+
}, /*#__PURE__*/React__namespace.default.createElement(SignatureCanvasContainer, {
|
|
13182
|
+
className: classNames.signatureCanvasContainer,
|
|
13183
|
+
"$disabled": requestedAction === 'VERIFY_LIVENESS'
|
|
13117
13184
|
}, /*#__PURE__*/React__namespace.default.createElement(SignaturePad, {
|
|
13118
13185
|
ref: ref,
|
|
13119
|
-
className: classNames.
|
|
13186
|
+
className: classNames.signatureCanvasInner
|
|
13120
13187
|
}, /*#__PURE__*/React__namespace.default.createElement(SignatureCanvas__default.default, {
|
|
13121
13188
|
ref: signaturePad,
|
|
13122
|
-
canvasProps:
|
|
13123
|
-
width: width,
|
|
13124
|
-
height: height,
|
|
13125
|
-
className: classNames.canvas
|
|
13126
|
-
}
|
|
13189
|
+
canvasProps: canvasProps
|
|
13127
13190
|
})), /*#__PURE__*/React__namespace.default.createElement(SignatureButtonsContainer, {
|
|
13128
|
-
className: classNames.
|
|
13191
|
+
className: classNames.signatureButtonsRow
|
|
13129
13192
|
}, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
|
|
13130
13193
|
variant: "secondary",
|
|
13131
|
-
className: classNames.
|
|
13132
|
-
onClick: (
|
|
13194
|
+
className: classNames.clearSignatureBtn,
|
|
13195
|
+
onClick: (_b = signaturePad === null || signaturePad === void 0 ? void 0 : signaturePad.current) === null || _b === void 0 ? void 0 : _b.clear,
|
|
13196
|
+
disabled: requestedAction === 'VERIFY_LIVENESS',
|
|
13133
13197
|
finished: true
|
|
13134
|
-
}, verbiage.
|
|
13198
|
+
}, verbiage.clearSignatureBtnText), /*#__PURE__*/React__namespace.default.createElement(AcceptBtn, {
|
|
13135
13199
|
variant: "positive",
|
|
13136
|
-
className: classNames.
|
|
13137
|
-
|
|
13138
|
-
marginLeft: 'auto'
|
|
13139
|
-
},
|
|
13200
|
+
className: classNames.acceptSignatureBtn,
|
|
13201
|
+
disabled: requestedAction === 'VERIFY_LIVENESS',
|
|
13140
13202
|
onClick: onAcceptClicked,
|
|
13141
13203
|
finished: true
|
|
13142
|
-
}, verbiage.
|
|
13204
|
+
}, verbiage.acceptSignatureBtnText))))));
|
|
13205
|
+
}
|
|
13206
|
+
var Container$1 = styled__default.default.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"], ["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"])), function (props) {
|
|
13207
|
+
var _a;
|
|
13208
|
+
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
13209
|
+
});
|
|
13210
|
+
var Inner$1 = styled__default.default.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"])));
|
|
13211
|
+
var FaceGuideContainer$1 = styled__default.default.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: relative;\n height: 50%;\n"], ["\n position: relative;\n height: 50%;\n"])));
|
|
13212
|
+
var StyledSelfieCaptureAnimatedMask$1 = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n max-width: 100%;\n height: 100%;\n"], ["\n max-width: 100%;\n height: 100%;\n"])));
|
|
13213
|
+
var SignaturePadContainer = styled__default.default.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: relative;\n height: 50%;\n aspect-ratio: 2;\n"], ["\n position: relative;\n height: 50%;\n aspect-ratio: 2;\n"])));
|
|
13214
|
+
var SignatureCanvasContainer = styled__default.default.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n"])), function (props) {
|
|
13215
|
+
return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
|
|
13216
|
+
});
|
|
13217
|
+
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
13218
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$1;
|
|
13219
|
+
|
|
13220
|
+
var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
13221
|
+
var _b, _c, _d;
|
|
13222
|
+
var onVideoCaptured = _a.onVideoCaptured,
|
|
13223
|
+
onFaceNotDetected = _a.onFaceNotDetected,
|
|
13224
|
+
onExit = _a.onExit,
|
|
13225
|
+
guidesComponent = _a.guidesComponent,
|
|
13226
|
+
_e = _a.classNames,
|
|
13227
|
+
classNames = _e === void 0 ? {} : _e,
|
|
13228
|
+
_f = _a.colors,
|
|
13229
|
+
colors = _f === void 0 ? {} : _f,
|
|
13230
|
+
_g = _a.verbiage,
|
|
13231
|
+
rawVerbiage = _g === void 0 ? {} : _g,
|
|
13232
|
+
_h = _a.debugMode,
|
|
13233
|
+
debugMode = _h === void 0 ? false : _h;
|
|
13234
|
+
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
13235
|
+
var onPredictionMade = React.useContext(SelfieGuidanceModelsContext).onPredictionMade;
|
|
13236
|
+
var _j = useVideoSignatureContext(),
|
|
13237
|
+
signatureData = _j.signatureData,
|
|
13238
|
+
signatureDataUrl = _j.signatureDataUrl,
|
|
13239
|
+
signatureVideoData = _j.signatureVideoData,
|
|
13240
|
+
startRecording = _j.startRecording,
|
|
13241
|
+
stopRecording = _j.stopRecording;
|
|
13242
|
+
React.useEffect(function () {
|
|
13243
|
+
startRecording();
|
|
13244
|
+
return function () {
|
|
13245
|
+
stopRecording();
|
|
13246
|
+
};
|
|
13247
|
+
}, [startRecording, stopRecording]);
|
|
13248
|
+
colors.guidanceMessageBackgroundColor || (colors.guidanceMessageBackgroundColor = '#ccc');
|
|
13249
|
+
colors.guidanceMessageTextColor || (colors.guidanceMessageTextColor = 'black');
|
|
13250
|
+
var verbiage = useTranslations(rawVerbiage, {
|
|
13251
|
+
guidanceMessageText: 'Please sign the box below'
|
|
13252
|
+
});
|
|
13253
|
+
React.useEffect(function () {
|
|
13254
|
+
if (signatureVideoData && signatureData && signatureDataUrl) {
|
|
13255
|
+
onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
|
|
13256
|
+
}
|
|
13257
|
+
}, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
|
|
13258
|
+
var _k = React.useState(0),
|
|
13259
|
+
numFramesWithoutFaces = _k[0],
|
|
13260
|
+
setNumFramesWithoutFaces = _k[1];
|
|
13261
|
+
React.useEffect(function () {
|
|
13262
|
+
onPredictionMade(function (faces) {
|
|
13263
|
+
setNumFramesWithoutFaces(function (n) {
|
|
13264
|
+
return faces.length === 0 ? n + 1 : 0;
|
|
13265
|
+
});
|
|
13266
|
+
});
|
|
13267
|
+
}, [onPredictionMade]);
|
|
13268
|
+
React.useEffect(function () {
|
|
13269
|
+
if (numFramesWithoutFaces >= 2) {
|
|
13270
|
+
onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
|
|
13271
|
+
}
|
|
13272
|
+
}, [numFramesWithoutFaces, onFaceNotDetected]);
|
|
13273
|
+
var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : VideoSignatureGuides;
|
|
13274
|
+
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13275
|
+
className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
13276
|
+
}, verbiage.guidanceMessageText && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
|
|
13277
|
+
"$top": "10vh",
|
|
13278
|
+
className: classNames.guidanceMessageContainer
|
|
13279
|
+
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
13280
|
+
className: classNames.guidanceMessage,
|
|
13281
|
+
"$background": colors.guidanceMessageBackgroundColor,
|
|
13282
|
+
"$textColor": colors.guidanceMessageTextColor
|
|
13283
|
+
}, verbiage.guidanceMessageText))), /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, {
|
|
13284
|
+
status: "success"
|
|
13285
|
+
}), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, "Video: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height)), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
|
|
13143
13286
|
onClick: onExit,
|
|
13144
13287
|
className: classNames.exitCaptureBtn
|
|
13145
|
-
}), /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
13146
|
-
ref: outputCanvas
|
|
13147
13288
|
}));
|
|
13148
13289
|
};
|
|
13149
|
-
var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
13150
|
-
var templateObject_1$9;
|
|
13151
13290
|
|
|
13152
13291
|
var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
13153
|
-
var
|
|
13154
|
-
imageUrl = _a.imageUrl,
|
|
13292
|
+
var imageUrl = _a.imageUrl,
|
|
13155
13293
|
onDoneClick = _a.onDoneClick,
|
|
13156
13294
|
onRetryClick = _a.onRetryClick,
|
|
13157
13295
|
_b = _a.classNames,
|
|
@@ -13160,6 +13298,7 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
13160
13298
|
colors = _c === void 0 ? {} : _c,
|
|
13161
13299
|
_d = _a.verbiage,
|
|
13162
13300
|
rawVerbiage = _d === void 0 ? {} : _d;
|
|
13301
|
+
var signatureVideoUrl = useVideoSignatureContext().signatureVideoUrl;
|
|
13163
13302
|
var verbiage = useTranslations(rawVerbiage, {
|
|
13164
13303
|
headingText: 'Video signature has been successfully captured!',
|
|
13165
13304
|
retryBtnText: 'Retry',
|
|
@@ -13173,14 +13312,14 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
13173
13312
|
className: classNames.heading
|
|
13174
13313
|
}, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(OverlayImageContainer, {
|
|
13175
13314
|
className: classNames.videoContainer
|
|
13176
|
-
}, /*#__PURE__*/React__namespace.default.createElement(StyledVideo$1, {
|
|
13315
|
+
}, signatureVideoUrl && ( /*#__PURE__*/React__namespace.default.createElement(StyledVideo$1, {
|
|
13177
13316
|
className: classNames.video,
|
|
13178
|
-
src:
|
|
13179
|
-
poster:
|
|
13317
|
+
src: signatureVideoUrl,
|
|
13318
|
+
poster: signatureVideoUrl + '#t=0.1',
|
|
13180
13319
|
controls: true,
|
|
13181
13320
|
preload: "metadata",
|
|
13182
13321
|
autoPlay: true
|
|
13183
|
-
}), /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
13322
|
+
})), /*#__PURE__*/React__namespace.default.createElement("img", {
|
|
13184
13323
|
src: imageUrl,
|
|
13185
13324
|
alt: "",
|
|
13186
13325
|
style: {
|
|
@@ -13228,7 +13367,6 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13228
13367
|
debugMode = _j === void 0 ? false : _j;
|
|
13229
13368
|
var _k = React.useContext(SubmissionContext),
|
|
13230
13369
|
selfieImage = _k.selfieImage,
|
|
13231
|
-
signatureVideoUrl = _k.signatureVideoUrl,
|
|
13232
13370
|
setSelfieImage = _k.setSelfieImage,
|
|
13233
13371
|
setSignatureData = _k.setSignatureData,
|
|
13234
13372
|
setSignatureVideoUrl = _k.setSignatureVideoUrl,
|
|
@@ -13331,7 +13469,14 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13331
13469
|
setCaptureState('LOADING');
|
|
13332
13470
|
}
|
|
13333
13471
|
}, [cameraAccessDenied]);
|
|
13334
|
-
|
|
13472
|
+
var guidesComponent = React.useCallback(function (_a) {
|
|
13473
|
+
var status = _a.status;
|
|
13474
|
+
return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureGuides, {
|
|
13475
|
+
faceGuideStatus: status,
|
|
13476
|
+
requestedAction: status === 'success' ? 'CAPTURE_SIGNATURE' : 'VERIFY_LIVENESS'
|
|
13477
|
+
});
|
|
13478
|
+
}, []);
|
|
13479
|
+
return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureContextProvider, null, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
13335
13480
|
className: "flex ".concat((_b = classNames === null || classNames === void 0 ? void 0 : classNames.container) !== null && _b !== void 0 ? _b : '')
|
|
13336
13481
|
}, /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
|
|
13337
13482
|
className: classNames.cameraFeed
|
|
@@ -13341,6 +13486,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13341
13486
|
return /*#__PURE__*/React__namespace.default.createElement(FaceLivenessCapture, {
|
|
13342
13487
|
onSuccess: onFaceCaptureSuccess,
|
|
13343
13488
|
onExit: onExit,
|
|
13489
|
+
guidesComponent: guidesComponent,
|
|
13344
13490
|
classNames: classNames.faceLiveness,
|
|
13345
13491
|
colors: colors.faceLiveness,
|
|
13346
13492
|
verbiage: verbiage.faceLiveness,
|
|
@@ -13351,6 +13497,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13351
13497
|
onVideoCaptured: onSignatureCaptureCompleted,
|
|
13352
13498
|
onFaceNotDetected: onSignatureCaptureFacesNotDetected,
|
|
13353
13499
|
onExit: onExit,
|
|
13500
|
+
guidesComponent: guidesComponent,
|
|
13354
13501
|
classNames: classNames,
|
|
13355
13502
|
colors: colors,
|
|
13356
13503
|
verbiage: verbiage,
|
|
@@ -13359,7 +13506,6 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
13359
13506
|
case 'SUCCESS':
|
|
13360
13507
|
if (!showSuccessScreen) return;
|
|
13361
13508
|
return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureSuccess, {
|
|
13362
|
-
videoUrl: signatureVideoUrl !== null && signatureVideoUrl !== void 0 ? signatureVideoUrl : '',
|
|
13363
13509
|
imageUrl: signatureImageUrl !== null && signatureImageUrl !== void 0 ? signatureImageUrl : '',
|
|
13364
13510
|
onDoneClick: onComplete,
|
|
13365
13511
|
onRetryClick: onRetry,
|
|
@@ -13484,7 +13630,7 @@ var Container = styled__default.default.div(templateObject_1$7 || (templateObjec
|
|
|
13484
13630
|
var _a;
|
|
13485
13631
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
13486
13632
|
});
|
|
13487
|
-
var Inner = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height:
|
|
13633
|
+
var Inner = styled__default.default.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"])));
|
|
13488
13634
|
var FaceGuideContainer = styled__default.default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: relative;\n height: 70%;\n"], ["\n position: relative;\n height: 70%;\n"])));
|
|
13489
13635
|
var StyledSelfieCaptureAnimatedMask = styled__default.default(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n max-width: 100%;\n height: 100%;\n"], ["\n max-width: 100%;\n height: 100%;\n"])));
|
|
13490
13636
|
var IdCardGuideContainer = styled__default.default.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n max-width: 100%;\n height: 30%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n max-width: 100%;\n height: 30%;\n"])));
|
|
@@ -13598,8 +13744,8 @@ var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4
|
|
|
13598
13744
|
var edgeBoundary = 0.05;
|
|
13599
13745
|
var defaultVideoIdCaptureThresholds = {
|
|
13600
13746
|
detection: {
|
|
13601
|
-
idCardFront: 0.
|
|
13602
|
-
idCardBack: 0.
|
|
13747
|
+
idCardFront: 0.5,
|
|
13748
|
+
idCardBack: 0.6,
|
|
13603
13749
|
passport: 1
|
|
13604
13750
|
},
|
|
13605
13751
|
focus: {
|
|
@@ -14761,7 +14907,10 @@ var defaultTheme = {
|
|
|
14761
14907
|
borderWidth: 4,
|
|
14762
14908
|
desktopPadding: 50,
|
|
14763
14909
|
mobilePadding: 0,
|
|
14764
|
-
imagePadding:
|
|
14910
|
+
imagePadding: 50,
|
|
14911
|
+
wavesDisabled: false,
|
|
14912
|
+
wavesColor: '#287ec6',
|
|
14913
|
+
progressBarColor: '#287ec6'
|
|
14765
14914
|
}
|
|
14766
14915
|
},
|
|
14767
14916
|
selfieCapture: {
|