idmission-web-sdk 1.0.87 → 1.0.89

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

@@ -829,6 +829,7 @@ export declare const GuideText: import("styled-components").IStyledComponent<"we
 export declare const GuideImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
     $width?: number | undefined;
     $height?: number | undefined;
+    $padding: number;
 }>>;
 export type DocumentCaptureGuideOverlayClassNames = {
     container?: string;
@@ -849,6 +850,7 @@ export type DocumentCaptureGuideOverlayProps = {
     width?: number;
     height?: number;
     padding?: number;
+    imagePadding?: number;
     borderWidth?: number;
     borderColor?: string;
     isMirrored?: boolean;
@@ -857,4 +859,4 @@ export type DocumentCaptureGuideOverlayProps = {
     landscapeGuidesImageUrl?: string;
     onClick?: () => void;
 };
-export declare const DocumentCaptureGuideOverlay: ({ classNames, width, height, padding, borderWidth, borderColor, isMirrored, instruction, portraitGuidesImageUrl, landscapeGuidesImageUrl, onClick, }: DocumentCaptureGuideOverlayProps) => ReactElement;
+export declare const DocumentCaptureGuideOverlay: ({ classNames, width, height, padding: userSuppliedPadding, imagePadding: userSuppliedImagePadding, borderWidth, borderColor, isMirrored, instruction, portraitGuidesImageUrl, landscapeGuidesImageUrl, onClick, }: DocumentCaptureGuideOverlayProps) => ReactElement;

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

@@ -23,8 +23,12 @@ export type FlipIdPromptVerbiage = {
     instructionText?: CustomerSuppliedVerbiage;
 };
 export type FlipIdPromptProps = {
+    padding?: number;
+    imagePadding?: number;
+    borderWidth?: number;
+    borderColor?: string;
     assets?: FlipIdPromptAssets;
     classNames?: FlipIdPromptClassNames;
     verbiage?: FlipIdPromptVerbiage;
 };
-export declare const FlipIdPrompt: ({ assets, classNames, verbiage, }: FlipIdPromptProps) => ReactElement;
+export declare const FlipIdPrompt: ({ padding: userSuppliedPadding, imagePadding: userSuppliedImagePadding, borderWidth, borderColor, assets, classNames, verbiage, }: FlipIdPromptProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -46,7 +46,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.87';
+var webSdkVersion = '1.0.89';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1357,44 +1357,46 @@ var GuideRegion = styled__default['default'].div(templateObject_3$c || (template
 var GuideCenterRegion = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = tslib.__makeTemplateObject(["\n  ", "\n  box-sizing: border-box;\n"], ["\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
   return props.$isMirrored ? 'transform: scaleX(-1);' : '';
 });
-var GuideCenterBorder = styled__default['default'].div(templateObject_5$3 || (templateObject_5$3 = tslib.__makeTemplateObject(["\n  position: relative;\n  border: ", ";\n"], ["\n  position: relative;\n  border: ", ";\n"])), function (props) {
+var GuideCenterBorder = styled__default['default'].div(templateObject_5$3 || (templateObject_5$3 = 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) {
   var _a, _b;
   return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
 });
 var GuideText = styled__default['default'].span(templateObject_6$2 || (templateObject_6$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"])));
-var GuideImage = styled__default['default'].img(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n  display: block;\n  ", "\n  ", "\n"], ["\n  display: block;\n  ", "\n  ", "\n"])), function (props) {
-  return props.$width ? "width: ".concat(props.$width, "px; max-width: ").concat(props.$width, "px;") : "max-width: none;";
+var GuideImage = styled__default['default'].img(templateObject_7 || (templateObject_7 = 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) {
+  return props.$padding;
 }, function (props) {
-  return props.$height ? "height: ".concat(props.$height, "px; max-height: ").concat(props.$height, "px;") : "max-width: none;";
+  return props.$width ? "width: ".concat(props.$width, "px;\n         max-width: ").concat(props.$width, "px;") : "max-width: none;";
+}, function (props) {
+  return props.$height ? "height: ".concat(props.$height, "px;\n         max-height: ").concat(props.$height, "px;") : "max-height: none;";
 });
 var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
-  var _b, _c, _d;
-  var _e = _a.classNames,
-    classNames = _e === void 0 ? {} : _e,
-    _f = _a.width,
-    width = _f === void 0 ? 0 : _f,
-    _g = _a.height,
-    height = _g === void 0 ? 0 : _g,
-    _h = _a.padding,
-    padding = _h === void 0 ? isMobile() ? 0 : 50 : _h,
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var _p = _a.classNames,
+    classNames = _p === void 0 ? {} : _p,
+    _q = _a.width,
+    width = _q === void 0 ? 0 : _q,
+    _r = _a.height,
+    height = _r === void 0 ? 0 : _r,
+    userSuppliedPadding = _a.padding,
+    userSuppliedImagePadding = _a.imagePadding,
     borderWidth = _a.borderWidth,
     borderColor = _a.borderColor,
-    _j = _a.isMirrored,
-    isMirrored = _j === void 0 ? false : _j,
-    _k = _a.instruction,
-    instruction = _k === void 0 ? '' : _k,
+    _s = _a.isMirrored,
+    isMirrored = _s === void 0 ? false : _s,
+    _t = _a.instruction,
+    instruction = _t === void 0 ? '' : _t,
     portraitGuidesImageUrl = _a.portraitGuidesImageUrl,
     landscapeGuidesImageUrl = _a.landscapeGuidesImageUrl,
     onClick = _a.onClick;
-  var _l = React.useContext(GuideOrientationContext),
-    orientation = _l.orientation,
-    wrapperRef = _l.wrapperRef,
-    wrapperWidth = _l.wrapperWidth,
-    wrapperHeight = _l.wrapperHeight,
-    imageAspectRatio = _l.imageAspectRatio,
-    wrapperAspectRatio = _l.wrapperAspectRatio,
-    onImageLoaded = _l.onImageLoaded,
-    setDimensions = _l.setDimensions;
+  var _u = React.useContext(GuideOrientationContext),
+    orientation = _u.orientation,
+    wrapperRef = _u.wrapperRef,
+    wrapperWidth = _u.wrapperWidth,
+    wrapperHeight = _u.wrapperHeight,
+    imageAspectRatio = _u.imageAspectRatio,
+    wrapperAspectRatio = _u.wrapperAspectRatio,
+    onImageLoaded = _u.onImageLoaded,
+    setDimensions = _u.setDimensions;
   var theme = styled.useTheme();
   if (borderWidth === undefined) borderWidth = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
   if (width == 0) width = wrapperWidth;
@@ -1405,8 +1407,10 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
       height: height
     });
   }, [height, setDimensions, width]);
+  var padding = (userSuppliedPadding !== null && userSuppliedPadding !== void 0 ? userSuppliedPadding : isMobile()) ? (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.mobilePadding) !== null && _g !== void 0 ? _g : 0 : (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.desktopPadding) !== null && _k !== void 0 ? _k : 50;
   var paddingAndBorderPx = padding * 2 + borderWidth * 2;
   var imgSrc = orientation === 'portrait' ? portraitGuidesImageUrl : landscapeGuidesImageUrl;
+  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 : 0;
   var imageWidth = undefined,
     imageHeight = undefined;
   if (imageAspectRatio >= wrapperAspectRatio) {
@@ -1443,7 +1447,8 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
     onLoad: onImageLoaded,
     className: classNames.image,
     "$width": imageWidth,
-    "$height": imageHeight
+    "$height": imageHeight,
+    "$padding": imagePadding
   }))), /*#__PURE__*/React__default['default'].createElement(GuideRegion, {
     "$minWidth": padding,
     className: regionClsx$1(classNames, 'Right')
@@ -1593,22 +1598,6 @@ function getBlobDimensions(blob) {
   });
 }
 
-function iOS() {
-  return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
-  // iPad on iOS 13 detection
-  navigator.userAgent.includes('Mac') && 'ontouchend' in document;
-}
-function wideAngleIsBetter() {
-  if (!iOS()) return false;
-  var smallerSide = smallerSideIos();
-  var realWidth = window.screen.width * window.devicePixelRatio;
-  var realHeight = window.screen.height * window.devicePixelRatio;
-  return realWidth == 1179 && realHeight == 2556 || realWidth == 1290 && realHeight == 2796 && (smallerSide == 393 || smallerSide == 430);
-}
-function smallerSideIos() {
-  return window.screen.width < window.screen.height ? window.screen.width : window.screen.height;
-}
-
 function listAvailableCameras(facingMode, requestMicAccess) {
   if (requestMicAccess === void 0) {
     requestMicAccess = false;
@@ -1771,15 +1760,15 @@ var useHighestResCaptureDevice = function useHighestResCaptureDevice(_a) {
           return labelMatches(deviceInfo, frontLabels);
         });
       }
-      if (wideAngleIsBetter()) {
-        selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
-          return labelMatches(deviceInfo, backUltraWideLabels);
-        }));
-      } else {
-        selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
-          return labelMatches(deviceInfo, rearLabels) && !labelMatches(deviceInfo, backUltraWideLabels);
-        }));
-      }
+      // if (wideAngleIsBetter()) {
+      //   selectedCamera ||= availableCameras.find((deviceInfo) =>
+      //     labelMatches(deviceInfo, backUltraWideLabels),
+      //   )
+      // } else {
+      selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
+        return labelMatches(deviceInfo, rearLabels) && !labelMatches(deviceInfo, backUltraWideLabels);
+      }));
+      // }
       selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
         return labelMatches(deviceInfo, rearLabels);
       }));
@@ -10279,38 +10268,42 @@ var FlippingImage = styled__default['default'](GuideImage)(templateObject_1$k ||
 });
 var FlippingImageBack = styled__default['default'](FlippingImage)(templateObject_2$b || (templateObject_2$b = tslib.__makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
 var FlipIdPrompt = function FlipIdPrompt(_a) {
-  var _b, _c;
-  var _d = _a.assets,
-    assets = _d === void 0 ? {} : _d,
-    _e = _a.classNames,
-    classNames = _e === void 0 ? {} : _e,
-    _f = _a.verbiage,
-    verbiage = _f === void 0 ? {} : _f;
-  var _g = useResizeObserver__default['default'](),
-    ref = _g.ref,
-    _h = _g.width,
-    width = _h === void 0 ? 1 : _h,
-    _j = _g.height,
-    height = _j === void 0 ? 1 : _j;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  var userSuppliedPadding = _a.padding,
+    userSuppliedImagePadding = _a.imagePadding,
+    borderWidth = _a.borderWidth,
+    borderColor = _a.borderColor,
+    _q = _a.assets,
+    assets = _q === void 0 ? {} : _q,
+    _r = _a.classNames,
+    classNames = _r === void 0 ? {} : _r,
+    _s = _a.verbiage,
+    verbiage = _s === void 0 ? {} : _s;
+  var _t = useResizeObserver__default['default'](),
+    ref = _t.ref,
+    _u = _t.width,
+    width = _u === void 0 ? 1 : _u,
+    _v = _t.height,
+    height = _v === void 0 ? 1 : _v;
   var cameraRef = React.useContext(CameraStateContext).cameraRef;
+  var theme = styled.useTheme();
   assets.frontPortraitGuidesImageUrl || (assets.frontPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Portrait-2.svg"));
   assets.frontLandscapeGuidesImageUrl || (assets.frontLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
   assets.backPortraitGuidesImageUrl || (assets.backPortraitGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Portrait-2.svg"));
   assets.backLandscapeGuidesImageUrl || (assets.backLandscapeGuidesImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
   var instruction = useVerbiage(verbiage.instructionText, 'Please flip your ID card...');
-  var padding = isMobile() ? 0 : 50;
-  var borderWidth = 4;
-  var borderColor = 'white';
-  var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
-  var _k = React.useContext(GuideOrientationContext),
-    orientation = _k.orientation,
-    wrapperRef = _k.wrapperRef,
-    wrapperWidth = _k.wrapperWidth,
-    wrapperHeight = _k.wrapperHeight,
-    imageAspectRatio = _k.imageAspectRatio,
-    wrapperAspectRatio = _k.wrapperAspectRatio,
-    onImageLoaded = _k.onImageLoaded,
-    setDimensions = _k.setDimensions;
+  var padding = (userSuppliedPadding !== null && userSuppliedPadding !== void 0 ? userSuppliedPadding : isMobile()) ? (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.mobilePadding) !== null && _d !== void 0 ? _d : 0 : (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.desktopPadding) !== null && _g !== void 0 ? _g : 50;
+  if (borderWidth === undefined) borderWidth = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.borderWidth) !== null && _k !== void 0 ? _k : 4;
+  var isMirrored = !((_l = cameraRef.current) === null || _l === void 0 ? void 0 : _l.isRearFacing);
+  var _w = React.useContext(GuideOrientationContext),
+    orientation = _w.orientation,
+    wrapperRef = _w.wrapperRef,
+    wrapperWidth = _w.wrapperWidth,
+    wrapperHeight = _w.wrapperHeight,
+    imageAspectRatio = _w.imageAspectRatio,
+    wrapperAspectRatio = _w.wrapperAspectRatio,
+    onImageLoaded = _w.onImageLoaded,
+    setDimensions = _w.setDimensions;
   React.useEffect(function () {
     setDimensions({
       width: width,
@@ -10318,6 +10311,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     });
   }, [height, setDimensions, width]);
   var paddingAndBorderPx = padding * 2 + borderWidth * 2;
+  var imagePadding = (_p = userSuppliedImagePadding !== null && userSuppliedImagePadding !== void 0 ? userSuppliedImagePadding : (_o = (_m = theme.idCapture) === null || _m === void 0 ? void 0 : _m.guideBox) === null || _o === void 0 ? void 0 : _o.imagePadding) !== null && _p !== void 0 ? _p : 0;
   var imageWidth = undefined,
     imageHeight = undefined;
   if (imageAspectRatio >= wrapperAspectRatio) {
@@ -10325,12 +10319,12 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
   } else {
     imageHeight = wrapperHeight - paddingAndBorderPx;
   }
-  var _l = React.useState(1),
-    transitionTime = _l[0],
-    setTransitionTime = _l[1];
-  var _m = React.useState(0),
-    rotationAngle = _m[0],
-    setRotationAngle = _m[1];
+  var _x = React.useState(1),
+    transitionTime = _x[0],
+    setTransitionTime = _x[1];
+  var _y = React.useState(0),
+    rotationAngle = _y[0],
+    setRotationAngle = _y[1];
   var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
   if (isMirrored) frontTransforms.push('scaleX(-1)');
   var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
@@ -10352,7 +10346,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
   }, []);
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
-    className: "flex ".concat((_c = classNames.container) !== null && _c !== void 0 ? _c : '')
+    className: classNames.container
   }, /*#__PURE__*/React__default['default'].createElement(GuidesContainer, {
     ref: wrapperRef,
     className: classNames.inner
@@ -10366,7 +10360,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
   }, /*#__PURE__*/React__default['default'].createElement(GuideRegion, {
     "$minWidth": padding,
     className: regionClsx(classNames, 'Left')
-  }), /*#__PURE__*/React__default['default'].createElement(GuideCenterBorder, {
+  }), /*#__PURE__*/React__default['default'].createElement(GuideCenterRegion, null, /*#__PURE__*/React__default['default'].createElement(GuideCenterBorder, {
     "$borderWidth": borderWidth,
     "$borderColor": borderColor,
     className: classNames.centerRegion
@@ -10376,6 +10370,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     className: classNames.image,
     "$width": imageWidth,
     "$height": imageHeight,
+    "$padding": imagePadding,
     "$transitionTime": transitionTime,
     "$transforms": frontTransforms.join(' '),
     onLoad: onImageLoaded
@@ -10385,9 +10380,10 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
     className: classNames.image,
     "$width": imageWidth,
     "$height": imageHeight,
+    "$padding": imagePadding,
     "$transitionTime": transitionTime,
     "$transforms": backTransforms.join(' ')
-  })), /*#__PURE__*/React__default['default'].createElement(GuideRegion, {
+  }))), /*#__PURE__*/React__default['default'].createElement(GuideRegion, {
     "$minWidth": padding,
     className: regionClsx(classNames, 'Right')
   })), /*#__PURE__*/React__default['default'].createElement(GuideRegion, {
@@ -11000,7 +10996,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           colors: colors,
           verbiage: idCardFrontVerbiage,
           debugMode: debugMode,
-          processingDelay: state.capturedDocuments.idCardBack ? undefined : 3500,
+          processingDelay: state.capturedDocuments.idCardBack ? undefined : 60000,
           processingScreen: state.capturedDocuments.idCardBack ? undefined : ( /*#__PURE__*/React__default['default'].createElement(FlipIdPrompt, {
             assets: assets.flipIdPrompt,
             classNames: classNames.flipIdPrompt,
@@ -14223,7 +14219,9 @@ var defaultTheme = {
     guideBox: {
       unsatisfiedColor: 'white',
       satisfiedColor: 'var(--idm-color-positive-500)',
-      borderWidth: 4
+      borderWidth: 4,
+      desktopPadding: 50,
+      mobilePadding: 0
     }
   },
   selfieCapture: {