BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Remove Auto Save, Change in atrributes Tags, MultiSign Change

This commit is contained in:
=bhagwanSingh 2025-08-12 16:20:16 +05:30
parent 4de7c2540e
commit 6986947cba
8 changed files with 667 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/components/client/SignDocument.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from "react"; import { useEffect, useLayoutEffect, useState } from "react";
import axios from "axios" import axios from "axios"
import { RootState } from "../../store/store"; import { RootState } from "../../store/store";
@ -26,6 +26,8 @@ import typeToIconMap from "../../helper/iconMap";
import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer"; import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer";
import SignCompletionScreen from "./SignCompletionScreen"; import SignCompletionScreen from "./SignCompletionScreen";
import api from "../../config/api"; import api from "../../config/api";
import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
import { RiDragMoveFill } from "react-icons/ri";
@ -139,12 +141,6 @@ const fitObj = [
const SignDocument = () => { const SignDocument = () => {
useEffect(() => {
axios.get("https://concrete-gladly-mullet.ngrok-free.app/api/sign/session?recipientId=103&sessionId=iqlo2inofsqaqib8mcos4njssj").then((res) => {
console.log(res, "RESPONSE")
})
}, [])
const { recipientId } = useParams(); const { recipientId } = useParams();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -234,6 +230,8 @@ const SignDocument = () => {
}, [droppedItems]) }, [droppedItems])
console.log(droppedItems, "{droppedItems[selectedTag.key][selectedTag.index]}")
useEffect(() => { useEffect(() => {
if (recSignStatus === "COMPLETED") { if (recSignStatus === "COMPLETED") {
// setHideTags(true); // setHideTags(true);
@ -686,6 +684,7 @@ const SignDocument = () => {
// } // }
if (prepData.type.toLowerCase() === TagsTypes.SIGNATURE || prepData.type.toLowerCase() === TagsTypes.INITIALS) { if (prepData.type.toLowerCase() === TagsTypes.SIGNATURE || prepData.type.toLowerCase() === TagsTypes.INITIALS) {
const currDocTags = droppedItems.filter((val) => val.pageIndex === prepData.pageIndex) const currDocTags = droppedItems.filter((val) => val.pageIndex === prepData.pageIndex)
setSignConfObj({ setSignConfObj({
...signConfObj, ...signConfObj,
@ -1012,7 +1011,6 @@ const SignDocument = () => {
doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => { doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
const key = `${doc.documentId}_${page.index}`; const key = `${doc.documentId}_${page.index}`;
// const tagJsonData = [...droppedItems]; // const tagJsonData = [...droppedItems];
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index) const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
return ( return (
<div <div
@ -1033,10 +1031,14 @@ const SignDocument = () => {
<div <div
tabIndex={1} tabIndex={1}
onFocus={() => setFocusElement({ ...item, focusElementIndx: index })} onFocus={() => {
setSelectedTag({ key, index })
setFocusElement({ ...item, focusElementIndx: index })
}
}
key={item.id} key={item.id}
// draggable="false" // draggable="false"
onPointerDown={(e) => handleTagMouseDown(e, key, index)} // onPointerDown={(e) => handleTagMouseDown(e, key, index)}
className="absolute rounded dropped-item text-sm" className="absolute rounded dropped-item text-sm"
// onClick={() => handleTagClick(key, index)} // onClick={() => handleTagClick(key, index)}
style={{ style={{
@ -1048,6 +1050,15 @@ const SignDocument = () => {
// display: `${hideTags ? 'none' : 'block'}` // display: `${hideTags ? 'none' : 'block'}`
}} }}
> >
{provideTags && !transparentTags && !hideTags &&<div
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
// className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-blue-600 rounded-tr cursor-move z-30"
title="Drag"
>
<RiDragMoveFill
className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-slate-100 text-[var(--primary)] cursor-move z-30"
/>
</div>}
<> <>
{selectedTag?.key && selectedTag.key === key && selectedTag.index === index && {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
@ -1088,7 +1099,7 @@ const SignDocument = () => {
</input> */} </input> */}
{ {
item.subType === "SINGLE_LINE" && <p !item.multiLine && <p
// name={item.id} // name={item.id}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
@ -1103,7 +1114,7 @@ const SignDocument = () => {
></p> ></p>
} }
{ {
item.subType === "PARAGRAPH" && <p item.multiLine && <p
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(index, val as string);
@ -1114,7 +1125,7 @@ const SignDocument = () => {
</p> </p>
} }
{ {
item.subType === "PASSWORD" && item.mask && <p "maskType" in item && "maskCharacter" in item && item.maskType && <p
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(index, val as string);
@ -1122,13 +1133,13 @@ const SignDocument = () => {
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter") e.preventDefault(); if (e.key === "Enter") e.preventDefault();
}} }}
onFocus={() => { // onFocus={() => {
}} // }}
onBlur={(e) => { onBlur={(e) => {
let val = e.target.textContent; let val = e.target.textContent;
if (typeof item.mask?.maskType === "string" && typeof val === "string") { if (typeof item.maskType === "string" && typeof val === "string") {
val = val.replace(/ /g, ""); val = val.replace(/ /g, "");
e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter) e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
} }
}} }}
contentEditable={true} contentEditable={true}
@ -1139,6 +1150,125 @@ const SignDocument = () => {
} }
{/* TEXT FIELD - END */} {/* TEXT FIELD - END */}
{/* EMAIL FIELD - START */}
{
item.type === "EMAIL" &&
<div
id={item.id}
tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
>
{
<p
// name={item.id}
// style={{ height: item.dimensions.height + "px" }}
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
const val = e.currentTarget.textContent?.trim() || "";
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (val && !emailRegex.test(val)) {
alert("Please enter a valid email address");
handleTagUpdate(index, "" as string)
e.currentTarget.textContent = "";
e.currentTarget.focus(); // Optional: return focus if invalid
}
e.preventDefault()
};
}}
onBlur={(e) => {
const val = e.currentTarget.textContent?.trim() || "";
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (val && !emailRegex.test(val)) {
alert("Please enter a valid email address");
handleTagUpdate(index, "" as string)
e.currentTarget.textContent = "";
e.currentTarget.focus(); // Optional: return focus if invalid
}
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
</div>
}
{/* EMAIL FIELD - END */}
{/* NAME FIELD - START */}
{
item.type === "NAME" &&
<div
id={item.id}
tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
>
{
<p
// name={item.id}
// style={{ height: item.dimensions.height + "px" }}
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault()
};
}}
onBlur={(e) => {
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
</div>
}
{/* NAME FIELD - END */}
{/* COMPANY FIELD - START */}
{
item.type === "COMPANY" &&
<div
id={item.id}
tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
>
{
<p
// name={item.id}
// style={{ height: item.dimensions.height + "px" }}
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault()
};
}}
onBlur={(e) => {
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
</div>
}
{/* COMPANY FIELD - END */}
{/* CHECKBOX FIELD - START */} {/* CHECKBOX FIELD - START */}
{ {
@ -1368,12 +1498,12 @@ const SignDocument = () => {
{ {
(!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) && (!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
<> <>
<div {/* <div
className="absolute left-0 z-50 bg-blue-900 text-xs text-slate-100 px-2 py-[2px] rounded-sm whitespace-nowrap" className="absolute left-0 z-50 bg-blue-900 text-xs text-slate-100 px-2 py-[2px] rounded-sm whitespace-nowrap"
style={{ top: -23 + "px" }} style={{ top: -23 + "px" }}
> >
<p>{focusElement.label}</p> <p>{focusElement.label}</p>
</div> </div> */}
<div <div
className="absolute left-[-10px] z-50 flex max-w-max" className="absolute left-[-10px] z-50 flex max-w-max"
style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }} style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }}
@ -1384,7 +1514,7 @@ const SignDocument = () => {
</div> </div>
</> </>
} }
</div> </div >
</> </>
) )
}) })
@ -1433,11 +1563,27 @@ const SignDocument = () => {
</div> </div>
<div className={`col-span-2 ${provideTags ? "" : "order-first"}`}> <div className={`col-span-2 ${provideTags ? "" : "order-first"} overflow-y-auto`}>
<DocumentPages {/* <DocumentPages
selectedDocuments={selectedDocuments} selectedDocuments={selectedDocuments}
setDropDownTogglePage={setDropDownTogglePage} setDropDownTogglePage={setDropDownTogglePage}
dropDownTogglePage={dropDownTogglePage} /> dropDownTogglePage={dropDownTogglePage} /> */}
{provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag &&
<RightSideBar
droppedItems={droppedItems}
selectedTag={droppedItems[selectedTag.index]}
setDroppedItems={setDroppedItems}
selTagKey={selectedTag.key}
selTagIndx={selectedTag.index}
signClient={true}
/>}
</div> </div>
{/* Right Side - START */} {/* Right Side - START */}

6
src/components/home/StartSection.tsx
View File

@ -84,7 +84,7 @@ const StartSection = () => {
<section className="px-4 pt-2 pb-3 w-full"> <section className="px-4 pt-2 pb-3 w-full">
<h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2> <h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4 h-[12vw]">
<StartNow /> <StartNow />
@ -93,7 +93,7 @@ const StartSection = () => {
<div <div
onClick={() => handleStartSectionClick(card.link)} onClick={() => handleStartSectionClick(card.link)}
key={index} key={index}
className={`${card.bg} w-full max-h-max cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`} className={`${card.bg} w-full cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
> >
{/* Icon + Text */} {/* Icon + Text */}
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
@ -124,7 +124,7 @@ const StartSection = () => {
</div> </div>
<section className='pt-2 pb-3'> <section className='pt-2 pb-3'>
<h2 className="mt-3 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2> <h2 className="mt-6 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2>
<section> <section>
<TransactionDataTable /> <TransactionDataTable />
</section> </section>

468
src/components/process/processStepTwo/DocumentContainer.tsx
View File

@ -4,7 +4,7 @@ import { RootState } from '../../../store/store'
import api from '../../../config/api'; import api from '../../../config/api';
import RightSideBar from './rightSideBar/RightSideBar'; import RightSideBar, { MASKTYPE, TEXT } from './rightSideBar/RightSideBar';
import { DroppedItem, TagsTypes } from '../../../utlity/types'; import { DroppedItem, TagsTypes } from '../../../utlity/types';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
@ -89,141 +89,24 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
for (const tag of res.data) { for (const tag of res.data) {
const key = `${tag.documentId}_${tag.pageIndex}`; const key = `${tag.documentId}_${tag.pageIndex}`;
if (recTags[key]) { if (recTags[key]) {
recTags[key].push({ ...tag, update: false }); recTags[key].push(tag);
} else { } else {
recTags[key] = [{ ...tag, update: false }]; // Initialize with an array recTags[key] = [tag]; // Initialize with an array
}
}
}
// console.log(recTags, "Line 83");
setDroppedItems(recTags)
// Handle your response here
} catch (err) {
console.error(err);
}
};
// FETCHING TAG - START
useEffect(() => {
if (selectedRecipients.length === 0) return;
fetchTags();
}, [selectedRecipients]);
// FETCHING TAG - END
const [droppedItemsCounter, setDroppedItemsCounter] = useState<number>(1);
const [selectedTag, setSelectedTag] = useState<{ key: string, index: number } | null>(null);
// NAVIGATING to Dashboard if Transaction is not created - START
useLayoutEffect(() => {
if (transactionId) return;
navigate("/");
}, [transactionId])
// NAVIGATING to Dashboard if Transaction is not created - END
const groupByRecipientId = (tagsArray: any[]) => {
const tagsData: Record<number, any[]> = {};
for (const tag of tagsArray) {
const recipientId = tag.recipientId;
if (!tagsData[recipientId]) {
tagsData[recipientId] = [];
}
tagsData[recipientId].push(tag);
}
return tagsData;
};
const sendTagsToRecipients = async (
tagsData: Record<number, any[]>,
accountId: string,
transactionId: string
) => {
// tagsData = tagsData.filter((tag, indx) => (("update" in tag && tag.update) || !("id" in tag)) )
// Filter Tags that needs to update
const updatedData = {}
// debugger
for (const [recipientId, tags] of Object.entries(tagsData)) {
// console.log(recipientId, tags, "line 133")
const updateTags = []
for (const tag of tags) {
if ("update" in tag && tag.update) {
updateTags.push(tag)
}
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
delete updateTags[updateTags.length - 1].update
}
}
updatedData[recipientId] = updateTags
}
const requests = Object.entries(updatedData).filter(([recipientId, tags]) => {
if (tags.length === 0) return false;
return api.put(
`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
tags
);
});
try {
const response = await Promise.all(requests);
let recTags = droppedItems;
for (const res of response) {
for (const tag of res.data) {
const key = `${tag.documentId}_${tag.pageIndex}`;
if (recTags[key]) {
recTags[key].push({ ...tag, update: false });
} else {
recTags[key] = [{ ...tag, update: false }]; // Initialize with an array
} }
} }
} }
setSelectedTag(null);
// setTimeout(async () => {
// await fetchTags()
// setSelectedTag(null);
// }, 1000)
// console.log(droppedItemsUpdateFalse, "Line 182")
// setDroppedItems(droppedItemsUpdateFalse);
} catch (error) {
console.error("Error submitting recipient tags:", error);
}
};
const handleTransactionProcess = async (save: boolean = false) => {
console.log(droppedItems, "called Line 189");
if (Object.keys(droppedItems).length === 0) return;
if (!save && isSend === null) return;
!save && dispatch(showLoader("Loading ..."))
let updatedTags = { ...droppedItems }
// const sendTags = {
// "mod": [],
// "remove": []
// }
let updatedTags = { ...recTags }
let tagsData = [] let tagsData = []
// const modified = []
// const remove = []
// console.log(updatedTags, "updatedTags");
for (const dropPageIds of Object.keys(updatedTags)) { for (const dropPageIds of Object.keys(updatedTags)) {
for (const dropTag of updatedTags[dropPageIds]) { for (const dropTag of updatedTags[dropPageIds]) {
let mask = null let mask = null
@ -271,10 +154,15 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
"readOnly": false, "readOnly": false,
} }
if ("format" in dropTag) { // if ("format" in dropTag) {
updatedTagData.format = `${dropTag.subType}`.toUpperCase(); // updatedTagData.format = `${dropTag.subType}`.toUpperCase();
updatedTagData.dateFormat = dropTag.format; // updatedTagData.dateFormat = dropTag.format;
updatedTagData.currentTimeStamp = dropTag.currentTimeStamp // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// }
if("format" in dropTag && dropTag.format) {
updatedTagData.subType = dropTag.format.toLowerCase();
updatedTagData.format = dropTag.dateFormat;
} }
if (`${dropTag.type}`.toLowerCase() === "number") { if (`${dropTag.type}`.toLowerCase() === "number") {
@ -282,9 +170,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
updatedTagData.isCurrency = dropTag.isCurrency updatedTagData.isCurrency = dropTag.isCurrency
} }
if (updatedTagData.type === "TEXT") { if (dropTag.type === "TEXT") {
updatedTagData.multiLine = dropTag.subType === "paragraph" // updatedTagData.multiLine = dropTag.subType === "paragraph"
if (dropTag.subType === "password") {
if(dropTag.multiLine) {
updatedTagData.subtype = TEXT.PARAGRAPH
} else {
updatedTagData.subtype = TEXT.SINGLE_LINE
}
if ("maskType" in dropTag) {
updatedTagData.maskCharacter = mask.character updatedTagData.maskCharacter = mask.character
updatedTagData.maskType = mask.type updatedTagData.maskType = mask.type
} }
@ -306,16 +201,218 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
} }
} }
tagsData = groupByRecipientId(tagsData); setDroppedItems(recTags)
// Handle your response here
} catch (err) {
console.error(err);
}
};
// FETCHING TAG - START
useEffect(() => {
if (selectedRecipients.length === 0) return;
fetchTags();
}, [selectedRecipients]);
// FETCHING TAG - END
console.log("Hefre is the line 299", tagsData); const [droppedItemsCounter, setDroppedItemsCounter] = useState<number>(1);
const [selectedTag, setSelectedTag] = useState<{ key: string, index: number } | null>(null);
// NAVIGATING to Dashboard if Transaction is not created - START
useLayoutEffect(() => {
if (transactionId) return;
navigate("/");
}, [transactionId])
// NAVIGATING to Dashboard if Transaction is not created - END
const groupByRecipientId = (tagsArray: any[]) => {
const tagsData: Record<number, any[]> = {};
for (const tag of tagsArray) {
const recipientId = tag.recipientId;
if (!tagsData[recipientId]) {
tagsData[recipientId] = [];
}
tagsData[recipientId].push(tag);
}
return tagsData;
};
const sendTagsToRecipients = async (
tagsData: Record<number, any[]>,
accountId: string,
transactionId: string
) => {
// tagsData = tagsData.filter((tag, indx) => (("update" in tag && tag.update) || !("id" in tag)) )
// Filter Tags that needs to update
const updatedData = {}
// debugger
for (const [recipientId, tags] of Object.entries(tagsData)) {
// console.log(recipientId, tags, "line 133")
const updateTags = []
for (const tag of tags) {
if ("update" in tag && tag.update) {
updateTags.push(tag)
}
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
delete updateTags[updateTags.length - 1].update
}
}
updatedData[recipientId] = updateTags
}
const requests = Object.entries(updatedData).filter(([recipientId, tags]) => {
if (tags.length === 0) return false;
return api.put(
`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
tags
);
});
try {
const responses = await Promise.all(requests);
const droppedItemsUpdateFalse = Object.fromEntries(
Object.entries(droppedItems).map(([recipientId, tags]) => {
return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
})
)
console.log(droppedItemsUpdateFalse, "Line 182")
// setDroppedItems(droppedItemsUpdateFalse);
} catch (error) {
console.error("Error submitting recipient tags:", error);
}
};
const handleTransactionProcess = async (save: boolean = false) => {
if (Object.keys(droppedItems).length === 0) return;
if (!save && isSend === null) return;
// !save && dispatch(showLoader("Loading ..."))
// let updatedTags = { ...droppedItems }
// const sendTags = {
// "mod": [],
// "remove": []
// }
// let tagsData = []
// const modified = []
// const remove = []
// console.log(updatedTags, "updatedTags");
// for (const dropPageIds of Object.keys(updatedTags)) {
// for (const dropTag of updatedTags[dropPageIds]) {
// let mask = null
// // console.log(dropTag, "line 132")
// // if (dropTag.subType?.toLowerCase() === "password") {
// // console.log(dropTag)
// mask = {
// "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
// "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
// }
// // }
// // console.log(dropTag, "line 204")
// const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
// const updatedTagData = {
// "id": "id" in dropTag ? dropTag.id : null,
// "label": dropTag.label,
// "dimensions": dropTag.dimensions,
// "type": dropTag.type.toUpperCase(),
// // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
// "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
// "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
// "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
// "regex": "regex" in dropTag ? dropTag.regex : []
// // }
// ,
// "documentId": dropTag.documentId,
// "options": ("options" in dropTag) ? dropTag.options : [],
// "pageIndex": dropTag.pageIndex,
// "recipientId": dropTag.recipientId,
// "styles": "styles" in dropTag ? dropTag.styles : {
// "font": "",
// "italic": false,
// "bold": false,
// "underline": false,
// "color": "black",
// "textSize": 0
// },
// "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
// // "required": "required" in dropTag ? dropTag.required : ,
// "update": "update" in dropTag ? dropTag.update : false,
// "readOnly": false,
// }
// if ("format" in dropTag) {
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// updatedTagData.dateFormat = dropTag.format;
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// }
// if (`${dropTag.type}`.toLowerCase() === "number") {
// updatedTagData.decimalPlace = dropTag.decimalPlace
// updatedTagData.isCurrency = dropTag.isCurrency
// }
// if (updatedTagData.type === "TEXT") {
// updatedTagData.multiLine = dropTag.subType === "paragraph"
// if (dropTag.subType === "password") {
// updatedTagData.maskCharacter = mask.character
// updatedTagData.maskType = mask.type
// }
// }
// // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
// if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
// if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
// if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
// if (!updatedTagData.id) delete updatedTagData.id;
// if (!isDeleted) {
// // sendTags.mod.push(updatedTagData);
// tagsData.push(updatedTagData)
// }
// }
// }
let updatedTags : any = [];
for (const dropPagesId of Object.keys(droppedItems)) {
console.log("Dropped Item:", droppedItems[dropPagesId]);
updatedTags.push(...droppedItems[dropPagesId]);
}
console.log(updatedTags, "updatedTags")
let tagsData = groupByRecipientId(updatedTags);
await sendTagsToRecipients(tagsData, accountId, transactionId); await sendTagsToRecipients(tagsData, accountId, transactionId);
// if (save) { // if (save) {
// setSelectedTag(null); // if (selectedRecipients.length === 0) return;
// await fetchTags(); // fetchTags();
// setSelectedTag(null)
// } // }
// SENDING Transaction - START // SENDING Transaction - START
@ -339,7 +436,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
const interval = setInterval(async () => { const interval = setInterval(async () => {
// debugger // debugger
setTransactionSaving(true) setTransactionSaving(true)
handleTransactionProcess(true); // handleTransactionProcess(true);
}, 8000) }, 8000)
// }, 8000) // }, 8000)
return () => clearInterval(interval); return () => clearInterval(interval);
@ -382,11 +479,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />; // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
let prepData = { let prepData = {
properties: data.properties, ...data.properties,
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />, icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
type: dragElemData.label, type: dragElemData.label,
label: dragElemData.label, label: dragElemData.label,
subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '', // subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
dimensions: { dimensions: {
left: x, left: x,
top: y, top: y,
@ -952,85 +1049,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
return () => clearTimeout(timeoutId); return () => clearTimeout(timeoutId);
}, [droppedItems]); // Re-run when droppedItems changes }, [droppedItems]); // Re-run when droppedItems changes
const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
if (!selectedTag) return;
const { key, index } = selectedTag;
const currentItem = droppedItems[key]?.[index];
if (!currentItem) return;
let newLeft = currentItem.dimensions.left;
let newTop = currentItem.dimensions.top;
switch (direction) {
case 'up':
newTop = Math.max(0, newTop - stepSize);
break;
case 'down':
newTop = newTop + stepSize;
break;
case 'left':
newLeft = Math.max(0, newLeft - stepSize);
break;
case 'right':
newLeft = newLeft + stepSize;
break;
}
setDroppedItems({
...droppedItems,
[key]: Array.isArray(droppedItems[key])
? droppedItems[key].map((item, i) =>
i === index
? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
: item
)
: [],
});
};
const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
handleDirectionalMove(direction, 5); // Use default stepSize of 5
};
// Add this new handler function to your parent component
const handleDirectPositionChange = (newLeft: number, newTop: number) => {
console.log("handleDirectPositionChange", newLeft, newTop)
if (!selectedTag) return;
const { key, index } = selectedTag;
const currentItem = droppedItems[key]?.[index];
if (!currentItem) return;
// Ensure values are not negative
const clampedLeft = Math.max(0, newLeft);
const clampedTop = Math.max(0, newTop);
setDroppedItems({
...droppedItems,
[key]: Array.isArray(droppedItems[key])
? droppedItems[key].map((item, i) =>
i === index
? {
...item,
dimensions: {
...item.dimensions,
left: clampedLeft,
top: clampedTop
},
update: true
}
: item
)
: [],
});
};
console.log(droppedItems, "Line 1022")
return ( return (
<> <>
{/* Center Doc Container - START */} {/* Center Doc Container - START */}
@ -1162,7 +1180,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
/> />
{/* Side details of documents Pages and document Name - START */} {/* Side details of documents Pages and document Name - START */}
<p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'> <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'>
page {indx + 1} of {doc.pages && doc.pages.length} page {indx + 1} of {doc.pages && doc.pages.length}
@ -1188,17 +1205,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
</div > </div >
{ {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
console.log(selectedTag, droppedItems, "Line 1175") droppedItems={droppedItems}
} selectedTag={droppedItems[selectedTag.key][selectedTag.index]}
setDroppedItems={setDroppedItems}
selTagKey={selectedTag.key}
selTagIndx={selectedTag.index}
signClient={false}
/>
{selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} DirectionalControlsProps={{ }
onMove: directionalControlsHandler,
onPositionChange: handleDirectPositionChange,
disabled: false,
stepSize: 5,
className: ''
}} />}
{/* Center Doc Container - END */} {/* Center Doc Container - END */}
</> </>
) )

1
src/components/process/processStepTwo/FieldList.tsx
View File

@ -99,6 +99,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
.map((type) => prioritized.find((tag: any) => tag.type === type)) .map((type) => prioritized.find((tag: any) => tag.type === type))
.filter(Boolean); // remove undefined in case not found .filter(Boolean); // remove undefined in case not found
setTagsData([...prioritizedSorted, ...others]); setTagsData([...prioritizedSorted, ...others]);
}) })
.catch((err) => { .catch((err) => {

4
src/components/process/processStepTwo/NavTwo.tsx
View File

@ -125,7 +125,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
setTimeout(() => { setTimeout(() => {
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
if (isSignSend) { if (isSignSend) {
window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self"); navigate(`./../../../sign/${selfUserSign.recipientId}`);
} }
else { else {
navigate(`/document-completion-screen/${accountId}/${transactionId}`) navigate(`/document-completion-screen/${accountId}/${transactionId}`)
@ -144,7 +144,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
transition: Bounce, transition: Bounce,
}); });
} }
}, 0) }, 1000)
} }
const handleSetIsFields = (setTo: boolean) => { const handleSetIsFields = (setTo: boolean) => {

17
src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx
View File

@ -67,7 +67,10 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
}; };
const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => { const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
if (e.key === 'Enter') handlePositionInputBlur(type); if (e.key === 'Enter') {
e.preventDefault();
handlePositionInputBlur(type)
};
}; };
useEffect(() => { useEffect(() => {
@ -106,13 +109,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
return ( return (
<div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}> <div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}>
{/* Top */} {/* Top */}
<button onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up"> <button type="button" onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
<FaArrowUp /> <FaArrowUp />
</button> </button>
{/* Middle: Left / Inputs / Right */} {/* Middle: Left / Inputs / Right */}
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left"> <button type="button" onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
<FaArrowLeft /> <FaArrowLeft />
</button> </button>
@ -121,7 +124,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
<input <input
type="number" type="number"
value={leftValue} value={leftValue}
onChange={(e) => handlePositionInputChange('left', e.target.value)} onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}}
onBlur={() => handlePositionInputBlur('left')} onBlur={() => handlePositionInputBlur('left')}
onKeyPress={(e) => handleKeyPress(e, 'left')} onKeyPress={(e) => handleKeyPress(e, 'left')}
disabled={disabled} disabled={disabled}
@ -131,7 +134,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
<input <input
type="number" type="number"
value={topValue} value={topValue}
onChange={(e) => handlePositionInputChange('top', e.target.value)} onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}}
onBlur={() => handlePositionInputBlur('top')} onBlur={() => handlePositionInputBlur('top')}
onKeyPress={(e) => handleKeyPress(e, 'top')} onKeyPress={(e) => handleKeyPress(e, 'top')}
disabled={disabled} disabled={disabled}
@ -140,13 +143,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
/> />
</div> </div>
<button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right"> <button type="button" onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
<FaArrowRight /> <FaArrowRight />
</button> </button>
</div> </div>
{/* Bottom */} {/* Bottom */}
<button onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down"> <button type="button" onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
<FaArrowDown /> <FaArrowDown />
</button> </button>
{/* Middle Row: Left - Center (Inputs) - Right */} {/* Middle Row: Left - Center (Inputs) - Right */}

193
src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
View File

@ -27,16 +27,18 @@ import DirectionalControls from "./DirectionalControls";
// } // }
export interface DroppedItemProps { export interface DroppedItemProps {
droppedItems: DroppedItem[]
selectedTag: DroppedItem selectedTag: DroppedItem
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>> setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
selTagKey: string, selTagKey: string,
selTagIndx: number, selTagIndx: number,
DirectionalControlsProps: { signClient: boolean,
onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void; // DirectionalControlsProps: {
disabled?: boolean; // onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
stepSize?: number; // disabled?: boolean;
className?: string; // stepSize?: number;
} // className?: string;
// }
} }
export enum TEXT { export enum TEXT {
@ -103,14 +105,12 @@ const defaultStyles = {
const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx, DirectionalControlsProps }) => { const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
console.log("Right SideBar Called", selectedTag, selTagKey, selTagIndx, droppedItems)
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap]; const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
console.log("selectedTag", selectedTag, selectedType)
const [styles, setStyles] = useState(defaultStyles); const [styles, setStyles] = useState(defaultStyles);
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null); const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
@ -118,32 +118,12 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
const [styleOpen, setStyleOpen] = useState(false); const [styleOpen, setStyleOpen] = useState(false);
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => { const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
console.log("changeTo", changeTo, "changeWith", changeWith) console.log("changeTo", changeTo, "changeWith", changeWith)
if (changeTo === '' || changeWith === '') return if (changeTo === '' || changeWith === '') return
// if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
// // let change: string = changeWith;
// // if (change === "DATE TIME") {
// // change = "DATE_TIME"
// // }
// setDroppedItems((prev) => {
// console.log("Temporal30", prev);
// return {
// ...prev,
// [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
// ? prev[selTagKey].map((item, i) =>
// i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
// )
// : [], // Fallback in case it's undefined or not an array
// };
// });
// } else
if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") { if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
console.log("Second check")
console.log("Line 161") if (!signClient) {
setDroppedItems((prev) => ( setDroppedItems((prev) => (
{ {
...prev, ...prev,
@ -154,13 +134,19 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
: [], : [],
} }
)); ));
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true }
return updated;
})
} }
else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) { } else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
console.log("Third check")
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace; let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
const isCurrency = changeWith === NUMBER.CURRENCY; const isCurrency = changeWith === NUMBER.CURRENCY;
// const currencyType = null // const currencyType = null
if (!signClient) {
setDroppedItems((prev) => ( setDroppedItems((prev) => (
{ {
...prev, ...prev,
@ -171,18 +157,25 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
: [], : [],
}// Provide a fallback in case it's undefined or not an array }// Provide a fallback in case it's undefined or not an array
)); ));
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true }
return updated;
})
}
} }
else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) { else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
console.log("Fourth Check")
let val = timeFormats[0].format; let val = timeFormats[0].format;
console.log(is24Hrs, "is24Hrs Line 176")
if (is24Hrs === null) { if (is24Hrs === null) {
val = timeFormats[0].format val = timeFormats[0].format
} else if(!is24Hrs) { } else if (!is24Hrs) {
val = timeFormats[1].format val = timeFormats[1].format
} else { } else {
val = timeFormats[0].format val = timeFormats[0].format
@ -193,6 +186,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
// changeWith = changeWith + " " + val; // changeWith = changeWith + " " + val;
// } // }
if (!signClient) {
setDroppedItems((prev) => { setDroppedItems((prev) => {
const updatedArray = Array.isArray(prev[selTagKey]) const updatedArray = Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => { ? prev[selTagKey].map((item, i) => {
@ -210,9 +205,18 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
[selTagKey]: updatedArray, [selTagKey]: updatedArray,
}; };
}); });
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
return updated;
})
}
} }
else { else {
if (!signClient) {
setDroppedItems((prev) => { setDroppedItems((prev) => {
const updatedItems = Array.isArray(prev[selTagKey]) const updatedItems = Array.isArray(prev[selTagKey])
@ -221,13 +225,18 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
) )
: []; : [];
console.log('Updated items:', updatedItems);
return { return {
...prev, ...prev,
[selTagKey]: updatedItems, [selTagKey]: updatedItems,
}; };
}); });
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
return updated;
})
}
} }
setDropDownToggle(null) setDropDownToggle(null)
@ -319,6 +328,110 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
handlePropertyChange("styles", updatedStyles); handlePropertyChange("styles", updatedStyles);
}; };
const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
if (!selectedTag) return;
const currentItem = droppedItems[selTagKey]?.[selTagIndx];
if (!currentItem) return;
let newLeft = currentItem.dimensions.left;
let newTop = currentItem.dimensions.top;
switch (direction) {
case 'up':
newTop = Math.max(0, newTop - stepSize);
break;
case 'down':
newTop = newTop + stepSize;
break;
case 'left':
newLeft = Math.max(0, newLeft - stepSize);
break;
case 'right':
newLeft = newLeft + stepSize;
break;
}
if (!signClient) {
setDroppedItems({
...droppedItems,
[selTagKey]: Array.isArray(droppedItems[selTagKey])
? droppedItems[selTagKey].map((item, i) =>
i === selTagIndx
? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
: item
)
: [],
});
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
return updated;
})
}
};
const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
handleDirectionalMove(direction, 5); // Use default stepSize of 5
};
const handleDirectPositionChange = (newLeft: number, newTop: number) => {
if (!selectedTag) return;
const currentItem = droppedItems[selTagKey]?.[selTagIndx];
if (!currentItem) return;
// Ensure values are not negative
const clampedLeft = Math.max(0, newLeft);
const clampedTop = Math.max(0, newTop);
if (!signClient) {
setDroppedItems({
...droppedItems,
[selTagKey]: Array.isArray(droppedItems[selTagKey])
? droppedItems[selTagKey].map((item, i) =>
i === selTagIndx
? {
...item,
dimensions: {
...item.dimensions,
left: clampedLeft,
top: clampedTop
},
update: true
}
: item
)
: [],
});
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = {
...item,
dimensions: {
...item.dimensions,
left: clampedLeft,
top: clampedTop
},
update: true
}
return updated
})
}
};
const DirectionalControlsProps = {
onMove: directionalControlsHandler,
onPositionChange: handleDirectPositionChange,
disabled: false,
stepSize: 5,
className: ''
}
return ( return (
<> <>

60
src/utlity/types.tsx
View File

@ -1,6 +1,6 @@
import { JSX } from "react"; import { JSX } from "react";
export interface DroppedItem { export interface DroppedItemOld {
id?: string; id?: string;
icon: JSX.Element; icon: JSX.Element;
focusElementIndx?: number; focusElementIndx?: number;
@ -123,3 +123,61 @@ export enum SignTypeEnum {
selfSign = "self_sign", selfSign = "self_sign",
multipleSign = "multi_sign" multipleSign = "multi_sign"
} }
interface StylesInterface {
font: string,
italic: boolean,
bold: boolean,
underline: boolean,
color: string,
textSize: number
}
export interface DroppedItem {
id?: string;
icon: JSX.Element;
label?: string;
type: string;
dimensions: {
left: number;
top: number;
width: number;
height: number;
}
recipientId: number;
documentId: string;
pageIndex: number;
allowSenderToEdit: true;
allowSenderToDelete: true;
required?: boolean;
maskType?: string;
maskCharacter?: string;
format?: string;
selectedValue?: string | null;
radioGroups?: DroppedItem[];
options?: string[]
focusElementIndx?: number;
value?: string | number;
validation?: {
minLength: number;
maxLength: number;
error: string;
regex: string[];
};
isDeleted: boolean;
}