diff --git a/microfrontends/SignDocuments/src/Component/Certificate/Certificate.js b/microfrontends/SignDocuments/src/Component/Certificate/Certificate.js index 28d193793..5df07d5f5 100644 --- a/microfrontends/SignDocuments/src/Component/Certificate/Certificate.js +++ b/microfrontends/SignDocuments/src/Component/Certificate/Certificate.js @@ -33,23 +33,23 @@ function Certificate({ pdfData }) { page: { borderRadius: "5px", padding: "10px", - backgroundColor: "white", + backgroundColor: "white" }, section1: { border: "1px solid rgb(177, 174, 174)", - padding: "20px", + padding: "20px" }, textStyle: { fontWeight: "bold", fontSize: "11px", - marginBottom: "10px", + marginBottom: "10px" }, textStyle2: { fontWeight: "600", fontSize: "11px", marginBottom: "10px", - color: "gray", - }, + color: "gray" + } }); const generatedDate = () => { @@ -57,7 +57,7 @@ function Certificate({ pdfData }) { const localExpireDate = newDate.toLocaleDateString("en-US", { day: "numeric", month: "long", - year: "numeric", + year: "numeric" }); var currentOffset = newDate.getTimezoneOffset(); @@ -79,7 +79,7 @@ function Certificate({ pdfData }) { textAlign: "right", color: "gray", fontSize: "10px", - marginBottom: "30px", + marginBottom: "30px" }} > Generated On {localExpireDate} {hoursIST}:{minutesIST} IST @@ -92,7 +92,7 @@ function Certificate({ pdfData }) { const localExpireDate = newDate.toLocaleDateString("en-US", { day: "numeric", month: "long", - year: "numeric", + year: "numeric" }); var currentOffset = newDate.getTimezoneOffset(); @@ -136,7 +136,7 @@ function Certificate({ pdfData }) { ) ); }; - + return ( isLoad && ( @@ -151,7 +151,7 @@ function Certificate({ pdfData }) { fontSize: "20px", fontWeight: "bold", color: "#31bceb", - marginBottom: "10px", + marginBottom: "10px" }} > {" "} @@ -165,7 +165,7 @@ function Certificate({ pdfData }) { fontSize: "16px", fontWeight: "bold", color: "#31bceb", - margin: "10px 0px 10px 0px", + margin: "10px 0px 10px 0px" }} > Summary @@ -203,36 +203,40 @@ function Certificate({ pdfData }) { fontSize: "16px", fontWeight: "bold", color: "#31bceb", - margin: "10px 0px 10px 0px", + margin: "10px 0px 10px 0px" }} > Recipients - {multiSigner && multiSigner.map((data, ind) => { - return ( - + {multiSigner && + multiSigner.map((data, ind) => { + return ( - {signerName(data)} + > + + {signerName(data)} - - Accessed from :   - - {data.ipAddress} + + Accessed from :   + + {data.ipAddress} + - - - ); - })} + + ); + })} ) : ( @@ -242,7 +246,7 @@ function Certificate({ pdfData }) { fontSize: "16px", fontWeight: "bold", color: "#31bceb", - margin: "10px 0px 10px 0px", + margin: "10px 0px 10px 0px" }} > Recipients @@ -259,7 +263,8 @@ function Certificate({ pdfData }) { Accessed from :   - {pdfData[0].AuditTrail && pdfData[0].AuditTrail[0].ipAddress} + {pdfData[0].AuditTrail && + pdfData[0].AuditTrail[0].ipAddress} diff --git a/microfrontends/SignDocuments/src/Component/DraftDocument.js b/microfrontends/SignDocuments/src/Component/DraftDocument.js index 6534c1ddb..79806a94e 100644 --- a/microfrontends/SignDocuments/src/Component/DraftDocument.js +++ b/microfrontends/SignDocuments/src/Component/DraftDocument.js @@ -42,7 +42,7 @@ function DraftDocument() { .then((Listdata) => { const json = Listdata.data; const res = json.results; - // console.log("res", res); + if (res[0] && res.length > 0) { setPdfDetails(res); const loadObj = { @@ -74,20 +74,16 @@ function DraftDocument() { //checking document is completed and signer exist then navigate to pdfRequestFiles file if (data.IsCompleted && checkSignerExist) { - // window.location.hash = `/pdfRequestFiles`; - - navigate(`${hostUrl}pdfRequestFiles`); + navigate(`${hostUrl}pdfRequestFiles`); } //checking document is completed and signer does not exist then navigate to recipientSignPdf file else if (data.IsCompleted && !checkSignerExist) { - // window.location.hash = `/recipientSignPdf/${data.objectId}/${data.ExtUserPtr.Phone}`; navigate( `${hostUrl}signaturePdf` ); } //checking document is declined by someone then navigate to pdfRequestFiles file else if (isDecline) { - // window.location.hash = `/pdfRequestFiles`; navigate(`${hostUrl}pdfRequestFiles`); } //checking document has expired and signers exist and placeholder does not set yet then navigate to pdfRequestFiles file @@ -97,7 +93,6 @@ function DraftDocument() { checkSignerExist && !isPlaceholder ) { - // window.location.hash = `/placeHolderSign`; navigate(`${hostUrl}placeHolderSign`); } //checking document has expired and signers does not exist and document not signed yet then navigate to pdfRequestFiles file diff --git a/microfrontends/SignDocuments/src/Component/ManageSign.js b/microfrontends/SignDocuments/src/Component/ManageSign.js index 3fbd113db..e6b110f4e 100644 --- a/microfrontends/SignDocuments/src/Component/ManageSign.js +++ b/microfrontends/SignDocuments/src/Component/ManageSign.js @@ -8,7 +8,7 @@ import "../css/signature.css"; import axios from "axios"; import { toDataUrl } from "../utils/toDataUrl"; -// console.log("appName ", appName) + const ManageSign = () => { let appName; const [penColor, setPenColor] = useState("blue"); @@ -68,7 +68,6 @@ const ManageSign = () => { if (res.data.results.length > 0) { setId(res.data.results[0].objectId); setSignName(res.data.results[0].SignatureName); - // console.log(res.data.results[0].ImageURL); setImage(res.data.results[0].ImageURL); if (res.data.results[0] && res.data.results[0].Initials) { setInitials(res.data.results[0].Initials); @@ -143,7 +142,7 @@ const ManageSign = () => { if (!signName) { setNameWarning(true); - // setTimeout(() => setNameWarning(false), 1000); + } else if (!isvalue) { setWarning(true); setTimeout(() => setWarning(false), 1000); @@ -337,12 +336,8 @@ const ManageSign = () => {
diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index f9ff8662e..012f4e347 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -12,8 +12,6 @@ import { useParams } from "react-router-dom"; import SignPad from "./component/signPad"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import { - contactBook, - contractUsers, getBase64FromIMG, getBase64FromUrl } from "../utils/Utils"; @@ -65,6 +63,7 @@ function PdfRequestFiles() { }); const [isSigned, setIsSigned] = useState(false); const [isExpired, setIsExpired] = useState(false); + const [alreadySign, setAlreadySign] = useState(false); const rowLevel = localStorage.getItem("rowlevel") && @@ -89,6 +88,7 @@ function PdfRequestFiles() { const clientWidth = window.innerWidth; const value = docId ? 80 : 30; const pdfWidth = clientWidth - 160 - 200 - value; + //160 is width of left side, 200 is width of right side component and 50 is space of middle compoent //pdf from left and right component setPdfNewWidth(pdfWidth); @@ -99,27 +99,6 @@ function PdfRequestFiles() { //function for get document details for perticular signer with signer'object id const getDocumentDetails = async () => { - const contractUsersRes = await contractUsers(jsonSender.objectId); - - if (contractUsersRes && contractUsersRes[0]) { - const objId = contractUsersRes[0].objectId; - - setSignerObjectId(objId); - } else if (contractUsersRes === "Error: Something went wrong!") { - const loadObj = { - isLoad: false - }; - setHandleError("Error: Something went wrong!"); - setIsLoading(loadObj); - } else if (contractUsersRes.length === 0) { - const contractContactBook = await contactBook(jsonSender.objectId); - if (contractContactBook && contractContactBook[0]) { - const objId = contractUsersRes[0].objectId; - - setSignerObjectId(objId); - } - } - await axios .get( `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( @@ -136,13 +115,24 @@ function PdfRequestFiles() { .then((Listdata) => { const json = Listdata.data; const res = json.results; - // console.log("res", res); + if (res[0] && res.length > 0) { const isCompleted = res[0].IsCompleted && res[0].IsCompleted; const expireDate = res[0].ExpiryDate.iso; const declined = res[0].IsDeclined && res[0].IsDeclined; const expireUpdateDate = new Date(expireDate).getTime(); const currDate = new Date().getTime(); + const getSigners = res[0].Signers; + const getCurrentSigner = + getSigners && + getSigners.filter( + (data) => data.UserId.objectId === jsonSender.objectId + ); + + const currUserId = getCurrentSigner[0] + ? getCurrentSigner[0].objectId + : ""; + setSignerObjectId(currUserId); if (res[0].SignedUrl) { setPdfUrl(res[0].SignedUrl); } else { @@ -154,6 +144,7 @@ function PdfRequestFiles() { isCertificate: true, isModal: true }; + setAlreadySign(true); setIsCompleted(data); } else if (declined) { const currentDecline = { @@ -173,17 +164,34 @@ function PdfRequestFiles() { (data) => data.Activity === "Signed" ); + const checkAlreadySign = + json.results[0].AuditTrail && + json.results[0].AuditTrail.length > 0 && + json.results[0].AuditTrail.filter( + (data) => + data.UserPtr.objectId === currUserId && + data.Activity === "Signed" + ); + if ( + checkAlreadySign && + checkAlreadySign[0] && + checkAlreadySign.length > 0 + ) { + setAlreadySign(true); + } + let signers = []; let unSignedSigner = []; //check document is signed or not if (checkDocIdExist && checkDocIdExist.length > 0) { + setAlreadySign(true); setIsDocId(true); const signerRes = res[0].Signers; //comparison auditTrail user details with signers user details for (let i = 0; i < signerRes.length; i++) { const signerId = signerRes[i].objectId; - // console.log("getSigner", getSigner); + let isSigned = false; for (let j = 0; j < checkDocIdExist.length; j++) { const signedExist = @@ -192,7 +200,6 @@ function PdfRequestFiles() { // if match then add signed data in signer array and break loop if (signerId === signedExist) { - // console.log("signedExist", signedExist); signers.push({ ...signerRes[i], ...signerRes[i] }); isSigned = true; break; @@ -202,8 +209,6 @@ function PdfRequestFiles() { if (!isSigned) { unSignedSigner.push({ ...signerRes[i], ...signerRes[i] }); } - - // console.log("check Signers status",signers,unSignedSigner) } setSignedSigners(signers); setUnSignedSigners(unSignedSigner); @@ -211,7 +216,6 @@ function PdfRequestFiles() { setSignerPos(res[0].Placeholders); } else { let unsigned = []; - // console.log("else condition"); for (let i = 0; i < res.length; i++) { unsigned.push(res[i].Signers); } @@ -226,7 +230,6 @@ function PdfRequestFiles() { alert("No data found!"); } } else { - // alert("No data found!"); setNoData(true); const loadObj = { isLoad: false @@ -279,7 +282,6 @@ function PdfRequestFiles() { }); }; - // console.log("signer", signerPos, unsignedSigners, isCompleted); //function for embed signature or image url in pdf async function embedImages() { const checkUser = signerPos.filter( @@ -320,7 +322,6 @@ 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) { - // console.log("else condition"); if (isDocId) { pdfBase64 = await getBase64FromUrl(url); } else { @@ -330,7 +331,7 @@ function PdfRequestFiles() { const fontSize = 10; const textContent = documentId && `OpenSign™ DocumentId: ${documentId}`; - // console.log("textcontent", documentId); + const pages = pdfDoc.getPages(); const page = pages[i]; @@ -472,10 +473,54 @@ function PdfRequestFiles() { const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150; - + const isMobile = window.innerWidth < 767; + const newWidth = window.innerWidth; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + const xPos = (pos) => { + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const x = pos.xPosition * (pos.scale / scale); + return x * scale + 50; + } else { + const x = pos.xPosition / scale; + return x * scale; + } + } 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 x = pos.xPosition * pos.scale + 50; + return x; + } else { + return pos.xPosition; + } + } + }; + const yPos = (pos) => { + //checking both condition mobile and desktop view + const y = pos.yPosition / scale; + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const y = pos.yPosition * (pos.scale / scale); + return page.getHeight() - y * scale - imgHeight; + } 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; + } else { + return page.getHeight() - pos.yPosition - imgHeight; + } + } + }; page.drawImage(img, { - x: imgUrlList[id].xPosition, - y: page.getHeight() - imgUrlList[id].yPosition - imgHeight, + x: xPos(imgUrlList[id]), + y: yPos(imgUrlList[id]), width: imgWidth, height: imgHeight }); @@ -506,24 +551,91 @@ function PdfRequestFiles() { signerData ) => { let signgleSign; - + const isMobile = window.innerWidth < 767; + const newWidth = window.innerWidth; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if ( signerData && signerData.length === 1 && signerData[0].pos.length === 1 ) { const height = xyPosData.Height ? xyPosData.Height : 60; - const bottomY = xyPosData.isDrag - ? xyPosData.yBottom - height - : xyPosData.yBottom - height + xyPosData.firstYPos; + + const xPos = (pos) => { + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const x = pos.xPosition * (pos.scale / scale); + return x * scale + 50; + } else { + const x = pos.xPosition / scale; + return x * scale; + } + } 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 x = pos.xPosition * pos.scale + 50; + return x; + } else { + return pos.xPosition; + } + } + }; + + const yBottom = (pos) => { + let yPosition; + //checking both condition mobile and desktop view + + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const y = pos.yPosition * (pos.scale / scale); + yPosition = pos.isDrag + ? y * scale - height + : pos.firstYPos + ? y * scale - height + pos.firstYPos + : y * scale - height; + 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; + } + } 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; + } else { + yPosition = pos.isDrag + ? pos.yBottom - height + : pos.firstYPos + ? pos.yBottom - height + pos.firstYPos + : pos.yBottom - height; + return yPosition; + } + } + }; + const bottomY = yBottom(xyPosData); signgleSign = { pdfFile: pdfBase64Url, docId: documentId, + userId: signerObjectId, sign: { Base64: base64Url, - Left: xyPosData.resizeXPos - ? xyPosData.resizeXPos - : xyPosData.xPosition, + Left: xPos(xyPosData), Bottom: bottomY, Width: xyPosData.Width ? xyPosData.Width : 150, Height: height, @@ -537,7 +649,8 @@ function PdfRequestFiles() { ) { signgleSign = { pdfFile: base64Url, - docId: documentId + docId: documentId, + userId: signerObjectId }; } @@ -565,7 +678,6 @@ function PdfRequestFiles() { } }) .catch((err) => { - // this.setState({ loading: false }); console.log("axois err ", err); alert("something went wrong"); }); @@ -595,17 +707,12 @@ function PdfRequestFiles() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - // setIsSignPad(false); - 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; @@ -783,8 +890,6 @@ function PdfRequestFiles() { return obj; }); - // currentSigner[0].placeHolder.splice(i, 1, newUpdateUrl[0]); - // console.log("currentSigner sign", currentSigner); const newUpdatePos = currentSigner.map((obj, ind) => { if (obj.signerObjId === signerObjectId) { return { ...obj, placeHolder: newUpdateUrl }; @@ -842,8 +947,6 @@ function PdfRequestFiles() { }); }; - // console.log("unsigned", unsignedSigners, signerObjectId,isExpired); - return ( {isLoading.isLoad ? ( @@ -859,7 +962,7 @@ function PdfRequestFiles() { style={{ position: "absolute", height: "100vh", - width: window.innerWidth, + width: "100%", display: "flex", justifyContent: "center", flexDirection: "column", @@ -1015,6 +1118,8 @@ function PdfRequestFiles() { setIsDecline={setIsDecline} decline={true} currentSigner={currentSigner} + pdfUrl={pdfUrl} + alreadySign={alreadySign} /> diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 4e91eab20..92eec4b8f 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -27,8 +27,6 @@ import RenderPdf from "./component/renderPdf"; import { contractUsers, contactBook } from "../utils/Utils"; //For signYourself inProgress section signer can add sign and complete doc sign. function SignYourSelf() { - // pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; - const [pdfDetails, setPdfDetails] = useState([]); const [isSignPad, setIsSignPad] = useState(false); const [allPages, setAllPages] = useState(null); @@ -310,52 +308,6 @@ function SignYourSelf() { }; setIsLoading(loadObj); } - - // await axios - // .get( - // `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( - // "_appName" - // )}_Contactbook?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${ - // jsonSender.objectId - // }"}}`, - // { - // headers: { - // "Content-Type": "application/json", - // "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - // "X-Parse-Session-Token": localStorage.getItem("accesstoken"), - // }, - // } - // ) - // .then((Listdata) => { - // const json = Listdata.data; - // const res = json.results; - - // if (res[0]) { - // setSignerUserId(res[0].objectId); - // const tourstatuss = res[0].TourStatus && res[0].TourStatus; - - // if (tourstatuss && tourstatuss.length > 0) { - // setTourStatus(tourstatuss); - // const checkTourRecipients = tourstatuss.filter( - // (data) => data.signyourself - // ); - // if (checkTourRecipients && checkTourRecipients.length > 0) { - // setCheckTourStatus(checkTourRecipients[0].signyourself); - // } - // } - // } - // const loadObj = { - // isLoad: false, - // }; - // setIsLoading(loadObj); - // }) - // .catch((err) => { - // const loadObj = { - // isLoad: false, - // }; - // setHandleError("Error: Something went wrong!"); - // setIsLoading(loadObj); - // }); }; //function for setting position after drop signature button over pdf @@ -618,22 +570,33 @@ function SignYourSelf() { ? imgUrlList[id].Height : 60; const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150; - const isMobile = window.innerWidth < 712; + const isMobile = window.innerWidth < 767; const newWidth = window.innerWidth; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + + const posY = () => { + if (id === 0) { + return ( + page.getHeight() - + imgUrlList[id].yPosition * scale - + imgHeight + ); + } else if (id > 0) { + return page.getHeight() - imgUrlList[id].yPosition * scale; + } + }; page.drawImage(img, { x: isMobile - ? imgUrlList[id].xPosition * scale + 50 + ? imgUrlList[id].xPosition * scale + imgWidth / 2 : imgUrlList[id].xPosition, - y: - page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight, + y: posY(), width: imgWidth, height: imgHeight }); }); } const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false }); - // console.log("pdfbyte", pdfBytes); + signPdfFun(pdfBytes, documentId); } setIsSignPad(false); @@ -652,10 +615,10 @@ function SignYourSelf() { pageNo ) => { let singleSign; - const isMobile = window.innerWidth < 712; + const isMobile = window.innerWidth < 767; const newWidth = window.innerWidth; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - + const imgWidth = xyPosData.Width.Width ? xyPosData.Width.Width : 150; if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; const bottomY = xyPosData.isDrag @@ -670,7 +633,7 @@ function SignYourSelf() { sign: { Base64: base64Url, Left: isMobile - ? xyPosData.xPosition * scale + 80 + ? xyPosData.xPosition * scale + imgWidth / 2 : xyPosData.xPosition, Bottom: bottomY, Width: xyPosData.Width ? xyPosData.Width : 150, @@ -684,14 +647,13 @@ function SignYourSelf() { docId: documentId }; } - // console.log("data",singleSign) + await axios .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { headers: { "Content-Type": "application/json", "X-Parse-Application-Id": localStorage.getItem("parseAppId"), sessionToken: localStorage.getItem("accesstoken") - // sessiontoken, } }) .then((Listdata) => { @@ -718,7 +680,6 @@ function SignYourSelf() { //function for save x and y position and show signature tab on that position const handleTabDrag = (key, e) => { - // console.log("key", key); setDragKey(key); setIsDragging(true); }; @@ -791,8 +752,6 @@ function SignYourSelf() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - // setIsSignPad(false); - const imageType = event.target.files[0].type; const reader = new FileReader(); @@ -825,16 +784,11 @@ function SignYourSelf() { setImage({ src: image.src, imgType: imageType }); }; - - //const imgUrl = URL.createObjectURL(event.target.files[0]); - - // const imgData = { width: newWidth, height: newHeight, src: imgUrl }; } }; //function for save button to save signature or image url const saveSign = (isDefaultSign) => { - // console.log("isDefault sign", isDefaultSign); const signatureImg = isDefaultSign ? defaultSignImg : signature; setIsSignPad(false); @@ -878,9 +832,6 @@ function SignYourSelf() { if (updateFilter.length > 0) { const getXYdata = xyPostion[index].pos; - - // const updateWidth = getXYdata[key].Width; - // const updateHeight = getXYdata[key].Height; const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === key) { @@ -937,7 +888,7 @@ function SignYourSelf() { let filterData = xyPostion[index].pos.filter((data) => data.key !== key); - // //delete and update block position + //delete and update block position if (filterData.length > 0) { updateResizeData.push(filterData); const newUpdatePos = xyPostion.map((obj, ind) => { @@ -949,12 +900,10 @@ function SignYourSelf() { setXyPostion(newUpdatePos); } else { - // setXyPostion([]); - const getRemainPage = xyPostion.filter( (data) => data.pageNumber !== pageNumber ); - // console.log("remainPage",getRemainPage) + if (getRemainPage && getRemainPage.length > 0) { setXyPostion(getRemainPage); } else { @@ -996,7 +945,6 @@ function SignYourSelf() { }; const tourConfig = [ { - // updateDelay: 1500, selector: '[data-tut="reactourFirst"]', content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`, position: "top", @@ -1046,8 +994,6 @@ function SignYourSelf() { ) .then((Listdata) => { // const json = Listdata.data; - // const res = json.results; - // console.log("res", json); }) .catch((err) => { console.log("axois err ", err); diff --git a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js index cd0385ac5..782133bea 100644 --- a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js +++ b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js @@ -5,54 +5,14 @@ function DefaultSignature({ themeColor, defaultSignImg, setShowAlreadySignDoc, - setDefaultSignImg, - userObjectId, - setIsLoading, - xyPostion, + xyPostion }) { - useEffect(() => { - getDefaultSignature(userObjectId); - }, []); - - //function for fetch default sigature added bu users - const getDefaultSignature = async (userObjectId) => { - await axios - .get( - `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( - "_appName" - )}_Signature?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${userObjectId}"}}`, - { - headers: { - "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - "X-Parse-Session-Token": localStorage.getItem("accesstoken"), - }, - } - ) - .then((Listdata) => { - const json = Listdata.data; - const res = json.results; - - if (res[0] && res.length > 0) { - setDefaultSignImg(res[0].ImageURL); - } - const loadObj = { - isLoad: false, - }; - setIsLoading(loadObj); - }) - .catch((err) => { - // this.setState({ loading: false }); - console.log("axois err ", err); - }); - }; - const confirmToaddDefaultSign = () => { if (xyPostion.length > 0) { const alreadySign = { status: true, mssg: "Are you sure you want to sign at requested locations?", - sure: true, + sure: true }; setShowAlreadySignDoc(alreadySign); } else { @@ -67,7 +27,7 @@ function DefaultSignature({ background: themeColor(), color: "white", padding: "5px", - fontFamily: "sans-serif", + fontFamily: "sans-serif" }} > Signature @@ -78,7 +38,7 @@ function DefaultSignature({ flexDirection: "column", alignItems: "center", marginTop: "10px", - fontWeight: "600", + fontWeight: "600" }} > {defaultSignImg ? ( @@ -90,7 +50,7 @@ function DefaultSignature({ style={{ width: "100%", height: "100%", - objectFit: "contain", + objectFit: "contain" }} src={defaultSignImg} /> @@ -100,7 +60,7 @@ function DefaultSignature({ background: themeColor(), color: "white", marginTop: "20px", - cursor: "pointer", + cursor: "pointer" }} type="button" className="finishBtn finishnHover" @@ -111,7 +71,9 @@ function DefaultSignature({ ) : (
- Click a signature placeholder to start signing the document! + + Click a signature placeholder to start signing the document! +
)}
diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index 722e2582d..af6ecf0e4 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -18,7 +18,7 @@ function EmailComponent({ setSuccessEmail, signObjId, pdfName, - sender, + sender }) { const [emailCount, setEmailCount] = useState([]); const [emailValue, setEmailValue] = useState(); @@ -28,28 +28,9 @@ function EmailComponent({ setIsLoading(true); let sendMail, recipent; for (let i = 0; i < emailCount.length; i++) { - // await axios - // .get( - // `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem("_appName")}_Contactbook?where={"Email":"${emailCount[i]}"}`, - // { - // headers: { - // "Content-Type": "application/json", - // "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - // sessionToken: localStorage.getItem("accesstoken"), - // }, - // } - // ) - // .then((Listdata) => { - // const json = Listdata.data; - // if (json.results[0]) { - // recipent = json.results[0]; - // } - // }) - // .catch((err) => { - // console.log("axois err ", err); - // }); + try { - console.log("recipients", recipent); + const imgPng = "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png"; // "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png"; @@ -58,15 +39,9 @@ function EmailComponent({ const headers = { "Content-Type": "application/json", "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - sessionToken: localStorage.getItem("accesstoken"), + sessionToken: localStorage.getItem("accesstoken") }; - // const serverUrl = localStorage.getItem("baseUrl"); - // const newServer = serverUrl.replaceAll("/", "%2F"); - - // const serverParams = `${newServer}&${localStorage.getItem( - // "parseAppId" - // )}&${localStorage.getItem("_appName")}`; - // let pdfUrlWeb = ` ${pdfName}`; + const themeBGcolor = themeColor(); let params = { pdfName: pdfName, @@ -83,8 +58,7 @@ function EmailComponent({ pdfName + " Standard is attached to this email. Kindly download the document from the attachment.

This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " + sender.email + - " directly. If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.

", - //"html":"

Digital Signature Request

" + recipent.Name + " has requested you to review and sign" +pdfName+"

Sender" + recipent.Email + "

This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " + recipent.Email + " directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.

" + " directly. If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.

" }; sendMail = await axios.post(url, params, { headers: headers }); } catch (error) { @@ -138,7 +112,6 @@ function EmailComponent({ const base64 = await getBase64FromUrl(pdfUrl); printModule({ printable: base64, type: "pdf", base64: true }); - // window.print('https://nxgcreator.s3.ap-south-1.amazonaws.com/exported_file_32_2023-08-22T04%3A59%3A13.432Z.pdf',); }; //handle download signed pdf @@ -146,6 +119,9 @@ function EmailComponent({ saveAs(pdfUrl, `${pdfName}_signed_by_OpenSign™.pdf`); }; + const isAndroid = /Android/i.test(navigator.userAgent); + + return (
{/* isEmail */} @@ -162,7 +138,7 @@ function EmailComponent({ alignItems: "center", zIndex: "20", backgroundColor: "#e6f2f2", - opacity: 0.8, + opacity: 0.8 }} >
- + className="btn btn-primary btn-sm" + > + + Print + + )} )} )} @@ -216,7 +222,7 @@ function Header({ border: "none", fontWeight: "650", fontSize: "16px", - marginRight: "10px", + marginRight: "10px" }} > Decline @@ -224,18 +230,16 @@ function Header({ )} {isPlaceholder ? (
{ if (!isMailSend) { alertSendEmail(); } }} - style={{ color: isMailSend ? "gray" : themeColor(), border: "none", fontWeight: "650", - fontSize: "16px", + fontSize: "16px" }} data-tut={dataTut4} > @@ -243,7 +247,7 @@ function Header({
) : (
{ if (!pdfUrl) { embedImages(); @@ -253,7 +257,7 @@ function Header({ color: themeColor(), border: "none", fontWeight: "650", - fontSize: "16px", + fontSize: "16px" }} > Finish @@ -277,10 +281,8 @@ function Header({ pdfUrl || isAlreadySign.mssg ? (
{pdfDetails[0] && pdfDetails.length > 0 && ( - // } fileName={`completion certificate-${ pdfDetails[0] && pdfDetails[0].Name @@ -296,7 +298,7 @@ function Header({ style={{ display: "flex", flexDirection: "row", - alignItems: "center", + alignItems: "center" }} > @@ -319,7 +321,7 @@ function Header({ style={{ display: "flex", flexDirection: "row", - alignItems: "center", + alignItems: "center" }} className="defaultBtn printBtn" > @@ -328,7 +330,7 @@ function Header({ style={{ fontSize: "15px", marginRight: "3px", - color: "white", + color: "white" }} aria-hidden="true" > @@ -340,7 +342,7 @@ function Header({ style={{ display: "flex", flexDirection: "row", - alignItems: "center", + alignItems: "center" }} className="defaultBtn downloadBtn" onClick={() => handleDownloadPdf()} @@ -350,7 +352,7 @@ function Header({ style={{ color: "white", fontSize: "15px", - marginRight: "3px", + marginRight: "3px" }} aria-hidden="true" > @@ -361,7 +363,7 @@ function Header({
) - ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? ( -
- } - fileName={`completion certificate-${ - pdfDetails[0] && pdfDetails[0].Name - }.pdf`} - > - {({ blob, url, loading, error }) => - loading ? ( - "Loading document..." - ) : ( - - ) - } - - - -
) : isPlaceholder ? ( <> {!isMailSend && @@ -502,7 +425,7 @@ function Header({ data-tut="reactourFour" style={{ background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2", - color: isMailSend && "rgb(77, 75, 75)", + color: isMailSend && "rgb(77, 75, 75)" }} onClick={() => { alertSendEmail(); @@ -514,10 +437,11 @@ function Header({
) : isPdfRequestFiles ? ( - isSigned ? ( + alreadySign ? (
{isCompleted.isCertificate && ( } fileName={`completion certificate-${ pdfDetails[0] && pdfDetails[0].Name @@ -533,7 +457,7 @@ function Header({ style={{ display: "flex", flexDirection: "row", - alignItems: "center", + alignItems: "center" }} > @@ -558,7 +482,7 @@ function Header({ style={{ display: "flex", flexDirection: "row", - alignItems: "center", + alignItems: "center" }} > @@ -579,7 +503,7 @@ function Header({ style={{ display: "flex", flexDirection: "row", - alignItems: "center", + alignItems: "center" }} onClick={() => handleDownloadPdf()} > @@ -588,7 +512,7 @@ function Header({ style={{ color: "white", fontSize: "15px", - marginRight: "3px", + marginRight: "3px" }} aria-hidden="true" > @@ -610,7 +534,7 @@ function Header({ <> + ) + } + + + +
) : (
- ) : ( - - )} +
+
+ Welcome Back ! +
+ + Verification code is sent to your email + +
+
+ +
+
+ {loading ? ( + + ) : ( + + )} +
- +
) : ( -
-
-
-

Welcome Back !

- You will get a OTP via Email -
-
- - +
+
+ Welcome Back ! +
+ You will get a OTP via Email +
+
+ + -
-
-
-
- {loading ? ( - - ) : ( - - )} +
+
+ {loading ? ( + + ) : ( + + )} +
- +
)}
)} - +
); } diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index fbc366151..80ef92e27 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -17,11 +17,13 @@ import HandleError from "./component/HandleError"; import Nodata from "./component/Nodata"; import SignerListPlace from "./component/signerListPlace"; import Header from "./component/header"; -import { contactBook, contractUsers } from "../utils/Utils"; +import { contactBook, contractUsers, getHostUrl } from "../utils/Utils"; import RenderPdf from "./component/renderPdf"; import ModalComponent from "./component/modalComponent"; +import { useNavigate } from "react-router-dom"; function PlaceHolderSign() { + const navigate = useNavigate(); const [pdfDetails, setPdfDetails] = useState([]); const [isMailSend, setIsMailSend] = useState(false); const [allPages, setAllPages] = useState(null); @@ -74,7 +76,9 @@ function PlaceHolderSign() { "#66ccff", "#ffffcc" ]; - + const isMobile = window.innerWidth < 767; + const newWidth = window.innerWidth; + const scale = pdfOriginalWidth / newWidth; const [{ isOver }, drop] = useDrop({ accept: "BOX", drop: (item, monitor) => addPositionOfSignature(item, monitor), @@ -119,7 +123,7 @@ function PlaceHolderSign() { isDragSignatureSS: !!monitor.isDragging() }) }); - const isMobile = window.innerWidth < 712; + const [{ isDragStampSS }, dragStampSS] = useDrag({ type: "BOX", @@ -162,7 +166,7 @@ function PlaceHolderSign() { getDocumentDetails(); } }, []); - + //function for get document details const getDocumentDetails = async () => { await axios @@ -257,56 +261,10 @@ function PlaceHolderSign() { setIsLoading(loadObj); } } - // await axios - // .get( - // `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( - // "_appName" - // )}_Contactbook?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${ - // jsonSender.objectId - // }"}}`, - // { - // headers: { - // "Content-Type": "application/json", - // "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - // "X-Parse-Session-Token": localStorage.getItem("accesstoken"), - // }, - // } - // ) - // .then((Listdata) => { - // const json = Listdata.data; - // const res = json.results; - - // if (res[0] && res.length) { - // setSignerUserId(res[0].objectId); - // const tourstatus = res[0].TourStatus && res[0].TourStatus; - // if (tourstatus && tourstatus.length > 0) { - // setTourStatus(tourstatus); - // const checkTourRecipients = tourstatus.filter( - // (data) => data.placeholder - // ); - // if (checkTourRecipients && checkTourRecipients.length > 0) { - // setCheckTourStatus(checkTourRecipients[0].placeholder); - // } - // } - // const loadObj = { - // isLoad: false, - // }; - // setIsLoading(loadObj); - // } - // }) - // .catch((err) => { - // const loadObj = { - // isLoad: false, - // }; - // setHandleError("Error: Something went wrong!"); - // setIsLoading(loadObj); - // }); }; //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { - const isMobile = window.innerWidth < 712; - if (isMobile) { if (selectedEmail) { getSignerPos(item, monitor); @@ -317,11 +275,8 @@ function PlaceHolderSign() { getSignerPos(item, monitor); } }; - + const getSignerPos = (item, monitor) => { - const isMobile = window.innerWidth < 712; - const newWidth = window.innerWidth; - const scale = pdfOriginalWidth / newWidth; const key = Math.floor(1000 + Math.random() * 9000); let filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerObjId @@ -336,7 +291,8 @@ function PlaceHolderSign() { isStamp: monitor, key: key, isDrag: false, - scale: isMobile && scale, + scale: scale, + isMobile: isMobile, yBottom: window.innerHeight / 2 - 60 }; dropData.push(dropObj); @@ -365,7 +321,8 @@ function PlaceHolderSign() { firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, yBottom: ybottom, - scale: isMobile && scale + scale: scale, + isMobile: isMobile }; dropData.push(dropObj); @@ -394,16 +351,12 @@ function PlaceHolderSign() { //add entry of position for same signer on multiple page if (getPageNumer.length > 0) { const getPos = getPageNumer[0].pos; - - //if (updateData.length > dropData.length) { const newSignPos = getPos.concat(dropData); - let xyPos = { pageNumber: pageNumber, pos: newSignPos }; updatePlace.push(xyPos); - let placeHolderPos = { blockColor: color[isSelectListId], signerObjId: signerObjId, @@ -417,7 +370,6 @@ function PlaceHolderSign() { signerPos.splice(colorIndex, 1, placeHolderPos); } else { - // const newSignPos = getPlaceHolder.push(xyPosArr[0]); const newSignPoss = getPlaceHolder.concat(xyPosArr[0]); let placeHolderPos = { @@ -444,7 +396,7 @@ function PlaceHolderSign() { blockColor: color[isSelectListId], placeHolder: xyPosArr }; - + setSignerPos((prev) => [...prev, placeHolderPos]); } }; @@ -467,17 +419,19 @@ function PlaceHolderSign() { }; //function for set and update x and y postion after drag and drop signature tab - const handleStop = (event, dragElement) => { + const handleStop = (event, dragElement, signerId, key) => { const containerRect = document .getElementById("container") .getBoundingClientRect(); - + const signId = signerId ? signerId : signerObjId; + const keyValue = key ? key : dragKey; const ybottom = containerRect.height - dragElement.y; - if (dragKey >= 0) { + if (keyValue >= 0) { const filterSignerPos = signerPos.filter( - (data) => data.signerObjId === signerObjId + (data) => data.signerObjId === signId ); + if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; @@ -490,7 +444,7 @@ function PlaceHolderSign() { const getPosData = getXYdata; const addSignPos = getPosData.map((url, ind) => { - if (url.key === dragKey) { + if (url.key === keyValue) { return { ...url, xPosition: dragElement.x, @@ -509,16 +463,15 @@ function PlaceHolderSign() { return obj; }); const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signerObjId) { + if (obj.signerObjId === signId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj; }); + setSignerPos(newUpdateSigner); } } - - // } } }; @@ -556,6 +509,7 @@ function PlaceHolderSign() { } return obj; }); + setSignerPos(newUpdateSigner); } else { const updateFilter = signerPos.filter( @@ -577,6 +531,7 @@ function PlaceHolderSign() { (data) => data.signerObjId !== signerId ); signerupdate.push(newUpdatePos[0]); + setSignerPos(signerupdate); } else { setSignerPos(updateFilter); @@ -621,12 +576,14 @@ function PlaceHolderSign() { } return obj; }); + const newUpdateSigner = signerPos.map((obj, ind) => { if (obj.signerObjId === signerId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj; }); + setSignerPos(newUpdateSigner); } else { const getXYdata = getPageNumer[0].pos; @@ -650,12 +607,14 @@ function PlaceHolderSign() { } return obj; }); + const newUpdateSigner = signerPos.map((obj, ind) => { if (obj.signerObjId === signerId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj; }); + setSignerPos(newUpdateSigner); } } @@ -667,11 +626,9 @@ function PlaceHolderSign() { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); } - + //function for capture position on hover signature button const handleDivClick = (e) => { - // if (signBtnPosition.length == 0) { - const divRect = e.currentTarget.getBoundingClientRect(); const mouseX = e.clientX - divRect.left; const mouseY = e.clientY - divRect.top; @@ -721,17 +678,13 @@ function PlaceHolderSign() { month: "long", year: "numeric" }); - let sender = signersdata.ExtUserPtr.Email; - // let sender ="raktima.c@qik.ai" - const signerMail = signersdata.Signers; + const signerMail = signersdata.Signers; for (let i = 0; i < signerMail.length; i++) { try { const imgPng = "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png"; - // "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png"; - let url = `${localStorage.getItem("baseUrl")}functions/sendmailv3/`; const headers = { "Content-Type": "application/json", @@ -800,14 +753,12 @@ function PlaceHolderSign() { } ) .then((result) => { - // const res = result.data; setIsSend(true); setIsMailSend(true); const loadObj = { isLoad: false }; setIsLoading(loadObj); - // console.log("save res", res); }) .catch((err) => { console.log("axois err ", err); @@ -889,6 +840,12 @@ function PlaceHolderSign() { console.log("axois err ", err); }); }; + const handleRecipientSign = () => { + const hostUrl = getHostUrl(); + navigate( + `${hostUrl}recipientSignPdf/${documentId}/${currentEmail[0].objectId}` + ); + }; return ( {isLoading.isLoad ? ( @@ -993,7 +950,6 @@ function PlaceHolderSign() { style={{ background: themeColor() }} - // className="bg-danger" > Send Mail @@ -1023,21 +979,19 @@ function PlaceHolderSign() { No - { + handleRecipientSign(); + }} + style={{ + background: themeColor(), + color: "white" + }} + type="button" + className="finishBtn" > - - + Yes + ) : (
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index a065132b5..a60627218 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -69,7 +69,7 @@ function EmbedPdfImage() { }); const docId = id && id; - //"F0hg0twSJH"; + const isMobile = window.innerWidth < 767; const index = xyPostion.findIndex((object) => { return object.pageNumber === pageNumber; }); @@ -85,12 +85,10 @@ function EmbedPdfImage() { //function for get document details for perticular signer with signer'object id const getDocumentDetails = async () => { - //aspfUo7wRl let currUserId, userObjectId; - const json = await contactBookName(contactBookId, "_Users"); - + const json = await contactBookName(contactBookId, "_Contactbook"); if (json !== "Error: Something went wrong!" && json && json.results[0]) { - setContractName("_Users"); + setContractName("_Contactbook"); if (json.results[0]) { userObjectId = json.results[0].UserId.objectId; setUserObjectID(userObjectId); @@ -123,9 +121,10 @@ function EmbedPdfImage() { setHandleError("Error: Something went wrong!"); setIsLoading(loadObj); } else { - const json = await contactBookName(contactBookId, "_Contactbook"); - if (json && json.results[0]) { - setContractName("_Contactbook"); + const json = await contactBookName(contactBookId, "_Users"); + + if (json !== "Error: Something went wrong!" && json && json.results[0]) { + setContractName("_Users"); if (json.results[0]) { userObjectId = json.results[0].UserId.objectId; setUserObjectID(userObjectId); @@ -151,57 +150,14 @@ function EmbedPdfImage() { }; setIsLoading(loadObj); } + } else if (json === "Error: Something went wrong!") { + const loadObj = { + isLoad: false + }; + setHandleError("Error: Something went wrong!"); + setIsLoading(loadObj); } } - // await axios - // .get(//m4GJ12tm87 - // `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( - // "_appName" - // )}_Contactbook?where={"Phone":"${userPhone}"}`, - // { - // headers: { - // "Content-Type": "application/json", - // "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - // sessionToken: localStorage.getItem("accesstoken"), - // }, - // } - // ) - // .then((Listdata) => { - // const json = Listdata.data; - - // if (json.results[0]) { - // userObjectId = json.results[0].UserId.objectId; - // setUserObjectID(userObjectId); - // currUserId = json.results[0].objectId; - - // setSignerUserId(currUserId); - // const tourstatus = - // json.results[0].TourStatus && json.results[0].TourStatus; - - // if (tourstatus && tourstatus.length > 0) { - // setTourStatus(tourstatus); - // const checkTourRecipients = tourstatus.filter( - // (data) => data.recipientssign - // ); - // if (checkTourRecipients && checkTourRecipients.length > 0) { - // setCheckTourStatus(checkTourRecipients[0].recipientssign); - // } - // } - // } else { - // setNoData(true); - // const loadObj = { - // isLoad: false, - // }; - // setIsLoading(loadObj); - // } - // }) - // .catch((err) => { - // const loadObj = { - // isLoad: false, - // }; - // setHandleError("Error: Something went wrong!"); - // setIsLoading(loadObj); - // }); await axios .get( @@ -220,7 +176,6 @@ function EmbedPdfImage() { .then((Listdata) => { const json = Listdata.data; const res = json.results; - // console.log("res",res) if (res[0] && res.length > 0) { const declined = res[0].IsDeclined && res[0].IsDeclined; const isCompleted = res[0].IsCompleted && res[0].IsCompleted; @@ -233,16 +188,12 @@ function EmbedPdfImage() { //then show alert with completed message const alreadySign = { status: true, - mssg: "This document has already been signed!" + mssg: "This document has been successfully signed!" }; setIsAlreadySign(alreadySign); setPdfUrl(res[0].SignedUrl); setSignedPdfData(json.results); setCompletePdfData(res); - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); } else if (declined) { const currentDecline = { currnt: "another", @@ -251,11 +202,6 @@ function EmbedPdfImage() { setIsDecline(currentDecline); setSignedPdfData(json.results); - - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); } else if (currDate > expireUpdateDate) { setIsExpired(true); const checkDocIdExist = @@ -282,11 +228,6 @@ function EmbedPdfImage() { const key = currUser[0].placeHolder[0].pos[0].key; setSignKey(key); - - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); } //for show current requested signer's placeholder else { @@ -302,17 +243,7 @@ function EmbedPdfImage() { const key = currUser[0].placeHolder[0].pos[0].key; setSignKey(key); - - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); } - - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); } else { //checking document has signed by someone or not @@ -326,6 +257,7 @@ function EmbedPdfImage() { //if signed by someone than go to in if condition // and second signer could not be add documentId //for that setIsDocId true + if (checkDocIdExist && checkDocIdExist.length > 0) { setIsDocId(true); @@ -336,7 +268,7 @@ function EmbedPdfImage() { data.Activity === "Signed" ); - // if checkAlreadyBySigner has some data that current user alredy sign this document + // if checkAlreadyBySigner has some data that current user already sign this document // then show alert with message if (checkAlreadyBySigner && checkAlreadyBySigner.length > 0) { const alreadySign = { @@ -345,10 +277,7 @@ function EmbedPdfImage() { }; setIsAlreadySign(alreadySign); setPdfUrl(res[0].SignedUrl); - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); + setSignedPdfData(json.results); } //else show placeholder of current requested signer else { @@ -364,11 +293,6 @@ function EmbedPdfImage() { const key = currUser[0].placeHolder[0].pos[0].key; setSignKey(key); - - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); } } //for show current requested signer's placeholder @@ -385,19 +309,8 @@ function EmbedPdfImage() { const key = currUser[0].placeHolder[0].pos[0].key; setSignKey(key); - - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); } } - } else { - setNoData(true); - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); } }) .catch((err) => { @@ -434,8 +347,12 @@ function EmbedPdfImage() { setIsLoading(loadObj); }) .catch((err) => { - // this.setState({ loading: false }); console.log("axois err ", err); + const loadObj = { + isLoad: false + }; + setHandleError("Error: Something went wrong!"); + setIsLoading(loadObj); }); }; @@ -624,23 +541,62 @@ function EmbedPdfImage() { ? imgUrlList[id].Height : 60; const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150; - const isMobile = window.innerWidth < 712; + const isMobile = window.innerWidth < 767; const newWidth = window.innerWidth; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - page.drawImage(img, { - x: isMobile - ? imgUrlList[id].xPosition * scale + 50 - : imgUrlList[id].xPosition, + const xPos = (pos) => { + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const x = pos.xPosition * (pos.scale / scale); + return x * scale + 50; + } else { + const x = pos.xPosition / scale; + return x * scale; + } + } 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 x = pos.xPosition * pos.scale + 50; + return x; + } else { + return pos.xPosition; + } + } + }; + const yPos = (pos) => { + //checking both condition mobile and desktop view - y: - page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight, + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const y = pos.yPosition * (pos.scale / scale); + return page.getHeight() - y * scale - imgHeight; + } else { + const y = pos.yPosition / scale; + 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; + } else { + return page.getHeight() - pos.yPosition - imgHeight; + } + } + }; + + page.drawImage(img, { + x: xPos(imgUrlList[id]), + y: yPos(imgUrlList[id]), width: imgWidth, height: imgHeight }); }); } const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false }); - //console.log("pdfbyte", pdfBytes); signPdfFun(pdfBytes, docId); } @@ -658,29 +614,87 @@ function EmbedPdfImage() { pdfBase64Url, pageNo ) => { - let signgleSign; - const isMobile = window.innerWidth < 712; + let singleSign; + const isMobile = window.innerWidth < 767; const newWidth = window.innerWidth; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + const height = xyPosData ? xyPosData.Height : 60; + const xPos = (pos) => { + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const x = pos.xPosition * (pos.scale / scale); + return x * scale + 50; + } else { + const x = pos.xPosition / scale; + return x * scale; + } + } 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 x = pos.xPosition * pos.scale + 50; + return x; + } else { + return pos.xPosition; + } + } + }; + + const yBottom = (pos) => { + let yPosition; + //checking both condition mobile and desktop view + + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const y = pos.yPosition * (pos.scale / scale); + yPosition = pos.isDrag + ? y * scale - height + : pos.firstYPos + ? y * scale - height + pos.firstYPos + : y * scale - height; + 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; + } + } 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; + } else { + yPosition = pos.isDrag + ? pos.yBottom - height + : pos.firstYPos + ? pos.yBottom - height + pos.firstYPos + : pos.yBottom - height; + return yPosition; + } + } + }; if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { - const height = xyPosData.Height ? xyPosData.Height : 60; - const bottomY = xyPosData.isDrag - ? xyPosData.yBottom * scale - height - : xyPosData.firstYPos - ? xyPosData.yBottom * scale - height + xyPosData.firstYPos - : xyPosData.yBottom * scale - height; - signgleSign = { + const bottomY = yBottom(xyPosData); + singleSign = { pdfFile: pdfBase64Url, docId: docId, + userId: signerUserId, sign: { Base64: base64Url, - Left: isMobile - ? xyPosData.resizeXPos - ? xyPosData.resizeXPos * scale + 80 - : xyPosData.xPosition * scale + 80 - : xyPosData.resizeXPos - ? xyPosData.resizeXPos - : xyPosData.xPosition, + Left: xPos(xyPosData), Bottom: bottomY, Width: xyPosData.Width ? xyPosData.Width : 150, Height: height, @@ -688,33 +702,25 @@ function EmbedPdfImage() { } }; } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { - signgleSign = { + singleSign = { pdfFile: base64Url, - docId: docId + docId: docId, + userId: signerUserId }; } await axios - .post( - `${localStorage.getItem("baseUrl")}functions/signPdf`, - signgleSign, - { - headers: { - "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - sessionToken: localStorage.getItem("accesstoken") - } + .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { + headers: { + "Content-Type": "application/json", + "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + sessionToken: localStorage.getItem("accesstoken") } - ) + }) .then((Listdata) => { const json = Listdata.data; if (json.result.data) { - // setPdfUrl(json.result.data); - // const loadObj = { - // isLoad: false, - // }; - // setIsLoading(loadObj); getDocumentDetails(); } }) @@ -731,8 +737,6 @@ function EmbedPdfImage() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - // setIsSignPad(false); - const imageType = event.target.files[0].type; const reader = new FileReader(); @@ -872,7 +876,7 @@ function EmbedPdfImage() { } else { updatedTourStatus = [{ recipientssign: true }]; } - // console.log("updatedTourStatus", updatedTourStatus); + await axios .put( `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( @@ -899,7 +903,6 @@ function EmbedPdfImage() { }); }; - // console.log("is sign",isAlreadySign.status) const tourFunction = () => { const tourConfig = [ { @@ -922,16 +925,17 @@ function EmbedPdfImage() { } ]; - const stepsToShow = - !defaultSignImg && - tourConfig.filter( - (step, index) => step.selector !== '[data-tut="reactourFirst"]' + let stepsToShow = []; + if (!defaultSignImg || isMobile) { + stepsToShow = tourConfig.filter( + (step) => step.selector !== '[data-tut="reactourFirst"]' ); + } return ( 0 ? stepsToShow : tourConfig} isOpen={signTour} closeWithMask={false} rounded={5} @@ -1112,7 +1116,7 @@ function EmbedPdfImage() { />
- {!pdfUrl && !isAlreadySign.status ? ( + {!pdfUrl ? (
{/* this component is used to render default signature of user in the right side of the component */} diff --git a/microfrontends/SignDocuments/src/css/LoginPage.css b/microfrontends/SignDocuments/src/css/LoginPage.css index e77e7d4e2..bd80e9b0b 100644 --- a/microfrontends/SignDocuments/src/css/LoginPage.css +++ b/microfrontends/SignDocuments/src/css/LoginPage.css @@ -1,9 +1,46 @@ -.react-tel-input .form-control { +.loginInput{ + padding: 10px; + + border-radius: 4px; width: 100%; - height: 45px; - margin-top: 4px; + font-size: 0.75rem; + border: 1px solid #e2dddd;; + background-color: #e0e5f5; + color: black; + + padding-left: 1rem!important; + padding-right: 1rem!important; + padding-top: 0.5rem!important; + + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-weight: inherit; + overflow: visible; + + } + .loginInput:focus{ + outline: none; + border: none; + } +.verifyBtn{ + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 30px; + color: white; + font-weight: 500 !important; + font-size: 14px !important; + border: none; +} +.verifyBtn:focus { + border: none; + outline: none; } + +.verifyBtn:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + color: white; +} .fakeimg { height: 200px; background: #aaa; @@ -110,16 +147,17 @@ .KNLO { color: #878787; + font-size: 13px; } .form-check-label { margin-left: 17px; margin-bottom: 12px; } - -input:focus { - border-color: #ccc !important; +.welcomeText{ + font-size: 30px; } + @media only screen and (max-width: 600px) { .KLO1 { @@ -148,4 +186,25 @@ input:focus { +} +@media screen and (max-width:366px) { + + .main-logo { + width: 150px; + height: 46px; + display: inline-block; + } + .welcomeText{ + font-size: 20px; + } + .KNLO { + color: #878787; + font-size: 10px; + } + .btnContainer{ + display: flex; + justify-content: center; + align-items: center; + } + } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 19ebe71b0..d3e16258a 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -4,753 +4,788 @@ margin: 0px; font-family:system-ui; } */ - .signatureCanvas { - border: 2px solid #888; - background-color: rgb(255, 255, 255); - width: 460px; - height: 184px; - } - - .penContainer { - width: 460px; - } - - .signatureBtn { - border: 1.5px solid #47a3ad; - margin-bottom: 10px; - border-radius: 3px; - display: flex; - padding: 0px; - justify-content: space-between; - background: white; - transition-duration: 0.4s; - cursor: all-scroll; - width: 150px; - height: 30px; - color: black; - /* transform: translate(); */ - - } - - /* .signatureBtn:hover { - background-color:#47a3ad; - color: white; - } */ - - .disableSign { - border: 1.5px solid #47a3ad; - margin-bottom: 10px; - border-radius: 3px; - display: flex; - padding: 0px; - justify-content: space-between; - background: white; - transition-duration: 0.4s; - cursor: all-scroll; - width: 150px; - height: 30px; - color: black; - border: 1px solid rgb(203, 203, 203); - cursor: text; - - } - - .emailInput { - padding: 10px; - border: 1.5px solid gray; - border-radius: 4px; - width: 100%; - font-size: 15px; - padding-bottom: 20px; - } - - .emailInput:focus { - outline: none; - border: 1.5px solid #47a3ad; - } - - .addEmail { - padding: "0px"; - border: 1.5px solid #47a3ad; - border-radius: 4px; - width: 100%; - font-size: 15px; - - } - - .addEmail, - .emailInput { - - outline: none; - } - - .addEmailInput { - border: none; - outline: none; - } - - .emailChip { - background-color: #47a3ad; - margin: 4px; - border-radius: 10px; - padding: 5px 10px; - } - - .addEmailInput { - padding: 10px; - - border-radius: 4px; - width: 100%; - font-size: 15px; - - - } - - .addEmailInput:focus { - outline: none; - border: none; - } - - .finishBtn { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 30px; - color: white; - font-weight: 500 !important; - font-size: 14px !important; - border: none; - margin-left: 10px; - } -.sendMail{ - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 30px; - color: white; - font-weight: 500 !important; - font-size: 14px !important; - border: none; - margin-left: 10px; - /* color: rgb(77, 75, 75); */ -} + .signatureCanvas { + border: 2px solid #888; + background-color: rgb(255, 255, 255); + width: 460px; + height: 184px; + } - .finishBtn:focus { + .penContainer { + width: 460px; + } + + .signatureBtn { + border: 1.5px solid #47a3ad; + margin-bottom: 10px; + border-radius: 3px; + display: flex; + padding: 0px; + justify-content: space-between; + background: white; + transition-duration: 0.4s; + cursor: all-scroll; + width: 150px; + height: 30px; + color: black; + /* transform: translate(); */ + + } + + /* .signatureBtn:hover { + background-color:#47a3ad; + color: white; + } */ + + .disableSign { + border: 1.5px solid #47a3ad; + margin-bottom: 10px; + border-radius: 3px; + display: flex; + padding: 0px; + justify-content: space-between; + background: white; + transition-duration: 0.4s; + cursor: all-scroll; + width: 150px; + height: 30px; + color: black; + border: 1px solid rgb(203, 203, 203); + cursor: text; + + } + + .emailInput { + padding: 10px; + border: 1.5px solid gray; + border-radius: 4px; + width: 100%; + font-size: 15px; + padding-bottom: 20px; + } + + .emailInput:focus { + outline: none; + border: 1.5px solid #47a3ad; + } + + .addEmail { + padding: "0px"; + border: 1.5px solid #47a3ad; + border-radius: 4px; + width: 100%; + font-size: 15px; + + } + + .addEmail, + .emailInput { + + outline: none; + } + + .addEmailInput { + border: none; + outline: none; + } + + .emailChip { + background-color: #47a3ad; + margin: 4px; + border-radius: 10px; + padding: 5px 10px; + } + + .addEmailInput { + padding: 10px; + + border-radius: 4px; + width: 100%; + font-size: 15px; + + + } + + .addEmailInput:focus { + outline: none; + border: none; + } + + .finishBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 30px; + color: white; + font-weight: 500 !important; + font-size: 14px !important; + border: none; + margin-left: 10px; + } + + .sendMail { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 30px; + color: white; + font-weight: 500 !important; + font-size: 14px !important; + border: none; + margin-left: 10px; + /* color: rgb(77, 75, 75); */ + } + + .finishBtn:focus { + border: none; + outline: none; + } + + + .finishBtn:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + color: white; + } + + .saveBtn { + padding: 3px 18px !important; + + } + + .disabledFinish { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 30px; + color: white; + font-weight: 600; + font-size: 14px; + border: none; + + margin-left: 10px; + } + + .sendHover:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + color: white; + } + + .defaultSignBox { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + width: 180px; + height: 111px; + padding: 8px 20px; + color: white; + font-weight: 600; + font-size: 14px; + border: none; + border-radius: 2px; + margin-left: 10px; + } + + + .defaultBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 26px; + + color: black; + font-weight: 500; + font-size: 14px; + border: 1px solid gray; + border-radius: 2px; + margin-left: 10px; + + } + + .backBtn { + background-color: white; + } + + .backBtn:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + + } + + .defaultBtn:focus { + border: none; + outline: none; + } + + .downloadBtn { + 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(241 79 79); + border: none !important; + color: white !important; + } + + .downloadBtn:hover { + box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + + } + + .printBtn { + 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: #188ae2; + border: none !important; + color: white !important; + } + + .printBtn:hover { + box-shadow: 0 2px 4px rgba(23, 48, 137, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + + + } + + .certificateBtn { + 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: #08bc66; + border: none !important; + color: white !important; + text-decoration: none !important; + } + + .certificateBtn:hover { + box-shadow: 0 2px 4px rgba(15, 150, 87, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + + } + + + .signerList { + overflow-y: scroll; + max-height: 180px; + + } + + .signerList::-webkit-scrollbar { + display: none; + /* for Chrome, Safari, and Opera */ + } + + .showScroll { + height: 100%; + overflow: scroll; + + } + + .showScroll::-webkit-scrollbar { + display: none; + /* for Chrome, Safari, and Opera */ + } + + .hideScroll { + height: 100%; + overflow: scroll; + } + + .signedStyle { + color: white; + padding: 5px; + font-family: sans-serif; + font-size: 15px !important; + } + + .userName { + font-size: 12px !important; + font-weight: bold !important; + color: #424242 !important; + width: 100px; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; + } + + .useEmail { + font-size: 10px; + color: #424242; + font-weight: 500; + width: 100px; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; + } + + .spanTagHead { + color: white !important; + font-size: 17px; + font-weight: 500; + } + + .pTagBody { + + font-size: 15px !important; + } + + .signTab { + cursor: pointer !important; + font-weight: 400 !important; + margin-left: 10px !important; + font-size: 15px !important; + } + + .draggable-button { + padding: 10px 20px; + background: #3498db; + color: #fff; + border: none; + cursor: grab; + transition: transform 0.2s; + } + + .draggable-button.dragging { + opacity: 0.5; + /* Reduce opacity while dragging */ + transform: scale(1.1); + /* Apply a scaling effect while dragging */ + } + + + .signatureContainer { + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: #ebebeb; + /* max-height: 800px; */ + /* overflow: auto; */ + } + + .signatureHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 5px; + } + + .signerComponent { + /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */ + width: 180px; + background-color: white; + height: 100%; + } + + .modalBody { + padding: 1rem !important; + padding-top: 2rem !important; + } + + .signLayoutContainer1 { + padding: 30px; + display: flex; + flex-direction: column; + align-items: center + } + + .signLayoutContainer2 { + display: none; + } + + .preBtn1 { + display: flex; + align-items: center; + } + + .preBtn2 { + display: none; + } + + .headerBtn2 { + display: none; + } + + .uploadImgLogo { + font-size: 50px; + } + + + + .DropdownMenuContent, + .DropdownMenuSubContent { + min-width: 130px; + background-color: #887abf; + border: none; + padding: 5px; + + animation-duration: 400ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; + z-index: 30 !important; + } + + .DropdownMenuContent[data-side='top'], + .DropdownMenuSubContent[data-side='top'] { + animation-name: slideDownAndFade; + } + + .DropdownMenuContent[data-side='right'], + .DropdownMenuSubContent[data-side='right'] { + animation-name: slideLeftAndFade; + } + + .DropdownMenuContent[data-side='bottom'], + .DropdownMenuSubContent[data-side='bottom'] { + animation-name: slideUpAndFade; + } + + .DropdownMenuContent[data-side='left'], + .DropdownMenuSubContent[data-side='left'] { + animation-name: slideRightAndFade; + } + + .DropdownMenuItem { + font-size: 13px; + line-height: 1; + color: black; + background-color: #887abf; + display: flex; + align-items: center; + height: 25px; + padding: 0 5px; + position: relative; + padding-left: 25px; + user-select: none; + outline: none; + border: none; + } + + .SelectTrigger { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 70px; + font-size: 13px; + line-height: 1; + height: 35px; + gap: 5px; + border: none; + background-color: #887abf; + + width: 100px; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; + } + + .selectEmail { + + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 15px; + font-size: 13px; + line-height: 1; + height: 35px; + gap: 5px; + border: none; + background-color: #887abf; + + width: 200px; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; + } + + option { + overflow-y: scroll; + } + + .SelectTrigger:hover { + border: none; + outline: none; + } + .selectEmail:hover{ border: none; outline: none; } - - - .finishBtn:hover { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - color: white; - } - - .saveBtn { - padding: 3px 18px !important; - - } - - .disabledFinish { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 30px; - color: white; - font-weight: 600; - font-size: 14px; - border: none; - - margin-left: 10px; - } - - .sendHover:hover { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - color: white; - } - - .defaultSignBox { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - width: 180px; - height: 111px; - padding: 8px 20px; - color: white; - font-weight: 600; - font-size: 14px; - border: none; - border-radius: 2px; - margin-left: 10px; - } - - - .defaultBtn { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 26px; - - color: black; - font-weight: 500; - font-size: 14px; - border: 1px solid gray; - border-radius: 2px; - margin-left: 10px; - - } - - .backBtn { - background-color: white; - } - - .backBtn:hover { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - - } - - .defaultBtn:focus { - border: none; - outline: none; - } - - .downloadBtn { - 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(241 79 79); - border: none !important; - color: white !important; - } - - .downloadBtn:hover { - box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - - } - - .printBtn { - 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: #188ae2; - border: none !important; - color: white !important; - } - - .printBtn:hover { - box-shadow: 0 2px 4px rgba(23, 48, 137, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - - - } - - .certificateBtn { - 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: #08bc66; - border: none !important; - color: white !important; - text-decoration: none !important; - } - - .certificateBtn:hover { - box-shadow: 0 2px 4px rgba(15, 150, 87, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - - } - - .signerList { - overflow-y: scroll; - max-height: 180px; - - } - - .signerList::-webkit-scrollbar { - display: none; - /* for Chrome, Safari, and Opera */ - } - - .showScroll { - height: 100%; - overflow: scroll; - - } - - .showScroll::-webkit-scrollbar { - display: none; - /* for Chrome, Safari, and Opera */ - } - - .hideScroll { - height: 100%; - overflow: scroll; - } - - .signedStyle { - color: white; - padding: 5px; - font-family: sans-serif; - font-size: 15px !important; - } - - .userName { - font-size: 12px !important; - font-weight: bold !important; - color: #424242 !important; - width: 100px; - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; - } - - .useEmail { - font-size: 10px; - color: #424242; - font-weight: 500; - width: 100px; - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; - } - - .spanTagHead { - color: white !important; - font-size: 17px; - font-weight: 500; - } - - .pTagBody { - - font-size: 15px !important; - } - - .signTab { - cursor: pointer !important; - font-weight: 400 !important; - margin-left: 10px !important; - font-size: 15px !important; - } - - .draggable-button { - padding: 10px 20px; - background: #3498db; - color: #fff; - border: none; - cursor: grab; - transition: transform 0.2s; - } - - .draggable-button.dragging { - opacity: 0.5; - /* Reduce opacity while dragging */ - transform: scale(1.1); - /* Apply a scaling effect while dragging */ - } - - - .signatureContainer { - display: flex; - flex-direction: row; - justify-content: space-between; - background-color: #ebebeb; - /* max-height: 800px; */ - /* overflow: auto; */ - } - - .signatureHeader { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin-top: 5px; - } - - .signerComponent { - /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */ - width: 180px; - background-color: white; - height: 100%; - } - - .modalBody { - padding: 1rem !important; - padding-top: 2rem !important; - } - - .signLayoutContainer1 { - padding: 30px; - display: flex; - flex-direction: column; - align-items: center - } - - .signLayoutContainer2 { - display: none; - } - - .preBtn1 { - display: flex; - align-items: center; - } - - .preBtn2 { - display: none; - } - - .headerBtn2 { - display: none; - } - - .uploadImgLogo { - font-size: 50px; - } - - - - .DropdownMenuContent, - .DropdownMenuSubContent { - min-width: 130px; - background-color: #887abf; - border: none; - padding: 5px; - - animation-duration: 400ms; - animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); - will-change: transform, opacity; - z-index: 30 !important; - } - - .DropdownMenuContent[data-side='top'], - .DropdownMenuSubContent[data-side='top'] { - animation-name: slideDownAndFade; - } - - .DropdownMenuContent[data-side='right'], - .DropdownMenuSubContent[data-side='right'] { - animation-name: slideLeftAndFade; - } - - .DropdownMenuContent[data-side='bottom'], - .DropdownMenuSubContent[data-side='bottom'] { - animation-name: slideUpAndFade; - } - - .DropdownMenuContent[data-side='left'], - .DropdownMenuSubContent[data-side='left'] { - animation-name: slideRightAndFade; - } - - .DropdownMenuItem { - font-size: 13px; - line-height: 1; - color: black; - background-color: #887abf; - display: flex; - align-items: center; - height: 25px; - padding: 0 5px; - position: relative; - padding-left: 25px; - user-select: none; - outline: none; - border: none; - } - - .SelectTrigger { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 4px; - padding: 0 15px; - font-size: 13px; - line-height: 1; - height: 35px; - gap: 5px; - border: none; - background-color: #887abf; - color: black - } - - option { - overflow-y: scroll; - } - - .SelectTrigger:hover { - border: none; - outline: none; - } - - .SelectTrigger:focus { + + + .SelectTrigger:focus { + /* box-shadow: 0 0 0 2px black; */ + border: none; + outline: none; + } + .selectEmail:focus { /* box-shadow: 0 0 0 2px black; */ border: none; outline: none; } - - .SelectTrigger[data-placeholder] { - color: black; - } - - .SelectIcon { - color: Var(--violet-11); - } - - .SelectContent { - overflow: hidden; - background-color: white; - border-radius: 6px; - box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); - } - - .SelectViewport { - padding: 5px; - } - - .SelectItem { - font-size: 13px; - line-height: 1; - color: var(--violet-11); - border-radius: 3px; - display: flex; - align-items: center; - height: 25px; - padding: 0 35px 0 25px; - position: relative; - user-select: none; - z-index: 10 !important; - } - - .SelectItem[data-disabled] { - color: var(--mauve-8); - pointer-events: none; - } - - .SelectItem[data-highlighted] { - outline: none; - background-color: var(--violet-9); - color: var(--violet-1); - } - - .SelectLabel { - padding: 0 25px; - font-size: 12px; - line-height: 25px; - color: var(--mauve-11); - } - - .SelectSeparator { - height: 1px; - background-color: var(--violet-6); - margin: 5px; - } - - .SelectItemIndicator { - position: absolute; - left: 0; - width: 25px; - display: inline-flex; - align-items: center; - justify-content: center; - } - - .SelectScrollButton { - display: flex; - align-items: center; - justify-content: center; - height: 25px; - background-color: white; - color: var(--violet-11); - cursor: default; - } - - - - @media screen and (max-width:767px) { - - .showPages { - display: none; - } - - .signatureContainer { - display: flex; - flex-direction: column; - - } - - - .signerComponent { - display: none; - - } - - .preBtn1 { - display: none; - } - - .preBtn2 { - display: flex; - align-items: center; - justify-content: space-between; - background-color: #ebebeb; - padding: 5px 10px; - } - - #navbar { - overflow: hidden; - - z-index: 10; - } - - /* Navbar links */ - #navbar a { - float: left; - display: block; - color: #f2f2f2; - text-align: center; - padding: 14px; - text-decoration: none; - } - - #navbar a.active { - background-color: #4caf50; - color: white; - } - - /* Page content */ - .content { - padding: 16px; - } - - /* The sticky class is added to the navbar - with JS when it reaches its scroll position */ - .stickyHead { - position: fixed; - top: 50px; - left: 0.9rem; - - } - - .stickyfooter { - position: fixed; - bottom: 0px; - right: 0rem; - } - - /* Add some top padding to the page content - to prevent sudden quick movement (as the - navigation bar gets a new position at the top of the - page (position:fixed and top:0) */ - .stickyHead+.content { - padding-top: 60px; - } - - - .signLayoutContainer2 { - display: flex; - flex-direction: row; - justify-content: space-around; - margin-top: 5px; - padding: 2px 5px 10px 5px; - position: sticky; - align-items: center; - - } - - .headerBtn { - display: none; - } - - .headerBtn2 { - display: flex; - flex-direction: column; - justify-content: space-between; - - margin-top: 5px; - } - - .mobileHead { - display: flex; - } - } - - @media screen and (max-width:487px) and (min-width:351px) { - .signatureCanvas { - - width: 300px; - height: 120px; - } - - .penContainer { - width: 300px; - } - - .uploadImgLogo { - font-size: 30px; - } - - .hidePdf { - display: none; - } - - .mobileHead { - display: flex; - } - - } - - @media screen and (max-width:350px) and (min-width:311px) { - .signatureCanvas { - - width: 280px; - height: 112px; - } - - .penContainer { - width: 280px; - } - - .hidePdf { - display: none; - } - - .signTab { - - font-weight: 500 !important; - - font-size: 10px !important; - } - - .uploadImgLogo { - font-size: 25px; - } - - .uploadImg { - - font-size: 10px !important; - } - - .mobileHead { - display: flex; - } - } - - @media screen and (max-width:310px) { - .signatureCanvas { - - width: 230px; - height: 92px; - } - - .penContainer { - width: 230px; - } - - .hidePdf { - display: none; - } - - .signTab { - - font-weight: 500 !important; - - font-size: 10px !important; - } - - .uploadImgLogo { - font-size: 20px; - } - - .uploadImg { - - font-size: 10px !important; - } - - .mobileHead { - display: flex; - } - } \ No newline at end of file + + .SelectTrigger[data-placeholder] { + color: black; + } + + .SelectIcon { + color: Var(--violet-11); + } + + .SelectContent { + overflow: hidden; + background-color: white; + border-radius: 6px; + box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); + } + + .SelectViewport { + padding: 5px; + } + + .SelectItem { + font-size: 13px; + line-height: 1; + color: var(--violet-11); + border-radius: 3px; + display: flex; + align-items: center; + height: 25px; + padding: 0 35px 0 25px; + position: relative; + user-select: none; + z-index: 10 !important; + } + + .SelectItem[data-disabled] { + color: var(--mauve-8); + pointer-events: none; + } + + .SelectItem[data-highlighted] { + outline: none; + background-color: var(--violet-9); + color: var(--violet-1); + } + + .SelectLabel { + padding: 0 25px; + font-size: 12px; + line-height: 25px; + color: var(--mauve-11); + } + + .SelectSeparator { + height: 1px; + background-color: var(--violet-6); + margin: 5px; + } + + .SelectItemIndicator { + position: absolute; + left: 0; + width: 25px; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .SelectScrollButton { + display: flex; + align-items: center; + justify-content: center; + height: 25px; + background-color: white; + color: var(--violet-11); + cursor: default; + } + + + + @media screen and (max-width:766px) { + + .showPages { + display: none; + } + + .signatureContainer { + display: flex; + flex-direction: column; + + } + + + .signerComponent { + display: none; + + } + + .preBtn1 { + display: none; + } + + .preBtn2 { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #ebebeb; + padding: 5px 10px; + } + + #navbar { + overflow: hidden; + + z-index: 10; + } + + /* Navbar links */ + #navbar a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px; + text-decoration: none; + } + + #navbar a.active { + background-color: #4caf50; + color: white; + } + + /* Page content */ + .content { + padding: 16px; + } + + /* The sticky class is added to the navbar + with JS when it reaches its scroll position */ + .stickyHead { + position: fixed; + top: 50px; + left: 0.9rem; + + } + + .stickyfooter { + position: fixed; + bottom: 0px; + right: 0rem; + } + + /* Add some top padding to the page content + to prevent sudden quick movement (as the + navigation bar gets a new position at the top of the + page (position:fixed and top:0) */ + .stickyHead+.content { + padding-top: 60px; + } + + + .signLayoutContainer2 { + display: flex; + flex-direction: row; + justify-content: space-around; + margin-top: 5px; + padding: 2px 5px 10px 5px; + position: sticky; + align-items: center; + + } + + .headerBtn { + display: none; + } + + .headerBtn2 { + display: flex; + flex-direction: column; + justify-content: space-between; + + margin-top: 5px; + } + + .mobileHead { + display: flex; + } + } + + @media screen and (max-width:487px) and (min-width:351px) { + .signatureCanvas { + + width: 300px; + height: 120px; + } + + .penContainer { + width: 300px; + } + + .uploadImgLogo { + font-size: 30px; + } + + .hidePdf { + display: none; + } + + .mobileHead { + display: flex; + } + + } + + @media screen and (max-width:350px) and (min-width:311px) { + .signatureCanvas { + + width: 280px; + height: 112px; + } + + .penContainer { + width: 280px; + } + + .hidePdf { + display: none; + } + + .signTab { + + font-weight: 500 !important; + + font-size: 10px !important; + } + + .uploadImgLogo { + font-size: 25px; + } + + .uploadImg { + + font-size: 10px !important; + } + + .mobileHead { + display: flex; + } + } + + @media screen and (max-width:310px) { + .signatureCanvas { + + width: 230px; + height: 92px; + } + + .penContainer { + width: 230px; + } + + .hidePdf { + display: none; + } + + .signTab { + + font-weight: 500 !important; + + font-size: 10px !important; + } + + .uploadImgLogo { + font-size: 20px; + } + + .uploadImg { + + font-size: 10px !important; + } + + .mobileHead { + display: flex; + } + } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index c011fc0ec..138b22e62 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -62,6 +62,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { let newWidth, nweHeight; const aspectRatio = imgWH.width / imgWH.height; const getXYdata = xyPostion[index].pos; + if (aspectRatio === 1) { newWidth = aspectRatio * 100; nweHeight = aspectRatio * 100; @@ -78,13 +79,15 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { newWidth = aspectRatio * 10; nweHeight = 10; } - const getPosData = getXYdata; - const addSign = getPosData.map((url, ind) => { + + let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey); + + const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: newWidth, - Height: nweHeight, + Width: getPosData[0].Width ? getPosData[0].Width : 150, + Height: getPosData[0].Height ? getPosData[0].Height : 60, SignUrl: image.src, ImageType: image.imgType }; @@ -103,8 +106,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { } else { const getXYdata = xyPostion[index].pos; - const getPosData = getXYdata; - + let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey); const aspectRatio = imgWH.width / imgWH.height; let newWidth, newHeight; @@ -125,12 +127,12 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { newHeight = 10; } - const addSign = getPosData.map((url, ind) => { + const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: newWidth, - Height: newHeight, + Width: getPosData[0].Width ? getPosData[0].Width : 150, + Height: getPosData[0].Height ? getPosData[0].Height : 60, SignUrl: image.src, ImageType: image.imgType }; @@ -151,15 +153,10 @@ 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) { - // const updateFilter = xyPostion[index].pos.filter( - // (data) => data.key === signKey && data.SignUrl - // ); - let getXYdata = xyPostion[index].pos; - let getPosData = getXYdata; - // if (updateFilter.length > 0) { - // updateFilter[0].SignUrl = signatureImg; - const addSign = getPosData.map((url, ind) => { + let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey); + + const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, @@ -178,27 +175,6 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) { return obj; }); return newUpdateUrl; - // } else { - // const addSign = getPosData.map((url, ind) => { - // if (url.key === signKey) { - // return { - // ...url, - // SignUrl: signatureImg, - // Width: getPosData[0].Width ? getPosData[0].Width : 150, - // Height: getPosData[0].Height ? getPosData[0].Height : 60 - // }; - // } - // return url; - // }); - - // const newUpdateUrl = xyPostion.map((obj, ind) => { - // if (ind === index) { - // return { ...obj, pos: addSign }; - // } - // return obj; - // }); - // return newUpdateUrl; - // } } //function for getting contract_User details @@ -278,5 +254,3 @@ export const contactBookName = async (objectId, className) => { }); return result; }; - -