diff --git a/microfrontends/SignDocuments/src/Component/ManageSign.js b/microfrontends/SignDocuments/src/Component/ManageSign.js index 9351de9cf..fdb8d2d25 100644 --- a/microfrontends/SignDocuments/src/Component/ManageSign.js +++ b/microfrontends/SignDocuments/src/Component/ManageSign.js @@ -493,7 +493,7 @@ const ManageSign = () => { justifyContent: "space-between" // width: 460, }} - className="penContainer" + className="penContainerDefault" >
{!image && ( @@ -611,7 +611,7 @@ const ManageSign = () => { flexDirection: "row", justifyContent: "space-between" }} - className="penContainer" + className="penContainerInitial" >
{!isInitials && ( diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 6a6d4ad6f..0bda6af84 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -296,23 +296,55 @@ function PdfRequestFiles() { (data) => data.signerObjId === signerObjectId ); if (checkUser && checkUser.length > 0) { - let checkSigned = 0; + let checkWidgetSign = 0; let allXyPos = 0; + let checkedRequireCount = 0; + let optionalCheckbox = 0; + let CheckboxRequireCount = 0; for (let i = 0; i < checkUser[0].placeHolder.length; i++) { const posSignUrlData = checkUser[0].placeHolder[i].pos.filter( - (pos) => pos.SignUrl + (pos) => pos?.SignUrl ); const posWidgetData = checkUser[0].placeHolder[i].pos.filter( - (pos) => pos.widgetValue + (pos) => pos?.widgetValue && pos?.type !== "checkbox" ); - - checkSigned = - checkSigned + posSignUrlData.length + posWidgetData.length; + const checkboxReadOnly = checkUser[0].placeHolder[i].pos.filter( + (pos) => + pos?.widgetValue && + pos?.type === "checkbox" && + pos?.widgetStatus === "Read only" + ).length; + const checkboxRequire = checkUser[0].placeHolder[i].pos.filter( + (pos) => pos?.type === "checkbox" && pos?.widgetStatus === "Required" + ); + CheckboxRequireCount = CheckboxRequireCount + checkboxRequire?.length; + checkedRequireCount = + checkedRequireCount + + checkUser[0].placeHolder[i].pos?.filter( + (pos) => + pos?.widgetValue && + pos?.type === "checkbox" && + pos?.widgetStatus === "Required" + )?.length; + optionalCheckbox = checkUser[0].placeHolder[i].pos.filter( + (pos) => pos.type === "checkbox" && pos.widgetStatus === "Optional" + ).length; + checkWidgetSign = + checkWidgetSign + + posSignUrlData.length + + posWidgetData.length + + checkboxReadOnly + + checkedRequireCount + + optionalCheckbox; allXyPos = allXyPos + checkUser[0].placeHolder[i].pos.length; } - - if (allXyPos !== checkSigned) { + if (CheckboxRequireCount !== checkedRequireCount) { + setIsAlert({ + isShow: true, + alertMessage: "Please check the required checkbox to continue." + }); + } else if (allXyPos !== checkWidgetSign) { setIsAlert({ isShow: true, alertMessage: "Please complete your signature!" @@ -450,6 +482,7 @@ function PdfRequestFiles() { }); }; + console.log("signerpos", signerPos); //function for save button to save signature or image url const saveSign = (isDefaultSign, width, height) => { const isTypeText = width && height ? true : false; diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index cfa96706f..2ed4007ab 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -518,7 +518,6 @@ function SignYourSelf() { //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); - setIsSignPad(false); setIsEmail(true); setXyPostion([]); diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index 81c5267a6..8178272ea 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -77,23 +77,50 @@ function Placeholder(props) { props.isShowBorder && ( <> {props.isPlaceholder && ( - { - e.stopPropagation(); - props.handleLinkUser(props.data.Id); - props.setUniqueId(props.data.Id); - }} - onTouchEnd={(e) => { - e.stopPropagation(); - props.handleLinkUser(props.data.Id); - props.setUniqueId(props.data.Id); - }} - style={{ - color: "#188ae2" - }} - > + <> + {props.pos.type === "checkbox" && ( + { + e.stopPropagation(); + props.setIsCheckboxRequired(true); + props.setSignKey(props.pos.key); + props.setUniqueId(props.data.Id); + }} + onTouchEnd={(e) => { + e.stopPropagation(); + props.setIsCheckboxRequired(true); + props.setSignKey(props.pos.key); + props.setUniqueId(props.data.Id); + }} + class="fa-solid fa-gear settingIcon" + style={{ + color: "#188ae2", + right: "23px", + top: "-35px" + }} + > + )} + + { + e.stopPropagation(); + props.handleLinkUser(props.data.Id); + props.setUniqueId(props.data.Id); + }} + onTouchEnd={(e) => { + e.stopPropagation(); + props.handleLinkUser(props.data.Id); + props.setUniqueId(props.data.Id); + }} + style={{ + color: "#188ae2", + right: props.pos.type === "checkbox" ? "6px" : "32px", + top: props.pos.type === "checkbox" ? "-35px" : "-18px" + }} + > + )} @@ -243,7 +286,12 @@ function Placeholder(props) { }} > {props.isShowBorder ? ( - + ) : props.data && props.isNeedSign ? ( props.data?.signerObjId === props.signerObjId ? ( @@ -258,6 +306,7 @@ function Placeholder(props) { )} {isMobile ? ( diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js index 143ba17d8..554ca6793 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js @@ -3,8 +3,14 @@ import { themeColor } from "../../utils/ThemeColor/backColor"; import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils"; function PlaceholderBorder(props) { const getResizeBorderExtraWidth = resizeBorderExtraWidth(); - const defaultWidth = defaultWidthHeight(props.pos.type).width; - const defaultHeight = defaultWidthHeight(props.pos.type).height; + const defaultWidth = + props.pos.type === "checkbox" && props.isPlaceholder + ? 50 + : defaultWidthHeight(props.pos.type).width; + const defaultHeight = + props.pos.type === "checkbox" && props.isPlaceholder + ? 50 + : defaultWidthHeight(props.pos.type).height; return (
); @@ -1224,6 +1228,9 @@ function RenderPdf({ posWidth={posWidth} posHeight={posHeight} isDragging={isDragging} + setIsCheckboxRequired={ + setIsCheckboxRequired + } /> ); diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 6e59d2423..2ea336e36 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -84,7 +84,8 @@ function PlaceHolderSign() { const [isDontShow, setIsDontShow] = useState(false); const [isDragging, setIsDragging] = useState(false); const [showDropdown, setShowDropdown] = useState(false); - + const [isCheckboxRequired, setIsCheckboxRequired] = useState(false); + const [selectRequiredType, setSelectRequiredType] = useState("Optional"); const color = [ "#93a3db", "#e6c3db", @@ -99,6 +100,7 @@ function PlaceHolderSign() { "#66ccff", "#ffffcc" ]; + const checkboxType = ["Optional", "Required", "Read only"]; const isMobile = window.innerWidth < 767; const [{ isOver }, drop] = useDrop({ accept: "BOX", @@ -349,7 +351,8 @@ function PlaceHolderSign() { isMobile: isMobile, yBottom: window.innerHeight / 2 - 60, zIndex: posZIndex, - type: monitor.type + type: monitor.type, + widgetValue: monitor.type === "checkbox" ? false : "" }; dropData.push(dropObj); placeHolder = { @@ -378,7 +381,8 @@ function PlaceHolderSign() { scale: scale, isMobile: isMobile, zIndex: posZIndex, - type: item.text + type: item.text, + widgetValue: item.text === "checkbox" ? false : "" }; dropData.push(dropObj); @@ -450,6 +454,9 @@ function PlaceHolderSign() { if (item.text === "dropdown" || monitor.type === "dropdown") { setShowDropdown(true); setSignKey(key); + } else if (item.text === "checkbox" || monitor.type === "checkbox") { + setIsCheckboxRequired(true); + setSignKey(key); } } } @@ -659,7 +666,7 @@ function PlaceHolderSign() { setIsSendAlert({}); let sendMail; - // console.log("pdfDetails", pdfDetails); + const expireDate = pdfDetails?.[0].ExpiryDate.iso; const newDate = new Date(expireDate); const localExpireDate = newDate.toLocaleDateString("en-US", { @@ -982,7 +989,6 @@ function PlaceHolderSign() { setCurrentId(getCurrentUserDeatils[0].Email); } } - // console.log("updateSigner ", updateSigner); setSignersData(updateSigner); const index = signersdata.findIndex((x) => x.Id === uniqueId); @@ -993,6 +999,59 @@ function PlaceHolderSign() { const closePopup = () => { setIsAddUser({}); }; + //function for add checkbox widget status in signerPos array + + const handleApplycheckbox = () => { + const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); + if (filterSignerPos.length > 0) { + const getPlaceHolder = filterSignerPos[0].placeHolder; + + const getPageNumer = getPlaceHolder.filter( + (data) => data.pageNumber === pageNumber + ); + + if (getPageNumer.length > 0) { + const getXYdata = getPageNumer[0].pos; + + const getPosData = getXYdata; + const addSignPos = getPosData.map((position, ind) => { + if (position.key === signKey) { + if (selectRequiredType === "Read only") { + return { + ...position, + widgetStatus: selectRequiredType, + widgetValue: true + }; + } else { + return { + ...position, + widgetStatus: selectRequiredType + }; + } + } + return position; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.Id === uniqueId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); + setIsCheckboxRequired(false); + setSelectRequiredType("Optional"); + } + } + }; + return ( <> @@ -1191,6 +1250,57 @@ function PlaceHolderSign() { </button> </div> </ModalUi> + {/* checkbox widget status component */} + <ModalUi isOpen={isCheckboxRequired} title={"Checkbox"}> + <div style={{ height: "100%", padding: 20 }}> + {checkboxType.map((data, key) => { + return ( + <div + key={key} + style={{ display: "flex", flexDirection: "column" }} + > + <label + key={key} + style={{ fontSize: "16px", fontWeight: "500" }} + > + <input + style={{ accentColor: "red", marginRight: "10px" }} + type="radio" + value={data} + onChange={() => setSelectRequiredType(data)} + checked={selectRequiredType === data} + /> + + {data} + </label> + </div> + ); + })} + + <div + style={{ + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginTop: "15px", + marginBottom: "15px" + }} + ></div> + <button + onClick={() => { + handleApplycheckbox(); + }} + style={{ + background: themeColor() + }} + type="button" + // disabled={!selectCopyType} + className="finishBtn" + > + Apply + </button> + </div> + </ModalUi> <PlaceholderCopy isPageCopy={isPageCopy} setIsPageCopy={setIsPageCopy} @@ -1252,6 +1362,7 @@ function PlaceHolderSign() { setUniqueId={setUniqueId} isDragging={isDragging} setShowDropdown={setShowDropdown} + setIsCheckboxRequired={setIsCheckboxRequired} /> )} </div> diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 9aff7f38e..36ec891c5 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -94,7 +94,6 @@ width: 460px; height: 184px; } - .intialSignatureCanvas { border: 2px solid #888; background-color: rgb(255, 255, 255); @@ -105,12 +104,16 @@ .intialSignature { border: 2px solid #888; background-color: rgb(255, 255, 255); - width: 180px; - height: 180px; + width: 183px; + height: 183px; } -.penContainer { - width: 180px; +.penContainerDefault { + width: 460px; +} + +.penContainerInitial { + width: 183px; } .borderResize { @@ -278,8 +281,7 @@ .signCloseBtn { position: absolute; - right: -8px; - top: -18px; + font-size: 14px; cursor: pointer; z-index: 2; @@ -288,8 +290,7 @@ .signCopy { position: absolute; - right: 12px; - top: -18px; + font-size: 13px; cursor: pointer; z-index: 2; @@ -298,8 +299,16 @@ .signUserIcon { position: absolute; - right: 32px; - top: -18px; + + font-size: 13px; + cursor: pointer; + z-index: 2; + background: white; +} + +.settingIcon { + position: absolute; + font-size: 13px; cursor: pointer; z-index: 2; @@ -923,7 +932,7 @@ option { height: 120px; } - .penContainer { + .penContainerDefault { width: 300px; } @@ -955,7 +964,7 @@ option { height: 112px; } - .penContainer { + .penContainerDefault { width: 280px; } @@ -991,7 +1000,7 @@ option { height: 92px; } - .penContainer { + .penContainerDefault { width: 230px; } diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 8f7864216..d8b5a979c 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -364,6 +364,7 @@ export const defaultWidthHeight = (type) => { export const resizeBorderExtraWidth = () => { return 20; }; + export async function getBase64FromUrl(url) { const data = await fetch(url); const blob = await data.blob(); @@ -440,7 +441,7 @@ export function getHostUrl() { export const calculateImgAspectRatio = (imgWH, pos) => { let newWidth, newHeight; - const placeholderHeight = pos && pos.Width ? pos.Height : 60; + const placeholderHeight = pos && pos.Height ? pos.Height : 60; const aspectRatio = imgWH.width / imgWH.height; newWidth = aspectRatio * placeholderHeight; newHeight = placeholderHeight; @@ -451,6 +452,7 @@ export const calculateImgAspectRatio = (imgWH, pos) => { //function for upload stamp or image export function onSaveImage(xyPostion, index, signKey, imgWH, image) { let getIMGWH; + //get current page position const getXYData = xyPostion[index].pos; const updateXYData = getXYData.map((position) => { @@ -901,7 +903,8 @@ export const multiSignEmbed = async ( if ( imgData.type === "signature" || imgData.type === "stamp" || - imgData.type === "initials" + imgData.type === "initials" || + imgData.type === "image" ) { if ( (imgData.ImageType && imgData.ImageType === "image/png") || @@ -996,14 +999,20 @@ export const multiSignEmbed = async ( width: scaleWidth, height: scaleHeight }); - checkBox.check(); + if (imgData.widgetValue) { + checkBox.check(); + } else { + checkBox.uncheck(); + } + checkBox.enableReadOnly(); } else if ( imgData.type === "text" || imgData.type === "name" || imgData.type === "company" || imgData.type === "job title" || - imgData.type === "date" + imgData.type === "date" || + imgData.type === "email" ) { const font = await pdfDoc.embedFont("Helvetica"); const fontSize = 12;