idmission-web-sdk 1.0.123 → 1.0.125

package/dist/components/customer_flows/CustomerIdAndBiometricsEnrollment.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 import { CardData, PersonalData, SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
 import { FaceLivenessAssets, FaceLivenessClassNames, FaceLivenessColors, FaceLivenessVerbiage } from '../face_liveness/FaceLivenessWizard';
 import { IdCaptureWizardAssets, IdCaptureWizardClassNames, IdCaptureWizardColors, IdCaptureWizardVerbiage } from '../id_capture/IdCaptureWizard';
@@ -95,6 +95,7 @@ export interface CustomerEnrollmentProps extends PropsWithChildren {
     faceLivenessTimeoutDurationMs?: number;
     /** Boolean or async function to indicate whether to proceed automatically after capture guidance is satisfied. If an async function is supplied returning a boolean, it will be evaluated at the time of capture guidance satisfaction. Defaults to `false`. */
     skipSuccessScreen?: boolean | (() => Promise<boolean>);
+    idCaptureInstructions?: ReactNode;
     /** Callback function that fires immediately prior to submission, giving the client application an opportunity to specify custom asynchronous logic that mutates the request before it executes. The submission request is passed in as a parameter and a promise resolving to the updated request should be returned. */
     onBeforeSubmit?: (req: SubmissionRequest) => Promise<SubmissionRequest>;
     /** Callback function that fires when the user has completed the flow instead of making a call to IDmission's servers, allowing customers to specify their own submission logic. Arguments: the request payload that would have been dispatched to IDmission's API, which contains the images/documents/video submitted by the user. Note that when this parameter is supplied, `onComplete` will never fire, and the customer will need to implement their own error handling/retry logic. Use at your own risk! */

package/dist/components/customer_flows/IdAndFaceValidation.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 import { CardData, LivenessCheckRequest, PersonalData, SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
 import { FaceLivenessAssets, FaceLivenessClassNames, FaceLivenessColors, FaceLivenessVerbiage } from '../face_liveness/FaceLivenessWizard';
 import { IdCaptureWizardAssets, IdCaptureWizardClassNames, IdCaptureWizardColors, IdCaptureWizardVerbiage } from '../id_capture/IdCaptureWizard';
@@ -92,6 +92,8 @@ export interface IdAndFaceValidationProps extends PropsWithChildren {
     faceLivenessTimeoutDurationMs?: number;
     /** Boolean or async function to indicate whether to proceed automatically after capture guidance is satisfied. If an async function is supplied returning a boolean, it will be evaluated at the time of capture guidance satisfaction. Defaults to `false`. */
     skipSuccessScreen?: boolean | (() => Promise<boolean>);
+    /** React element or string to render on the instructions screen. */
+    idCaptureInstructions?: ReactNode;
     /** Callback function that fires immediately prior to liveness check, giving the client application an opportunity to specify custom asynchronous logic that mutates the request before it executes. The liveness check request is passed in as a parameter and a promise resolving to the updated request should be returned. */
     onBeforeLivenessCheck?: (req: LivenessCheckRequest) => Promise<LivenessCheckRequest>;
     /** Callback function that fires immediately prior to submission, giving the client application an opportunity to specify custom asynchronous logic that mutates the request before it executes. The submission request is passed in as a parameter and a promise resolving to the updated request should be returned. */

package/dist/components/customer_flows/IdValidation.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 import { CardData, PersonalData, SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
 import { IdCaptureWizardAssets, IdCaptureWizardClassNames, IdCaptureWizardColors, IdCaptureWizardVerbiage } from '../id_capture/IdCaptureWizard';
 import { AdditionalDocumentCaptureWizardClassNames, AdditionalDocumentCaptureWizardVerbiage } from '../additional_document_capture/AdditionalDocumentCaptureWizard';
@@ -74,6 +74,8 @@ export interface IdValidationProps extends PropsWithChildren {
     passportFocusScoreThreshold?: number;
     /** Boolean or async function to indicate whether to proceed automatically after capture guidance is satisfied. If an async function is supplied returning a boolean, it will be evaluated at the time of capture guidance satisfaction. Defaults to `false`. */
     skipSuccessScreen?: boolean | (() => Promise<boolean>);
+    /** React element or string to render on the instructions screen. */
+    instructions?: ReactNode;
     /** Object to allow documents that have been previously captured to be submitted. Valid keys: `idCardFront`, `idCardBack , `passport`.*/
     precapturedDocuments?: CapturedDocuments;
     /** Callback function that fires immediately prior to submission, giving the client application an opportunity to specify custom asynchronous logic that mutates the request before it executes. The submission request is passed in as a parameter and a promise resolving to the updated request should be returned. */

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { CameraAccessDeniedOverlayAssets, CameraAccessDeniedOverlayClassNames, CameraAccessDeniedOverlayColors, CameraAccessDeniedOverlayVerbiage } from '../camera/CameraAccessDeniedOverlay';
 import { LoaderButtonColors } from '../common/LoaderButton';
 import { CustomerSuppliedVerbiage } from '../../lib/locales';
@@ -34,9 +34,10 @@ export type IdCaptureLoadingOverlayVerbiage = {
 export type IdCaptureLoadingOverlayProps = {
     onDismissed?: () => void;
     onUserCancel?: () => void;
+    instructions?: ReactNode;
     assets?: IdCaptureLoadingOverlayAssets;
     classNames?: IdCaptureLoadingOverlayClassNames;
     colors?: IdCaptureLoadingOverlayColors;
     verbiage?: IdCaptureLoadingOverlayVerbiage;
 };
-export declare const IdCaptureLoadingOverlay: ({ onDismissed, onUserCancel, assets, classNames, colors, verbiage: rawVerbiage, }: IdCaptureLoadingOverlayProps) => ReactElement;
+export declare const IdCaptureLoadingOverlay: ({ onDismissed, onUserCancel, instructions, assets, classNames, colors, verbiage: rawVerbiage, }: IdCaptureLoadingOverlayProps) => ReactElement;

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { IdCaptureAssets, IdCaptureClassNames, IdCaptureColors, IdCaptureVerbiage } from './IdCapture';
 import { IdCaptureLoadingOverlayAssets, IdCaptureLoadingOverlayClassNames, IdCaptureLoadingOverlayColors, IdCaptureLoadingOverlayVerbiage } from './IdCaptureLoadingOverlay';
 import { FlipIdPromptAssets, FlipIdPromptClassNames, FlipIdPromptVerbiage } from './FlipIdPrompt';
@@ -59,6 +59,7 @@ export type IdCaptureWizardProps = {
     idCardFocusScoreThreshold?: number;
     passportFocusScoreThreshold?: number;
     skipSuccessScreen?: boolean | (() => Promise<boolean>);
+    instructions?: ReactNode;
     releaseCameraAccessOnExit?: boolean;
     assets?: IdCaptureWizardAssets;
     classNames?: IdCaptureWizardClassNames;
@@ -66,4 +67,4 @@ export type IdCaptureWizardProps = {
     verbiage?: IdCaptureWizardVerbiage;
     debugMode?: boolean;
 };
-export declare const IdCaptureWizard: ({ onSuccess, onExitCapture, onUserCancel, precapturedDocuments, captureRequirement, autoCaptureEnabled, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, barcodeScanningEnabled, idCardAutoCaptureScoreThreshold, passportAutoCaptureScoreThreshold, mrzDetectionScoreThreshold, idCardFocusScoreThreshold, passportFocusScoreThreshold, skipSuccessScreen, releaseCameraAccessOnExit, assets, classNames, colors, verbiage, debugMode, }: IdCaptureWizardProps) => ReactElement;
+export declare const IdCaptureWizard: ({ onSuccess, onExitCapture, onUserCancel, precapturedDocuments, captureRequirement, autoCaptureEnabled, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, barcodeScanningEnabled, idCardAutoCaptureScoreThreshold, passportAutoCaptureScoreThreshold, mrzDetectionScoreThreshold, idCardFocusScoreThreshold, passportFocusScoreThreshold, skipSuccessScreen, instructions, releaseCameraAccessOnExit, assets, classNames, colors, verbiage, debugMode, }: IdCaptureWizardProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -47,7 +47,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.123';
+var webSdkVersion = '1.0.125';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -8709,6 +8709,10 @@ var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
 function getFrameDimensions(frame) {
   var frameWidth = frame.width,
     frameHeight = frame.height;
+  if (frame instanceof HTMLImageElement) {
+    frameWidth = frame.naturalWidth;
+    frameHeight = frame.naturalHeight;
+  }
   if (frame instanceof HTMLVideoElement) {
     frameWidth = frame.videoWidth;
     frameHeight = frame.videoHeight;
@@ -10241,6 +10245,7 @@ var ContinuityCameraCheckbox = styled__default['default'].input(templateObject_2
 var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
   var onDismissed = _a.onDismissed,
     onUserCancel = _a.onUserCancel,
+    instructions = _a.instructions,
     _b = _a.assets,
     assets = _b === void 0 ? {} : _b,
     _c = _a.classNames,
@@ -10304,7 +10309,7 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
     alt: verbiage.headingText,
     src: assets.instructionImageUrl,
     className: classNames.image
-  })), /*#__PURE__*/React__default['default'].createElement(ContinuityCameraCheckboxContainer, {
+  })), instructions, /*#__PURE__*/React__default['default'].createElement(ContinuityCameraCheckboxContainer, {
     className: classNames.continuityCameraCheckboxContainer
   }, iphoneContinuityCameraAvailable && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ContinuityCameraCheckbox, {
     className: classNames.continuityCameraCheckbox,
@@ -10566,29 +10571,24 @@ var CapturedImage = function CapturedImage(_a) {
   var alt = _a.alt,
     className = _a.className,
     image = _a.image;
-  var canvasRef = React.useRef(null);
   var _b = React.useState(image.imageData),
     url = _b[0],
     setUrl = _b[1];
-  React.useEffect(function () {
-    if (!image.boundingBox) return;
-    var im = new Image();
-    im.onload = function () {
-      cropToBoundingBox(im, image.boundingBox, canvasRef.current);
-      setUrl(canvasRef.current.toDataURL());
-    };
-    im.onerror = function (e) {
-      console.error('failed to load image', e);
-    };
-    im.src = image.imageData;
-  }, [image.boundingBox, image.height, image.imageData, image.width]);
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CropCanvas, {
-    ref: canvasRef
-  }), /*#__PURE__*/React__default['default'].createElement(StyledImage, {
+  var _c = React.useState(false),
+    cropped = _c[0],
+    setCropped = _c[1];
+  var bbox = image.boundingBox;
+  function onLoaded(e) {
+    if (!bbox || cropped) return;
+    setCropped(true);
+    setUrl(cropToBoundingBox(e.currentTarget, bbox).toDataURL());
+  }
+  return /*#__PURE__*/React__default['default'].createElement(StyledImage, {
     alt: alt,
     className: className,
-    src: url
-  }));
+    src: url,
+    onLoad: onLoaded
+  });
 };
 var Heading$9 = styled__default['default'].h1(templateObject_2$d || (templateObject_2$d = tslib.__makeTemplateObject(["\n  margin-bottom: 12px;\n"], ["\n  margin-bottom: 12px;\n"])));
 var ImagesContainer = styled__default['default'](OverlayImageContainer)(templateObject_3$a || (templateObject_3$a = tslib.__makeTemplateObject(["\n  overflow-y: auto;\n"], ["\n  overflow-y: auto;\n"])));
@@ -10599,9 +10599,8 @@ var CapturedImageWrapper = styled__default['default'].div(templateObject_7$1 ||
   var _a, _b, _c;
   return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
 });
-var CropCanvas = styled__default['default'].canvas(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-var StyledImage = styled__default['default'].img(templateObject_9 || (templateObject_9 = tslib.__makeTemplateObject(["\n  width: 100%;\n  border-radius: 4px;\n"], ["\n  width: 100%;\n  border-radius: 4px;\n"])));
-var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8, templateObject_9;
+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"])));
+var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
 
 var CameraVideoTag = function CameraVideoTag(_a) {
   var _b;
@@ -10918,6 +10917,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     passportFocusScoreThreshold = _x === void 0 ? 0.3 : _x,
     _y = _a.skipSuccessScreen,
     skipSuccessScreen = _y === void 0 ? false : _y,
+    instructions = _a.instructions,
     _z = _a.releaseCameraAccessOnExit,
     releaseCameraAccessOnExit = _z === void 0 ? true : _z,
     _0 = _a.assets,
@@ -11155,6 +11155,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     }
   }(), !overlayDismissed && ( /*#__PURE__*/React__default['default'].createElement(IdCaptureLoadingOverlay, {
     key: attempt,
+    instructions: instructions,
     assets: assets.loadingOverlay,
     classNames: classNames.loadingOverlay,
     colors: colors.loadingOverlay,
@@ -14443,6 +14444,7 @@ var IdValidation = function IdValidation(_a) {
     passportFocusScoreThreshold = _h === void 0 ? 0.3 : _h,
     _j = _a.skipSuccessScreen,
     skipSuccessScreen = _j === void 0 ? false : _j,
+    instructions = _a.instructions,
     onBeforeSubmit = _a.onBeforeSubmit,
     onSubmit = _a.onSubmit,
     onComplete = _a.onComplete,
@@ -14487,13 +14489,14 @@ var IdValidation = function IdValidation(_a) {
       passportFocusScoreThreshold: passportFocusScoreThreshold,
       barcodeScanningEnabled: false,
       skipSuccessScreen: skipSuccessScreen,
+      instructions: instructions,
       assets: assets,
       classNames: classNames,
       colors: colors,
       verbiage: verbiage,
       debugMode: debugMode
     };
-  }, [onExitCapture, onUserCancel, precapturedDocuments, idCaptureRequirement, idAutoCaptureEnabled, idCardAutoCaptureScoreThreshold, passportAutoCaptureScoreThreshold, idCardFocusScoreThreshold, passportFocusScoreThreshold, skipSuccessScreen, assets, classNames, colors, verbiage, debugMode]);
+  }, [onExitCapture, onUserCancel, precapturedDocuments, idCaptureRequirement, idAutoCaptureEnabled, idCardAutoCaptureScoreThreshold, passportAutoCaptureScoreThreshold, idCardFocusScoreThreshold, passportFocusScoreThreshold, skipSuccessScreen, instructions, assets, classNames, colors, verbiage, debugMode]);
   var additionalDocumentCaptureProps = React.useMemo(function () {
     return {
       documents: captureAdditionalDocuments,
@@ -14687,6 +14690,7 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
     faceLivenessTimeoutDurationMs = _k === void 0 ? 15000 : _k,
     _l = _a.skipSuccessScreen,
     skipSuccessScreen = _l === void 0 ? false : _l,
+    idCaptureInstructions = _a.idCaptureInstructions,
     onBeforeLivenessCheck = _a.onBeforeLivenessCheck,
     onBeforeSubmit = _a.onBeforeSubmit,
     onSubmit = _a.onSubmit,
@@ -14735,10 +14739,11 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
       mrzDetectionScoreThreshold: mrzDetectionScoreThreshold,
       idCardFocusScoreThreshold: idCardFocusScoreThreshold,
       passportFocusScoreThreshold: passportFocusScoreThreshold,
+      instructions: idCaptureInstructions,
       skipSuccessScreen: skipSuccessScreen,
       debugMode: debugMode
     };
-  }, [assets.idCapture, classNames.idCapture, colors.idCapture, debugMode, idAutoCaptureEnabled, idCaptureRequirement, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, mrzDetectionScoreThreshold, onExitCapture, onUserCancel, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold, precapturedDocuments, skipSuccessScreen, verbiage.idCapture]);
+  }, [assets.idCapture, classNames.idCapture, colors.idCapture, debugMode, idAutoCaptureEnabled, idCaptureInstructions, idCaptureRequirement, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, mrzDetectionScoreThreshold, onExitCapture, onUserCancel, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold, precapturedDocuments, skipSuccessScreen, verbiage.idCapture]);
   var faceLivenessProps = React.useMemo(function () {
     return {
       timeoutDurationMs: faceLivenessTimeoutDurationMs,
@@ -14875,6 +14880,7 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
     faceLivenessTimeoutDurationMs = _k === void 0 ? 15000 : _k,
     _l = _a.skipSuccessScreen,
     skipSuccessScreen = _l === void 0 ? false : _l,
+    idCaptureInstructions = _a.idCaptureInstructions,
     onBeforeSubmit = _a.onBeforeSubmit,
     onSubmit = _a.onSubmit,
     onComplete = _a.onComplete,
@@ -14919,12 +14925,13 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
       mrzDetectionScoreThreshold: mrzDetectionScoreThreshold,
       idCardFocusScoreThreshold: idCardFocusScoreThreshold,
       passportFocusScoreThreshold: passportFocusScoreThreshold,
+      instructions: idCaptureInstructions,
       onExitCapture: onExitCapture,
       onUserCancel: onUserCancel,
       skipSuccessScreen: skipSuccessScreen,
       debugMode: debugMode
     };
-  }, [assets.idCapture, classNames.idCapture, colors.idCapture, debugMode, idAutoCaptureEnabled, idCaptureRequirement, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, mrzDetectionScoreThreshold, onExitCapture, onUserCancel, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold, skipSuccessScreen, verbiage.idCapture]);
+  }, [assets.idCapture, classNames.idCapture, colors.idCapture, debugMode, idAutoCaptureEnabled, idCaptureInstructions, idCaptureRequirement, idCardAutoCaptureScoreThreshold, idCardFocusScoreThreshold, mrzDetectionScoreThreshold, onExitCapture, onUserCancel, passportAutoCaptureScoreThreshold, passportFocusScoreThreshold, skipSuccessScreen, verbiage.idCapture]);
   var faceLivenessProps = React.useMemo(function () {
     return {
       onExitCapture: onExitCapture,