idmission-web-sdk 0.0.71 → 0.0.72

package/dist/components/common/SelfieProgressPreview.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+export declare const IdCaptureImagePreview: ({ text, imageUrl, }: {
+    text?: string | undefined;
+    imageUrl: string;
+}) => JSX.Element;
 export declare const SelfieProgressPreview: ({ imageUrl }: {
     imageUrl: string;
 }) => JSX.Element;

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

@@ -35,9 +35,10 @@ export type IdCaptureProps = {
     onExit?: () => void;
     processingScreen?: React.ReactElement;
     processingDelay?: number;
+    processingText?: string;
     assets?: IdCaptureAssets;
     colors?: IdCaptureColors;
     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, debugMode, }: IdCaptureProps) => React.ReactElement;
+export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, onPrediction, onBarcodeScanned, onCapture, onExit, processingScreen, processingDelay, processingText, assets, colors, verbiage, debugMode, }: IdCaptureProps) => React.ReactElement;

package/dist/sdk2.cjs.development.js

@@ -8495,6 +8495,63 @@ var templateObject_1$7, templateObject_2$3, templateObject_3$2, templateObject_4
 var ExitCaptureButton = styled__default['default'].button(templateObject_1$6 || (templateObject_1$6 = 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\n  &:hover {\n    background: #ddd;\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\n  &:hover {\n    background: #ddd;\n  }\n"])));
 var templateObject_1$6;
 
+var Spinner = styled__default['default'].div(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
+  var $size = _a.$size;
+  return $size !== null && $size !== void 0 ? $size : 80;
+}, function (_a) {
+  var $size = _a.$size;
+  return $size !== null && $size !== void 0 ? $size : 80;
+}, function (_a) {
+  var $size = _a.$size;
+  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
+}, function (_a) {
+  var $size = _a.$size;
+  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
+}, function (_a) {
+  var $thickness = _a.$thickness;
+  return $thickness !== null && $thickness !== void 0 ? $thickness : 6;
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+});
+var templateObject_1$5;
+
+var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
+  var text = _a.text,
+    imageUrl = _a.imageUrl;
+  return /*#__PURE__*/React__default['default'].createElement(ImagePreviewWrapper, null, text && /*#__PURE__*/React__default['default'].createElement(ImagePreviewText, null, text), /*#__PURE__*/React__default['default'].createElement(ImagePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: imageUrl,
+    alt: ""
+  })));
+};
+var SelfieProgressPreview = function SelfieProgressPreview(_a) {
+  var imageUrl = _a.imageUrl;
+  return /*#__PURE__*/React__default['default'].createElement(ImagePreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(ImagePreviewText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
+    "$size": 24,
+    "$color": "white",
+    "$thickness": 3,
+    style: {
+      position: 'relative',
+      top: 4,
+      left: -3,
+      margin: '0 3px 0 -12px'
+    }
+  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(ImagePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: imageUrl,
+    alt: ""
+  })));
+};
+var ImagePreviewWrapper = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = 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"])));
+var ImagePreviewText = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = 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"])));
+var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = 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"])));
+var templateObject_1$4, templateObject_2$2, templateObject_3$1;
+
 var initialState$5 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -8689,6 +8746,7 @@ var IdCapture = function IdCapture(_a) {
     processingScreen = _a.processingScreen,
     _s = _a.processingDelay,
     processingDelay = _s === void 0 ? 0 : _s,
+    processingText = _a.processingText,
     _t = _a.assets,
     assets = _t === void 0 ? {} : _t,
     _u = _a.colors,
@@ -8923,7 +8981,10 @@ var IdCapture = function IdCapture(_a) {
     videoHeight: state.videoHeight
   });
   if (processingFrame) {
-    return processingScreen || /*#__PURE__*/React__default['default'].createElement("div", null, "Processing...");
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, processingScreen, imageURL && /*#__PURE__*/React__default['default'].createElement(IdCaptureImagePreview, {
+      text: processingText,
+      imageUrl: imageURL
+    }));
   }
   if (imageURL !== '') {
     return /*#__PURE__*/React__default['default'].createElement("img", {
@@ -9390,10 +9451,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$5 || (templateObject_1$5 = 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$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) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
-var templateObject_1$5;
+var templateObject_1$3;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -9687,6 +9748,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           colors: colors,
           verbiage: verbiage.idCardFront,
           debugMode: debugMode,
+          processingText: "ID card front captured.",
           processingScreen: /*#__PURE__*/React__default['default'].createElement(FlipIdPrompt, {
             assets: assets.flipIdPrompt,
             verbiage: verbiage.flipIdPrompt
@@ -10039,18 +10101,18 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   }) : children);
 };
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = 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 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$2 || (templateObject_2$2 = 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 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$4, templateObject_2$2;
+var templateObject_1$2, templateObject_2$1;
 
 var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger) {
   var _a = React.useState(false),
@@ -10327,55 +10389,6 @@ var SelfieCapture = function SelfieCapture(_a) {
   }, "\xD7"));
 };
 
-var Spinner = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
-  var $size = _a.$size;
-  return $size !== null && $size !== void 0 ? $size : 80;
-}, function (_a) {
-  var $size = _a.$size;
-  return $size !== null && $size !== void 0 ? $size : 80;
-}, function (_a) {
-  var $size = _a.$size;
-  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
-}, function (_a) {
-  var $size = _a.$size;
-  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
-}, function (_a) {
-  var $thickness = _a.$thickness;
-  return $thickness !== null && $thickness !== void 0 ? $thickness : 6;
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-});
-var templateObject_1$3;
-
-var SelfieProgressPreview = function SelfieProgressPreview(_a) {
-  var imageUrl = _a.imageUrl;
-  return /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(SelfieProgressText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
-    "$size": 24,
-    "$color": "white",
-    "$thickness": 3,
-    style: {
-      position: 'relative',
-      top: 4,
-      left: -3,
-      margin: '0 3px 0 -12px'
-    }
-  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(SelfiePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
-    src: imageUrl,
-    alt: ""
-  })));
-};
-var SelfieProgressPreviewWrapper = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = 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"])));
-var SelfieProgressText = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = 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"])));
-var SelfiePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = 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"])));
-var templateObject_1$2, templateObject_2$1, templateObject_3$1;
-
 var initialState$2 = {
   frame: null,
   face: null,