idmission-web-sdk 2.1.23 → 2.1.24

package/dist/components/signature_capture/data.d.ts

@@ -1,4 +1,5 @@
 import ReactSignatureCanvas from 'react-signature-canvas';
+import SignatureCanvas from 'react-signature-canvas';
 export type SignatureData = {
     clickX_simple: number[][];
     clickY_simple: number[][];
@@ -6,4 +7,5 @@ export type SignatureData = {
     pressure: string;
     fileContent: string;
 };
-export declare function signatureDataToIdmissionFormat(signatureCanvas: ReactSignatureCanvas): SignatureData;
+export declare function signatureDataToIdmissionFormat(signatureCanvas: ReactSignatureCanvas, imageUrl?: string | null): SignatureData;
+export declare function exportSignatureImage(signaturePad: SignatureCanvas, exportWidth?: number): Promise<string | null>;

package/dist/components/video_signature_capture/VideoSignatureSuccess.d.ts

@@ -22,10 +22,11 @@ export type VideoSignatureSuccessVerbiage = {
 };
 export type VideoSignatureSuccessProps = {
     videoUrl: string;
+    imageUrl: string;
     onDoneClick?: () => void;
     onRetryClick?: () => void;
     classNames?: VideoSignatureSuccessClassNames;
     colors?: VideoSignatureSuccessColors;
     verbiage?: VideoSignatureSuccessVerbiage;
 };
-export declare const VideoSignatureSuccess: ({ videoUrl, onDoneClick, onRetryClick, classNames, colors, verbiage: rawVerbiage, }: VideoSignatureSuccessProps) => ReactElement;
+export declare const VideoSignatureSuccess: ({ videoUrl, imageUrl, onDoneClick, onRetryClick, classNames, colors, verbiage: rawVerbiage, }: VideoSignatureSuccessProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.1.23';
+var webSdkVersion = '2.1.24';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -11772,15 +11772,14 @@ var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_
   });
 };
 
-function signatureDataToIdmissionFormat(signatureCanvas) {
-  var _a;
-  var dataURL = (_a = signatureCanvas.toDataURL()) !== null && _a !== void 0 ? _a : null;
+function signatureDataToIdmissionFormat(signatureCanvas, imageUrl) {
+  imageUrl || (imageUrl = signatureCanvas.toDataURL());
   var signatureData = {
     clickX_simple: [],
     clickY_simple: [],
     time_simple: [],
     pressure: '',
-    fileContent: dataURL ? dataUrlToBase64Sync(dataURL) : ''
+    fileContent: imageUrl ? dataUrlToBase64Sync(imageUrl) : ''
   };
   signatureCanvas.toData().forEach(function (stroke) {
     var xs = [];
@@ -11797,6 +11796,68 @@ function signatureDataToIdmissionFormat(signatureCanvas) {
   });
   return signatureData;
 }
+function exportSignatureImage(signaturePad_1) {
+  return __awaiter(this, arguments, void 0, function (signaturePad, exportWidth) {
+    var signatureCanvas, scaledHeight, svgB64Url, svgContent, scaledSvgContent, scaledSvgUrl;
+    if (exportWidth === void 0) {
+      exportWidth = 600;
+    }
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          signatureCanvas = signaturePad.getCanvas();
+          scaledHeight = signatureCanvas.height * exportWidth / signatureCanvas.width;
+          svgB64Url = signaturePad.getSignaturePad()._toSVG();
+          svgContent = atob(svgB64Url.replace('data:image/svg+xml;base64,', ''));
+          scaledSvgContent = svgContent.replace(/width="[0-9.]+"/, "width=\"".concat(exportWidth, "\"")).replace(/height="[0-9.]+"/, "height=\"".concat(scaledHeight, "\"")).replace(/viewBox="0 0 [0-9.]+ [0-9.]+"/, "viewBox=\"0 0 ".concat(signatureCanvas.width, " ").concat(signatureCanvas.height, "\""));
+          scaledSvgUrl = 'data:image/svg+xml;base64,' + btoa(scaledSvgContent);
+          return [4 /*yield*/, convertSVGtoImg(scaledSvgUrl)];
+        case 1:
+          return [2 /*return*/, _a.sent()];
+      }
+    });
+  });
+}
+function loadImage(url) {
+  return __awaiter(this, void 0, void 0, function () {
+    var img;
+    return __generator(this, function (_a) {
+      img = document.createElement('img');
+      img.src = url;
+      return [2 /*return*/, new Promise(function (resolve, reject) {
+        img.onload = function () {
+          return resolve(img);
+        };
+        img.onerror = reject;
+      })];
+    });
+  });
+}
+function convertSVGtoImg(svgData_1) {
+  return __awaiter(this, arguments, void 0, function (svgData, format) {
+    var img, canvas, ctx;
+    if (format === void 0) {
+      format = 'jpeg';
+    }
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4 /*yield*/, loadImage(svgData)];
+        case 1:
+          img = _a.sent();
+          canvas = document.createElement('canvas');
+          canvas.width = img.naturalWidth;
+          canvas.height = img.naturalHeight;
+          ctx = canvas.getContext('2d');
+          if (!ctx) return [2 /*return*/, null];
+          ctx.fillStyle = 'white';
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
+          return [2 /*return*/, canvas.toDataURL("image/".concat(format), 1.0)];
+      }
+    });
+  });
+}
 
 var SignaturePaperBacking = styled__default.default.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  ", "\n  ", "\n  ", "\n"])), function (props) {
   var _a, _b;
@@ -11840,9 +11901,21 @@ var SignatureCapture = function SignatureCapture(_a) {
     clearBtnText: 'Clear'
   });
   function onAcceptClicked() {
-    if (!signaturePad.current) return;
-    var signatureData = signatureDataToIdmissionFormat(signaturePad.current);
-    onAccept === null || onAccept === void 0 ? void 0 : onAccept(signatureData, signaturePad.current.toDataURL());
+    return __awaiter(this, void 0, void 0, function () {
+      var imageUrl, signatureData;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!signaturePad.current) return [2 /*return*/];
+            return [4 /*yield*/, exportSignatureImage(signaturePad.current)];
+          case 1:
+            imageUrl = _a.sent();
+            signatureData = signatureDataToIdmissionFormat(signaturePad.current, imageUrl);
+            onAccept === null || onAccept === void 0 ? void 0 : onAccept(signatureData, imageUrl !== null && imageUrl !== void 0 ? imageUrl : '');
+            return [2 /*return*/];
+        }
+      });
+    });
   }
   return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
     className: classNames.container
@@ -12175,20 +12248,23 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     }
   }, [numFramesWithoutFaces, onFaceNotDetected]);
   function onAcceptClicked() {
-    if (!signaturePad.current) return;
-    var signatureData = signatureDataToIdmissionFormat(signaturePad.current);
-    setSignatureData(signatureData);
-    var signatureCanvas = signaturePad.current.getCanvas();
-    var scaledHeight = signatureCanvas.height * 600 / signatureCanvas.width;
-    var svgB64Url = signaturePad.current.getSignaturePad()._toSVG();
-    var svgContent = atob(svgB64Url.replace('data:image/svg+xml;base64,', ''));
-    var scaledSvgContent = svgContent.replace(/width="[0-9.]+"/, "width=\"600\"").replace(/height="[0-9.]+"/, "height=\"".concat(scaledHeight, "\"")).replace(/viewBox="0 0 [0-9.]+ [0-9.]+"/, "viewBox=\"0 0 ".concat(signatureCanvas.width, " ").concat(signatureCanvas.height, "\""));
-    var scaledSvgUrl = 'data:image/svg+xml;base64,' + btoa(scaledSvgContent);
-    convertSVGtoImg(scaledSvgUrl).then(function (dataUrl) {
+    return __awaiter(this, void 0, void 0, function () {
+      var imageUrl;
       var _a;
-      dataUrl && setSignatureDataUrl(dataUrl);
-      stopRecordingVideo();
-      (_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.stop();
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            if (!signaturePad.current) return [2 /*return*/];
+            return [4 /*yield*/, exportSignatureImage(signaturePad.current)];
+          case 1:
+            imageUrl = _b.sent();
+            setSignatureDataUrl(imageUrl);
+            setSignatureData(signatureDataToIdmissionFormat(signaturePad.current, imageUrl));
+            stopRecordingVideo();
+            (_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.stop();
+            return [2 /*return*/];
+        }
+      });
     });
   }
   return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
@@ -12235,54 +12311,11 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   }));
 };
 var AcceptBtn = styled__default.default(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-var loadImage = function loadImage(url) {
-  return __awaiter(void 0, void 0, void 0, function () {
-    var img;
-    return __generator(this, function (_a) {
-      img = document.createElement('img');
-      img.src = url;
-      return [2 /*return*/, new Promise(function (resolve, reject) {
-        img.onload = function () {
-          return resolve(img);
-        };
-        img.onerror = reject;
-      })];
-    });
-  });
-};
-var convertSVGtoImg = function convertSVGtoImg(svgData_1) {
-  var args_1 = [];
-  for (var _i = 1; _i < arguments.length; _i++) {
-    args_1[_i - 1] = arguments[_i];
-  }
-  return __awaiter(void 0, __spreadArray([svgData_1], args_1, true), void 0, function (svgData, format) {
-    var img, canvas, ctx;
-    if (format === void 0) {
-      format = 'jpeg';
-    }
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          return [4 /*yield*/, loadImage(svgData)];
-        case 1:
-          img = _a.sent();
-          canvas = document.createElement('canvas');
-          canvas.width = img.naturalWidth;
-          canvas.height = img.naturalHeight;
-          ctx = canvas.getContext('2d');
-          if (!ctx) return [2 /*return*/];
-          ctx.fillStyle = 'white';
-          ctx.fillRect(0, 0, canvas.width, canvas.height);
-          ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
-          return [2 /*return*/, canvas.toDataURL("image/".concat(format), 1.0)];
-      }
-    });
-  });
-};
 var templateObject_1$a;
 
 var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
   var videoUrl = _a.videoUrl,
+    imageUrl = _a.imageUrl,
     onDoneClick = _a.onDoneClick,
     onRetryClick = _a.onRetryClick,
     _b = _a.classNames,
@@ -12311,6 +12344,12 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     controls: true,
     preload: "metadata",
     autoPlay: true
+  }), /*#__PURE__*/React__namespace.default.createElement("img", {
+    src: imageUrl,
+    alt: "",
+    style: {
+      display: 'none'
+    }
   })), /*#__PURE__*/React__namespace.default.createElement(ButtonsRow, {
     className: classNames.buttonsRow
   }, /*#__PURE__*/React__namespace.default.createElement(LoaderButton, {
@@ -12419,13 +12458,13 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
     });
   }, [logCaptureMetadata, selfieImage, setSelfieImage]);
   var _p = React.useState(null),
-    signatureDataUrl = _p[0],
-    setSignatureDataUrl = _p[1];
+    signatureImageUrl = _p[0],
+    setSignatureImageUrl = _p[1];
   var onSignatureCaptureCompleted = React.useCallback(function (videoData, signatureData, signatureImageData) {
     setSignatureData(signatureData);
     setSignatureVideoUrl(URL.createObjectURL(videoData));
+    setSignatureImageUrl(signatureImageData);
     setCaptureState('SUCCESS');
-    setSignatureDataUrl(signatureImageData);
     onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
   }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
   var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
@@ -12483,17 +12522,15 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
         });
       case 'SUCCESS':
         if (!showSuccessScreen) return;
-        return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(VideoSignatureSuccess, {
+        return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureSuccess, {
           videoUrl: signatureVideoUrl !== null && signatureVideoUrl !== void 0 ? signatureVideoUrl : '',
+          imageUrl: signatureImageUrl !== null && signatureImageUrl !== void 0 ? signatureImageUrl : '',
           onDoneClick: onComplete,
           onRetryClick: onRetry,
           classNames: classNames.success,
           colors: colors.success,
           verbiage: verbiage.success
-        }), signatureDataUrl && /*#__PURE__*/React__namespace.default.createElement("img", {
-          src: signatureDataUrl,
-          alt: ""
-        }));
+        });
       default:
         return null;
     }