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

Template fix and auto save fix

This commit is contained in:
=bhagwanSingh 2025-08-07 13:49:15 +05:30
parent 3e0ce80278
commit 4de7c2540e
13 changed files with 564 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/client/SignCompletionScreen.tsx
View File

@ -301,7 +301,7 @@ const SignCompletionScreen: React.FC = () => {
> >
{/* <a> */} {/* <a> */}
<IoMdArrowRoundBack className="w-5 h-5 mr-3" /> <IoMdArrowRoundBack className="w-5 h-5 mr-3" />
Back Sign Made Easy Back to Sign Made Easy
{/* </a> */} {/* </a> */}
</a> : </a> :
<a <a

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

@ -25,6 +25,7 @@ import FieldList from "../process/processStepTwo/FieldList";
import typeToIconMap from "../../helper/iconMap"; 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";
@ -81,6 +82,7 @@ export enum SaveTypeEnum {
UPLOAD = "IMAGE", UPLOAD = "IMAGE",
} }
export interface SaveType { export interface SaveType {
signatureId: string | null
saveType: SaveTypeEnum | null; saveType: SaveTypeEnum | null;
save: boolean; save: boolean;
signature: string | null; signature: string | null;
@ -134,7 +136,15 @@ const fitObj = [
// fetchData - Fetch document pages and tags data // fetchData - Fetch document pages and tags data
// handleFormSubmit - handle form submit and send data to server // handleFormSubmit - handle form submit and send data to server
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();
@ -151,7 +161,6 @@ const SignDocument = () => {
const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" }); const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" });
console.log(recipient, "recipient Line 145")
// Handling Date Opacity // Handling Date Opacity
const [dateValues, setDateValues] = useState<{ [key: string]: string }>({}); const [dateValues, setDateValues] = useState<{ [key: string]: string }>({});
@ -179,6 +188,7 @@ const SignDocument = () => {
const [showCompletionScreen, setShowCompletionScreen] = useState(false) const [showCompletionScreen, setShowCompletionScreen] = useState(false)
const [saved, setSaved] = useState<SaveType>({ const [saved, setSaved] = useState<SaveType>({
signatureId: null,
saveType: null, saveType: null,
save: false, save: false,
signature: null, signature: null,
@ -190,7 +200,6 @@ const SignDocument = () => {
const [signConfObj, setSignConfObj] = useState<SignConfTypeObj | {}>({}); const [signConfObj, setSignConfObj] = useState<SignConfTypeObj | {}>({});
console.log("signConfObj", signConfObj)
const zoom = (percentage: number, contentClass: string) => { const zoom = (percentage: number, contentClass: string) => {
const content = document.querySelector(`.${contentClass}`); const content = document.querySelector(`.${contentClass}`);
@ -224,15 +233,12 @@ const SignDocument = () => {
} }
}, [droppedItems]) }, [droppedItems])
console.log(saved, "Line 162")
useEffect(() => { useEffect(() => {
if (recSignStatus === "COMPLETED") { if (recSignStatus === "COMPLETED") {
console.log("SETTING HIDE TAGS to TRUE LIne 161")
// setHideTags(true); // setHideTags(true);
setTransparentTags(true); setTransparentTags(true);
} else { } else {
console.log("SETTING HIDE TAGS to TRUE LIne 161")
setHideTags(false); setHideTags(false);
} }
}, [recSignStatus]) }, [recSignStatus])
@ -256,7 +262,6 @@ const SignDocument = () => {
}, [saved]) }, [saved])
const handleSignClick = (index: number, id: number) => { const handleSignClick = (index: number, id: number) => {
console.log("IDNumber", id)
setSignTagId(id) setSignTagId(id)
if (saved.save) { if (saved.save) {
if (index in signConfObj) { if (index in signConfObj) {
@ -287,7 +292,6 @@ const SignDocument = () => {
const handleStampClick = (index: number) => { const handleStampClick = (index: number) => {
console.log("Stamp Clicked", index)
setStamp({ setStamp({
open: true, open: true,
blob: "" blob: ""
@ -308,10 +312,8 @@ const SignDocument = () => {
{ "ngrok-skip-browser-warning": "69420", } { "ngrok-skip-browser-warning": "69420", }
}) })
.then((res) => { .then((res) => {
console.dir(res)
if (res.status === 200) { if (res.status === 200) {
console.log(res, "Line 288")
setSelectedDocuments(res.data.documents) setSelectedDocuments(res.data.documents)
setRecipient(res.data.details) setRecipient(res.data.details)
@ -323,7 +325,7 @@ const SignDocument = () => {
setProvideTags(true) setProvideTags(true)
} }
if (res.data.status ==="COMPLETED" ) { if (res.data.status === "COMPLETED") {
setShowCompletionScreen(true) setShowCompletionScreen(true)
} }
@ -335,12 +337,10 @@ const SignDocument = () => {
}) })
.catch((err) => { .catch((err) => {
console.error(err.message)
}); });
} }
console.log(droppedItems, "Line 261")
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -366,7 +366,6 @@ const SignDocument = () => {
} }
} }
console.log(signInitialsCount, Object.keys(signConfObj).length, "boom")
if (signInitialsCount !== Object.keys(signConfObj).length) { if (signInitialsCount !== Object.keys(signConfObj).length) {
toast.error("Please ensure all signature and initials are signed", { toast.error("Please ensure all signature and initials are signed", {
@ -384,7 +383,6 @@ const SignDocument = () => {
} }
for (const tag of droppedItems) { for (const tag of droppedItems) {
console.log(tag, "Tag Data")
// if ((tag.type === "SIGNATURE" || tag.subType === "INITIALS") && !tag.value) { // if ((tag.type === "SIGNATURE" || tag.subType === "INITIALS") && !tag.value) {
if (("required" in tag && tag.required) && ((tag.type !== "SIGNATURE" && tag.type !== "INITIALS") && (tag.value === "" || !("value" in tag)))) { if (("required" in tag && tag.required) && ((tag.type !== "SIGNATURE" && tag.type !== "INITIALS") && (tag.value === "" || !("value" in tag)))) {
@ -460,9 +458,6 @@ const SignDocument = () => {
dispatch(showLoader("Signing ...")); dispatch(showLoader("Signing ..."));
axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign?recipientId=${recipientId}`, submitData, { headers: { "ngrok-skip-browser-warning": "69420", } }) axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign?recipientId=${recipientId}`, submitData, { headers: { "ngrok-skip-browser-warning": "69420", } })
.then((res) => { .then((res) => {
console.group("Submitting Sign Details");
console.dir(res);
console.groupEnd();
if (res.status === 200) { if (res.status === 200) {
setTransparentTags(true) setTransparentTags(true)
setTimeout(() => { setTimeout(() => {
@ -486,7 +481,6 @@ const SignDocument = () => {
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err.message)
} }
) )
}; };
@ -538,11 +532,9 @@ const SignDocument = () => {
headers: { "ngrok-skip-browser-warning": "69420" } headers: { "ngrok-skip-browser-warning": "69420" }
}); });
if (response.status === 200) { if (response.status === 200) {
console.log("line 516", response.data)
return response.data; return response.data;
} }
} catch (error) { } catch (error) {
console.error("Error fetching signature data:", error);
} }
return null; return null;
} }
@ -552,9 +544,7 @@ const SignDocument = () => {
// if (droppedItems) { // if (droppedItems) {
// for (const tag of droppedItems) { // for (const tag of droppedItems) {
// if (tag.type === "SIGNATURE" && "value" in tag) { // if (tag.type === "SIGNATURE" && "value" in tag) {
// console.log(tag, "line 533")
// const signatureData = await fetchSignatureData(tag["value"]); // const signatureData = await fetchSignatureData(tag["value"]);
// console.log("Currnet Signature",signatureData);
// } // }
// } // }
// } // }
@ -588,7 +578,6 @@ const SignDocument = () => {
// HANDLE DROP - START // HANDLE DROP - START
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => { const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
console.log("// HANDLE DROP - START")
event.preventDefault(); event.preventDefault();
const data = window.dragElemData; const data = window.dragElemData;
@ -763,7 +752,6 @@ const SignDocument = () => {
left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width)); left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height)); top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height));
console.log(left, top, "LEFTTOP")
if (groupElements != null && groupElements.length) handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY); if (groupElements != null && groupElements.length) handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
@ -791,18 +779,17 @@ const SignDocument = () => {
// Updated handleRemoveTag function with your existing API logic and group handling // Updated handleRemoveTag function with your existing API logic and group handling
const handleRemoveTag = (key: string, targetIndex: number) => { const handleRemoveTag = (key: string, targetIndex: number) => {
console.log(droppedItems, "Line 784")
const tag = droppedItems[key][targetIndex]; const tag = droppedItems[key][targetIndex];
const recipientId = tag.recipientId; const recipientId = tag.recipientId;
console.log(tag, "line 776");
(async () => { (async () => {
if ("id" in tag) { if ("id" in tag) {
try { try {
const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`) const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
if (response.status !== 200) throw "Tag Deletion error" if (response.status !== 200) throw "Tag Deletion error"
} catch (err) { } catch (err) {
console.error("Tag Deletion error")
return; return;
} }
} }
@ -826,7 +813,6 @@ const SignDocument = () => {
if (isParentItem && groupItems.length > 1) { if (isParentItem && groupItems.length > 1) {
// If removing the parent and there are child items, mark all items in the group as deleted // If removing the parent and there are child items, mark all items in the group as deleted
console.log(`Removing parent item and all children for group: ${groupId}`);
// Get indices of all group items to mark as deleted // Get indices of all group items to mark as deleted
const indicesToDelete = groupItems.map(({ index }) => index); const indicesToDelete = groupItems.map(({ index }) => index);
@ -845,7 +831,6 @@ const SignDocument = () => {
} else { } else {
// If removing a child item or the only item in group, just mark this item as deleted // If removing a child item or the only item in group, just mark this item as deleted
console.log(`Removing individual item from group: ${groupId}`);
setDroppedItems(prevState => ({ setDroppedItems(prevState => ({
...prevState, ...prevState,
@ -881,14 +866,13 @@ const SignDocument = () => {
})() })()
}; };
console.log(droppedItems, "DROPPED ITEMS LINE 680")
// const [showTerms, setShowTerms] = useState<boolean>(true); // const [showTerms, setShowTerms] = useState<boolean>(true);
return ( return (
<div className={`w-full h-screen overflow-hidden relative ${(globalLoader.isLoading) ? 'pointer-events-none overflow-hidden' : ''}`}> <div className={`w-full h-screen overflow-hidden relative ${(globalLoader.isLoading) ? 'pointer-events-none overflow-hidden' : ''}`}>
<> <>
{/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */} {/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */}
{showCompletionScreen && <SignCompletionScreen />} {showCompletionScreen && <SignCompletionScreen />}
<form className="bg-slate-100" <form className="bg-slate-100"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)} onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
> >
@ -1017,7 +1001,6 @@ const SignDocument = () => {
{ {
selectedDocuments && selectedDocuments.length > 0 && selectedDocuments.map((doc) => { selectedDocuments && selectedDocuments.length > 0 && selectedDocuments.map((doc) => {
console.log(droppedItems, "tagJsontagJsontagJson")
return ( return (
<div key={doc.documentId} className='flex flex-col'> <div key={doc.documentId} className='flex flex-col'>
<div className='py-2 text-sm'> <div className='py-2 text-sm'>
@ -1028,12 +1011,9 @@ 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}`;
console.log(droppedItems, "line 820")
// const tagJsonData = [...droppedItems]; // const tagJsonData = [...droppedItems];
// console.log(tagJsonData, "Line 821")
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index) const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
console.log(currDocTags, droppedItems, page, doc, "innnnnnnnnnnnn")
return ( return (
<div <div
key={indx} key={indx}
@ -1047,366 +1027,365 @@ const SignDocument = () => {
{currDocTags.map((item, index) => { {currDocTags.map((item, index) => {
console.log(item, "micCheck 842") if (item.pageIndex !== page.index || item.documentId != doc.documentId) return <></>;
if (item.pageIndex !== page.index) return;
return ( return (
<>
<div <div
tabIndex={1} tabIndex={1}
onFocus={() => setFocusElement({ ...item, focusElementIndx: index })} onFocus={() => 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={{
left: `${item.dimensions.left}px`, left: `${item.dimensions.left}px`,
top: `${item.dimensions.top}px`, top: `${item.dimensions.top}px`,
width: `${item.dimensions.width}px`, width: `${item.dimensions.width}px`,
height: `${item.dimensions.height}px`, height: `${item.dimensions.height}px`,
border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`, border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`,
// display: `${hideTags ? 'none' : 'block'}` // display: `${hideTags ? 'none' : 'block'}`
}} }}
> >
<> <>
{selectedTag?.key && selectedTag.key === key && selectedTag.index === index && {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
<div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' > <div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' >
<div className='flex justify-center items-center gap-1 bg-white px-2 shadow'> <div className='flex justify-center items-center gap-1 bg-white px-2 shadow'>
<p className='w-2.5 h-2.5 rounded' <p className='w-2.5 h-2.5 rounded'
style={{ "background": "#2d2d2d" }} style={{ "background": "#2d2d2d" }}
> >
</p> </p>
{/* <p {/* <p
className=''>{IconComponent} className=''>{IconComponent}
</p> */} </p> */}
<p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p> <p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
<IoMdClose onClick={(e) => { <IoMdClose onClick={(e) => {
e.stopPropagation(); console.log("Handle Remove Tag Called");
handleRemoveTag(key, index)
}} className='cursor-pointer' />
</div>
</div>}
</>
{/* TEXT FIELD - START */} e.stopPropagation();
{ handleRemoveTag(key, index)
item.type === "TEXT" && }} className='cursor-pointer' />
<div </div>
id={item.id} </div>}
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`}
// style={{ height: item.dimensions.height + "px" }}
>
{/* <input {/* TEXT FIELD - START */}
{
item.type === "TEXT" &&
<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`}
// style={{ height: item.dimensions.height + "px" }}
>
{/* <input
name={item.id} name={item.id}
className="w-full px-2 outline-none" className="w-full px-2 outline-none"
> >
</input> */} </input> */}
{ {
item.subType === "SINGLE_LINE" && <p item.subType === "SINGLE_LINE" && <p
// name={item.id} // 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();
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
{
item.subType === "PARAGRAPH" && <p
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
contentEditable={true}
className="w-full outline-none max-h-max"
>
</p>
}
{
item.subType === "PASSWORD" && item.mask && <p
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
onKeyDown={(e) => {
if (e.key === "Enter") e.preventDefault();
}}
onFocus={() => {
}}
onBlur={(e) => {
let val = e.target.textContent;
if (typeof item.mask?.maskType === "string" && typeof val === "string") {
val = val.replace(/ /g, "");
e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter)
}
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
</div>
}
{/* TEXT FIELD - END */}
{/* CHECKBOX FIELD - START */}
{
item.type === "CHECKBOX" &&
<div
id={item.id}
className={`h-full w-full rounded flex justify-center items-center ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
<input
name={item.id}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { className="w-full px-2 outline-none"
const val = e.currentTarget.textContent; type="checkbox" />
handleTagUpdate(index, val as string); </div>
}} }
onKeyDown={(e) => { {/* CHECKBOX FIELD - END */}
if (e.key === "Enter") e.preventDefault();
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
{
item.subType === "PARAGRAPH" && <p
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
contentEditable={true}
className="w-full outline-none max-h-max"
>
</p>
}
{
item.subType === "PASSWORD" && item.mask && <p
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
onKeyDown={(e) => {
if (e.key === "Enter") e.preventDefault();
}}
onFocus={() => {
console.log("focus")
}}
onBlur={(e) => {
let val = e.target.textContent;
console.log(item.mask, val, "Line 586")
if (typeof item.mask?.maskType === "string" && typeof val === "string") {
val = val.replace(/ /g, "");
console.log("onBlur", item.mask.maskCharacter, maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter))
e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter)
}
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
</div>
}
{/* TEXT FIELD - END */}
{/* CHECKBOX FIELD - START */} {/* SIGNATURE FIELD - START */}
{ {
item.type === "CHECKBOX" && item.type === "SIGNATURE" &&
<div <div
id={item.id} tabIndex={1}
className={`h-full w-full rounded flex justify-center items-center ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`} id={item.id}
// style={{ height: item.dimensions.height + "px" }} onClick={() => handleSignClick(index, item.id)}
> className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
<input // style={{ height: item.dimensions.height + "px" }}
name={item.id} >
// style={{ height: item.dimensions.height + "px" }} {/* <input type="checkbox" className="" /> */}
className="w-full px-2 outline-none" {
type="checkbox" /> (!transparentTags && !hideTags && !(saved.save && (index in signConfObj && signConfObj[index].accepted))) ?
</div> <>
} <FaSignature className="text-lg text-slate-600" />
{/* CHECKBOX FIELD - END */} </>
:
<img
style={{
width: `${item.dimensions.width}px`,
height: `${item.dimensions.height}px`,
}}
// src={saved.signature as string} />
src={`data:image/png;base64,${saved.signature}`}
/>
}
</div>
}
{/* SIGNATURE FIELD - END */}
{/* SIGNATURE FIELD - START */} {/* INITIALS FIELD - START */}
{ {
item.type === "SIGNATURE" && item.type === "INITIALS" &&
<div <div
tabIndex={1} tabIndex={1}
id={item.id} id={item.id}
onClick={() => handleSignClick(index, item.id)} onClick={() => handleSignClick(index, item.id)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`} className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
> >
{/* <input type="checkbox" className="" /> */} {((!transparentTags && !hideTags) && !(saved.save && (index in signConfObj) && signConfObj[index].accepted)) ?
{ <TbSignature className="text-lg text-slate-600" />
(!transparentTags && !hideTags && !(saved.save && (index in signConfObj && signConfObj[index].accepted))) ?
<>
<FaSignature className="text-lg text-slate-600" />
</>
: :
<img <img
style={{ style={{
width: `${item.dimensions.width}px`, width: `${item.dimensions.width}px`,
height: `${item.dimensions.height}px`, height: `${item.dimensions.height}px`,
}} }}
// src={saved.signature as string} /> className="w-[100%] h-full"
src={`data:image/png;base64,${saved.signature}`} // src={saved.initial as string}
src={`data:image/png;base64,${saved.initial}`}
/> />
}
</div>
}
{/* SIGNATURE FIELD - END */}
{/* INITIALS FIELD - START */}
{
item.type === "INITIALS" &&
<div
tabIndex={1}
id={item.id}
onClick={() => handleSignClick(index, item.id)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
{((!transparentTags && !hideTags) && !(saved.save && (index in signConfObj) && signConfObj[index].accepted)) ?
<TbSignature className="text-lg text-slate-600" />
:
<img
style={{
width: `${item.dimensions.width}px`,
height: `${item.dimensions.height}px`,
}}
className="w-[100%] h-full"
// src={saved.initial as string}
src={`data:image/png;base64,${saved.initial}`}
/>
}
</div>
}
{/* INITIALS FIELD - END */}
{/* STAMP FIELD - START */}
{
item.type === "STAMP" &&
<div
tabIndex={1}
id={item.id}
onClick={() => handleStampClick(index)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
{!transparentTags && !hideTags ?
<FaStamp className="text-lg text-slate-600" />
:
<img className="w-[100%] h-full" src={saved.initial as string} />
}
</div>
}
{/* STAMP FIELD - END */}
{/* IMAGE FIELD - START */}
{
item.type === "FILE" &&
<div
tabIndex={1}
id={item.id}
// onClick={() => handleSignClick(index)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
{!transparentTags && !hideTags ?
<FaFileAlt className="text-lg text-slate-600" />
:
<img className="w-[100%] h-full" src={saved.initial as string} />
}
</div>
}
{/* IMAGE FIELD - END */}
{/* SELECT FIELD - START */}
{
item.type === "SELECT" &&
<div
id={item.id}
tabIndex={1}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100"}`}
>
<select
name={item.id}
className="outline-none"
>
<option value="">Select</option>
{item.options && item.options.map((val, indx) => {
return (
<option
key={indx}
value={val}
>
{val}
</option>
)
})
} }
</select> </div>
</div> }
} {/* INITIALS FIELD - END */}
{/* SELECT FIELD - END */}
{/* STAMP FIELD - START */}
{
item.type === "STAMP" &&
<div
tabIndex={1}
id={item.id}
onClick={() => handleStampClick(index)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
{!transparentTags && !hideTags ?
<FaStamp className="text-lg text-slate-600" />
:
<img className="w-[100%] h-full" src={saved.initial as string} />
}
</div>
}
{/* STAMP FIELD - END */}
{/* IMAGE FIELD - START */}
{
item.type === "FILE" &&
<div
tabIndex={1}
id={item.id}
// onClick={() => handleSignClick(index)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
{!transparentTags && !hideTags ?
<FaFileAlt className="text-lg text-slate-600" />
:
<img className="w-[100%] h-full" src={saved.initial as string} />
}
</div>
}
{/* IMAGE FIELD - END */}
{/* TEMPORAL FIELD - START */} {/* SELECT FIELD - START */}
{
{ item.type === "SELECT" &&
item.type === "TEMPORAL" && <div
<div id={item.id}
id={item.id} tabIndex={1}
tabIndex={1} className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100"}`}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100"}`} >
> <select
<p name={item.id}
style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }} className="outline-none"
className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap"> >
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.subType?.toLowerCase()} <option value="">Select</option>
</p> {item.options && item.options.map((val, indx) => {
<input return (
name={item.id} <option
onFocus={(e) => { key={indx}
e.target.showPicker?.() value={val}
if (item.id) setIsDateOpen(item.id) >
}} {val}
onBlur={(e) => { </option>
let val = e.target.value; )
// Adding dummy time in case of time as it giving Invalid date without that
if (item.subType?.toLowerCase() === "time") val = "09/02/2025 " + val
if (!item.id) return;
setIsDateOpen(null);
setDateValues({
...dateValues,
[item.id as string]: dayjs(val).format(item.format)
}) })
}} }
style={{ opacity: `${item.id === isDateOpen ? "100" : "0"}` }} </select>
className="w-full px-2 outline-none absolute"
onClick={() => {
}}
type={`${item.subType?.toLowerCase() === "date" ? "date" : (item.subType?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
/>
</div>
}
{/* TEMPORAL FIELD - END */}
{/* Attachment Field - START */}
{
item.type.toLowerCase() === TagsTypes.ATTACHMENT &&
<div
tabIndex={1}
id={item.id}
// onClick={() => handleStampClick(index)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
{!transparentTags && !hideTags ?
(
<p className="text-lg text-slate-600">
{typeToIconMap.ATTACHMENT}
</p>
)
:
(
<p className="text-lg text-slate-600">
{typeToIconMap.ATTACHMENT}
</p>
)
}
</div>
}
{/* Attachment Field - END */}
{/* Focus Show Element */}
{
(!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
<>
<div
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" }}
>
<p>{focusElement.label}</p>
</div> </div>
}
{/* SELECT FIELD - END */}
{/* TEMPORAL FIELD - START */}
{
item.type === "TEMPORAL" &&
<div <div
className="absolute left-[-10px] z-50 flex max-w-max" id={item.id}
style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }} tabIndex={1}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100"}`}
> >
{/* <FaArrowRight className="text-[var(--primary)] text-xl" /> <p
style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }}
className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap">
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.subType?.toLowerCase()}
</p>
<input
name={item.id}
onFocus={(e) => {
e.target.showPicker?.()
if (item.id) setIsDateOpen(item.id)
}}
onBlur={(e) => {
let val = e.target.value;
// Adding dummy time in case of time as it giving Invalid date without that
if (item.subType?.toLowerCase() === "time") val = "09/02/2025 " + val
if (!item.id) return;
setIsDateOpen(null);
setDateValues({
...dateValues,
[item.id as string]: dayjs(val).format(item.format)
})
}}
style={{ opacity: `${item.id === isDateOpen ? "100" : "0"}` }}
className="w-full px-2 outline-none absolute"
onClick={() => {
}}
type={`${item.subType?.toLowerCase() === "date" ? "date" : (item.subType?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
/>
</div>
}
{/* TEMPORAL FIELD - END */}
{/* Attachment Field - START */}
{
item.type.toLowerCase() === TagsTypes.ATTACHMENT &&
<div
tabIndex={1}
id={item.id}
// onClick={() => handleStampClick(index)}
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimensions.height + "px" }}
>
{!transparentTags && !hideTags ?
(
<p className="text-lg text-slate-600">
{typeToIconMap.ATTACHMENT}
</p>
)
:
(
<p className="text-lg text-slate-600">
{typeToIconMap.ATTACHMENT}
</p>
)
}
</div>
}
{/* Attachment Field - END */}
{/* Focus Show Element */}
{
(!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
<>
<div
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" }}
>
<p>{focusElement.label}</p>
</div>
<div
className="absolute left-[-10px] z-50 flex max-w-max"
style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }}
>
{/* <FaArrowRight className="text-[var(--primary)] text-xl" />
*/} */}
<BsFileArrowDownFill className="text-blue-900 text-4xl rotate-270" /> <BsFileArrowDownFill className="text-blue-900 text-4xl rotate-270" />
</div> </div>
</> </>
} }
</div> </div>
</>
) )
}) })
} }

2
src/components/home/StartNow.tsx
View File

@ -50,7 +50,7 @@ const StartNow = () => {
<div <div
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
id='start-now-upload-con' id='start-now-upload-con'
className="group cursor-pointer border-slate-300 rounded-lg bg-white/60 transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md"> className="group col-span-2 cursor-pointer border-slate-300 rounded-lg bg-white/60 transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
{/* Upload icon with subtle animation */} {/* Upload icon with subtle animation */}
<div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors"> <div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
<FiUpload className="text-lg" /> <FiUpload className="text-lg" />

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

@ -28,16 +28,17 @@ const cards = [
// buttonText: 'Start Now', // buttonText: 'Start Now',
// bg: 'bg-white/60', // bg: 'bg-white/60',
// }, // },
{ // {
icon: <FiEdit className="w-5 h-5 text-green-700" />, // icon: <FiEdit className="w-5 h-5 text-green-700" />,
title: 'Sign an Agreement', // title: 'Sign an Agreement',
description: 'Upload a document you need to sign and place your signature.', // description: 'Upload a document you need to sign and place your signature.',
bg: 'bg-white/60', // bg: 'bg-white/60',
}, // },
{ {
icon: <FiFolder className="w-5 h-5 text-purple-700" />, icon: <FiFolder className="w-5 h-5 text-purple-700" />,
title: 'Use a Template', title: 'Use a Template',
description: 'Pick from ready-made templates for common agreements.', description: 'Pick from ready-made templates for common agreements.',
link: "/templates",
bg: 'bg-white/60', bg: 'bg-white/60',
}, },
]; ];
@ -54,19 +55,19 @@ const StartSection = () => {
const defaultAccountId = user.account.id; const defaultAccountId = user.account.id;
const handleStartSectionClick = (card: StartCard) => { const handleStartSectionClick = (link: string) => {
if ("buttonText" in card && card.buttonText === "Start Now") { // if ("buttonText" in card && card.buttonText === "Start Now") {
api.post(`/api/accounts/${defaultAccountId}/transactions`) // api.post(`/api/accounts/${defaultAccountId}/transactions`)
.then(res => { // .then(res => {
if (res.status === 200 || res.status === 201) { // if (res.status === 200 || res.status === 201) {
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED)); // dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
dispatch(setTransactionId(res.data)); // dispatch(setTransactionId(res.data));
setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0) // setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
} // }
}) // })
.catch(err => console.log(err)) // .catch(err => console.log(err))
} // }
// navigate("/process-step-one"); navigate(link);
} }
// useEffect(() => { // useEffect(() => {
@ -87,10 +88,10 @@ const StartSection = () => {
<StartNow /> <StartNow />
<div className='col-span-2 grid grid-cols-2 justify-between gap-4'> <div className='col-span-1 grid grid-cols-1 justify-between gap-4'>
{cards.map((card, index) => ( {cards.map((card, index) => (
<div <div
onClick={() => handleStartSectionClick(card)} 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 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`}
> >

4
src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
View File

@ -285,8 +285,8 @@ const DocumentCompletionScreen = () => {
className='flex items-center gap-3'> className='flex items-center gap-3'>
<Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]"> <Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]">
<FaPen className=" text-white text-md" /> {/* <FaPen className=" text-white text-md" /> */}
<span className="tracking-wide text-white">Edit</span> <span className="tracking-wide text-white">View Transaction</span>
</Link> </Link>
{/* <button {/* <button

13
src/components/process/processStepOne/ProcessStepOne.tsx
View File

@ -95,6 +95,15 @@ const ProcessStepOne = () => {
try { try {
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`); const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
setTransactionDetails(res.data) setTransactionDetails(res.data)
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
setTemplateName(res.data.name)
}
setEmailDtls(
{ subject: res.data.subject ? res.data.subject : "Documents for Signature", message: res.data.message ? res.data.message : "" }
)
// console.log("setTransactionDetails",res.data) // console.log("setTransactionDetails",res.data)
} catch (e) { } catch (e) {
console.log("Error - transactions details") console.log("Error - transactions details")
@ -265,7 +274,7 @@ const ProcessStepOne = () => {
} }
} else { } else {
await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId })); await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
} }
dispatch(showLoader("Processing Message...")); dispatch(showLoader("Processing Message..."));
@ -425,7 +434,7 @@ const ProcessStepOne = () => {
{ {
(signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) && (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
<div className="flex flex-col gap-4 align-start"> <div className="flex flex-col gap-4 align-start">
<RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} /> <RecipientCards editRecipient={editRecipient} transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} />
{/* {signType !== "self-sign" && <RecipientAddCard />} */} {/* {signType !== "self-sign" && <RecipientAddCard />} */}
<div <div

175
src/components/process/processStepOne/RecipientCards.tsx
View File

@ -26,12 +26,13 @@ const getInitials = (name: string) => {
}; };
type CardsData = { type CardsData = {
editRecipient: any;
setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
setEditCase: (string: any) => void; setEditCase: (string: any) => void;
transactionTemplateToggle: string transactionTemplateToggle: string
}; };
const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle , editRecipient ,editCase }: CardsData) => { const RecipientCards = ({ editRecipient, setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => {
const templateId = useParams<{ templateId: string }>().templateId; const templateId = useParams<{ templateId: string }>().templateId;
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>(); let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
@ -127,94 +128,98 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
)} )}
<div className="flex flex-col divide-y divide-gray-200"> <div className="flex flex-col divide-y divide-gray-200">
{recipients.map((recipient, idx) => ( {recipients.map((recipient, idx) => {
<div // if(recipient.id === editRecipient.id) return
key={recipient.email + idx}
className="flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors"
>
<div className="flex items-center gap-3 min-w-0">
{/* {signingOrder && ( */}
{recipients.length > 1 ? <div className="relative">
<input
type="number"
value={recipient.routingOrder || 1}
min={1}
onChange={(e) =>
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
}
className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
/>
{/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
</div>
: <input
type="number"
disabled
value={recipient.routingOrder || 1}
min={1}
onChange={(e) =>
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
}
className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
/>}
{/* )} */}
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none"> return (
{getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)} <div
key={recipient.email + idx}
className="flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors"
>
<div className="flex items-center gap-3 min-w-0">
{/* {signingOrder && ( */}
{recipients.length > 1 ? <div className="relative">
<input
type="number"
value={recipient.routingOrder || 1}
min={1}
onChange={(e) =>
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
}
className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
/>
{/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
</div>
: <input
type="number"
disabled
value={recipient.routingOrder || 1}
min={1}
onChange={(e) =>
handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
}
className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
/>}
{/* )} */}
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
{getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
</div>
<div className="min-w-0">
<p className="font-semibold text-gray-800 truncate text-sm">
{recipient.firstName} {recipient.lastName || ""}
</p>
<p className="text-xs text-gray-500 truncate">
{recipient.email} | {recipient.type} {recipient.roleName ? `| Role : ${recipient.roleName}` : ""}
</p>
</div>
</div> </div>
<div className="min-w-0"> {signType !== "self-sign" && (
<p className="font-semibold text-gray-800 truncate text-sm"> <div className="flex justify-between gap-2 items-center">
{recipient.firstName} {recipient.lastName || ""} {/* Edit Button */}
</p> <button
<p className="text-xs text-gray-500 truncate"> type="button"
{recipient.email} | {recipient.type} {recipient.roleName ? `| Role : ${recipient.roleName}` : ""} title="Edit recipient"
</p> aria-label={`Edit recipient ${recipient.firstName}`}
</div> onClick={() => handleEditRecipient(recipient)}
disabled={
// For templates: always enabled (never disabled)
['templates'].includes(transactionTemplateToggle)
? false
: // For transactions: disabled if not newOne AND not allowed to edit
(!recipient.newOne && !recipient.allowSenderToEdit)
}
className="text-gray-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
>
<FiEdit size={16} />
</button>
{/* Delete Button */}
<button
type="button"
title="Remove recipient"
aria-label={`Remove recipient ${recipient.firstName}`}
onClick={() => handleRemoveRecipient(recipient)}
disabled={
// For templates: always enabled (never disabled)
['templates'].includes(transactionTemplateToggle)
? false
: // For transactions: disabled if not newOne AND not allowed to delete
(!recipient.newOne && !recipient.allowSenderToDelete)
}
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
>
<ImBin size={16} />
</button>
</div>
)}
</div> </div>
)
{signType !== "self-sign" && ( })}
<div className="flex justify-between gap-2 items-center">
{/* Edit Button */}
<button
type="button"
title="Edit recipient"
aria-label={`Edit recipient ${recipient.firstName}`}
onClick={() => handleEditRecipient(recipient)}
disabled={
// For templates: always enabled (never disabled)
['templates'].includes(transactionTemplateToggle)
? false
: // For transactions: disabled if not newOne AND not allowed to edit
(!recipient.newOne && !recipient.allowSenderToEdit)
}
className="text-gray-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
>
<FiEdit size={16} />
</button>
{/* Delete Button */}
<button
type="button"
title="Remove recipient"
aria-label={`Remove recipient ${recipient.firstName}`}
onClick={() => handleRemoveRecipient(recipient)}
disabled={
// For templates: always enabled (never disabled)
['templates'].includes(transactionTemplateToggle)
? false
: // For transactions: disabled if not newOne AND not allowed to delete
(!recipient.newOne && !recipient.allowSenderToDelete)
}
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
>
<ImBin size={16} />
</button>
</div>
)}
</div>
))}
</div> </div>
</> </>
) : ( ) : (

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

@ -77,35 +77,35 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId })); selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
}, []) }, [])
const fetchTags = async () => {
try {
const requests = selectedRecipients.map((recipient) =>
api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipient.id}/tags`)
);
const response = await Promise.all(requests);
let recTags = {}
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
}
}
}
// console.log(recTags, "Line 83");
setDroppedItems(recTags)
// Handle your response here
} catch (err) {
console.error(err);
}
};
// FETCHING TAG - START // FETCHING TAG - START
useEffect(() => { useEffect(() => {
if (selectedRecipients.length === 0) return; if (selectedRecipients.length === 0) return;
const fetchTags = async () => {
try {
const requests = selectedRecipients.map((recipient) =>
api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipient.id}/tags`)
);
const response = await Promise.all(requests);
let recTags = {}
for (const res of response) {
for (const tag of res.data) {
const key = `${tag.documentId}_${tag.pageIndex}`;
if (recTags[key]) {
recTags[key].push(tag);
} else {
recTags[key] = [tag]; // Initialize with an array
}
}
}
// console.log(recTags, "Line 83");
setDroppedItems(recTags)
// Handle your response here
} catch (err) {
console.error(err);
}
};
fetchTags(); fetchTags();
}, [selectedRecipients]); }, [selectedRecipients]);
@ -161,7 +161,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
delete updateTags[updateTags.length - 1].update delete updateTags[updateTags.length - 1].update
} }
} }
updatedData[recipientId] = updateTags updatedData[recipientId] = updateTags
} }
@ -174,16 +173,30 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
}); });
try { try {
const responses = await Promise.all(requests); const response = 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") let recTags = droppedItems;
setDroppedItems(droppedItemsUpdateFalse); 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) { } catch (error) {
console.error("Error submitting recipient tags:", error); console.error("Error submitting recipient tags:", error);
} }
@ -300,6 +313,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
await sendTagsToRecipients(tagsData, accountId, transactionId); await sendTagsToRecipients(tagsData, accountId, transactionId);
// if (save) {
// setSelectedTag(null);
// await fetchTags();
// }
// SENDING Transaction - START // SENDING Transaction - START
if (!save) { if (!save) {
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" }) const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })

26
src/components/process/processStepTwo/LeftSideBar.tsx
View File

@ -24,8 +24,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
let transactionId = params.transactionId let transactionId = params.transactionId
if (!transactionId) { if (!transactionId) {
transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES; transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
transactionId = params.templateId; transactionId = params.templateId;
dispatch(toggleToTemplates()); dispatch(toggleToTemplates());
} }
if (!accountId || !transactionId) { if (!accountId || !transactionId) {
window.location.href = "/"; window.location.href = "/";
@ -80,7 +80,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
<div className='flex items-center gap-1.5'> <div className='flex items-center gap-1.5'>
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p> <p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */} {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
<p>{selectedRecipient.firstName} {selectedRecipient.lastName}</p> <p>
{
selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
(selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
}
</p>
</div> </div>
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
@ -101,7 +107,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
<div className='flex items-center gap-1.5'> <div className='flex items-center gap-1.5'>
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p> <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */} {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
<p>{recipient.firstName} {recipient.lastName} </p> <p>
{
recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
(recipient.email.length === 0 ? recipient.roleName : recipient.email) :
`${recipient.firstName + " " + recipient.lastName}`
}
</p>
</div> </div>
{selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />} {selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />}
</div>) </div>)
@ -111,9 +123,9 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
{/* Side Bar showing Recipients - ENDS*/} {/* Side Bar showing Recipients - ENDS*/}
{/* Drag Drop Tags Start */} {/* Drag Drop Tags Start */}
<div <div
id='tags-con-dash-left' id='tags-con-dash-left'
className='mt-4'> className='mt-4'>
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} /> <FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
</div> </div>

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

@ -125,11 +125,11 @@ 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) {
navigate(`./../../../sign/${selfUserSign.recipientId}`); window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
}
else {
navigate(`/document-completion-screen/${accountId}/${transactionId}`)
} }
// else {
// navigate(`/document-completion-screen/${accountId}/${transactionId}`)
// }
} else { } else {
navigate(`/templates`); navigate(`/templates`);
toast.success("Template Saved...!", { toast.success("Template Saved...!", {

18
src/components/process/processStepTwo/rightSideBar/RecipientsAttrCon.tsx
View File

@ -53,7 +53,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
<div className='flex items-center gap-1.5'> <div className='flex items-center gap-1.5'>
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p> <p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */} {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
<p>{"firstName" in selectedRecipient && selectedRecipient.firstName} {"lastName" in selectedRecipient && selectedRecipient.lastName}</p> <p>
{
selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
(selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
}
</p>
</div> </div>
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
@ -65,7 +71,7 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
key={indx} key={indx}
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100' className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
onClick={() => { onClick={() => {
handlePropertyChange('recipientId', recipient.id); handlePropertyChange('recipientId', recipient.id);
setTimeout(() => { setTimeout(() => {
setDropDownToggle(false); setDropDownToggle(false);
}, 0) }, 0)
@ -74,7 +80,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
<div className='flex items-center gap-1.5'> <div className='flex items-center gap-1.5'>
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p> <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */} {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
<p>{recipient.firstName} {recipient.lastName} </p> <p>
{
recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
(recipient.email.length === 0 ? recipient.roleName : recipient.email) :
`${recipient.firstName + " " + recipient.lastName}`
}
</p>
</div> </div>
{selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />} {selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
</div>) </div>)

4
src/components/signature/SignCon.tsx
View File

@ -166,6 +166,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
if (initialsBlob && signatureBlob) { if (initialsBlob && signatureBlob) {
setSaved({ setSaved({
signatureId: res.data.id,
saveType: SaveTypeEnum.DRAW, saveType: SaveTypeEnum.DRAW,
save: true, save: true,
signature: signatureBlob, signature: signatureBlob,
@ -293,6 +294,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
initials: "", initials: "",
}) })
setSaved({ setSaved({
signatureId: res.data.id ?? null,
saveType: res.data.signatureType ?? null, saveType: res.data.signatureType ?? null,
save: true, save: true,
signature: res.data.signatureBlob ?? null, signature: res.data.signatureBlob ?? null,
@ -647,7 +649,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</> </>
) : ( ) : (
<> <>
CREATE SIGNATURE {activeTab === "SAVED" ? "CHANGE SIGNATURE" : "CREATE SIGNATURE"}
{/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */} {/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */}
</> </>
)} )}

5
src/components/transactions/TransactionView.tsx
View File

@ -9,6 +9,7 @@ import { IoCloseOutline } from 'react-icons/io5';
import { MdEditDocument } from "react-icons/md"; import { MdEditDocument } from "react-icons/md";
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { RootState } from '../../store/store'; import { RootState } from '../../store/store';
import { SignTypeEnum } from '../../utlity/types';
// Sample recipient data — you can replace this with actual API data later // Sample recipient data — you can replace this with actual API data later
const recipients = [ const recipients = [
@ -62,7 +63,7 @@ const TransactionView = () => {
const handleNavigateToSign = (id: number) => { const handleNavigateToSign = (id: number) => {
window.open(`./../../../../sign/${id}`) window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`)
} }
return ( return (
@ -138,7 +139,7 @@ const TransactionView = () => {
{recipient.email === user.email && recipient.status !== "COMPLETED" && {recipient.email === user.email && recipient.status !== "COMPLETED" &&
<p <p
onClick={() => handleNavigateToSign(recipient.id)} onClick={() => handleNavigateToSign(recipient.id)}
className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold'> className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold cursor-pointer'>
Sign Sign
</p>} </p>}
</div> </div>