idmission-web-sdk 1.0.127 → 1.0.129

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

@@ -0,0 +1,7 @@
+import { CapturedDocument } from '../id_capture/CapturedDocuments';
+import React from 'react';
+export declare const CapturedDocumentImg: ({ alt, className, image, }: {
+    alt?: string | undefined;
+    className?: string | undefined;
+    image: CapturedDocument;
+}) => React.JSX.Element;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { CustomerBiometricsEnrollment } from './components/customer_flows/Custom
 import { themes } from './themes';
 import { SubmissionRequest, SubmissionResponse } from './contexts/SubmissionContext';
 import { DocumentCapture, DocumentCaptureProps } from './components/customer_flows/DocumentCapture';
+import { CapturedDocumentImg } from './components/common/CapturedDocumentImg';
 type TargetElement = Element | DocumentFragment | string | undefined;
 export declare const renderIdValidation: (optionsOrTargetElement: TargetElement | IdValidationProps, options?: IdValidationProps) => Element | DocumentFragment;
 export declare const renderFaceValidation: (optionsOrTargetElement: TargetElement | FaceValidationProps, options?: FaceValidationProps) => Element | DocumentFragment;
@@ -41,4 +42,4 @@ export type IDmissionSDK = {
 declare global {
     var IDmissionSDK: IDmissionSDK;
 }
-export { preloadModels, themes, IdValidation, FaceValidation, IdAndFaceValidation, CustomerIdAndBiometricsEnrollment, CustomerBiometricsEnrollment, CustomerVerification, CustomerIdentification, SignatureKYC, VideoIdValidation, DocumentCapture, SubmissionRequest, SubmissionResponse, };
+export { preloadModels, themes, IdValidation, FaceValidation, IdAndFaceValidation, CustomerIdAndBiometricsEnrollment, CustomerBiometricsEnrollment, CustomerVerification, CustomerIdentification, SignatureKYC, VideoIdValidation, DocumentCapture, SubmissionRequest, SubmissionResponse, CapturedDocumentImg, };

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.127';
+var webSdkVersion = '1.0.129';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -10482,6 +10482,34 @@ var CapturedDocumentTypeValues = ['idCardFront', 'idCardBack', 'passport', 'self
 var ButtonsRow = styled__default['default'].div(templateObject_1$l || (templateObject_1$l = tslib.__makeTemplateObject(["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"], ["\n  display: flex;\n  gap: 0 15px;\n  justify-content: center;\n"])));
 var templateObject_1$l;
 
+var CapturedDocumentImg = function CapturedDocumentImg(_a) {
+  var alt = _a.alt,
+    className = _a.className,
+    image = _a.image;
+  var _b = React.useState(image.imageData),
+    url = _b[0],
+    setUrl = _b[1];
+  var _c = React.useState(false),
+    cropped = _c[0],
+    setCropped = _c[1];
+  var bbox = image.boundingBox;
+  var imgRef = React.useRef(null);
+  function onLoaded() {
+    if (!bbox || cropped) return;
+    setCropped(true);
+    setTimeout(function () {
+      setUrl(cropToBoundingBox(imgRef.current, bbox).toDataURL('image/jpeg', 0.95));
+    }, 100);
+  }
+  return /*#__PURE__*/React__default['default'].createElement("img", {
+    ref: imgRef,
+    alt: alt,
+    className: className,
+    src: url,
+    onLoad: onLoaded
+  });
+};
+
 var OverlayInstruction = styled__default['default'].p(templateObject_1$k || (templateObject_1$k = tslib.__makeTemplateObject(["\n  font-size: 18px;\n  margin: 30px 0;\n"], ["\n  font-size: 18px;\n  margin: 30px 0;\n"])));
 var IdCaptureSuccess = function IdCaptureSuccess(_a) {
   var capturedDocuments = _a.capturedDocuments,
@@ -10524,7 +10552,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     className: classNames.imageHeading
   }, verbiage.idCardFrontText), /*#__PURE__*/React__default['default'].createElement(CapturedImageWrapper, {
     className: classNames.imageWrapper
-  }, /*#__PURE__*/React__default['default'].createElement(CapturedImage, {
+  }, /*#__PURE__*/React__default['default'].createElement(StyledImage, {
     image: idCardFront,
     className: classNames.image,
     alt: verbiage.idCardFrontText
@@ -10534,7 +10562,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     className: classNames.imageHeading
   }, verbiage.idCardBackText), /*#__PURE__*/React__default['default'].createElement(CapturedImageWrapper, {
     className: classNames.imageWrapper
-  }, /*#__PURE__*/React__default['default'].createElement(CapturedImage, {
+  }, /*#__PURE__*/React__default['default'].createElement(StyledImage, {
     image: idCardBack,
     className: classNames.image,
     alt: verbiage.idCardBackText
@@ -10544,7 +10572,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     className: classNames.imageHeading
   }, verbiage.passportText), /*#__PURE__*/React__default['default'].createElement(CapturedImageWrapper, {
     className: classNames.imageWrapper
-  }, /*#__PURE__*/React__default['default'].createElement(CapturedImage, {
+  }, /*#__PURE__*/React__default['default'].createElement(StyledImage, {
     image: passport,
     className: classNames.image,
     alt: verbiage.passportText
@@ -10567,49 +10595,6 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     finished: true
   }, submissionStatus === SubmissionStatus.SUBMITTING ? verbiage.submittingText : verbiage.submitText))));
 };
-var CapturedImage = function CapturedImage(_a) {
-  var alt = _a.alt,
-    className = _a.className,
-    image = _a.image;
-  var _b = React.useState(image.imageData),
-    url = _b[0],
-    setUrl = _b[1];
-  var _c = React.useState(false),
-    cropped = _c[0],
-    setCropped = _c[1];
-  var bbox = image.boundingBox;
-  function onLoaded(e) {
-    if (!bbox || cropped) return;
-    setCropped(true);
-    var canvas = document.createElement('canvas');
-    // const ctx = canvas.getContext('2d')
-    // if (!ctx) throw new Error('could not get 2d context')
-    //
-    // const [frameWidth, frameHeight] = getFrameDimensions(e.currentTarget)
-    // const [xMin, yMin, width, height] = bbox
-    // canvas.width = width * frameWidth
-    // canvas.height = height * frameHeight
-    // ctx.drawImage(
-    //   e.currentTarget,
-    //   xMin * frameWidth,
-    //   yMin * frameHeight,
-    //   width * frameWidth,
-    //   height * frameHeight,
-    //   0,
-    //   0,
-    //   width * frameWidth,
-    //   height * frameHeight,
-    // )
-    drawToCanvas(canvas, e.currentTarget);
-    setUrl(canvas.toDataURL('image/jpeg', 0.95));
-  }
-  return /*#__PURE__*/React__default['default'].createElement(StyledImage, {
-    alt: alt,
-    className: className,
-    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"])));
 var ImageRow = styled__default['default'](OverlayImageRow)(templateObject_4$6 || (templateObject_4$6 = tslib.__makeTemplateObject(["\n  flex-direction: column;\n"], ["\n  flex-direction: column;\n"])));
@@ -10619,7 +10604,7 @@ 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 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 StyledImage = styled__default['default'](CapturedDocumentImg)(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) {
@@ -16939,6 +16924,7 @@ globalThis.IDmissionSDK = {
   ready: true
 };
 
+exports.CapturedDocumentImg = CapturedDocumentImg;
 exports.CustomerBiometricsEnrollment = CustomerBiometricsEnrollment;
 exports.CustomerIdAndBiometricsEnrollment = CustomerIdAndBiometricsEnrollment;
 exports.CustomerIdentification = CustomerIdentification;