idmission-web-sdk 1.0.198 → 1.0.200

package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts

@@ -10,8 +10,10 @@ export type IdVideoCaptureFlipIdPromptVerbiage = {
 export type IdVideoCaptureFlipIdPromptProps = {
     imageWidth?: number;
     imageHeight?: number;
+    borderWidth?: number;
+    borderColor?: string;
     style?: CSSProperties;
     assets?: IdVideoCaptureFlipIdPromptAssets;
     verbiage?: IdVideoCaptureFlipIdPromptVerbiage;
 };
-export declare const IdVideoCaptureFlipIdPrompt: ({ imageWidth, imageHeight, style, assets, verbiage, }: IdVideoCaptureFlipIdPromptProps) => ReactElement;
+export declare const IdVideoCaptureFlipIdPrompt: ({ imageWidth, imageHeight, borderWidth, borderColor, style, assets, verbiage, }: IdVideoCaptureFlipIdPromptProps) => ReactElement;

package/dist/components/video_id/IdVideoCaptureGuides.d.ts

@@ -11,10 +11,13 @@ export type IdVideoCaptureGuidesVerbiage = {
     flipIdInstructionText?: CustomerSuppliedVerbiage;
 };
 export type IdVideoCaptureGuidesProps = {
-    borderWidth?: number;
-    borderColor?: string;
     requestedAction?: Action;
+    satisfied?: boolean;
+    faceGuideBorderWidth?: number;
+    faceGuideBorderColor?: string;
+    idCardGuideBorderWidth?: number;
+    idCardGuideBorderColor?: string;
     assets?: IdVideoCaptureGuidesAssets;
     verbiage?: IdVideoCaptureGuidesVerbiage;
 };
-export declare const IdVideoCaptureGuides: ({ requestedAction, borderWidth, borderColor, assets, verbiage: rawVerbiage, }: IdVideoCaptureGuidesProps) => ReactElement;
+export declare const IdVideoCaptureGuides: ({ requestedAction, satisfied, faceGuideBorderWidth, faceGuideBorderColor, idCardGuideBorderWidth, idCardGuideBorderColor, assets, verbiage: rawVerbiage, }: IdVideoCaptureGuidesProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -48,7 +48,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.198';
+var webSdkVersion = '1.0.200';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -13639,44 +13639,41 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
   var _b;
   var imageWidth = _a.imageWidth,
     imageHeight = _a.imageHeight,
-    _c = _a.style,
-    style = _c === void 0 ? {} : _c,
-    _d = _a.assets,
-    assets = _d === void 0 ? {} : _d,
-    _e = _a.verbiage,
-    verbiage = _e === void 0 ? {} : _e;
-  var _f = useResizeObserver__default['default'](),
-    ref = _f.ref,
-    _g = _f.width,
-    width = _g === void 0 ? 1 : _g,
-    _h = _f.height,
-    height = _h === void 0 ? 1 : _h;
+    _c = _a.borderWidth,
+    borderWidth = _c === void 0 ? 4 : _c,
+    _d = _a.borderColor,
+    borderColor = _d === void 0 ? 'white' : _d,
+    _e = _a.style,
+    style = _e === void 0 ? {} : _e,
+    _f = _a.assets,
+    assets = _f === void 0 ? {} : _f,
+    _g = _a.verbiage,
+    verbiage = _g === void 0 ? {} : _g;
+  var _h = useResizeObserver__default['default'](),
+    ref = _h.ref,
+    _j = _h.width,
+    width = _j === void 0 ? 1 : _j,
+    _k = _h.height,
+    height = _k === void 0 ? 1 : _k;
   var cameraRef = React.useContext(CameraStateContext).cameraRef;
   assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
   assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
   var instructionText = useVerbiage(verbiage.instructionText, 'Please flip your ID card...');
   var padding = 0;
-  var borderWidth = 4;
-  var borderColor = 'white';
   var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
   // const [imageLoaded, setImageLoaded] = useState(false)
   var onImageLoaded = React.useCallback(function () {
     // setImageLoaded(true)
   }, []);
   var imageStyle = {
-    height: height - padding * 2 - borderWidth * 2
-  };
-  // if (imageAspectRatio >= wrapperAspectRatio) {
-  imageStyle = {
-    width: width - padding * 2 - borderWidth * 2
+    width: width - padding * 2
   };
-  // }
-  var _j = React.useState(1),
-    transitionTime = _j[0],
-    setTransitionTime = _j[1];
-  var _k = React.useState(0),
-    rotationAngle = _k[0],
-    setRotationAngle = _k[1];
+  var _l = React.useState(1),
+    transitionTime = _l[0],
+    setTransitionTime = _l[1];
+  var _m = React.useState(0),
+    rotationAngle = _m[0],
+    setRotationAngle = _m[1];
   var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
   if (isMirrored) frontTransforms.push('scaleX(-1)');
   var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
@@ -13699,7 +13696,8 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: ref,
     style: tslib.__assign(tslib.__assign({}, style), {
-      position: 'relative'
+      position: 'relative',
+      top: -5
     })
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
@@ -13732,7 +13730,7 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
       alignItems: 'center',
       justifyItems: 'center',
       maxWidth: "calc(100%)",
-      maxHeight: "calc(100% - ".concat(padding * 2, "px - ").concat(borderWidth * 2, "px)")
+      maxHeight: "calc(100% - ".concat(padding * 2, "px)")
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
@@ -13809,25 +13807,27 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
 };
 
 var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
-  var _b;
-  var _c = _a.requestedAction,
-    requestedAction = _c === void 0 ? 'SHOW_ID_FRONT' : _c,
-    _d = _a.borderWidth,
-    borderWidth = _d === void 0 ? 3 : _d,
-    _e = _a.borderColor,
-    borderColor = _e === void 0 ? 'white' : _e,
-    _f = _a.assets,
-    assets = _f === void 0 ? {} : _f,
-    _g = _a.verbiage,
-    rawVerbiage = _g === void 0 ? {} : _g;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+  var _u = _a.requestedAction,
+    requestedAction = _u === void 0 ? 'SHOW_ID_FRONT' : _u,
+    _v = _a.satisfied,
+    satisfied = _v === void 0 ? false : _v,
+    faceGuideBorderWidth = _a.faceGuideBorderWidth,
+    faceGuideBorderColor = _a.faceGuideBorderColor,
+    idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
+    idCardGuideBorderColor = _a.idCardGuideBorderColor,
+    _w = _a.assets,
+    assets = _w === void 0 ? {} : _w,
+    _x = _a.verbiage,
+    rawVerbiage = _x === void 0 ? {} : _x;
   var cameraRef = React.useContext(CameraStateContext).cameraRef;
   var imageRef = React.useRef(null);
-  var _h = React.useState(0),
-    imageWidth = _h[0],
-    setImageWidth = _h[1];
-  var _j = React.useState(0),
-    imageHeight = _j[0],
-    setImageHeight = _j[1];
+  var _y = React.useState(0),
+    imageWidth = _y[0],
+    setImageWidth = _y[1];
+  var _z = React.useState(0),
+    imageHeight = _z[0],
+    setImageHeight = _z[1];
   assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
   assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
   var verbiage = useTranslations(rawVerbiage, {
@@ -13836,6 +13836,11 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
   });
   var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : verbiage.idBackInstructionText;
   var idGuideWidth = typeof window !== 'undefined' && window.innerWidth > window.innerHeight ? '30%' : '75%';
+  var theme = styled.useTheme();
+  if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
+  if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : 'white';
+  if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 4;
+  if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : 'white';
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       position: 'absolute',
@@ -13847,8 +13852,8 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
-      borderWidth: borderWidth,
-      borderColor: borderColor,
+      borderWidth: faceGuideBorderWidth,
+      borderColor: faceGuideBorderColor,
       borderStyle: 'solid',
       borderRadius: '50%',
       aspectRatio: '1 / 1.618',
@@ -13862,6 +13867,8 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     },
     imageWidth: imageWidth,
     imageHeight: imageHeight,
+    borderWidth: idCardGuideBorderWidth,
+    borderColor: idCardGuideBorderColor,
     style: {
       width: idGuideWidth,
       margin: '2% auto 2%'
@@ -13892,13 +13899,13 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     }
   }, instructionText)), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
-      border: "4px solid ".concat(borderColor)
+      border: "".concat(idCardGuideBorderWidth, "px solid ").concat(idCardGuideBorderColor)
     }
   }, /*#__PURE__*/React__default['default'].createElement(GuideImage, {
     ref: imageRef,
     src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
     alt: "",
-    "$isMirrored": !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing),
+    "$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
     onLoad: function onLoad() {
       var _a, _b, _c, _d;
       if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
@@ -14164,6 +14171,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
           switch (_a.label) {
             case 0:
               if (!satisfied) return [3 /*break*/, 5];
+              setDetectedObjects([]);
               setCurrentDetectionScore(0);
               setCurrentFocusScore(0);
               setGoodFramesCount(0);
@@ -14225,8 +14233,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
     }
   }, [numFramesWithoutFaces, onFaceNotDetected]);
-  colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
-  colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
   var theme = styled.useTheme();
   var faceNotCenteredText = useTranslations(rawVerbiage, {
     faceNotCenteredText: 'Please move your face to the center...'
@@ -14256,7 +14262,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     assets: assets.guides,
     verbiage: rawVerbiage.guides,
     requestedAction: requestedAction,
-    borderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
+    satisfied: satisfied,
+    faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
+    idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
   }), debugMode && ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction) && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlayDiv, {
     "$flipX": !((_m = cameraRef.current) === null || _m === void 0 ? void 0 : _m.isRearFacing)
   }, detectedObjects.map(function (obj, i) {