idmission-web-sdk 1.0.14 → 1.0.15

package/dist/components/id_capture/IdCapture.d.ts

@@ -12,12 +12,20 @@ export type IdCaptureAssets = {
 export type IdCaptureColors = {
     guideBoxUnsatisfiedColor?: string;
     guideBoxSatisfiedColor?: string;
+    guidanceMessagesSatisfiedBackgroundColor?: string;
+    guidanceMessagesUnsatisfiedBackgroundColor?: string;
+    guidanceMessagesSatisfiedTextColor?: string;
+    guidanceMessagesUnsatisfiedTextColor?: string;
 };
 export type IdCaptureVerbiage = {
     instructionText?: CustomerSuppliedVerbiage;
     processingIdCardText?: CustomerSuppliedVerbiage;
     capturingText?: CustomerSuppliedVerbiage;
     captureFailedText?: CustomerSuppliedVerbiage;
+    guidanceSatisfiedText?: CustomerSuppliedVerbiage;
+    guidanceTooBlurryText?: CustomerSuppliedVerbiage;
+    guidanceNotCenteredText?: CustomerSuppliedVerbiage;
+    guidanceNotDetectedText?: CustomerSuppliedVerbiage;
 };
 export type IdCaptureProps = {
     requiredDocumentType?: DocumentType;
@@ -31,6 +39,8 @@ export type IdCaptureProps = {
     barcodeScanningEnabled?: boolean;
     maxBarcodeScanAttempts?: number;
     focusScoreThreshold?: number;
+    guidanceMessage?: string;
+    guidanceSatisfied?: boolean;
     onPrediction?: (prediction: IdCapturePrediction) => void;
     onBarcodeScanned?: (result: PDF417DetectionResult) => void;
     onCapture?: (frame: string, width: number, height: number, metadata: CaptureAttemptMetadata) => void;
@@ -42,4 +52,4 @@ export type IdCaptureProps = {
     verbiage?: IdCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, onPrediction, onBarcodeScanned, onCapture, onExit, processingScreen, processingDelay, assets, colors, verbiage: rawVerbiage, debugMode, }: IdCaptureProps) => React.ReactElement;
+export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, guidanceMessage, guidanceSatisfied, onPrediction, onBarcodeScanned, onCapture, onExit, processingScreen, processingDelay, assets, colors, verbiage: rawVerbiage, debugMode, }: IdCaptureProps) => React.ReactElement;

package/dist/sdk2.cjs.development.js

@@ -50,7 +50,7 @@ var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObs
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var webSdkVersion = '1.0.14';
+var webSdkVersion = '1.0.15';
 
 function getPlatform() {
   return window.platform;
@@ -9181,6 +9181,19 @@ function useTranslations(verbiage, fallbacks) {
   }, [fallbacks, i18n.language, t, verbiage]);
 }
 
+var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+  var $top = _a.$top;
+  return $top !== null && $top !== void 0 ? $top : '10vh';
+});
+var GuidanceMessage = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
+  var $background = _a.$background;
+  return $background !== null && $background !== void 0 ? $background : '#ccc';
+}, function (_a) {
+  var $textColor = _a.$textColor;
+  return $textColor !== null && $textColor !== void 0 ? $textColor : 'black';
+});
+var templateObject_1$3, templateObject_2$1;
+
 var initialState$5 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -9258,6 +9271,7 @@ var reducer$5 = function reducer(state, action) {
       }
       var documentInBounds = false;
       if (bestDocumentOrPassport) {
+        var boundaryPx = 20;
         var _b = bestDocumentOrPassport.bbox,
           boundaryX = _b[0],
           boundaryY = _b[1],
@@ -9267,7 +9281,7 @@ var reducer$5 = function reducer(state, action) {
         boundaryWidth *= frameWidth;
         boundaryY *= frameHeight;
         boundaryHeight *= frameHeight;
-        documentInBounds = boundaryY > 5 && boundaryY + boundaryHeight + 5 < frameHeight && (boundaryX > 5 || boundaryX < 5 && boundaryX + boundaryWidth > frameWidth * 0.8) && boundaryX + boundaryWidth + 5 < frameWidth;
+        documentInBounds = boundaryY > boundaryPx && boundaryY + boundaryHeight + boundaryPx < frameHeight && (boundaryX > boundaryPx || boundaryX < boundaryPx && boundaryX + boundaryWidth > frameWidth * 0.8) && boundaryX + boundaryWidth + boundaryPx < frameWidth;
       }
       var barcodeScanRequired = state.autoCaptureBarcodeRequired === true || state.autoCaptureBarcodeRequired === 'mobile' && isMobile();
       var shouldScanBarcode = state.barcodeScanningEnabled && pdf417DetectionThresholdMet && barcodeScanRequired;
@@ -9368,6 +9382,8 @@ var IdCapture = function IdCapture(_a) {
     barcodeScanningEnabled = _o === void 0 ? true : _o,
     _p = _a.maxBarcodeScanAttempts,
     maxBarcodeScanAttempts = _p === void 0 ? 10 : _p,
+    guidanceMessage = _a.guidanceMessage,
+    guidanceSatisfied = _a.guidanceSatisfied,
     onPrediction = _a.onPrediction,
     onBarcodeScanned = _a.onBarcodeScanned,
     onCapture = _a.onCapture,
@@ -9602,11 +9618,17 @@ var IdCapture = function IdCapture(_a) {
   }, [getBestFrame, onCapture, processingDelay, shouldCapture, state.barcodeResult]);
   colors.guideBoxUnsatisfiedColor || (colors.guideBoxUnsatisfiedColor = 'white');
   colors.guideBoxSatisfiedColor || (colors.guideBoxSatisfiedColor = 'green');
+  colors.guidanceMessagesSatisfiedBackgroundColor || (colors.guidanceMessagesSatisfiedBackgroundColor = 'green');
+  colors.guidanceMessagesSatisfiedTextColor || (colors.guidanceMessagesSatisfiedTextColor = 'white');
   var verbiage = useTranslations(rawVerbiage, {
     instructionText: 'Scan the front of ID',
     processingIdCardText: 'ID card front captured.',
     capturingText: 'Capturing...',
-    captureFailedText: 'Capture failed!'
+    captureFailedText: 'Capture failed!',
+    guidanceSatisfiedText: 'Document detected, hold still...',
+    guidanceTooBlurryText: 'Document out of focus – try improving the lighting',
+    guidanceNotCenteredText: 'Document is not centered',
+    guidanceNotDetectedText: 'Document not detected'
   });
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
@@ -9615,6 +9637,9 @@ var IdCapture = function IdCapture(_a) {
     videoWidth: state.videoWidth,
     videoHeight: state.videoHeight
   });
+  var satisfied = state.isGoodFrame;
+  if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
+  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceSatisfiedText : !state.documentDetectionThresholdMet ? verbiage.guidanceNotDetectedText : !state.documentInBounds ? verbiage.guidanceNotCenteredText : !state.focusThresholdMet ? verbiage.guidanceTooBlurryText : '');
   if (processingFrame) {
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, processingScreen, imageURL && /*#__PURE__*/React__default['default'].createElement(IdCaptureImagePreview, {
       text: verbiage.processingIdCardText,
@@ -9642,7 +9667,12 @@ var IdCapture = function IdCapture(_a) {
     landscapeGuidesImageUrl: assets.landscapeGuidesImageUrl,
     isMirrored: !((_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.isRearFacing),
     borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor
-  }), debugMode && state.detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
+  }), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
+    "$top": "82.5vh"
+  }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
+    "$background": satisfied ? colors.guidanceMessagesSatisfiedBackgroundColor : colors.guidanceMessagesUnsatisfiedBackgroundColor,
+    "$textColor": satisfied ? colors.guidanceMessagesSatisfiedTextColor : colors.guidanceMessagesUnsatisfiedTextColor
+  }, guidanceMessage)), debugMode && state.detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
     "$flipX": !((_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.isRearFacing)
   }, state.detectedObjects.map(function (obj, i) {
     var _a;
@@ -10083,10 +10113,10 @@ var CameraVideoTag = function CameraVideoTag() {
     "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
-var templateObject_1$3;
+var templateObject_1$2;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -10834,19 +10864,6 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   }, children);
 };
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
-  var $top = _a.$top;
-  return $top !== null && $top !== void 0 ? $top : '10vh';
-});
-var GuidanceMessage = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
-  var $background = _a.$background;
-  return $background !== null && $background !== void 0 ? $background : '#ccc';
-}, function (_a) {
-  var $textColor = _a.$textColor;
-  return $textColor !== null && $textColor !== void 0 ? $textColor : 'black';
-});
-var templateObject_1$2, templateObject_2$1;
-
 var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger) {
   var _a = React.useState(false),
     timedOut = _a[0],
@@ -10959,9 +10976,6 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
     onClick: function onClick() {
       setLoading(true);
       onFinished === null || onFinished === void 0 ? void 0 : onFinished(image);
-    },
-    style: {
-      marginLeft: 12
     }
   }, loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText))));
 };
@@ -11172,9 +11186,9 @@ var SelfieCapture = function SelfieCapture(_a) {
     guidanceMoveForwardText: 'Move forward...',
     guidanceMoveToCenterText: 'Move to the center...'
   });
-  guidanceMessage || (guidanceMessage = state.faceReady ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
   var satisfied = state.faceReady;
   if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
+  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : '');
   if (guidanceError) {
     return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFallback, null);
   }