diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index bfcfd7cb3..d26887d24 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -12,9 +12,11 @@ import { useParams } from "react-router-dom"; import SignPad from "./component/signPad"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import { + convertPNGtoJPEG, contractDocument, getBase64FromIMG, - getBase64FromUrl + getBase64FromUrl, + urlValidator } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -346,38 +348,13 @@ function PdfRequestFiles() { imgUrlList.map(async (data) => { //cheking signUrl is defau;t signature url of custom url let ImgUrl = data.SignUrl; - const checkUrl = ImgUrl.includes("https:"); + const checkUrl = urlValidator(ImgUrl); //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } //function for called convert png signatre to jpeg in base 64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -433,32 +410,21 @@ function PdfRequestFiles() { const images = await Promise.all( imgUrlList.map(async (url) => { let signUrl = url.SignUrl; - - const checkUrl = url.SignUrl.includes("https:"); + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } + const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; } const res = await fetch(signUrl); - return res.arrayBuffer(); }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } - + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 5638cfae3..76b74b642 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -15,7 +15,7 @@ import EmailComponent from "./component/emailComponent"; import FieldsComponent from "./component/fieldsComponent"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; -import { contractDocument, getBase64FromIMG } from "../utils/Utils"; +import { convertPNGtoJPEG, contractDocument, getBase64FromIMG } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; import { onSaveImage, onSaveSign } from "../utils/Utils"; @@ -24,7 +24,7 @@ import HandleError from "./component/HandleError"; import Nodata from "./component/Nodata"; import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; -import { contractUsers, contactBook } from "../utils/Utils"; +import { contractUsers, contactBook, urlValidator } from "../utils/Utils"; import { modalAlign } from "../utils/Utils"; import { $ } from 'select-dom'; //For signYourself inProgress section signer can add sign and complete doc sign. @@ -446,39 +446,13 @@ function SignYourSelf() { imgUrlList.map(async (data) => { let ImgUrl = data.SignUrl; //cheking signUrl is defau;t signature url of custom url - const checkUrl = ImgUrl.includes("https:"); + const checkUrl = urlValidator(ImgUrl); //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } - //function for convert signature png base64 url to jpeg base64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -526,7 +500,12 @@ function SignYourSelf() { imgUrlList.map(async (url) => { let signUrl = url.SignUrl; - const checkUrl = url.SignUrl.includes("https:"); + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } + const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; } @@ -536,21 +515,7 @@ function SignYourSelf() { }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } - + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index fe43add21..801a30a54 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -14,9 +14,12 @@ import DefaultSignature from "./component/defaultSignature"; import { getBase64FromUrl, getBase64FromIMG, + contactBookName, + convertPNGtoJPEG, contractUsers, contactBook, - contractDocument + contractDocument, + urlValidator } from "../utils/Utils"; import Tour from "reactour"; import Signedby from "./component/signedby"; @@ -446,38 +449,13 @@ function EmbedPdfImage() { imgUrlList.map(async (data) => { //cheking signUrl is defau;t signature url of custom url let ImgUrl = data.SignUrl; - const checkUrl = ImgUrl.includes("https:"); + const checkUrl = urlValidator(ImgUrl); //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } - //function for called convert png signatre to jpeg in base 64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - + //function for convert signature png base64 url to jpeg base64 convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -524,7 +502,12 @@ function EmbedPdfImage() { const images = await Promise.all( imgUrlList.map(async (url) => { let signUrl = url.SignUrl; - const checkUrl = url.SignUrl.includes("https:"); + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } + const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; } @@ -534,20 +517,7 @@ function EmbedPdfImage() { }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height @@ -1137,4 +1107,5 @@ function EmbedPdfImage() { ); } + export default EmbedPdfImage; diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index e47a21f08..cda96f958 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -629,7 +629,6 @@ option { /* The sticky class is added to the navbar with JS when it reaches its scroll position */ .stickyHead { - position: fixed; top: 50px; left: 0.9rem; } diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index a02d3abcd..a78fc3e94 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -29,13 +29,35 @@ export async function getBase64FromIMG(url) { }; }); } +//function for convert signature png base64 url to jpeg base64 +export const convertPNGtoJPEG = (base64Data) => { + return new Promise((resolve, reject) => { + const canvas = document.createElement("canvas"); + const img = new Image(); + img.src = base64Data; + + img.onload = () => { + canvas.width = img.width; + canvas.height = img.height; + + const ctx = canvas.getContext("2d"); + ctx.fillStyle = "#ffffff"; // white color + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.drawImage(img, 0, 0); + // Convert to JPEG by using the canvas.toDataURL() method + const jpegBase64Data = canvas.toDataURL("image/jpeg"); + + resolve(jpegBase64Data); + }; + + img.onerror = (error) => { + reject(error); + }; + }); +}; export function getHostUrl() { const hostUrl = window.location.href; - /// const hostUrl = "https://contracts-defaultssty.qik.ai/#/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive"; - // const hostUrl = "https://contracts-defaultssty.qik.ai/#/" - // const hostUrl = "https://lionfish-app-75ly7.ondigitalocean.app/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive" - //const hostUrl = "https://app.opensignlabs.com/rpmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/draftDocument"; if (hostUrl) { const urlSplit = hostUrl.split("/"); @@ -301,7 +323,16 @@ export const contactBook = async (objectId) => { return result; }; -export const modalAlign = () => { +// function for validating URLs +export function urlValidator(url) { + try { + const newUrl = new URL(url); + return newUrl.protocol === 'http:' || newUrl.protocol === 'https:'; + } catch (err) { + return false; + } +} +export function modalAlign() { let modalDialog = $('.modal-dialog').getBoundingClientRect(); let mobileHead = $('.mobileHead').getBoundingClientRect() let modal = $('.modal-dialog'); @@ -310,4 +341,4 @@ export const modalAlign = () => { modal.style.left = leftOffset + 'px'; modal.style.top = (window.innerHeight/3) + 'px'; } -}; \ No newline at end of file +};