From d224a44e541a6159dc84cd4aad7e0b3cb10f809e Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Thu, 7 Dec 2023 20:01:15 +0530 Subject: [PATCH 1/4] fix: mobile to desktop and desktop to mobile view placeholder location issue --- .../src/Component/PdfRequestFiles.js | 12 +- .../src/Component/SignYourselfPdf.js | 4 +- .../src/Component/component/modalComponent.js | 49 +++-- .../src/Component/component/renderPdf.js | 114 ++++++++-- .../src/Component/placeHolderSign.js | 8 +- .../src/Component/recipientSignPdf.js | 8 +- .../SignDocuments/src/utils/Utils.js | 197 ++++++++++++++---- 7 files changed, 302 insertions(+), 90 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 71f2dc1b3..ac93db750 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -296,7 +296,7 @@ function PdfRequestFiles() { } } - if (checkSignUrl && checkSignUrl.length > 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { setIsUiLoading(true); @@ -348,17 +348,16 @@ function PdfRequestFiles() { ); //function for call to embed signature in pdf and get digital signature pdf - signPdfFun( newImgUrl, documentId, signerObjectId, pdfOriginalWidth, pngUrl, + containerWH, data, pdfBase64, - pageNo, - containerWH + pageNo ) .then((res) => { if (res && res.status === "success") { @@ -390,9 +389,10 @@ function PdfRequestFiles() { pngUrl, pdfDoc, pdfOriginalWidth, - false + false, + containerWH ); - + // console.log(pdfBytes) //function for call to embed signature in pdf and get digital signature pdf signPdfFun( pdfBytes, diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index f955a6fd3..664b0313e 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -407,7 +407,7 @@ function SignYourSelf() { } } - if (checkSignUrl && checkSignUrl.length > 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { setIsCeleb(true); @@ -479,7 +479,7 @@ function SignYourSelf() { true, containerWH ); - + //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); } setIsSignPad(false); diff --git a/microfrontends/SignDocuments/src/Component/component/modalComponent.js b/microfrontends/SignDocuments/src/Component/component/modalComponent.js index 589c5a2ba..8ab872e35 100644 --- a/microfrontends/SignDocuments/src/Component/component/modalComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/modalComponent.js @@ -1,13 +1,16 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; - +import { useNavigate } from "react-router-dom"; function ModalComponent({ isShow, type, setIsShowEmail }) { + const navigate = useNavigate(); return ( {type === "signersAlert" ? ( Select signers + ) : type === "alreadyPlace" ? ( + Already Placed! ) : ( Document Expired! )} @@ -16,24 +19,42 @@ function ModalComponent({ isShow, type, setIsShowEmail }) { {type === "signersAlert" ? (

Please select signer for add placeholder!

+ ) : type === "alreadyPlace" ? ( +

Already set placeHolder for this document.

) : (

This Document is no longer available.

)} - {type === "signersAlert" &&( - )} + {type === "signersAlert" ? ( + + ) : ( + type === "alreadyPlace" && ( + + ) + )} ); diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 8e7626d8b..79502599a 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -59,30 +59,64 @@ function RenderPdf({ let width; if (isMobile) { if (!pos.isMobile) { - width = pos.Width / scale ? pos.Width / scale : 150 / scale; - return width; + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width / scale ? pos.Width / scale : 150 / scale; + // width = + // pos.Width * pos.scale ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } } else { width = pos.Width ? pos.Width : 150; return width; } } else { - width = pos.Width ? pos.Width : 150; - return width; + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } } }; const posHeight = (pos) => { - let width; + let height; if (isMobile) { if (!pos.isMobile) { - width = pos.Height / scale ? pos.Height / scale : 60 / scale; - return width; + if (pos.IsResize) { + // height = pos.Height ? pos.Height / scale : 60 / scale; + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height / scale : 60 / scale; + // height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } } else { - width = pos.Height ? pos.Height : 60; - return width; + height = pos.Height ? pos.Height : 60; + return height; } } else { - width = pos.Height ? pos.Height : 60; - return width; + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } } }; @@ -99,7 +133,7 @@ function RenderPdf({ if (isMobile) { //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale if (!pos.isMobile) { - return pos.xPosition / scale - 32; + return pos.xPosition / scale; } //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale else { @@ -169,7 +203,8 @@ function RenderPdf({ data.signerObjId === signerObjectId ? "pointer" : "not-allowed", - borderColor: themeColor() + borderColor: themeColor(), + background: data.blockColor }} className="placeholderBlock" size={{ @@ -186,7 +221,8 @@ function RenderPdf({ pageNumber, setSignerPos, pdfOriginalWidth, - containerWH + containerWH, + true ); }} lockAspectRatio={pos.Width && 2.5} @@ -262,6 +298,46 @@ function RenderPdf({ } }; + const calculateWidth = (pos) => { + let width; + if (isMobile) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + }; + const calculateHeight = (pos) => { + let height; + if (isMobile) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + }; return ( <> {isMobile && scale ? ( @@ -413,7 +489,8 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + background: data.blockColor }} className="placeholderBlock" onDrag={() => @@ -464,6 +541,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, + false, setIsResize ); }} @@ -739,8 +817,8 @@ function RenderPdf({ }} className="placeholderBlock" size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 + width: calculateWidth(pos), + height: calculateHeight(pos) }} lockAspectRatio={pos.Width && 2.5} //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale @@ -828,6 +906,7 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", + background: data.blockColor, borderColor: themeColor() }} className="placeholderBlock" @@ -878,6 +957,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, + false, setIsResize ); }} diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 6d0a95b65..8d1eb8a54 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -65,6 +65,7 @@ function PlaceHolderSign() { const [isShowEmail, setIsShowEmail] = useState(false); const [selectedEmail, setSelectedEmail] = useState(false); const [isResize, setIsResize] = useState(false); + const [isAlreadyPlace, setIsAlreadyPlace] = useState(false); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -181,8 +182,12 @@ function PlaceHolderSign() { //getting document details const documentData = await contractDocument(documentId); if (documentData && documentData.length > 0) { + const alreadyPlaceholder = + documentData[0].Placeholders && documentData[0].Placeholders; + if (alreadyPlaceholder && alreadyPlaceholder.length > 0) { + setIsAlreadyPlace(true); + } setPdfDetails(documentData); - const currEmail = documentData[0].ExtUserPtr.Email; const filterCurrEmail = documentData[0].Signers.filter( (data) => data.Email === currEmail @@ -916,6 +921,7 @@ function PlaceHolderSign() { )} + 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { const loadObj = { @@ -456,10 +456,10 @@ function EmbedPdfImage() { signerUserId, pdfOriginalWidth, xyPostion, + containerWH, data, pdfBase64, - pageNo, - containerWH + pageNo ) .then((res) => { if (res && res.status === "success") { @@ -508,7 +508,7 @@ function EmbedPdfImage() { } }) .catch((err) => { - alert("something went wrong in query"); + alert("something went wrong in query", err); }); } setIsSignPad(false); diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index b12cf2fc1..24d9f7e8e 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -1,6 +1,7 @@ import axios from "axios"; import { $ } from "select-dom"; import { rgb } from "pdf-lib"; +const isMobile = window.innerWidth < 767; export async function getBase64FromUrl(url) { const data = await fetch(url); const blob = await data.blob(); @@ -342,7 +343,83 @@ export function modalAlign() { modal.style.top = window.innerHeight / 3 + "px"; } } +export const containerWidth = (pos, scale, signyourself) => { + let width; + if (signyourself) { + if (isMobile) { + return pos.Width * scale; + } else { + return pos.Width; + } + } else { + if (isMobile) { + if (pos.isMobile) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + if (pos.IsResize) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + } else { + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + } +}; +export const containerHeight = (pos, scale, signyourself) => { + let height; + if (signyourself) { + if (isMobile) { + return pos.Height * scale; + } else { + return pos.Height; + } + } else { + if (isMobile) { + if (pos.isMobile) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + if (pos.IsResize) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + } else { + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + } +}; //function for embed multiple signature using pdf-lib export const multiSignEmbed = async ( pngUrl, @@ -352,6 +429,9 @@ export const multiSignEmbed = async ( containerWH ) => { for (let i = 0; i < pngUrl.length; i++) { + const isMobile = window.innerWidth < 767; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; const pageNo = pngUrl[i].pageNumber; const imgUrlList = pngUrl[i].pos; const pages = pdfDoc.getPages(); @@ -384,10 +464,9 @@ export const multiSignEmbed = async ( img = await pdfDoc.embedPng(imgData); } const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; - const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150; - const isMobile = window.innerWidth < 767; - const newWidth = containerWH.width; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + const scaleWidth = containerWidth(imgUrlList[id], scale, signyourself); + const scaleHeight = containerHeight(imgUrlList[id], scale, signyourself); + const xPos = (pos) => { if (signyourself) { if (isMobile) { @@ -438,13 +517,22 @@ export const multiSignEmbed = async ( const y = pos.yPosition * (pos.scale / scale); return page.getHeight() - y * scale - imgHeight * scale; } else { - return page.getHeight() - y * scale - imgHeight * scale; + if (pos.IsResize) { + return page.getHeight() - y * scale - imgHeight * scale; + } else { + return page.getHeight() - y * scale - imgHeight; + } } } else { //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { - const y = pos.yPosition * pos.scale; - return page.getHeight() - y - imgHeight; + if (pos.IsResize) { + const y = pos.yPosition * pos.scale; + return page.getHeight() - y - imgHeight; + } else { + const y = pos.yPosition * pos.scale; + return page.getHeight() - y - imgHeight * pos.scale; + } } else { return page.getHeight() - pos.yPosition - imgHeight; } @@ -455,12 +543,14 @@ export const multiSignEmbed = async ( page.drawImage(img, { x: xPos(imgUrlList[id]), y: yPos(imgUrlList[id]), - width: imgWidth * scale, - height: imgHeight * scale + width: scaleWidth, + height: scaleHeight }); }); } + const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false }); + return pdfBytes; }; //function for embed document id @@ -499,6 +589,7 @@ export const handleImageResize = ( setSignerPos, pdfOriginalWidth, containerWH, + showResize, setIsResize ) => { const filterSignerPos = signerPos.filter( @@ -523,11 +614,9 @@ export const handleImageResize = ( if (url.key === key) { return { ...url, - Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - Height: !url.isMobile - ? ref.offsetHeight * scale - : ref.offsetHeight - // xPosition: position.x + Width: ref.offsetWidth, + Height: ref.offsetHeight, + IsResize: showResize ? true : false }; } return url; @@ -550,17 +639,14 @@ export const handleImageResize = ( setSignerPos(newUpdateSigner); } else { const getXYdata = getPageNumer[0].pos; - const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { if (url.key === key) { return { ...url, - Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - Height: !url.isMobile - ? ref.offsetHeight * scale - : ref.offsetHeight + Width: ref.offsetWidth, + Height: ref.offsetHeight, + IsResize: showResize ? true : false }; } return url; @@ -603,7 +689,8 @@ export const handleSignYourselfImageResize = ( (data) => data.key === key && data.Width && data.Height ); const isMobile = window.innerWidth < 767; - const newWidth = containerWH; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (updateFilter.length > 0) { @@ -613,11 +700,11 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight, + // Width: !url.isMobile ? scaleWidth : ref.offsetWidth, + // Height: !url.isMobile ? scaleHeight : ref.offsetHeight, Width: ref.offsetWidth, - Height: ref.offsetHeight - // xPosition: position.xpos + Height: ref.offsetHeight, + IsResize: true }; } return url; @@ -643,7 +730,8 @@ export const handleSignYourselfImageResize = ( // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight Width: ref.offsetWidth, - Height: ref.offsetHeight + Height: ref.offsetHeight, + IsResize: true }; } return url; @@ -666,14 +754,15 @@ export const signPdfFun = async ( signerObjectId, pdfOriginalWidth, signerData, + containerWH, xyPosData, pdfBase64Url, - pageNo, - containerWH + pageNo ) => { let signgleSign; - const isMobile = window.innerWidth < 767; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; @@ -715,24 +804,41 @@ export const signPdfFun = async ( return yPosition; } else { const y = pos.yBottom / scale; - - yPosition = pos.isDrag - ? y * scale - height - : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; - return yPosition; + if (pos.IsResize) { + yPosition = pos.isDrag + ? y * scale - height * scale + : pos.firstYPos + ? y * scale - height * scale + pos.firstYPos + : y * scale - height * scale; + return yPosition; + } else { + yPosition = pos.isDrag + ? y * scale - height + : pos.firstYPos + ? y * scale - height + pos.firstYPos + : y * scale - height; + return yPosition; + } } } else { //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { const y = pos.yBottom * pos.scale; - yPosition = pos.isDrag - ? y - height - : pos.firstYPos - ? y - height + pos.firstYPos - : y - height; - return yPosition; + if (pos.IsResize) { + yPosition = pos.isDrag + ? y - height + : pos.firstYPos + ? y - height + pos.firstYPos + : y - height; + return yPosition; + } else { + yPosition = pos.isDrag + ? y - height * pos.scale + : pos.firstYPos + ? y - height * pos.scale + pos.firstYPos + : y - height * pos.scale; + return yPosition; + } } else { yPosition = pos.isDrag ? pos.yBottom - height @@ -743,8 +849,7 @@ export const signPdfFun = async ( } } }; - const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale; - const imgHeight = height * scale; + const bottomY = yBottom(xyPosData); signgleSign = { pdfFile: pdfBase64Url, @@ -754,8 +859,8 @@ export const signPdfFun = async ( Base64: base64Url, Left: xPos(xyPosData), Bottom: bottomY, - Width: imgWidth, - Height: imgHeight, + Width: containerWidth(xyPosData, scale), + Height: containerHeight(xyPosData, scale), Page: pageNo } }; From e51feaa1fe42a86b785c47b799a2d7ae918b9e8e Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 8 Dec 2023 17:11:01 +0530 Subject: [PATCH 2/4] Refactor code --- .../src/Component/LegaDrive/LegaDrive.js | 13 +- .../src/Component/PdfRequestFiles.js | 122 +++++++++++------- .../src/Component/SignYourselfPdf.js | 43 ++++-- .../src/Component/component/alertComponent.js | 36 ++++++ .../src/Component/component/emailComponent.js | 26 +++- .../src/Component/component/renderPdf.js | 56 +------- .../src/Component/recipientSignPdf.js | 80 +++++++----- .../SignDocuments/src/utils/Utils.js | 38 +++--- 8 files changed, 243 insertions(+), 171 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/component/alertComponent.js diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index f6b022649..20a4d3b5e 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -7,6 +7,7 @@ import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; import { themeColor, iconColor } from "../../utils/ThemeColor/backColor"; import { getDrive } from "../../utils/Utils"; +import AlertComponent from "../component/alertComponent"; function PdfFile() { const scrollRef = useRef(null); @@ -26,6 +27,7 @@ function PdfFile() { const [docId, setDocId] = useState(); const [handleError, setHandleError] = useState(); const [folderName, setFolderName] = useState([]); + const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const currentUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -219,8 +221,10 @@ function PdfFile() { } }) .catch((err) => { - console.log("axois err ", err); - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); } else { setError("Please fill out this field"); @@ -324,6 +328,11 @@ function PdfFile() { return (
+ Add New Folder diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index ac93db750..b889549a8 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -28,6 +28,7 @@ import Nodata from "./component/Nodata"; import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; import CustomModal from "./component/CustomModal"; +import AlertComponent from "./component/alertComponent"; function PdfRequestFiles() { const { docId } = useParams(); @@ -61,7 +62,7 @@ function PdfRequestFiles() { const [isUiLoading, setIsUiLoading] = useState(false); const [isDecline, setIsDecline] = useState({ isDeclined: false }); const [currentSigner, setCurrentSigner] = useState(false); - + const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const [isCompleted, setIsCompleted] = useState({ isCertificate: false, isModal: false @@ -290,26 +291,23 @@ function PdfRequestFiles() { ); for (let i = 0; i < checkSign.length; i++) { const posData = checkSign[i].pos.filter((pos) => !pos.SignUrl); - if (posData && posData.length > 0) { checkSignUrl.push(posData); } } - if (checkSignUrl && checkSignUrl.length == 0) { - alert("Please complete your signature!"); + if (checkSignUrl && checkSignUrl.length > 0) { + setIsAlert({ + isShow: true, + alertMessage: "Please complete your signature!" + }); } else { setIsUiLoading(true); - - const url = pdfUrl; - const pngUrl = checkUser[0].placeHolder; - // Load a PDFDocument from the existing PDF bytes - const existingPdfBytes = await fetch(url).then((res) => + const existingPdfBytes = await fetch(pdfUrl).then((res) => res.arrayBuffer() ); - const pdfDoc = await PDFDocument.load(existingPdfBytes, { ignoreEncryption: true }); @@ -318,22 +316,33 @@ function PdfRequestFiles() { //checking if signature is only one then send image url in jpeg formate to server if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) { if (isDocId) { - pdfBase64 = await getBase64FromUrl(url); + try { + pdfBase64 = await getBase64FromUrl(pdfUrl); + } catch (err) { + console.log(err); + } } else { //embed document's object id to all pages in pdf document - await embedDocId(pdfDoc, documentId, allPages); - pdfBase64 = await pdfDoc.saveAsBase64({ - useObjectStreams: false - }); + try { + await embedDocId(pdfDoc, documentId, allPages); + } catch (err) { + console.log(err); + } + try { + pdfBase64 = await pdfDoc.saveAsBase64({ + useObjectStreams: false + }); + } catch (err) { + console.log(err); + } } - for (let i = 0; i < pngUrl.length; i++) { - const imgUrlList = pngUrl[i].pos; - const pageNo = pngUrl[i].pageNumber; + for (let pngData of pngUrl) { + const imgUrlList = pngData.pos; + const pageNo = pngData.pageNumber; imgUrlList.map(async (data) => { //cheking signUrl is defau;t signature url of custom url let ImgUrl = data.SignUrl; const checkUrl = urlValidator(ImgUrl); - //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); @@ -355,6 +364,7 @@ function PdfRequestFiles() { pdfOriginalWidth, pngUrl, containerWH, + setIsAlert, data, pdfBase64, pageNo @@ -367,11 +377,17 @@ function PdfRequestFiles() { setUnSignedSigners([]); getDocumentDetails(); } else { - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } }) .catch((err) => { - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); }) .catch((error) => { @@ -382,6 +398,7 @@ function PdfRequestFiles() { } //else if signature is more than one then embed all sign with the use of pdf-lib else if (pngUrl.length > 0 && pngUrl[0].pos.length > 0) { + const flag = false; //embed document's object id to all pages in pdf document await embedDocId(pdfDoc, documentId, allPages); //embed multi signature in pdf @@ -389,40 +406,48 @@ function PdfRequestFiles() { pngUrl, pdfDoc, pdfOriginalWidth, - false, + flag, containerWH ); - // console.log(pdfBytes) + //function for call to embed signature in pdf and get digital signature pdf - signPdfFun( - pdfBytes, - documentId, - signerObjectId, - pdfOriginalWidth, - pngUrl, - containerWH - ) - .then((res) => { - if (res && res.status === "success") { - setPdfUrl(res.data); - setIsSigned(true); - setSignedSigners([]); - setUnSignedSigners([]); - getDocumentDetails(); - } else { - alert("something went wrong"); - } - }) - .catch((err) => { - alert("something went wrong"); + try { + const res = await signPdfFun( + pdfBytes, + documentId, + signerObjectId, + pdfOriginalWidth, + pngUrl, + containerWH, + setIsAlert + ); + if (res && res.status === "success") { + setPdfUrl(res.data); + setIsSigned(true); + setSignedSigners([]); + setUnSignedSigners([]); + getDocumentDetails(); + } else { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); + } + } catch (err) { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" }); + } } setIsSignPad(false); } } else { - console.log("something went wrong!"); - alert("something went wrong!"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } } @@ -729,6 +754,11 @@ function PdfRequestFiles() { )}
+ {/* this modal is used to show decline alert */} !pos.SignUrl); - if (posData && posData.length > 0) { checkSignUrl.push(posData); } } - - if (checkSignUrl && checkSignUrl.length == 0) { - alert("Please complete your signature!"); + if (xyPostion.length === 0) { + setIsAlert({ + isShow: true, + alertMessage: "Please complete your signature!" + }); + return; + } else if (xyPostion.length > 0 && checkSignUrl.length > 0) { + setIsAlert({ + isShow: true, + alertMessage: "Please complete your signature!" + }); + return; } else { setIsCeleb(true); setTimeout(() => { @@ -429,7 +439,7 @@ function SignYourSelf() { const pdfDoc = await PDFDocument.load(existingPdfBytes, { ignoreEncryption: true }); - const pngUrl = xyPostion; + //checking if signature is only one then send image url in jpeg formate to server if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { //embed document's object id to all pages in pdf document @@ -437,15 +447,14 @@ function SignYourSelf() { const pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); - for (let i = 0; i < xyPostion.length; i++) { - const imgUrlList = xyPostion[i].pos; - const pageNo = xyPostion[i].pageNumber; + for (let xyData of xyPostion) { + const imgUrlList = xyData.pos; + const pageNo = xyData.pageNumber; imgUrlList.map(async (data) => { let ImgUrl = data.SignUrl; //cheking signUrl is defau;t signature url of custom url const checkUrl = urlValidator(ImgUrl); - //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); @@ -469,14 +478,16 @@ function SignYourSelf() { } //else if signature is more than one then embed all sign with the use of pdf-lib else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { + const flag = false; //embed document's object id to all pages in pdf document await embedDocId(pdfDoc, documentId, allPages); + //embed multi signature in pdf const pdfBytes = await multiSignEmbed( - pngUrl, + xyPostion, pdfDoc, pdfOriginalWidth, - true, + flag, containerWH ); //function for call to embed signature in pdf and get digital signature pdf @@ -500,7 +511,7 @@ function SignYourSelf() { let singleSign; const newWidth = containerWH.width; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - const imgWidth = xyPosData ? xyPosData.Width : 150; + if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; const bottomY = xyPosData.isDrag @@ -856,8 +867,12 @@ function SignYourSelf() { marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} > + {/* this modal is used show this document is already sign */} - modalAlign()} @@ -921,9 +936,9 @@ function SignYourSelf() { isCeleb={isCeleb} setIsEmail={setIsEmail} pdfName={pdfDetails[0] && pdfDetails[0].Name} - signObjId={documentId} setSuccessEmail={setSuccessEmail} sender={jsonSender} + setIsAlert={setIsAlert} /> {/* pdf header which contain funish back button */}
+ + Alert + + + + {alertMessage} + + + + + + ); +} + +export default AlertComponent; diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index 5854c8749..5d7691e68 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -16,9 +16,9 @@ function EmailComponent({ isCeleb, setIsEmail, setSuccessEmail, - signObjId, pdfName, - sender + sender, + setIsAlert }) { const [emailList, setEmailList] = useState([]); const [emailValue, setEmailValue] = useState(); @@ -62,11 +62,15 @@ function EmailComponent({ } catch (error) { console.log("error", error); setIsLoading(false); - alert("Something went wrong!"); + setIsEmail(false); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } } - if (sendMail.data.result.status === "success") { + if (sendMail && sendMail.data.result.status === "success") { setSuccessEmail(true); setTimeout(() => { setSuccessEmail(false); @@ -76,12 +80,20 @@ function EmailComponent({ }, 1500); setIsLoading(false); - } else if (sendMail.data.result.status === "error") { + } else if (sendMail && sendMail.data.result.status === "error") { setIsLoading(false); - alert("Something went wrong!"); + setIsEmail(false); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } else { setIsLoading(false); - alert("Something went wrong!"); + setIsEmail(false); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } }; diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 79502599a..8f7bcd5bf 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -63,9 +63,7 @@ function RenderPdf({ width = pos.Width ? pos.Width : 150; return width; } else { - width = pos.Width / scale ? pos.Width / scale : 150 / scale; - // width = - // pos.Width * pos.scale ? pos.Width * pos.scale : 150 * pos.scale; + width = (pos.Width || 150) / scale; return width; } } else { @@ -78,7 +76,7 @@ function RenderPdf({ width = pos.Width ? pos.Width : 150; return width; } else { - width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + width = (pos.Width || 150) * pos.scale; return width; } } else { @@ -92,12 +90,10 @@ function RenderPdf({ if (isMobile) { if (!pos.isMobile) { if (pos.IsResize) { - // height = pos.Height ? pos.Height / scale : 60 / scale; height = pos.Height ? pos.Height : 60; return height; } else { - height = pos.Height ? pos.Height / scale : 60 / scale; - // height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + height = (pos.Height || 60) / scale; return height; } } else { @@ -110,7 +106,7 @@ function RenderPdf({ height = pos.Height ? pos.Height : 60; return height; } else { - height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + height = (pos.Height || 60) * pos.scale; return height; } } else { @@ -298,46 +294,6 @@ function RenderPdf({ } }; - const calculateWidth = (pos) => { - let width; - if (isMobile) { - width = pos.Width ? pos.Width * scale : 150 * scale; - return width; - } else { - if (pos.isMobile) { - if (pos.IsResize) { - width = pos.Width ? pos.Width : 150; - return width; - } else { - width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; - return width; - } - } else { - width = pos.Width ? pos.Width : 150; - return width; - } - } - }; - const calculateHeight = (pos) => { - let height; - if (isMobile) { - height = pos.Height ? pos.Height * scale : 60 * scale; - return height; - } else { - if (pos.isMobile) { - if (pos.IsResize) { - height = pos.Height ? pos.Height : 60; - return height; - } else { - height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; - return height; - } - } else { - height = pos.Height ? pos.Height : 60; - return height; - } - } - }; return ( <> {isMobile && scale ? ( @@ -817,8 +773,8 @@ function RenderPdf({ }} className="placeholderBlock" size={{ - width: calculateWidth(pos), - height: calculateHeight(pos) + width: posWidth(pos), + height: posHeight(pos) }} lockAspectRatio={pos.Width && 2.5} //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 09d3f3581..d45ef386f 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -34,6 +34,7 @@ import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; import CustomModal from "./component/CustomModal"; import { modalAlign } from "../utils/Utils"; +import AlertComponent from "./component/alertComponent"; function EmbedPdfImage() { const { id, contactBookId } = useParams(); const [isSignPad, setIsSignPad] = useState(false); @@ -65,7 +66,6 @@ function EmbedPdfImage() { const [checkTourStatus, setCheckTourStatus] = useState(false); const [signerUserId, setSignerUserId] = useState(); const [tourStatus, setTourStatus] = useState([]); - const [completePdfData, setCompletePdfData] = useState([]); const [isExpired, setIsExpired] = useState(false); const [noData, setNoData] = useState(false); const [contractName, setContractName] = useState(""); @@ -77,6 +77,7 @@ function EmbedPdfImage() { type: "load" }); const [containerWH, setContainerWH] = useState({}); + const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const docId = id && id; const isMobile = window.innerWidth < 767; const index = xyPostion.findIndex((object) => { @@ -92,8 +93,7 @@ function EmbedPdfImage() { : `${localStorage.getItem("UserInformation")}` && `${localStorage.getItem("UserInformation")}`; const jsonSender = JSON.parse(senderUser); - //check isGuestSigner is present in local if yes than handle login flow header in mobile view - const isGuestSigner = localStorage.getItem("isGuestSigner"); + useEffect(() => { getDocumentDetails(); }, []); @@ -202,7 +202,6 @@ function EmbedPdfImage() { setIsAlreadySign(alreadySign); setPdfUrl(documentData[0].SignedUrl); setSignedPdfData(documentData); - setCompletePdfData(documentData); } else if (declined) { const currentDecline = { currnt: "another", @@ -396,8 +395,11 @@ function EmbedPdfImage() { } } - if (checkSignUrl && checkSignUrl.length == 0) { - alert("Please complete your signature!"); + if (checkSignUrl && checkSignUrl.length > 0) { + setIsAlert({ + isShow: true, + alertMessage: "Please complete your signature!" + }); } else { const loadObj = { isLoad: true, @@ -428,9 +430,10 @@ function EmbedPdfImage() { await embedDocId(pdfDoc, docId, allPages); pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); } - for (let i = 0; i < xyPostion.length; i++) { - const imgUrlList = pngUrl[i].pos; - const pageNo = pngUrl[i].pageNumber; + + for (let xyData of xyPostion) { + const imgUrlList = xyData.pos; + const pageNo = xyData.pageNumber; imgUrlList.map(async (data) => { //cheking signUrl is defau;t signature url of custom url let ImgUrl = data.SignUrl; @@ -457,6 +460,7 @@ function EmbedPdfImage() { pdfOriginalWidth, xyPostion, containerWH, + setIsAlert, data, pdfBase64, pageNo @@ -465,11 +469,17 @@ function EmbedPdfImage() { if (res && res.status === "success") { getDocumentDetails(); } else { - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } }) .catch((err) => { - alert("something went wrong!"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); }) .catch((error) => { @@ -480,6 +490,7 @@ function EmbedPdfImage() { } //else if signature is more than one then embed all sign with the use of pdf-lib else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { + const flag = false; //embed document's object id to all pages in pdf document await embedDocId(pdfDoc, docId, allPages); //embed multi signature in pdf @@ -487,29 +498,35 @@ function EmbedPdfImage() { pngUrl, pdfDoc, pdfOriginalWidth, - false, + flag, containerWH ); //function for embed signature in pdf and get digital signature pdf - signPdfFun( - pdfBytes, - docId, - signerUserId, - pdfOriginalWidth, - xyPostion, - containerWH - ) - .then((res) => { - if (res && res.status === "success") { - getDocumentDetails(); - } else { - alert("something went wrong!"); - } - }) - .catch((err) => { - alert("something went wrong in query", err); + try { + const res = await signPdfFun( + pdfBytes, + docId, + signerUserId, + pdfOriginalWidth, + xyPostion, + containerWH, + setIsAlert + ); + if (res && res.status === "success") { + getDocumentDetails(); + } else { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); + } + } catch (err) { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" }); + } } setIsSignPad(false); setXyPostion([]); @@ -763,6 +780,11 @@ function EmbedPdfImage() { declineDoc={declineDoc} setIsDecline={setIsDecline} /> + {/* this modal is used for show expired alert */} { - for (let i = 0; i < pngUrl.length; i++) { - const isMobile = window.innerWidth < 767; + for (let item of pngUrl) { const newWidth = containerWH.width; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - const pageNo = pngUrl[i].pageNumber; - const imgUrlList = pngUrl[i].pos; + const pageNo = item.pageNumber; + const imgUrlList = item.pos; const pages = pdfDoc.getPages(); const page = pages[pageNo - 1]; const images = await Promise.all( @@ -595,9 +596,7 @@ export const handleImageResize = ( const filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerId ); - const isMobile = window.innerWidth < 767; - const newWidth = containerWH; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; const getPageNumer = getPlaceHolder.filter( @@ -688,10 +687,6 @@ export const handleSignYourselfImageResize = ( const updateFilter = xyPostion[index].pos.filter( (data) => data.key === key && data.Width && data.Height ); - const isMobile = window.innerWidth < 767; - const newWidth = containerWH.width; - - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (updateFilter.length > 0) { const getXYdata = xyPostion[index].pos; @@ -700,8 +695,6 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - // Width: !url.isMobile ? scaleWidth : ref.offsetWidth, - // Height: !url.isMobile ? scaleHeight : ref.offsetHeight, Width: ref.offsetWidth, Height: ref.offsetHeight, IsResize: true @@ -727,8 +720,6 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight Width: ref.offsetWidth, Height: ref.offsetHeight, IsResize: true @@ -755,14 +746,14 @@ export const signPdfFun = async ( pdfOriginalWidth, signerData, containerWH, + setIsAlert, xyPosData, pdfBase64Url, pageNo ) => { - let signgleSign; + let singleSign; const newWidth = containerWH.width; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; @@ -851,7 +842,7 @@ export const signPdfFun = async ( }; const bottomY = yBottom(xyPosData); - signgleSign = { + singleSign = { pdfFile: pdfBase64Url, docId: documentId, userId: signerObjectId, @@ -869,7 +860,7 @@ export const signPdfFun = async ( signerData.length > 0 && signerData[0].pos.length > 0 ) { - signgleSign = { + singleSign = { pdfFile: base64Url, docId: documentId, userId: signerObjectId @@ -877,7 +868,7 @@ export const signPdfFun = async ( } const response = await axios - .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, signgleSign, { + .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { headers: { "Content-Type": "application/json", "X-Parse-Application-Id": localStorage.getItem("parseAppId"), @@ -887,12 +878,13 @@ export const signPdfFun = async ( .then((Listdata) => { const json = Listdata.data; const res = json.result; - // console.log("res", res); return res; }) .catch((err) => { - console.log("axois err ", err); - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); return response; From 47ddac3529748bd0adcc80d9a5439c480aad6b89 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 11 Dec 2023 17:50:36 +0530 Subject: [PATCH 3/4] fix: multisign signature issue in mobile view --- .../src/Component/SignYourselfPdf.js | 2 +- .../src/Component/component/alertComponent.js | 77 +++++++++++++++---- .../Component/component/defaultSignature.js | 15 ++-- .../src/Component/recipientSignPdf.js | 41 ++++++---- .../SignDocuments/src/css/signature.css | 32 ++++---- 5 files changed, 112 insertions(+), 55 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index f111102e1..7c0dc30a9 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -478,7 +478,7 @@ function SignYourSelf() { } //else if signature is more than one then embed all sign with the use of pdf-lib else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { - const flag = false; + const flag = true; //embed document's object id to all pages in pdf document await embedDocId(pdfDoc, documentId, allPages); diff --git a/microfrontends/SignDocuments/src/Component/component/alertComponent.js b/microfrontends/SignDocuments/src/Component/component/alertComponent.js index 94b95ea8e..f242e87a2 100644 --- a/microfrontends/SignDocuments/src/Component/component/alertComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/alertComponent.js @@ -1,11 +1,24 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; +import { themeColor } from "../../utils/ThemeColor/backColor"; -function AlertComponent({ isShow, alertMessage, setIsAlert }) { +function AlertComponent({ + isShow, + alertMessage, + setIsAlert, + isdefaultSign, + addDefaultSignature, + headBG +}) { return ( - + Alert @@ -13,21 +26,51 @@ function AlertComponent({ isShow, alertMessage, setIsAlert }) { {alertMessage} - + {isdefaultSign ? ( + <> + + + + ) : ( + + )} ); diff --git a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js index 5bc7fedd9..c79d0f8d6 100644 --- a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js +++ b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js @@ -1,20 +1,17 @@ import React from "react"; - function DefaultSignature({ themeColor, defaultSignImg, - setShowAlreadySignDoc, - xyPostion + xyPostion, + setIsAlert }) { const confirmToaddDefaultSign = () => { if (xyPostion.length > 0) { - const alreadySign = { - status: true, - mssg: "Are you sure you want to sign at requested locations?", - sure: true - }; - setShowAlreadySignDoc(alreadySign); + setIsAlert({ + isShow: true, + alertMessage: "Are you sure you want to sign at requested locations?" + }); } else { alert("please select position!"); } diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index d45ef386f..dc4f36218 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -72,6 +72,10 @@ function EmbedPdfImage() { const [isDecline, setIsDecline] = useState({ isDeclined: false }); + const [addDefaultSign, setAddDefaultSign] = useState({ + isShow: false, + alertMessage: "" + }); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -483,7 +487,10 @@ function EmbedPdfImage() { }); }) .catch((error) => { - console.error("Error:", error); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); }); } @@ -632,7 +639,10 @@ function EmbedPdfImage() { } }) .catch((err) => { - console.log("error updating field is decline ", err); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); }; @@ -658,7 +668,10 @@ function EmbedPdfImage() { } setXyPostion(xyDefaultPos); - setIsAlreadySign({ status: false }); + setAddDefaultSign({ + isShow: false, + alertMessage: "" + }); }; //function for update TourStatus @@ -785,6 +798,15 @@ function EmbedPdfImage() { alertMessage={isAlert.alertMessage} setIsAlert={setIsAlert} /> + + {/* this modal is used for show expired alert */} Close - {isAlreadySign.sure && ( - - )} {/* this is modal of signature pad */} @@ -927,6 +937,7 @@ function EmbedPdfImage() { xyPostion={xyPostion} setXyPostion={setXyPostion} setShowAlreadySignDoc={setIsAlreadySign} + setIsAlert={setAddDefaultSign} />
) : ( diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 477159b03..34ed5ea08 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -8,6 +8,7 @@ .penContainer { width: 460px; } + .borderResize { position: absolute; display: inline-block; @@ -15,17 +16,20 @@ height: 14px; } -.mailBtn{ - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 15px !important; - background-color: rgb(79 190 241); - border: none !important; - color: white !important; + +.mailBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 15px !important; + background-color: rgb(79 190 241); + border: none !important; + color: white !important; } + .mailBtn:hover { box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); } -.emailToast{ + +.emailToast { position: absolute; z-index: 10; background: #aeedae; @@ -34,7 +38,7 @@ border-radius: 2px; } - + .signatureBtn { border: 1.5px solid #47a3ad; margin-bottom: 10px; @@ -162,14 +166,15 @@ .placeholdCloseBtn { position: absolute; - right: -9px; - top: -15px; + right: -5px; + top: -5px; border-radius: 100%; font-size: 10px; cursor: pointer; - padding: 0px 5px; + padding: 0px 5.1px 1px 5px; } -.placeholderBlock{ + +.placeholderBlock { padding: 0px; z-index: 1; position: absolute; @@ -179,7 +184,8 @@ background: #daebe0; text-align: center; justify-content: center; - border-width: 0.2px + border-width: 0.2px; + } .finishBtn { From f13991b88b83859f95c4abb5bb3384c5ef24bf23 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 12 Dec 2023 15:15:19 +0530 Subject: [PATCH 4/4] fix: upload large size image overflow in placeholder --- .../src/Component/PdfRequestFiles.js | 126 +++++------- .../src/Component/SignYourselfPdf.js | 92 +++------ .../src/Component/component/renderPdf.js | 8 +- .../src/Component/component/signPad.js | 147 +++---------- .../src/Component/recipientSignPdf.js | 77 ++----- .../SignDocuments/src/utils/Utils.js | 194 +++++++++++++----- 6 files changed, 278 insertions(+), 366 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index b889549a8..4bd54bbf9 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -20,7 +20,9 @@ import { multiSignEmbed, embedDocId, pdfNewWidthFun, - signPdfFun + signPdfFun, + calculateImgAspectRatio, + onImageSelect } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -476,35 +478,7 @@ function PdfRequestFiles() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - const imageType = event.target.files[0].type; - const reader = new FileReader(); - reader.readAsDataURL(event.target.files[0]); - reader.onloadend = function (e) { - let width, height; - const image = new Image(); - image.src = e.target.result; - image.onload = function () { - width = image.width; - height = image.height; - const aspectRatio = 460 / 184; - const imgR = width / height; - - if (imgR > aspectRatio) { - width = 460; - height = 460 / imgR; - } else { - width = 184 * imgR; - height = 184; - } - setImgWH({ width: width, height: height }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; //function for upload stamp image @@ -512,7 +486,6 @@ function PdfRequestFiles() { const currentSigner = signerPos.filter( (data) => data.signerObjId === signerObjectId ); - const i = currentSigner[0].placeHolder.findIndex((object) => { return object.pageNumber === pageNumber; }); @@ -520,34 +493,16 @@ function PdfRequestFiles() { (data) => data.key === signKey && data.Width && data.Height && data.SignUrl ); - + let getIMGWH = calculateImgAspectRatio(imgWH); if (updateFilter.length > 0) { - let newWidth, nweHeight; - const aspectRatio = imgWH.width / imgWH.height; const getXYdata = currentSigner[0].placeHolder[i].pos; - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - nweHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - nweHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - nweHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - nweHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - nweHeight = 10; - } const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: newWidth, - Height: nweHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -571,32 +526,12 @@ function PdfRequestFiles() { const getPosData = getXYdata; - const aspectRatio = imgWH.width / imgWH.height; - - let newWidth, nweHeight; - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - nweHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - nweHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - nweHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - nweHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - nweHeight = 10; - } - const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: newWidth, - Height: nweHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -622,10 +557,22 @@ function PdfRequestFiles() { //function for save button to save signature or image url const onSaveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const isSign = true; + let getIMGWH; setIsSignPad(false); setIsImageSelect(false); setImage(); - + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + let imgWH = { + width: img.width, + height: img.height + }; + getIMGWH = calculateImgAspectRatio(imgWH); + } + } const currentSigner = signerPos.filter( (data) => data.signerObjId === signerObjectId ); @@ -639,15 +586,36 @@ function PdfRequestFiles() { updateFilter = currentSigner[0].placeHolder[i].pos.filter( (data) => data.key === signKey && data.SignUrl ); - + const getXYdata = currentSigner[0].placeHolder[i].pos; + const getPosData = getXYdata; + const posWidth = isDefaultSign + ? getIMGWH.newWidth + : isSign && getPosData[0].ImageType + ? 150 + : getPosData[0].Width + ? getPosData[0].Width + : 150; + const posHidth = isDefaultSign + ? getIMGWH.newHeight + : isSign && getPosData[0].ImageType + ? 60 + : getPosData[0].Height + ? getPosData[0].Height + : 60; if (updateFilter.length > 0) { updateFilter[0].SignUrl = signatureImg; + updateFilter[0].Width = posWidth; + updateFilter[0].Height = posHidth; } else { - const getXYdata = currentSigner[0].placeHolder[i].pos; - const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { - return { ...url, SignUrl: signatureImg }; + return { + ...url, + SignUrl: signatureImg, + Width: posWidth, + Height: posHidth, + ImageType: "sign" + }; } return url; }); diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 7c0dc30a9..e1fad20b6 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -21,7 +21,9 @@ import { getBase64FromIMG, embedDocId, multiSignEmbed, - pdfNewWidthFun + pdfNewWidthFun, + addDefaultSignatureImg, + onImageSelect } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -490,6 +492,7 @@ function SignYourSelf() { flag, containerWH ); + //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); } @@ -634,54 +637,43 @@ function SignYourSelf() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - const imageType = event.target.files[0].type; - - const reader = new FileReader(); - reader.readAsDataURL(event.target.files[0]); - - reader.onloadend = function (e) { - let width, height; - const image = new Image(); - - image.src = e.target.result; - image.onload = function () { - width = image.width; - height = image.height; - const aspectRatio = 460 / 184; - const imgR = width / height; - - if (imgR > aspectRatio) { - width = 460; - height = 460 / imgR; - } else { - width = 184 * imgR; - height = 184; - } - setImgWH({ width: width, height: height }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; + //function for upload stamp or image + const saveImage = () => { + const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); + setXyPostion(getImage); + }; + //function for save button to save signature or image url const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const signFlag = true; + let imgWH = { width: "", height: "" }; setIsSignPad(false); - setIsImageSelect(false); - setImage(); + + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + imgWH = { + width: img.width, + height: img.height + }; + } + } const getUpdatePosition = onSaveSign( xyPostion, index, signKey, - signatureImg + signatureImg, + imgWH, + isDefaultSign, + signFlag ); setXyPostion(getUpdatePosition); @@ -740,35 +732,11 @@ function SignYourSelf() { } }; - //function for upload stamp or image - const saveImage = () => { - const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); - setXyPostion(getImage); - }; - //function for add default signature url in local array const addDefaultSignature = () => { - let xyDefaultPos = []; - for (let i = 0; i < xyPostion.length; i++) { - const getXYdata = xyPostion[i].pos; - const getPageNo = xyPostion[i].pageNumber; - const getPosData = getXYdata; - - const addSign = getPosData.map((url, ind) => { - if (url) { - return { ...url, SignUrl: defaultSignImg }; - } - return url; - }); - - const newXypos = { - pageNumber: getPageNo, - pos: addSign - }; - xyDefaultPos.push(newXypos); - } + const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg); - setXyPostion(xyDefaultPos); + setXyPostion(getXyData); setShowAlreadySignDoc({ status: false }); }; const tourConfig = [ diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 8f7bcd5bf..a3990fe61 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -221,7 +221,9 @@ function RenderPdf({ true ); }} - lockAspectRatio={pos.Width && 2.5} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } default={{ x: xPos(pos), y: yPos(pos) @@ -776,7 +778,9 @@ function RenderPdf({ width: posWidth(pos), height: posHeight(pos) }} - lockAspectRatio={pos.Width && 2.5} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale default={{ diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index ddbe292a3..d077547bd 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -18,11 +18,10 @@ function SignPad({ isImageSelect, imageRef, onImageChange, - onSaveImage, image, defaultSign, - setSignature, + setSignature }) { const [penColor, setPenColor] = useState("blue"); const allColor = [bluePen, redPen, blackPen]; @@ -47,14 +46,12 @@ function SignPad({ //save button component const SaveBtn = () => { - // console.log("isSign",isSignImg,image) - return (
{!isStamp && !isImageSelect && (
@@ -175,7 +172,7 @@ function SignPad({ setIsTab("uploadImage"); }} style={{ - color: isTab === "uploadImage" ? themeColor() : "#515252", + color: isTab === "uploadImage" ? themeColor() : "#515252" }} className="signTab" > @@ -186,7 +183,7 @@ function SignPad({ border: isTab === "uploadImage" ? "1.5px solid #108783" - : "1.5px solid #ffffff", + : "1.5px solid #ffffff" }} >
@@ -202,7 +199,7 @@ function SignPad({ }} style={{ color: - isTab === "mysignature" ? themeColor() : "#515252", + isTab === "mysignature" ? themeColor() : "#515252" }} className="signTab" > @@ -213,7 +210,7 @@ function SignPad({ border: isTab === "mysignature" ? "1.5px solid #108783" - : "1.5px solid #ffffff", + : "1.5px solid #ffffff" }} > @@ -228,7 +225,7 @@ function SignPad({ background: "none", paddingLeft: "7px", paddingRight: "7px", - marginRight: "5px", + marginRight: "5px" }} onClick={() => { setPenColor("blue"); @@ -251,14 +248,12 @@ function SignPad({
@@ -267,8 +262,7 @@ function SignPad({ style={{ width: "100%", height: "100%", - background: "rgb(255, 255, 255)", - objectFit: "contain", + objectFit: "contain" }} src={defaultSign} /> @@ -282,13 +276,12 @@ function SignPad({
imageRef.current.click()} @@ -300,7 +293,6 @@ function SignPad({ accept="image/*" ref={imageRef} hidden - // style={{ display: "none" }} />
Upload
@@ -309,24 +301,25 @@ function SignPad({ <>
print img
@@ -336,36 +329,11 @@ function SignPad({ ) ) : ( <> - {/* {isSignImg ? ( -
- preview image -
- ) : ( */} @@ -373,17 +341,16 @@ function SignPad({ } dotSize={1} /> - {/* )} */}
-
+
{allColor.map((data, key) => { return ( { if (key === 0) { @@ -414,60 +381,14 @@ function SignPad({ width={20} height={20} /> - // ); })}
-
)} - - {/* - {!isStamp && !isImageSelect && ( - - )} - - - */}
); diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index dc4f36218..6421e8a8b 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -22,7 +22,9 @@ import { urlValidator, multiSignEmbed, embedDocId, - signPdfFun + signPdfFun, + addDefaultSignatureImg, + onImageSelect } from "../utils/Utils"; import Tour from "reactour"; import Signedby from "./component/signedby"; @@ -548,60 +550,43 @@ function EmbedPdfImage() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - const imageType = event.target.files[0].type; - - const reader = new FileReader(); - reader.readAsDataURL(event.target.files[0]); - - reader.onloadend = function (e) { - let width, height; - const image = new Image(); - - image.src = e.target.result; - image.onload = function () { - width = image.width; - height = image.height; - const aspectRatio = 460 / 184; - const imgR = width / height; - - if (imgR > aspectRatio) { - width = 460; - height = 460 / imgR; - } else { - width = 184 * imgR; - height = 184; - } - setImgWH({ width: width, height: height }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; //function for save button to save signature or image url const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const signFlag = true; + let imgWH = { width: "", height: "" }; setIsSignPad(false); setIsImageSelect(false); setImage(); + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + imgWH = { + width: img.width, + height: img.height + }; + } + } const getUpdatePosition = onSaveSign( xyPostion, index, signKey, - signatureImg + signatureImg, + imgWH, + isDefaultSign, + signFlag ); if (getUpdatePosition) { setXyPostion(getUpdatePosition); } }; - //function for upload stamp image const saveImage = () => { const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); @@ -647,27 +632,9 @@ function EmbedPdfImage() { }; const addDefaultSignature = () => { - let xyDefaultPos = []; - for (let i = 0; i < xyPostion.length; i++) { - const getXYdata = xyPostion[i].pos; - const getPageNo = xyPostion[i].pageNumber; - const getPosData = getXYdata; - - const addSign = getPosData.map((url, ind) => { - if (url) { - return { ...url, SignUrl: defaultSignImg }; - } - return url; - }); - - const newXypos = { - pageNumber: getPageNo, - pos: addSign - }; - xyDefaultPos.push(newXypos); - } + const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg); - setXyPostion(xyDefaultPos); + setXyPostion(getXyData); setAddDefaultSign({ isShow: false, alertMessage: "" diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 27659a704..a1aca4c2e 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -77,46 +77,49 @@ export function getHostUrl() { } } +export const calculateImgAspectRatio = (imgWH) => { + let newWidth, newHeight; + const aspectRatio = imgWH.width / imgWH.height; + if (aspectRatio === "2.533333333333333") { + newWidth = 150; + newHeight = 60; + } else if (aspectRatio === 1) { + newWidth = aspectRatio * 100; + newHeight = aspectRatio * 100; + } else if (aspectRatio < 1) { + newWidth = aspectRatio * 70; + newHeight = 70; + } else if (aspectRatio < 2) { + newWidth = aspectRatio * 100; + newHeight = 100; + } else if (aspectRatio > 2 && aspectRatio < 4) { + newWidth = aspectRatio * 70; + newHeight = 70; + } else if (aspectRatio > 4) { + newWidth = aspectRatio * 40; + newHeight = 40; + } else if (aspectRatio > 5) { + newWidth = aspectRatio * 10; + newHeight = 10; + } + return { newHeight, newWidth }; +}; + //function for upload stamp or image export function onSaveImage(xyPostion, index, signKey, imgWH, image) { const updateFilter = xyPostion[index].pos.filter( (data, ind) => data.key === signKey && data.Width && data.Height && data.SignUrl ); - + let getIMGWH = calculateImgAspectRatio(imgWH); + const getXYdata = xyPostion[index].pos; if (updateFilter.length > 0) { - let newWidth, newHeight; - const aspectRatio = imgWH.width / imgWH.height; - - const getXYdata = xyPostion[index].pos; - - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - newHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - newHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - newHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - newHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - newHeight = 10; - } - - let getPosData = xyPostion[index].pos.filter( - (data) => data.key === signKey - ); - const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: getPosData[0].Width ? getPosData[0].Width : newWidth, - Height: getPosData[0].Height ? getPosData[0].Height : newHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -131,39 +134,19 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { return obj; }); return newUpdateUrl; - // setXyPostion(newUpdateUrl); } else { const getXYdata = xyPostion[index].pos; let getPosData = xyPostion[index].pos.filter( (data) => data.key === signKey ); - const aspectRatio = imgWH.width / imgWH.height; - - let newWidth, newHeight; - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - newHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - newHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - newHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - newHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - newHeight = 10; - } const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: getPosData[0].Width ? getPosData[0].Width : newWidth, - Height: getPosData[0].Height ? getPosData[0].Height : newHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -182,17 +165,46 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { } //function for save button to save signature or image url -export function onSaveSign(xyPostion, index, signKey, signatureImg) { +export function onSaveSign( + xyPostion, + index, + signKey, + signatureImg, + imgWH, + isDefaultSign, + isSign +) { let getXYdata = xyPostion[index].pos; let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey); + let getIMGWH; + if (isDefaultSign) { + getIMGWH = calculateImgAspectRatio(imgWH); + } + + const posWidth = isDefaultSign + ? getIMGWH.newWidth + : isSign && getPosData[0].ImageType + ? 150 + : getPosData[0].Width + ? getPosData[0].Width + : 150; + const posHidth = isDefaultSign + ? getIMGWH.newHeight + : isSign && getPosData[0].ImageType + ? 60 + : getPosData[0].Height + ? getPosData[0].Height + : 60; + const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: getPosData[0].Width ? getPosData[0].Width : 150, - Height: getPosData[0].Height ? getPosData[0].Height : 60, - SignUrl: signatureImg + Width: posWidth, + Height: posHidth, + SignUrl: signatureImg, + ImageType: "sign" }; } return url; @@ -207,6 +219,78 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) { return newUpdateUrl; } +//function for add default signature or image for all requested location +export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => { + let imgWH = { width: "", height: "" }; + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + imgWH = { + width: img.width, + height: img.height + }; + } + const getIMGWH = calculateImgAspectRatio(imgWH); + let xyDefaultPos = []; + for (let i = 0; i < xyPostion.length; i++) { + const getXYdata = xyPostion[i].pos; + const getPageNo = xyPostion[i].pageNumber; + const getPosData = getXYdata; + + const addSign = getPosData.map((url, ind) => { + if (url) { + return { + ...url, + SignUrl: defaultSignImg, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, + ImageType: "default" + }; + } + return url; + }); + + const newXypos = { + pageNumber: getPageNo, + pos: addSign + }; + xyDefaultPos.push(newXypos); + } + return xyDefaultPos; +}; + +//function for select image and upload image +export const onImageSelect = (event, setImgWH, setImage) => { + const imageType = event.target.files[0].type; + const reader = new FileReader(); + reader.readAsDataURL(event.target.files[0]); + + reader.onloadend = function (e) { + let width, height; + const image = new Image(); + + image.src = e.target.result; + image.onload = function () { + width = image.width; + height = image.height; + const aspectRatio = 460 / 184; + const imgR = width / height; + + if (imgR > aspectRatio) { + width = 460; + height = 460 / imgR; + } else { + width = 184 * imgR; + height = 184; + } + setImgWH({ width: width, height: height }); + }; + + image.src = reader.result; + + setImage({ src: image.src, imgType: imageType }); + }; +}; //function for getting document details from contract_Documents class export const contractDocument = async (documentId) => { const data = {