+
+
+
+
+
+
+ handleMenuItemClick("Rename", data)}
+ className="ContextMenuItem"
+ >
+
+ Rename
+
+
+
+
+
+ ) : data.Type === "AIDoc" ? (
+
+ ![no img]()
handleOnclikFolder(data)}
+ src={folder}
+ width={100}
+ height={103}
+ />
+ {rename === data.objectId ? (
+ {
+ inputRef.current.setSelectionRange(0, 0);
+ const input = inputRef.current;
+ if (input) {
+ input.select();
+ }
+ }}
+ autoFocus={true}
+ type="text"
+ onBlur={() => handledRenameDoc(data)}
+ onKeyDown={(e) => handleEnterPress(e, data)}
+ ref={inputRef}
+ defaultValue={renameValue}
+ // value={renameValue}
+ onChange={(e) => setRenameValue(e.target.value)}
+ style={{
+ width: "100px",
+ border: "1.5px solid black",
+ borderRadius: "2px",
+ fontSize: "10px"
+ }}
+ />
+ ) : (
+ {data.Name}
+ )}
+
+
+
+
+
+
+
+
+ handleMenuItemClick("Rename", data)}
+ className="ContextMenuItem"
+ >
+
+ Rename
+
+
+
+
+
+ ) : (
+
+ ![no img]()
handleDraftDoc(data)}
+ src={draftDoc}
+ width={100}
+ height={103}
+ />
+ {rename === data.objectId ? (
+ {
+ inputRef.current.setSelectionRange(0, 0);
+ const input = inputRef.current;
+ if (input) {
+ input.select();
+ }
+ }}
+ autoFocus={true}
+ type="text"
+ onBlur={() => handledRenameDoc(data)}
+ onKeyDown={(e) => handleEnterPress(e, data)}
+ ref={inputRef}
+ defaultValue={renameValue}
+ // value={renameValue}
+ onChange={(e) => setRenameValue(e.target.value)}
+ style={{
+ width: "100px",
+ border: "1.5px solid black",
+ borderRadius: "2px",
+ fontSize: "10px"
+ }}
+ />
+ ) : (
+ {data.Name}
+ )}
+
+
+
+
+
+ {contextMenu.map((menu, ind) => {
+ return (
+ handleMenuItemClick(menu.type, data)}
+ className="ContextMenuItem"
+ >
+
+ {menu.type}
+
+ );
+ })}
+
+
+
+
+
+
+ 
checkPdfStatus(data)}
+ />
+ {rename === data.objectId ? (
+ {
+ inputRef.current.setSelectionRange(0, 0);
+ const input = inputRef.current;
+ if (input) {
+ input.select();
+ }
+ }}
+ onBlur={() => handledRenameDoc(data)}
+ onKeyDown={(e) => handleEnterPress(e, data)}
+ ref={inputRef}
+ defaultValue={renameValue}
+ // value={renameValue}
+ onChange={(e) => setRenameValue(e.target.value)}
+ style={{
+ width: "100px",
+ border: "1.5px solid black",
+ borderRadius: "2px",
+ fontSize: "10px"
+ }}
+ />
+ ) : (
+ {data.Name}
+ )}
+
+ {status === "Completed" ? (
+
+
+
+
+
+ ) : status === "Declined" ? (
+
+
+
+ ) : status === "Expired" ? (
+
+
+
+ ) : status === "Draft" ? (
+
+
+
+ ) : (
+ status === "In Progress" && (
+
+
+
+ )
+ )}
+ + Status: + {status} +
+ Created Date: + {createddate} +
+ {signerExist && ( + <> + Signers: + {/* kjefjjnejkfnkbjs bbfjkdsbjbfjkbjk kscbjkbjkb */} + {signersName()} + + )} + +
+
+
+
+
+ ) : (
+ | Name | +Created Date | +Type | +Status | +Action | +
|---|
+ {pdfData.map((data, ind) => {
+ return (
+
+ )}
+ {isOpenMoveModal && (
+
+ {handleFolderData(data, ind, "list")}
+
+ );
+ })}
+
+
+ Are you sure you want to delete this document?
+ + + + + +
+
+ );
+}
+
+export default DefaultSignature;
diff --git a/apps/OpenSign/src/components/pdf/DraftDocument.js b/apps/OpenSign/src/components/pdf/DraftDocument.js
new file mode 100644
index 000000000..6decadf5b
--- /dev/null
+++ b/apps/OpenSign/src/components/pdf/DraftDocument.js
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import Loader from "./Loader";
+import { contractDocument } from "../../constant/Utils";
+import HandleError from "../../primitives/HandleError";
+function DraftDocument() {
+ const navigate = useNavigate();
+ const [isLoading, setIsLoading] = useState({
+ isLoader: true,
+ message: "This might take some time"
+ });
+
+ const rowLevel =
+ localStorage.getItem("rowlevel") &&
+ JSON.parse(localStorage.getItem("rowlevel"));
+ const docId =
+ rowLevel && rowLevel?.id
+ ? rowLevel.id
+ : rowLevel?.objectId && rowLevel.objectId;
+
+ useEffect(() => {
+ getDocumentDetails();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ //get document details
+ const getDocumentDetails = async () => {
+ //getting document details
+ const documentData = await contractDocument(docId);
+ if (documentData && documentData.length > 0) {
+ handleDraftDoc(documentData);
+ } else if (
+ documentData === "Error: Something went wrong!" ||
+ (documentData.result && documentData.result.error)
+ ) {
+ setIsLoading({
+ isLoader: false,
+ message: "Error: Something went wrong!"
+ });
+ } else {
+ setIsLoading({
+ isLoader: false,
+ message: "No data found!"
+ });
+ }
+ };
+
+ //check document type and render on signyour self and placeholder route
+ const handleDraftDoc = (documentData) => {
+ const data = documentData[0];
+ const signerExist = data.Signers && data.Signers;
+ const isDecline = data.IsDeclined && data.IsDeclined;
+ const isPlaceholder = data.Placeholders && data.Placeholders;
+ const signedUrl = data.SignedUrl;
+ //checking if document has completed and request signature flow
+ if (data?.IsCompleted && signerExist?.length > 0) {
+ navigate(`/pdfRequestFiles/${data.objectId}`);
+ }
+ //checking if document has completed and signyour-self flow
+ else if (!signerExist && !isPlaceholder) {
+ navigate(`/signaturePdf/${data.objectId}`);
+ }
+ //checking if document has declined by someone
+ else if (isDecline) {
+ navigate(`/pdfRequestFiles/${data.objectId}`);
+ //checking draft type document
+ } else if (
+ signerExist?.length > 0 &&
+ isPlaceholder?.length > 0 &&
+ !signedUrl
+ ) {
+ navigate(`/placeHolderSign/${data.objectId}`);
+ }
+ //Inprogress document
+ else if (isPlaceholder?.length > 0 && signerExist?.length > 0) {
+ navigate(`/pdfRequestFiles/${data.objectId}`);
+ } //placeholder draft document
+ else if (
+ (signerExist?.length > 0 &&
+ (!isPlaceholder || isPlaceholder?.length === 0)) ||
+ ((!signerExist || signerExist?.length === 0) && isPlaceholder?.length > 0)
+ ) {
+ navigate(`/placeHolderSign/${data.objectId}`);
+ }
+ };
+
+ return (
+
+ Signature
+
+
+ <>
+
+ Your Signature
+
+ 
+
+
+
+
+ {isLoading.isLoader ? (
+
+ );
+}
+
+export default DraftDocument;
diff --git a/apps/OpenSign/src/components/pdf/DragElement.js b/apps/OpenSign/src/components/pdf/DragElement.js
new file mode 100644
index 000000000..e8bcfed52
--- /dev/null
+++ b/apps/OpenSign/src/components/pdf/DragElement.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { getWidgetType, widgets } from "../../constant/Utils";
+
+function DragElement(item) {
+ const getWidgets = widgets;
+ const filterWidgetPreview = getWidgets.filter(
+ (data) => data.type === item?.text
+ );
+
+ return {getWidgetType(filterWidgetPreview[0])}
;
+}
+
+export default DragElement;
diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
new file mode 100644
index 000000000..d9d7a7a6b
--- /dev/null
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
@@ -0,0 +1,374 @@
+import React, { useEffect, useState } from "react";
+import { themeColor } from "../../constant/const";
+import ModalUi from "../../primitives/ModalUi";
+function DropdownWidgetOption(props) {
+ const [dropdownOptionList, setDropdownOptionList] = useState([
+ "option-1",
+ "option-2"
+ ]);
+ const [minCount, setMinCount] = useState(0);
+ const [maxCount, setMaxCount] = useState(0);
+ const [dropdownName, setDropdownName] = useState(props.type);
+ const [isReadOnly, setIsReadOnly] = useState(false);
+ const [status, setStatus] = useState("required");
+ const [defaultValue, setDefaultValue] = useState("");
+ const statusArr = ["required", "optional"];
+ const [defaultCheckbox, setDefaultCheckbox] = useState([]);
+
+ useEffect(() => {
+ if (
+ props.currWidgetsDetails?.options?.name &&
+ props.currWidgetsDetails?.options?.values
+ ) {
+ setDropdownName(props.currWidgetsDetails?.options?.name);
+ setDropdownOptionList(props.currWidgetsDetails?.options?.values);
+ setMinCount(
+ props.currWidgetsDetails?.options?.validation?.minRequiredCount
+ );
+ setMaxCount(
+ props.currWidgetsDetails?.options?.validation?.maxRequiredCount
+ );
+ setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
+ setStatus(props.currWidgetsDetails?.options?.status || "required");
+ setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
+ setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
+ } else {
+ setStatus("required");
+ }
+ }, [props.currWidgetsDetails]);
+ const handleInputChange = (index, value) => {
+ setDropdownOptionList((prevInputs) => {
+ const newInputs = [...prevInputs];
+ newInputs[index] = value;
+ return newInputs;
+ });
+ };
+
+ const handleAddInput = () => {
+ const flage = true;
+ setDropdownOptionList((prevInputs) => [...prevInputs, ""]);
+ props.handleSaveWidgetsOptions(null, null, null, null, null, flage, false);
+ };
+
+ const handleDeleteInput = (ind) => {
+ const flage = true;
+ const getUpdatedOptions = dropdownOptionList.filter(
+ (data, index) => index !== ind
+ );
+ setDropdownOptionList(getUpdatedOptions);
+ props.handleSaveWidgetsOptions(null, null, null, null, null, false, flage);
+ };
+
+ const handleSaveOption = () => {
+ const defaultData =
+ defaultCheckbox && defaultCheckbox.length > 0
+ ? defaultCheckbox
+ : defaultValue;
+
+ props.handleSaveWidgetsOptions(
+ dropdownName,
+ dropdownOptionList,
+ minCount,
+ maxCount,
+ isReadOnly,
+ null,
+ null,
+ status,
+ defaultData
+ );
+ props.setShowDropdown(false);
+ setDropdownOptionList(["option-1", "option-2"]);
+ setDropdownName(props.type);
+ props.setCurrWidgetsDetails({});
+ setIsReadOnly(false);
+ setMinCount(0);
+ setMaxCount(0);
+ setDefaultCheckbox([]);
+ setDefaultValue("");
+ };
+
+ const handleSetMinMax = (e) => {
+ const minValue = e.target.value;
+ if (minValue > dropdownOptionList.length) {
+ return "";
+ } else {
+ return minValue;
+ }
+ };
+
+ const handleDefaultCheck = (index) => {
+ const getDefaultCheck = defaultCheckbox.includes(index);
+ if (getDefaultCheck) {
+ return true;
+ } else {
+ return false;
+ }
+ };
+
+ return (
+ //props.showDropdown
+
+
+
+
+
+ );
+};
+
+export default EditTemplate;
diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js
new file mode 100644
index 000000000..c9e5983b6
--- /dev/null
+++ b/apps/OpenSign/src/components/pdf/EmailComponent.js
@@ -0,0 +1,430 @@
+import React, { useState } from "react";
+import { saveAs } from "file-saver";
+import celebration from "../../assets/images/newCeleb.gif";
+import axios from "axios";
+import { getBase64FromUrl } from "../../constant/Utils";
+import { themeColor } from "../../constant/const";
+import printModule from "print-js";
+import loader from "../../assets/images/loader2.gif";
+
+function EmailComponent({
+ isEmail,
+ pdfUrl,
+ isCeleb,
+ setIsEmail,
+ setSuccessEmail,
+ pdfName,
+ sender,
+ setIsAlert
+}) {
+ const [emailList, setEmailList] = useState([]);
+ const [emailValue, setEmailValue] = useState();
+ const [isLoading, setIsLoading] = useState(false);
+ //function for send email
+ const sendEmail = async () => {
+ setIsLoading(true);
+ let sendMail;
+ for (let i = 0; i < emailList.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",
+ "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+ sessionToken: localStorage.getItem("accesstoken")
+ };
+ const openSignUrl = "https://www.opensignlabs.com/contact-us";
+ const themeBGcolor = themeColor;
+ let params = {
+ pdfName: pdfName,
+ url: pdfUrl,
+ recipient: emailList[i],
+ subject: `${sender.name} has signed the doc - ${pdfName}`,
+ from: sender.email,
+ html:
+ "
+
+
+ Document Copy
A copy of the document " + + pdfName + + " is attached to this email. Kindly download the document from the attachment.
This is an automated email from OpenSign™. 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 OpenSign™ here
+ {/* isEmail */}
+ {isEmail && (
+
+ );
+}
+
+export default EmailComponent;
diff --git a/apps/OpenSign/src/components/pdf/Header.js b/apps/OpenSign/src/components/pdf/Header.js
new file mode 100644
index 000000000..626671581
--- /dev/null
+++ b/apps/OpenSign/src/components/pdf/Header.js
@@ -0,0 +1,762 @@
+import React from "react";
+import PrevNext from "./PrevNext";
+import { PDFDownloadLink } from "@react-pdf/renderer";
+import Certificate from "./Certificate";
+import printModule from "print-js";
+import { getBase64FromUrl } from "../../constant/Utils";
+import { saveAs } from "file-saver";
+import "../../styles/signature.css";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { useNavigate } from "react-router-dom";
+import { themeColor } from "../../constant/const";
+
+function Header({
+ isPdfRequestFiles,
+ isPlaceholder,
+ recipient,
+ setIsDecline,
+ pageNumber,
+ isAlreadySign,
+ allPages,
+ changePage,
+ pdfUrl,
+ documentStatus,
+ embedWidgetsData,
+ pdfDetails,
+ signerPos,
+ signersdata,
+ isMailSend,
+ alertSendEmail,
+ isCompleted,
+ isShowHeader,
+ decline,
+ currentSigner,
+ dataTut4,
+ alreadySign,
+ isSignYourself,
+ setIsEmail,
+ completeBtnTitle,
+ setIsEditTemplate
+}) {
+ const filterPrefill =
+ signerPos && signerPos?.filter((data) => data.Role !== "prefill");
+ const isMobile = window.innerWidth < 767;
+ const navigate = useNavigate();
+ const isGuestSigner = localStorage.getItem("isGuestSigner");
+ //for go to previous page
+ function previousPage() {
+ changePage(-1);
+ }
+ //for go to next page
+ function nextPage() {
+ changePage(1);
+ }
+ //function for show decline alert
+ const handleDeclinePdfAlert = async () => {
+ const currentDecline = {
+ currnt: "Sure",
+ isDeclined: true
+ };
+ setIsDecline(currentDecline);
+ };
+
+ //function for print digital sign pdf
+ const handleToPrint = async (event) => {
+ event.preventDefault();
+
+ const pdf = await getBase64FromUrl(pdfUrl);
+ const isAndroidDevice = navigator.userAgent.match(/Android/i);
+ const isAppleDevice =
+ (/iPad|iPhone|iPod/.test(navigator.platform) ||
+ (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
+ !window.MSStream;
+ if (isAndroidDevice || isAppleDevice) {
+ const byteArray = Uint8Array.from(
+ atob(pdf)
+ .split("")
+ .map((char) => char.charCodeAt(0))
+ );
+ const blob = new Blob([byteArray], { type: "application/pdf" });
+ const blobUrl = URL.createObjectURL(blob);
+ window.open(blobUrl, "_blank");
+ } else {
+ printModule({ printable: pdf, type: "pdf", base64: true });
+ }
+ };
+
+ //handle download signed pdf
+ const handleDownloadPdf = () => {
+ const pdfName = pdfDetails[0] && pdfDetails[0].Name;
+ saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+ };
+
+ const sanitizeFileName = (pdfName) => {
+ // Replace spaces with underscore
+ return pdfName.replace(/ /g, "_");
+ };
+ //certificate generate and download component in mobile view
+ const CertificateDropDown = () => {
+ //after generate download certifcate pdf
+ const handleDownload = (pdfBlob, fileName) => {
+ if (pdfBlob) {
+ const url = window.URL.createObjectURL(pdfBlob);
+ // Create a temporary anchor element
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = fileName;
+ // Append the anchor to the body
+ document.body.appendChild(link);
+ // Programmatically click the anchor to trigger the download
+ link.click();
+ // Remove the anchor from the body
+ document.body.removeChild(link);
+ // Release the object URL to free up resources
+ window.URL.revokeObjectURL(url);
+ }
+ };
+
+ return (
+
+
+ )}
+
+ {isLoading && (
+
+
+ 
+
+ This might take some time
+
+
+ )}
+
+ Successfully signed!
+
+
+
+
+ {!isAndroid && (
+
+ )}
+
+
+
+
+ {isCeleb && (
+
+
+ 
+
+ )}
+ + Recipients added here will get a copy of the signed document. +
+ {emailList.length > 0 ? ( + <> +
+
+
+ ) : (
+
+ {emailList.map((data, ind) => {
+ return (
+
+ {emailList.length <= 9 && (
+ {
+ if (emailValue) {
+ handleEnterPress("add");
+ }
+ }}
+ required
+ />
+ )}
+
+
+ {data}
+
+ removeChip(ind)}
+ >
+
+
+
+ );
+ })}
+
+ {
+ if (emailValue) {
+ handleEnterPress("add");
+ }
+ }}
+ required
+ />
+
+ )}
+ {
+ if (emailValue) {
+ handleEnterPress("add");
+ }
+ }}
+ >
+
+
+
+
+ Note:
+
+ {" "}
+ You can only send to ten recipients at a time.
+
+
+
+
+
+
+
+ Certificate
+
+ ) : (
+
+ handleDownload(
+ blob,
+ `completion certificate-${
+ pdfDetails[0] && pdfDetails[0].Name
+ }.pdf`
+ )
+ }
+ >
+
+ Certificate
+
+ )}
+
+ )}
+
+ {isMobile && isShowHeader ? (
+
+ ) : (
+
+ );
+}
+
+export default Header;
diff --git a/apps/OpenSign/src/components/pdf/Loader.js b/apps/OpenSign/src/components/pdf/Loader.js
new file mode 100644
index 000000000..a1c3bed1e
--- /dev/null
+++ b/apps/OpenSign/src/components/pdf/Loader.js
@@ -0,0 +1,27 @@
+import React from "react";
+import loader from "../../assets/images/loader2.gif";
+
+function Loader({ isLoading }) {
+ return (
+
+
+ )}
+
+ {pdfDetails[0] && pdfDetails.length > 0 && (
+
+ ) : (
+
+
+
+
+
+ )
+ ) : isPlaceholder ? (
+ <>
+ {!isMailSend &&
+ signersdata.length > 0 &&
+ signersdata.length !== filterPrefill.length && (
+
+ {filterPrefill.length === 0 ? (
+
+ Add {signersdata.length - filterPrefill.length}{" "}
+ recipients signature
+
+ ) : (
+
+ Add {signersdata.length - filterPrefill.length} more
+ recipients signature
+
+ )}
+
+ )}
+
+
+ {setIsEditTemplate && (
+
+ )}
+
+
+
+
+
+ ) : isPdfRequestFiles ? (
+ alreadySign ? (
+
+ {isCompleted.isCertificate &&
+ ) : (
+
+
+ {currentSigner && (
+ <>
+
+
+
+ )}
+
+ )
+ ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
+
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+ {isLoading.message}
+
+
+ );
+}
+
+export default Loader;
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
new file mode 100644
index 000000000..cae1c79f3
--- /dev/null
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -0,0 +1,624 @@
+import React, { useState, useEffect } from "react";
+import BorderResize from "./BorderResize";
+import PlaceholderBorder from "./PlaceholderBorder";
+import { Rnd } from "react-rnd";
+import { defaultWidthHeight, isMobile } from "../../constant/Utils";
+import PlaceholderType from "./PlaceholderType";
+import moment from "moment";
+import "../../styles/opensigndrive.css";
+
+function Placeholder(props) {
+ const [isDraggingEnabled, setDraggingEnabled] = useState(true);
+ const [isShowDateFormat, setIsShowDateFormat] = useState(false);
+ const [selectDate, setSelectDate] = useState({
+ date: moment(new Date().getTime()).format("MM/DD/YYYY"),
+ format: "MM/dd/YYYY"
+ });
+ const [dateFormat, setDateFormat] = useState([]);
+ const [saveDateFormat, setSaveDateFormat] = useState("");
+ const dateFormatArr = [
+ "L",
+ "DD-MM-YYYY",
+ "YYYY-MM-DD",
+ "MM.DD.YYYY",
+ "MM-DD-YYYY",
+ "MMM DD, YYYY",
+ "LL",
+ "DD MMM, YYYY",
+ "DD MMMM, YYYY"
+ ];
+
+ const selectFormat = (data) => {
+ switch (data) {
+ case "L":
+ return "MM/dd/yyyy";
+ case "DD-MM-YYYY":
+ return "dd-MM-yyyy";
+ case "DD/MM/YYYY":
+ return "dd/MM/yyyy";
+ case "LL":
+ return "MMMM dd, yyyy";
+ case "DD MMM, YYYY":
+ return "dd MMM, YYYY";
+ case "YYYY-MM-DD":
+ return "YYYY-MM-dd";
+ case "MM-DD-YYYY":
+ return "MM-dd-YYYY";
+ case "MM.DD.YYYY":
+ return "MM.dd.YYYY";
+ case "MMM DD, YYYY":
+ return "MMM dd, YYYY";
+ case "DD MMMM, YYYY":
+ return "dd MMMM, YYYY";
+ default:
+ return "dd/MM/yyyy";
+ }
+ };
+
+ //function for add selected date and format in selectFormat
+ const changeDateFormat = () => {
+ const updateDate = [];
+ dateFormatArr.map((data) => {
+ let date;
+ if (selectDate.format === "dd-MM-yyyy") {
+ const [day, month, year] = selectDate.date.split("-");
+ date = new Date(`${year}-${month}-${day}`);
+ } else {
+ date = new Date(selectDate?.date);
+ }
+ const milliseconds = date.getTime();
+ const newDate = moment(milliseconds).format(data);
+ const dateObj = {
+ date: newDate,
+ format: selectFormat(data)
+ };
+ updateDate.push(dateObj);
+ });
+ setDateFormat(updateDate);
+ };
+ useEffect(() => {
+ if (props.isPlaceholder || props.isSignYourself) {
+ selectDate && changeDateFormat();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectDate]);
+ //handle to close drop down menu onclick screen
+ useEffect(() => {
+ const closeMenuOnOutsideClick = (e) => {
+ if (isShowDateFormat && !e.target.closest("#menu-container")) {
+ setIsShowDateFormat(!isShowDateFormat);
+ }
+ };
+ document.addEventListener("click", closeMenuOnOutsideClick);
+ return () => {
+ // Cleanup the event listener when the component unmounts
+ document.removeEventListener("click", closeMenuOnOutsideClick);
+ };
+ }, [isShowDateFormat]);
+
+ //onclick placeholder function to open signature pad
+ const handlePlaceholderClick = () => {
+ if (props.setSelectWidgetId) {
+ props.setSelectWidgetId(props.pos.key);
+ }
+
+ const widgetTypeExist = [
+ "text",
+ "checkbox",
+ "name",
+ "company",
+ "job title",
+ "date",
+ "email"
+ ].includes(props.pos.type);
+
+ if (widgetTypeExist) {
+ setDraggingEnabled(false);
+ }
+ if ((props.isNeedSign || props.isSignYourself) && !props.isDragging) {
+ if (props.pos.type) {
+ if (
+ props.pos.type === "signature" ||
+ props.pos.type === "stamp" ||
+ props.pos.type === "image"
+ ) {
+ props.setIsSignPad(true);
+ props.setSignKey(props.pos.key);
+ props.setIsStamp(props.pos.isStamp);
+ } else if (props.pos.type === "initials") {
+ props.setIsSignPad(true);
+ props.setSignKey(props.pos.key);
+ props.setIsStamp(props.pos.isStamp);
+ props.setIsInitial(true);
+ }
+ } else {
+ props.setIsSignPad(true);
+ props.setSignKey(props.pos.key);
+ props.setIsStamp(props.pos?.isStamp ? props.pos.isStamp : false);
+ }
+ } else if (
+ props.isPlaceholder &&
+ !props.isDragging &&
+ props.pos.type !== "label"
+ ) {
+ if (props.pos.key === props.selectWidgetId) {
+ props.handleLinkUser(props.data.Id);
+ props.setUniqueId(props.data.Id);
+ }
+ } else if (!props.pos.type) {
+ if (
+ !props.pos.type &&
+ props.isNeedSign &&
+ props.data.signerObjId === props.signerObjId
+ ) {
+ props.setIsSignPad(true);
+ props.setSignKey(props.pos.key);
+ props.setIsStamp(props.pos.isStamp);
+ } else if (
+ (props.isNeedSign && props.pos.type === "signature") ||
+ props.pos.type === "stamp"
+ ) {
+ props.setIsSignPad(true);
+ props.setSignKey(props.pos.key);
+ props.setIsStamp(props.pos.isStamp);
+ } else if (props.isNeedSign && props.pos.type === "dropdown") {
+ props.setSignKey(props.pos.key);
+ }
+ }
+ };
+
+ const handleWidgetsOnclick = () => {
+ if (props.pos.type === "radio") {
+ props.setIsRadio(true);
+ } else if (props.pos.type === "dropdown") {
+ props?.setShowDropdown(true);
+ } else if (props.pos.type === "checkbox") {
+ props?.setIsCheckbox(true);
+ } else {
+ props?.handleNameModal(true);
+ }
+
+ if (props.isPlaceholder) {
+ props.setUniqueId(props.data.Id);
+ }
+ props.setSignKey(props.pos.key);
+ props.setWidgetType(props.pos.type);
+ props.setCurrWidgetsDetails(props.pos);
+ };
+ const PlaceholderIcon = () => {
+ return (
+ props.isShowBorder && (
+ <>
+ {(props.isPlaceholder || props.isSignYourself) && (
+ <>
+ {props.pos.type === "checkbox" && props.isSignYourself ? (
+ {
+ e.stopPropagation();
+ handleWidgetsOnclick();
+ }}
+ onTouchEnd={(e) => {
+ e.stopPropagation();
+ handleWidgetsOnclick();
+ }}
+ className="fa-solid fa-gear settingIcon"
+ style={{
+ color: "#188ae2",
+ right: "9px",
+ top: "-28px"
+ }}
+ >
+ ) : (
+ props.pos.type !== "date" &&
+ props.pos.type !== "label" &&
+ props.pos.type !== "signature" &&
+ !props.isSignYourself && (
+ {
+ e.stopPropagation();
+ handleWidgetsOnclick();
+ }}
+ onTouchEnd={(e) => {
+ e.stopPropagation();
+ handleWidgetsOnclick();
+ }}
+ className="fa-solid fa-gear settingIcon"
+ style={{
+ color: "#188ae2",
+ right: ["checkbox", "radio"].includes(props.pos.type)
+ ? "24px"
+ : "47px",
+ top: ["checkbox", "radio"].includes(props.pos.type)
+ ? "-28px"
+ : "-19px"
+ }}
+ >
+ )
+ )}
+
+ {props.pos.type !== "label" && !props.isSignYourself && (
+ {
+ 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" ||
+ props.pos.type === "radio"
+ ? "8px"
+ : "32px",
+ top:
+ props.pos.type === "checkbox" ||
+ props.pos.type === "radio"
+ ? "-28px"
+ : "-18px"
+ }}
+ >
+ )}
+
+ )}
+ {props.pos.type === "date" && selectDate && (
+
+ )}
+ {
+ if (props.data) {
+ props.setSignerObjId(props.data.signerObjId);
+ props.setUniqueId(props.data.Id);
+ }
+ e.stopPropagation();
+ props.setIsPageCopy(true);
+ props.setSignKey(props.pos.key);
+ }}
+ onTouchEnd={(e) => {
+ if (props.data) {
+ props.setSignerObjId(props.data.signerObjId);
+ props.setUniqueId(props.data.Id);
+ }
+ e.stopPropagation();
+ props.setIsPageCopy(true);
+ props.setSignKey(props.pos.key);
+ }}
+ style={{
+ color: "#188ae2",
+ right:
+ props.pos.type === "checkbox" || props.pos.type === "radio"
+ ? "-9px"
+ : "12px",
+ top:
+ props.pos.type === "checkbox" || props.pos.type === "radio"
+ ? "-28px"
+ : "-18px"
+ }}
+ >
+ {
+ e.stopPropagation();
+
+ if (props.data) {
+ props.handleDeleteSign(props.pos.key, props.data.Id);
+ } else {
+ props.handleDeleteSign(props.pos.key);
+ props.setIsStamp(false);
+ }
+ }}
+ onTouchEnd={(e) => {
+ e.stopPropagation();
+ if (props.data) {
+ props.handleDeleteSign(props.pos.key, props.data?.Id);
+ } else {
+ props.handleDeleteSign(props.pos.key);
+ props.setIsStamp(false);
+ }
+ }}
+ style={{
+ color: "#188ae2",
+ right:
+ props.pos.type === "checkbox" || props.pos.type === "radio"
+ ? "-27px"
+ : "-8px",
+ top:
+ props.pos.type === "checkbox" || props.pos.type === "radio"
+ ? "-28px"
+ : "-18px"
+ }}
+ >
+
+ )
+ );
+ };
+
+ return (
+ {
+ !props.isNeedSign && props.setWidgetType(props.pos.type);
+ props.isNeedSign && props.data?.signerObjId === props.signerObjId
+ ? handlePlaceholderClick()
+ : props.isPlaceholder
+ ? handlePlaceholderClick()
+ : props.isSignYourself && handlePlaceholderClick();
+ }}
+ >
+ {props.pos.key === props.selectWidgetId &&
+ ) : (
+ <>
+ {props.pos.key === props.selectWidgetId &&
+ {copyType.map((data, key) => {
+ return (
+
+
+
+
+ );
+ })}
+
+
+
+
+
+ {dateValue(value)}
+
+
+ ));
+ ExampleCustomInput.displayName = "ExampleCustomInput";
+
+ useEffect(() => {
+ if (props.pos?.type) {
+ const senderUser = localStorage.getItem(`Extand_Class`);
+ const jsonSender = JSON.parse(senderUser);
+
+ if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
+ onChangeInput(
+ jsonSender && jsonSender[0],
+ null,
+ props.xyPostion,
+ null,
+ props.setXyPostion,
+ props.data.Id,
+ true
+ );
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [type]);
+
+ const calculateFontSize = () => {
+ const fontSize = 10 + Math.min(props.pos.Width, props.pos.Height) * 0.1;
+ const size = fontSize ? fontSize : 12;
+ return size + "px";
+ };
+ //function for show checked checkbox
+ const selectCheckbox = (ind) => {
+ const res = props.pos.options?.response;
+ const defaultCheck = props.pos.options?.defaultValue;
+ if (res && res?.length > 0) {
+ const isSelectIndex = res.indexOf(ind);
+ if (isSelectIndex > -1) {
+ return true;
+ } else {
+ return false;
+ }
+ // }
+ } else if (defaultCheck) {
+ const isSelectIndex = defaultCheck.indexOf(ind);
+ if (isSelectIndex > -1) {
+ return true;
+ } else {
+ return false;
+ }
+ } else {
+ return false;
+ }
+ };
+
+ const handleRadioCheck = (data) => {
+ const defaultData = props.pos.options?.defaultValue;
+ if (textValue === data) {
+ return true;
+ } else if (defaultData === data) {
+ return true;
+ } else {
+ return false;
+ }
+ };
+
+ //function for set checked and unchecked value of checkbox
+ const handleCheckboxValue = (isChecked, ind) => {
+ let updateSelectedCheckbox = [],
+ checkedList;
+ let isDefaultValue, isDefaultEmpty;
+ if (props.pos?.type && ["checkbox", "radio"].includes(props.pos.type)) {
+ updateSelectedCheckbox = selectedCheckbox;
+ if (isChecked) {
+ updateSelectedCheckbox.push(ind);
+ setSelectedCheckbox(updateSelectedCheckbox);
+ } else {
+ checkedList = selectedCheckbox.filter((data) => data !== ind);
+ setSelectedCheckbox(checkedList);
+ }
+ if (props.isNeedSign) {
+ isDefaultValue = props.pos.options?.defaultValue;
+ }
+ if (isDefaultValue && isDefaultValue.length > 0) {
+ isDefaultEmpty = true;
+ }
+ onChangeInput(
+ checkedList ? checkedList : updateSelectedCheckbox,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data.Id,
+ false,
+ null,
+ null,
+ null,
+ isDefaultEmpty
+ );
+ }
+ };
+
+ //function to handle select radio widget and set value seletced by user
+ const handleCheckRadio = (isChecked, data) => {
+ let isDefaultValue, isDefaultEmpty;
+ if (props.isNeedSign) {
+ isDefaultValue = props.pos.options?.defaultValue;
+ }
+ if (isDefaultValue) {
+ isDefaultEmpty = true;
+ }
+ if (isChecked) {
+ setTextValue(data);
+ } else {
+ setTextValue("");
+ }
+ onChangeInput(
+ textValue,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data.Id,
+ false,
+ null,
+ null,
+ null,
+ isDefaultEmpty
+ );
+ };
+ switch (props.pos.type) {
+ case "signature":
+ return props.pos.SignUrl ? (
+
+ {props?.handleUserName &&
+ props?.handleUserName(
+ props?.data?.Id,
+ props?.data?.Role,
+ props?.pos?.type
+ )}
+
+ );
+ case "stamp":
+ return props.pos.SignUrl ? (
+
+ {props?.handleUserName &&
+ props?.handleUserName(
+ props?.data?.Id,
+ props?.data?.Role,
+ props?.pos?.type
+ )}
+
+ );
+ case "checkbox":
+ return (
+
+ {props.pos.options?.values?.map((data, ind) => {
+ return (
+ {
+ if (e.target.checked && !props.isPlaceholder) {
+ const maxRequired =
+ props.pos.options?.validation?.maxRequiredCount;
+ const maxCountInt = maxRequired && parseInt(maxRequired);
+ if (maxCountInt > 0) {
+ if (selectedCheckbox.length <= maxCountInt - 1) {
+ handleCheckboxValue(e.target.checked, ind);
+ }
+ } else {
+ handleCheckboxValue(e.target.checked, ind);
+ }
+ } else {
+ handleCheckboxValue(e.target.checked, ind);
+ }
+ }}
+ />
+ );
+ })}
+
+ );
+ case "text":
+ return props.isSignYourself ||
+ (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
+ {
+ setTextValue(e.target.value);
+ onChangeInput(
+ e.target.value,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data?.Id,
+ false
+ );
+ }}
+ />
+ ) : (
+
+ {props.pos.type}
+
+ );
+ case "dropdown":
+ return props.data?.signerObjId === props.signerObjId ? (
+
+ ) : (
+
+ {props.pos?.options?.name ? props.pos.options.name : props.pos.type}
+
+ );
+ case "initials":
+ return props.pos.SignUrl ? (
+
+ {props?.handleUserName &&
+ props?.handleUserName(
+ props?.data?.Id,
+ props?.data?.Role,
+ props?.pos?.type
+ )}
+
+ );
+ case "name":
+ return props.isSignYourself ||
+ (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
+ {
+ handleTextValid(e);
+ onChangeInput(
+ e.target.value,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data?.Id,
+ false
+ );
+ }}
+ />
+ ) : (
+
+ {props.pos.type}
+
+ );
+ case "company":
+ return props.isSignYourself ||
+ (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
+ {
+ handleTextValid(e);
+ onChangeInput(
+ e.target.value,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data?.Id,
+ false
+ );
+ }}
+ />
+ ) : (
+
+ {props.pos.type}
+
+ );
+ case "job title":
+ return props.isSignYourself ||
+ (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
+ {
+ handleTextValid(e);
+ onChangeInput(
+ e.target.value,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data?.Id,
+ false
+ );
+ }}
+ />
+ ) : (
+
+ {props.pos.type}
+
+ );
+ case "date":
+ return (
+
+ {
+ setStartDate(date);
+ }}
+ popperPlacement="top-end"
+ customInput={
+ );
+ case "image":
+ return props.pos.SignUrl ? (
+
+ {props?.handleUserName &&
+ props?.handleUserName(
+ props?.data?.Id,
+ props?.data?.Role,
+ props?.pos?.type
+ )}
+
+ );
+ case "email":
+ return props.isSignYourself ||
+ (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
+ {
+ handleTextValid(e);
+ onChangeInput(
+ e.target.value,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data?.Id,
+ false
+ );
+ }}
+ />
+ ) : (
+
+ {props.pos.type}
+
+ );
+ case "radio":
+ return (
+
+ {props.pos.options?.values.map((data, ind) => {
+ return (
+ {
+ if (!props.isPlaceholder) {
+ handleCheckRadio(e.target.checked, data);
+ }
+ }}
+ />
+ );
+ })}
+
+ );
+ case "label":
+ return (
+