idmission-web-sdk 1.0.117 → 1.0.119
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/CapturedDocuments.d.ts +1 -0
- package/dist/components/id_capture/IdCaptureModelsProvider.d.ts +1 -0
- package/dist/contexts/SubmissionContext.d.ts +1 -0
- package/dist/lib/utils/cropping.d.ts +1 -1
- package/dist/sdk2.cjs.development.js +110 -83
- 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 +110 -83
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +110 -83
- 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/version.d.ts +1 -1
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@ export type CapturedDocument = {
|
|
|
2
2
|
imageData: string;
|
|
3
3
|
width: number;
|
|
4
4
|
height: number;
|
|
5
|
+
boundingBox?: number[];
|
|
5
6
|
};
|
|
6
7
|
export declare const CapturedDocumentTypeValues: readonly ["idCardFront", "idCardBack", "passport", "selfie"];
|
|
7
8
|
export type CapturedDocumentType = (typeof CapturedDocumentTypeValues)[number];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { Face } from '@tensorflow-models/face-detection';
|
|
2
2
|
import { Frame } from './getFrameDimensions';
|
|
3
3
|
export declare function cropToShoulders(rawCanvas: HTMLCanvasElement | null, cropCanvas: HTMLCanvasElement | null, frame: ImageData, face: Face): string;
|
|
4
|
-
export declare function cropToBoundingBox(frame: Frame, bbox: number[]): HTMLCanvasElement;
|
|
4
|
+
export declare function cropToBoundingBox(frame: Frame, bbox: number[], canvas?: HTMLCanvasElement): HTMLCanvasElement;
|
|
@@ -47,7 +47,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
|
|
|
47
47
|
var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
|
|
48
48
|
var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
|
|
49
49
|
|
|
50
|
-
var webSdkVersion = '1.0.
|
|
50
|
+
var webSdkVersion = '1.0.119';
|
|
51
51
|
|
|
52
52
|
function getPlatform() {
|
|
53
53
|
if (typeof window === 'undefined') return;
|
|
@@ -225,15 +225,15 @@ var OverlayContainer = styled__default['default'](PageContainer)(templateObject_
|
|
|
225
225
|
}, function (props) {
|
|
226
226
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
227
227
|
});
|
|
228
|
-
var OverlayInner = styled__default['default'].div(templateObject_2$
|
|
228
|
+
var OverlayInner = styled__default['default'].div(templateObject_2$l || (templateObject_2$l = tslib.__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) {
|
|
229
229
|
var _a;
|
|
230
230
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
231
231
|
}, function (props) {
|
|
232
232
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
233
233
|
});
|
|
234
|
-
var OverlayImageContainer = styled__default['default'].div(templateObject_3$
|
|
235
|
-
var OverlayImageRow = styled__default['default'].div(templateObject_4$
|
|
236
|
-
var templateObject_1$x, templateObject_2$
|
|
234
|
+
var OverlayImageContainer = styled__default['default'].div(templateObject_3$f || (templateObject_3$f = tslib.__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 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 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"])));
|
|
235
|
+
var OverlayImageRow = styled__default['default'].div(templateObject_4$b || (templateObject_4$b = tslib.__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"])));
|
|
236
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$f, templateObject_4$b;
|
|
237
237
|
|
|
238
238
|
var LoaderButton = function LoaderButton(_a) {
|
|
239
239
|
var children = _a.children,
|
|
@@ -612,7 +612,7 @@ var TokenIssuerNotAllowedErrorOverlay = function TokenIssuerNotAllowedErrorOverl
|
|
|
612
612
|
}, "JSON Web Token"), ' ', "for your IDmission account. Every usage of the IDmission WebSDK must be authorized with a valid JWT from IDmission's servers.")));
|
|
613
613
|
};
|
|
614
614
|
|
|
615
|
-
var allowedTokenIssuers = ['https://demoauth.idmission.com/', 'https://auth.idmission.com/'];
|
|
615
|
+
var allowedTokenIssuers = ['https://demoauth.idmission.com/', 'https://uatauth.idmission.com/', 'https://auth.idmission.com/'];
|
|
616
616
|
var SubmissionContext = /*#__PURE__*/React.createContext({
|
|
617
617
|
submit: function submit() {
|
|
618
618
|
return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
@@ -1443,9 +1443,9 @@ function isBrowser() {
|
|
|
1443
1443
|
}
|
|
1444
1444
|
|
|
1445
1445
|
var StyledPageContainer = styled__default['default'](PageContainer)(templateObject_1$v || (templateObject_1$v = tslib.__makeTemplateObject(["\n z-index: 1000;\n"], ["\n z-index: 1000;\n"])));
|
|
1446
|
-
var GuidesContainer = styled__default['default'].div(templateObject_2$
|
|
1447
|
-
var GuideCenterRow = styled__default['default'].div(templateObject_3$
|
|
1448
|
-
var GuideRegion = styled__default['default'].div(templateObject_4$
|
|
1446
|
+
var GuidesContainer = styled__default['default'].div(templateObject_2$k || (templateObject_2$k = tslib.__makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"])));
|
|
1447
|
+
var GuideCenterRow = styled__default['default'].div(templateObject_3$e || (templateObject_3$e = tslib.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n"], ["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n"])));
|
|
1448
|
+
var GuideRegion = styled__default['default'].div(templateObject_4$a || (templateObject_4$a = tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
|
|
1449
1449
|
var _a, _b, _c, _d;
|
|
1450
1450
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.guideOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : 'rgba(0, 0, 0, 0.5)';
|
|
1451
1451
|
}, function (props) {
|
|
@@ -1456,15 +1456,15 @@ var GuideRegion = styled__default['default'].div(templateObject_4$9 || (template
|
|
|
1456
1456
|
}, function (props) {
|
|
1457
1457
|
return props.$minHeight ? "min-width: ".concat(props.$minHeight, "px;") : "";
|
|
1458
1458
|
});
|
|
1459
|
-
var GuideCenterRegion = styled__default['default'].div(templateObject_5$
|
|
1459
|
+
var GuideCenterRegion = styled__default['default'].div(templateObject_5$5 || (templateObject_5$5 = tslib.__makeTemplateObject(["\n ", "\n box-sizing: border-box;\n"], ["\n ", "\n box-sizing: border-box;\n"])), function (props) {
|
|
1460
1460
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
1461
1461
|
});
|
|
1462
|
-
var GuideCenterBorder = styled__default['default'].div(templateObject_6$
|
|
1462
|
+
var GuideCenterBorder = styled__default['default'].div(templateObject_6$4 || (templateObject_6$4 = tslib.__makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n border: ", ";\n"], ["\n box-sizing: border-box;\n position: relative;\n border: ", ";\n"])), function (props) {
|
|
1463
1463
|
var _a, _b;
|
|
1464
1464
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
1465
1465
|
});
|
|
1466
|
-
var GuideText = styled__default['default'].span(templateObject_7$
|
|
1467
|
-
var GuideImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n display: block;\n padding: ", "px;\n box-sizing: border-box;\n ", "\n ", "\n"], ["\n display: block;\n padding: ", "px;\n box-sizing: border-box;\n ", "\n ", "\n"])), function (props) {
|
|
1466
|
+
var GuideText = styled__default['default'].span(templateObject_7$2 || (templateObject_7$2 = tslib.__makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
|
|
1467
|
+
var GuideImage = styled__default['default'].img(templateObject_8$1 || (templateObject_8$1 = tslib.__makeTemplateObject(["\n display: block;\n padding: ", "px;\n box-sizing: border-box;\n ", "\n ", "\n"], ["\n display: block;\n padding: ", "px;\n box-sizing: border-box;\n ", "\n ", "\n"])), function (props) {
|
|
1468
1468
|
return props.$padding;
|
|
1469
1469
|
}, function (props) {
|
|
1470
1470
|
return props.$width ? "width: ".concat(props.$width, "px;\n max-width: ").concat(props.$width, "px;") : "max-width: none;";
|
|
@@ -1568,7 +1568,7 @@ var regionClsx$1 = function regionClsx(classNames, which) {
|
|
|
1568
1568
|
return v;
|
|
1569
1569
|
}).join(' ');
|
|
1570
1570
|
};
|
|
1571
|
-
var templateObject_1$v, templateObject_2$
|
|
1571
|
+
var templateObject_1$v, templateObject_2$k, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1;
|
|
1572
1572
|
|
|
1573
1573
|
function getNativeBarcodeReaderResult(image) {
|
|
1574
1574
|
return tslib.__awaiter(this, void 0, void 0, function () {
|
|
@@ -8768,8 +8768,8 @@ function cropToShoulders(rawCanvas, cropCanvas, frame, face) {
|
|
|
8768
8768
|
clearCanvas(cropCanvas);
|
|
8769
8769
|
return dataURL;
|
|
8770
8770
|
}
|
|
8771
|
-
function cropToBoundingBox(frame, bbox) {
|
|
8772
|
-
|
|
8771
|
+
function cropToBoundingBox(frame, bbox, canvas) {
|
|
8772
|
+
canvas || (canvas = document.createElement('canvas'));
|
|
8773
8773
|
var ctx = canvas.getContext('2d');
|
|
8774
8774
|
if (!ctx) throw new Error('could not get 2d context');
|
|
8775
8775
|
var _a = getFrameDimensions(frame),
|
|
@@ -8844,12 +8844,15 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
|
|
|
8844
8844
|
var _g = React.useState(null),
|
|
8845
8845
|
loadingError = _g[0],
|
|
8846
8846
|
setLoadingError = _g[1];
|
|
8847
|
-
var _h = React.useState(
|
|
8848
|
-
|
|
8849
|
-
|
|
8847
|
+
var _h = React.useState([]),
|
|
8848
|
+
bestFrameBoundingBox = _h[0],
|
|
8849
|
+
setBestFrameBoundingBox = _h[1];
|
|
8850
8850
|
var _j = React.useState(0),
|
|
8851
|
-
|
|
8852
|
-
|
|
8851
|
+
bestFrameDetectionScore = _j[0],
|
|
8852
|
+
setBestFrameDetectionScore = _j[1];
|
|
8853
|
+
var _k = React.useState(0),
|
|
8854
|
+
bestFrameFocusScore = _k[0],
|
|
8855
|
+
setBestFrameFocusScore = _k[1];
|
|
8853
8856
|
React.useEffect(function () {
|
|
8854
8857
|
setReady(false);
|
|
8855
8858
|
var ddmUrl = documentDetectionModelUrl || defaultDocumentDetectionModelUrl;
|
|
@@ -8911,9 +8914,9 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
|
|
|
8911
8914
|
(_a = webGLCanvas.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(webGLCanvas, 'webglcontextlost', reloadModels);
|
|
8912
8915
|
};
|
|
8913
8916
|
}, [documentDetectionModelUrl, focusModelUrl]);
|
|
8914
|
-
var
|
|
8915
|
-
timesAllZero =
|
|
8916
|
-
setTimesAllZero =
|
|
8917
|
+
var _l = React.useState(0),
|
|
8918
|
+
timesAllZero = _l[0],
|
|
8919
|
+
setTimesAllZero = _l[1];
|
|
8917
8920
|
var bestPredictionCanvas = React.useRef(null);
|
|
8918
8921
|
var bestFocusScore = React.useRef(0);
|
|
8919
8922
|
var makePrediction = React.useCallback(function (frame) {
|
|
@@ -8921,18 +8924,19 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
|
|
|
8921
8924
|
(function () {
|
|
8922
8925
|
return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
8923
8926
|
var prediction;
|
|
8924
|
-
var _a;
|
|
8925
|
-
return tslib.__generator(this, function (
|
|
8926
|
-
switch (
|
|
8927
|
+
var _a, _b, _c;
|
|
8928
|
+
return tslib.__generator(this, function (_d) {
|
|
8929
|
+
switch (_d.label) {
|
|
8927
8930
|
case 0:
|
|
8928
8931
|
if (!documentDetectionModel || !focusModel || !lastPredictionCanvas.current) return [2 /*return*/];
|
|
8929
8932
|
return [4 /*yield*/, makePredictions(frame, lastPredictionCanvas.current, thresholds, logPredictions)];
|
|
8930
8933
|
case 1:
|
|
8931
|
-
prediction =
|
|
8934
|
+
prediction = _d.sent();
|
|
8932
8935
|
setDetectionTime(prediction.detectionTime);
|
|
8933
8936
|
setFocusPredictionTime(prediction.focusPredictionTime);
|
|
8934
8937
|
if (bestFocusScore.current <= prediction.focusScore) {
|
|
8935
8938
|
bestFocusScore.current = prediction.focusScore;
|
|
8939
|
+
setBestFrameBoundingBox((_b = (_a = prediction.bestDocumentOrPassport) === null || _a === void 0 ? void 0 : _a.bbox) !== null && _b !== void 0 ? _b : []);
|
|
8936
8940
|
setBestFrameDetectionScore(prediction.detectionScore);
|
|
8937
8941
|
setBestFrameFocusScore(prediction.focusScore);
|
|
8938
8942
|
drawToCanvas(bestPredictionCanvas.current, frame);
|
|
@@ -8940,7 +8944,7 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
|
|
|
8940
8944
|
if (prediction.allZero) setTimesAllZero(function (n) {
|
|
8941
8945
|
return n + 1;
|
|
8942
8946
|
});
|
|
8943
|
-
(
|
|
8947
|
+
(_c = onPredictionHandler.current) === null || _c === void 0 ? void 0 : _c.call(onPredictionHandler, prediction);
|
|
8944
8948
|
working.current = false;
|
|
8945
8949
|
return [2 /*return*/];
|
|
8946
8950
|
}
|
|
@@ -8962,12 +8966,13 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
|
|
|
8962
8966
|
if (!bestPredictionCanvas.current) return [2 /*return*/, null];
|
|
8963
8967
|
return [2 /*return*/, {
|
|
8964
8968
|
canvas: bestPredictionCanvas.current,
|
|
8969
|
+
boundingBox: bestFrameBoundingBox,
|
|
8965
8970
|
detectionScore: bestFrameDetectionScore,
|
|
8966
8971
|
focusScore: bestFrameFocusScore
|
|
8967
8972
|
}];
|
|
8968
8973
|
});
|
|
8969
8974
|
});
|
|
8970
|
-
}, [bestFrameDetectionScore, bestFrameFocusScore]);
|
|
8975
|
+
}, [bestFrameBoundingBox, bestFrameDetectionScore, bestFrameFocusScore]);
|
|
8971
8976
|
var resetBestFrame = React.useCallback(function () {
|
|
8972
8977
|
bestFocusScore.current = 0;
|
|
8973
8978
|
clearCanvas(bestPredictionCanvas.current);
|
|
@@ -9261,11 +9266,11 @@ function disposeTfBackend() {
|
|
|
9261
9266
|
}
|
|
9262
9267
|
|
|
9263
9268
|
var DebugStatsPane = styled__default['default'].span(templateObject_1$t || (templateObject_1$t = tslib.__makeTemplateObject(["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n"], ["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n"])));
|
|
9264
|
-
var ObjectDetectionDebugOverlay = styled__default['default'].div(templateObject_2$
|
|
9269
|
+
var ObjectDetectionDebugOverlay = styled__default['default'].div(templateObject_2$j || (templateObject_2$j = tslib.__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) {
|
|
9265
9270
|
var $flipX = _a.$flipX;
|
|
9266
9271
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
9267
9272
|
});
|
|
9268
|
-
var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$
|
|
9273
|
+
var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$d || (templateObject_3$d = tslib.__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) {
|
|
9269
9274
|
var $color = _a.$color;
|
|
9270
9275
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
9271
9276
|
}, function (_a) {
|
|
@@ -9275,7 +9280,7 @@ var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$c
|
|
|
9275
9280
|
var $flipX = _a.$flipX;
|
|
9276
9281
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
9277
9282
|
});
|
|
9278
|
-
var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4$
|
|
9283
|
+
var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4$9 || (templateObject_4$9 = tslib.__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) {
|
|
9279
9284
|
var $color = _a.$color;
|
|
9280
9285
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
9281
9286
|
}, function (_a) {
|
|
@@ -9443,7 +9448,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
9443
9448
|
}
|
|
9444
9449
|
});
|
|
9445
9450
|
}
|
|
9446
|
-
var templateObject_1$t, templateObject_2$
|
|
9451
|
+
var templateObject_1$t, templateObject_2$j, templateObject_3$d, templateObject_4$9;
|
|
9447
9452
|
|
|
9448
9453
|
var ExitCaptureStyledButton = styled__default['default'].button(templateObject_1$s || (templateObject_1$s = tslib.__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"])));
|
|
9449
9454
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
@@ -9558,10 +9563,10 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
9558
9563
|
})));
|
|
9559
9564
|
};
|
|
9560
9565
|
var StyledSpinner = styled__default['default'](Spinner)(templateObject_1$q || (templateObject_1$q = tslib.__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"])));
|
|
9561
|
-
var ImagePreviewWrapper = styled__default['default'].div(templateObject_2$
|
|
9562
|
-
var ImagePreviewText = styled__default['default'].div(templateObject_3$
|
|
9563
|
-
var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_4$
|
|
9564
|
-
var templateObject_1$q, templateObject_2$
|
|
9566
|
+
var ImagePreviewWrapper = styled__default['default'].div(templateObject_2$i || (templateObject_2$i = tslib.__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"])));
|
|
9567
|
+
var ImagePreviewText = styled__default['default'].div(templateObject_3$c || (templateObject_3$c = tslib.__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"])));
|
|
9568
|
+
var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = tslib.__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"])));
|
|
9569
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$c, templateObject_4$8;
|
|
9565
9570
|
|
|
9566
9571
|
var enTranslation = {};
|
|
9567
9572
|
|
|
@@ -9690,14 +9695,14 @@ var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$p
|
|
|
9690
9695
|
var $top = _a.$top;
|
|
9691
9696
|
return $top !== null && $top !== void 0 ? $top : '10vh';
|
|
9692
9697
|
});
|
|
9693
|
-
var GuidanceMessage = styled__default['default'].div(templateObject_2$
|
|
9698
|
+
var GuidanceMessage = styled__default['default'].div(templateObject_2$h || (templateObject_2$h = tslib.__makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n padding: 10px 12px 8px;\n border-radius: 8px;\n z-index: 10001;\n"], ["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n padding: 10px 12px 8px;\n border-radius: 8px;\n z-index: 10001;\n"])), function (props) {
|
|
9694
9699
|
var _a, _b, _c, _d, _e, _f;
|
|
9695
9700
|
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';
|
|
9696
9701
|
}, function (props) {
|
|
9697
9702
|
var _a, _b, _c, _d, _e, _f;
|
|
9698
9703
|
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';
|
|
9699
9704
|
});
|
|
9700
|
-
var templateObject_1$p, templateObject_2$
|
|
9705
|
+
var templateObject_1$p, templateObject_2$h;
|
|
9701
9706
|
|
|
9702
9707
|
var initialState$5 = {
|
|
9703
9708
|
videoWidth: 0,
|
|
@@ -10046,7 +10051,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
10046
10051
|
React.useEffect(function () {
|
|
10047
10052
|
(function () {
|
|
10048
10053
|
return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
10049
|
-
var bestFrame, originalCanvas, detectionScore, focusScore, width, height, canvas, isGreaterThan2k, ctx2d, imageURL;
|
|
10054
|
+
var bestFrame, originalCanvas, boundingBox, detectionScore, focusScore, width, height, canvas, isGreaterThan2k, ctx2d, imageURL;
|
|
10050
10055
|
return tslib.__generator(this, function (_a) {
|
|
10051
10056
|
switch (_a.label) {
|
|
10052
10057
|
case 0:
|
|
@@ -10065,7 +10070,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
10065
10070
|
return [2 /*return*/];
|
|
10066
10071
|
}
|
|
10067
10072
|
setProcessingFrame(true);
|
|
10068
|
-
originalCanvas = bestFrame.canvas, detectionScore = bestFrame.detectionScore, focusScore = bestFrame.focusScore;
|
|
10073
|
+
originalCanvas = bestFrame.canvas, boundingBox = bestFrame.boundingBox, detectionScore = bestFrame.detectionScore, focusScore = bestFrame.focusScore;
|
|
10069
10074
|
width = originalCanvas.width, height = originalCanvas.height;
|
|
10070
10075
|
canvas = originalCanvas;
|
|
10071
10076
|
isGreaterThan2k = width > 1920 && height > 1080 || width > 1080 && height > 1920;
|
|
@@ -10090,6 +10095,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
10090
10095
|
var metadata = {
|
|
10091
10096
|
autoCapture: 'Y',
|
|
10092
10097
|
captureTime: captureTime,
|
|
10098
|
+
boundingBox: boundingBox,
|
|
10093
10099
|
bestDetectionScore: detectionScore,
|
|
10094
10100
|
bestFocusScore: focusScore
|
|
10095
10101
|
};
|
|
@@ -10225,13 +10231,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
10225
10231
|
}, verbiage.retryBtnText)));
|
|
10226
10232
|
};
|
|
10227
10233
|
var StyledOverlayInner$2 = styled__default['default'](OverlayInner)(templateObject_1$o || (templateObject_1$o = tslib.__makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
10228
|
-
var StyledOverlayImageContainer = styled__default['default'](OverlayImageContainer)(templateObject_2$
|
|
10229
|
-
var Description$3 = styled__default['default'].p(templateObject_3$
|
|
10230
|
-
var RetryButton = styled__default['default'](LoaderButton)(templateObject_4$
|
|
10231
|
-
var templateObject_1$o, templateObject_2$
|
|
10234
|
+
var StyledOverlayImageContainer = styled__default['default'](OverlayImageContainer)(templateObject_2$g || (templateObject_2$g = tslib.__makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
10235
|
+
var Description$3 = styled__default['default'].p(templateObject_3$b || (templateObject_3$b = tslib.__makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
10236
|
+
var RetryButton = styled__default['default'](LoaderButton)(templateObject_4$7 || (templateObject_4$7 = tslib.__makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
10237
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$7;
|
|
10232
10238
|
|
|
10233
10239
|
var ContinuityCameraCheckboxContainer = styled__default['default'].div(templateObject_1$n || (templateObject_1$n = tslib.__makeTemplateObject(["\n height: 48px;\n margin-top: -48px;\n margin-bottom: 8px;\n padding-top: 26px;\n"], ["\n height: 48px;\n margin-top: -48px;\n margin-bottom: 8px;\n padding-top: 26px;\n"])));
|
|
10234
|
-
var ContinuityCameraCheckbox = styled__default['default'].input(templateObject_2$
|
|
10240
|
+
var ContinuityCameraCheckbox = styled__default['default'].input(templateObject_2$f || (templateObject_2$f = tslib.__makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
10235
10241
|
var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
|
|
10236
10242
|
var onDismissed = _a.onDismissed,
|
|
10237
10243
|
onUserCancel = _a.onUserCancel,
|
|
@@ -10323,14 +10329,14 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
|
|
|
10323
10329
|
}
|
|
10324
10330
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : verbiage.modelsWarmingUpText)));
|
|
10325
10331
|
};
|
|
10326
|
-
var templateObject_1$n, templateObject_2$
|
|
10332
|
+
var templateObject_1$n, templateObject_2$f;
|
|
10327
10333
|
|
|
10328
10334
|
var FlippingImage = styled__default['default'](GuideImage)(templateObject_1$m || (templateObject_1$m = tslib.__makeTemplateObject(["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: relative;\n top: 0;\n left: 0;\n transition: transform ", "s;\n transform: ", ";\n"], ["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: relative;\n top: 0;\n left: 0;\n transition: transform ", "s;\n transform: ", ";\n"])), function (props) {
|
|
10329
10335
|
return props.$transitionTime;
|
|
10330
10336
|
}, function (props) {
|
|
10331
10337
|
return props.$transforms;
|
|
10332
10338
|
});
|
|
10333
|
-
var FlippingImageBack = styled__default['default'](FlippingImage)(templateObject_2$
|
|
10339
|
+
var FlippingImageBack = styled__default['default'](FlippingImage)(templateObject_2$e || (templateObject_2$e = tslib.__makeTemplateObject(["\n position: absolute;\n"], ["\n position: absolute;\n"])));
|
|
10334
10340
|
var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
10335
10341
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
10336
10342
|
var userSuppliedPadding = _a.padding,
|
|
@@ -10464,7 +10470,7 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
10464
10470
|
return v;
|
|
10465
10471
|
}).join(' ');
|
|
10466
10472
|
};
|
|
10467
|
-
var templateObject_1$m, templateObject_2$
|
|
10473
|
+
var templateObject_1$m, templateObject_2$e;
|
|
10468
10474
|
|
|
10469
10475
|
var CapturedDocumentTypeValues = ['idCardFront', 'idCardBack', 'passport', 'selfie'];
|
|
10470
10476
|
|
|
@@ -10501,42 +10507,36 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
10501
10507
|
className: classNames.container
|
|
10502
10508
|
}, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
|
|
10503
10509
|
className: classNames.inner
|
|
10504
|
-
}, /*#__PURE__*/React__default['default'].createElement(
|
|
10505
|
-
className: classNames.heading
|
|
10506
|
-
}, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageContainer, {
|
|
10510
|
+
}, /*#__PURE__*/React__default['default'].createElement(ImagesContainer, {
|
|
10507
10511
|
className: classNames.imageContainer
|
|
10508
|
-
}, /*#__PURE__*/React__default['default'].createElement(
|
|
10512
|
+
}, /*#__PURE__*/React__default['default'].createElement(ImageRow, {
|
|
10509
10513
|
className: classNames.imageRow
|
|
10510
|
-
},
|
|
10514
|
+
}, /*#__PURE__*/React__default['default'].createElement("h1", {
|
|
10515
|
+
className: classNames.heading
|
|
10516
|
+
}, verbiage.headingText), idCardFront && ( /*#__PURE__*/React__default['default'].createElement(ImageCol$1, {
|
|
10511
10517
|
className: classNames.imageCol
|
|
10512
|
-
}, /*#__PURE__*/React__default['default'].createElement(
|
|
10518
|
+
}, /*#__PURE__*/React__default['default'].createElement(ImageHeading, {
|
|
10513
10519
|
className: classNames.imageHeading
|
|
10514
|
-
}, verbiage.idCardFrontText), /*#__PURE__*/React__default['default'].createElement(
|
|
10520
|
+
}, verbiage.idCardFrontText), /*#__PURE__*/React__default['default'].createElement(CapturedImage, {
|
|
10521
|
+
image: idCardFront,
|
|
10515
10522
|
className: classNames.image,
|
|
10516
|
-
|
|
10517
|
-
|
|
10518
|
-
width: idCardFront.width,
|
|
10519
|
-
height: idCardFront.height
|
|
10520
|
-
}))), idCardBack && ( /*#__PURE__*/React__default['default'].createElement("div", {
|
|
10523
|
+
alt: verbiage.idCardFrontText
|
|
10524
|
+
}))), idCardBack && ( /*#__PURE__*/React__default['default'].createElement(ImageCol$1, {
|
|
10521
10525
|
className: classNames.imageCol
|
|
10522
|
-
}, /*#__PURE__*/React__default['default'].createElement(
|
|
10526
|
+
}, /*#__PURE__*/React__default['default'].createElement(ImageHeading, {
|
|
10523
10527
|
className: classNames.imageHeading
|
|
10524
|
-
}, verbiage.idCardBackText), /*#__PURE__*/React__default['default'].createElement(
|
|
10528
|
+
}, verbiage.idCardBackText), /*#__PURE__*/React__default['default'].createElement(CapturedImage, {
|
|
10529
|
+
image: idCardBack,
|
|
10525
10530
|
className: classNames.image,
|
|
10526
|
-
|
|
10527
|
-
|
|
10528
|
-
width: idCardBack.width,
|
|
10529
|
-
height: idCardBack.height
|
|
10530
|
-
}))), passport && ( /*#__PURE__*/React__default['default'].createElement("div", {
|
|
10531
|
+
alt: verbiage.idCardBackText
|
|
10532
|
+
}))), passport && ( /*#__PURE__*/React__default['default'].createElement(ImageCol$1, {
|
|
10531
10533
|
className: classNames.imageCol
|
|
10532
|
-
}, /*#__PURE__*/React__default['default'].createElement(
|
|
10534
|
+
}, /*#__PURE__*/React__default['default'].createElement(ImageHeading, {
|
|
10533
10535
|
className: classNames.imageHeading
|
|
10534
|
-
}, verbiage.passportText), /*#__PURE__*/React__default['default'].createElement(
|
|
10536
|
+
}, verbiage.passportText), /*#__PURE__*/React__default['default'].createElement(CapturedImage, {
|
|
10537
|
+
image: passport,
|
|
10535
10538
|
className: classNames.image,
|
|
10536
|
-
|
|
10537
|
-
alt: verbiage.passportText,
|
|
10538
|
-
width: passport.width,
|
|
10539
|
-
height: passport.height
|
|
10539
|
+
alt: verbiage.passportText
|
|
10540
10540
|
}))))), /*#__PURE__*/React__default['default'].createElement(OverlayInstruction, {
|
|
10541
10541
|
className: classNames.instruction
|
|
10542
10542
|
}, verbiage.instructionText), /*#__PURE__*/React__default['default'].createElement(ButtonsRow, {
|
|
@@ -10556,7 +10556,39 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
10556
10556
|
finished: true
|
|
10557
10557
|
}, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
|
|
10558
10558
|
};
|
|
10559
|
-
var
|
|
10559
|
+
var CapturedImage = function CapturedImage(_a) {
|
|
10560
|
+
var alt = _a.alt,
|
|
10561
|
+
className = _a.className,
|
|
10562
|
+
image = _a.image;
|
|
10563
|
+
var canvasRef = React.useRef(null);
|
|
10564
|
+
var _b = React.useState(image.imageData),
|
|
10565
|
+
url = _b[0],
|
|
10566
|
+
setUrl = _b[1];
|
|
10567
|
+
React.useEffect(function () {
|
|
10568
|
+
if (!image.boundingBox) return;
|
|
10569
|
+
var im = new Image();
|
|
10570
|
+
im.onload = function () {
|
|
10571
|
+
cropToBoundingBox(im, image.boundingBox, canvasRef.current);
|
|
10572
|
+
setUrl(canvasRef.current.toDataURL());
|
|
10573
|
+
};
|
|
10574
|
+
im.src = image.imageData;
|
|
10575
|
+
}, [image.boundingBox, image.height, image.imageData, image.width]);
|
|
10576
|
+
return /*#__PURE__*/React__default['default'].createElement(CapturedImageContainer, null, /*#__PURE__*/React__default['default'].createElement(CropCanvas, {
|
|
10577
|
+
ref: canvasRef
|
|
10578
|
+
}), /*#__PURE__*/React__default['default'].createElement(StyledImage, {
|
|
10579
|
+
alt: alt,
|
|
10580
|
+
className: className,
|
|
10581
|
+
src: url
|
|
10582
|
+
}));
|
|
10583
|
+
};
|
|
10584
|
+
var ImagesContainer = styled__default['default'](OverlayImageContainer)(templateObject_2$d || (templateObject_2$d = tslib.__makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
|
|
10585
|
+
var ImageRow = styled__default['default'](OverlayImageRow)(templateObject_3$a || (templateObject_3$a = tslib.__makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
|
|
10586
|
+
var ImageCol$1 = styled__default['default'].div(templateObject_4$6 || (templateObject_4$6 = tslib.__makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
|
|
10587
|
+
var ImageHeading = styled__default['default'].h3(templateObject_5$4 || (templateObject_5$4 = tslib.__makeTemplateObject(["\n text-align: left;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"], ["\n text-align: left;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"])));
|
|
10588
|
+
var CapturedImageContainer = styled__default['default'].div(templateObject_6$3 || (templateObject_6$3 = tslib.__makeTemplateObject(["\n border: 1px solid #0070f3;\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"], ["\n border: 1px solid #0070f3;\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"])));
|
|
10589
|
+
var CropCanvas = styled__default['default'].canvas(templateObject_7$1 || (templateObject_7$1 = tslib.__makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
10590
|
+
var StyledImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
|
|
10591
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
10560
10592
|
|
|
10561
10593
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
10562
10594
|
var _b;
|
|
@@ -10759,12 +10791,6 @@ var reducer$4 = function reducer(state, action) {
|
|
|
10759
10791
|
});
|
|
10760
10792
|
if (captureRequirement === 'passport') newState.requestedDocumentType = 'passport';
|
|
10761
10793
|
if (precapturedDocuments) {
|
|
10762
|
-
// if (
|
|
10763
|
-
// precapturedDocuments.idCardBack &&
|
|
10764
|
-
// !precapturedDocuments.idCardFront
|
|
10765
|
-
// ) {
|
|
10766
|
-
// newState.requestedDocumentType = 'idCardBack'
|
|
10767
|
-
// }
|
|
10768
10794
|
for (var _i = 0, CapturedDocumentTypeValues_1 = CapturedDocumentTypeValues; _i < CapturedDocumentTypeValues_1.length; _i++) {
|
|
10769
10795
|
var k = CapturedDocumentTypeValues_1[_i];
|
|
10770
10796
|
var payload = precapturedDocuments[k];
|
|
@@ -10946,7 +10972,8 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
10946
10972
|
payload: {
|
|
10947
10973
|
imageData: imageData,
|
|
10948
10974
|
width: width,
|
|
10949
|
-
height: height
|
|
10975
|
+
height: height,
|
|
10976
|
+
boundingBox: metadata.boundingBox
|
|
10950
10977
|
}
|
|
10951
10978
|
});
|
|
10952
10979
|
}, [logCaptureMetadata]);
|