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

13-10 | 07:38

This commit is contained in:
=bhagwanSingh 2025-10-13 19:38:34 +05:30
parent f045674055
commit 68f0185c76
10 changed files with 189 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -626,22 +626,29 @@ const SignDocument = () => {
useEffect(() => { useEffect(() => {
const allRequiredFields = droppedItems.filter((item, idx) => { const allRequiredFields = droppedItems.filter((item, idx) => {
if (!item.required) return false if (!item.required) return false
if ((item.required && item.value && item.type != "SIGNATURE" && item.type != "INITIALS") ||
if (item.type == "SIGNATURE" || item.type == "INITIALS") {
( if (
(item.id != null && item.id != undefined && item.id != "") (item.id != null && item.id != undefined && item.id != "")
? ( ? (
(`${item.id}`) in signConfObj && signConfObj[`${item.id}`].accepted (`${item.id}`) in signConfObj && signConfObj[`${item.id}`].accepted
) : ( ) : (
(`${idx}`) in signConfObj && signConfObj[`${idx}`].accepted (`${idx}`) in signConfObj && signConfObj[`${idx}`].accepted
) )
) ) {
return false
} else {
) return false
return true return true
}
}
if (!("value" in item)) {
return true
} else if (item.value === null || item.value === undefined || item.value === "") {
return true
}
return false;
}) })
const totalRequiredFields = droppedItems.reduce((acc, obj) => { const totalRequiredFields = droppedItems.reduce((acc, obj) => {
@ -1043,7 +1050,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}`;
// const tagJsonData = [...droppedItems]; // const tagJsonData = [...droppedItems];
const currDocTags = droppedItems.filter((val) => val.pageIndex == page.index) const currDocTags = droppedItems
.map((val, index) => ({ ...val, originalIndex: index })) // add original index
.filter(val => val.pageIndex === page.index);
let scale: { x: number | null, y: number | null } = { x: null, y: null } let scale: { x: number | null, y: number | null } = { x: null, y: null }
return ( return (
<div <div

40
src/components/client/TagsCon.tsx
View File

@ -216,6 +216,7 @@ const TagsCon: React.FC<TagsConProps> = ({
}; };
const handleTagUpdate = (updateIndx: number, updateValue: string) => { const handleTagUpdate = (updateIndx: number, updateValue: string) => {
console.log(currDocTags)
if (droppedItems && droppedItems.length) { if (droppedItems && droppedItems.length) {
const updatedTag = droppedItems.map((val, indx) => { const updatedTag = droppedItems.map((val, indx) => {
if (indx == updateIndx) { if (indx == updateIndx) {
@ -238,8 +239,8 @@ const TagsCon: React.FC<TagsConProps> = ({
// }); // });
} }
const handleSignClick = async (index: number, id: number | undefined) => { const handleSignClick = async (index: number, id: string | undefined) => {
id = (id != undefined && id != null) ? id : index id = (id !== undefined && id !== null) ? id : index
setSignTagId(id) setSignTagId(id)
if (saved.save) { if (saved.save) {
if (saved.isDefaultAndClicked) { if (saved.isDefaultAndClicked) {
@ -392,9 +393,9 @@ const TagsCon: React.FC<TagsConProps> = ({
!item.multiLine && !item.maskType && <p !item.multiLine && !item.maskType && <p
// name={item.id} // name={item.id}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onBlur={(e) => { onChange={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key == "Enter") e.preventDefault(); if (e.key == "Enter") e.preventDefault();
@ -408,7 +409,7 @@ const TagsCon: React.FC<TagsConProps> = ({
suppressContentEditableWarning suppressContentEditableWarning
onBlur={(e) => { onBlur={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
contentEditable={true} contentEditable={true}
className="w-full outline-none max-h-max" className="w-full outline-none max-h-max"
@ -418,7 +419,7 @@ const TagsCon: React.FC<TagsConProps> = ({
"maskType" in item && "maskCharacter" in item && item.maskType && <p "maskType" in item && "maskCharacter" in item && item.maskType && <p
// onBlur={(e) => { // onBlur={(e) => {
// const val = e.currentTarget.textContent; // const val = e.currentTarget.textContent;
// handleTagUpdate(index, val as string); // handleTagUpdate(item.originalIndex, val as string);
// }} // }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key == "Enter") e.preventDefault(); if (e.key == "Enter") e.preventDefault();
@ -427,7 +428,7 @@ const TagsCon: React.FC<TagsConProps> = ({
// }} // }}
onBlur={(e) => { onBlur={(e) => {
let val = e.target.textContent; let val = e.target.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
if (typeof item.maskType == "string" && typeof val == "string" && item.maskCharacter) { if (typeof item.maskType == "string" && typeof val == "string" && item.maskCharacter) {
val = val.replace(/ /g, ""); val = val.replace(/ /g, "");
e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter) e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
@ -455,7 +456,7 @@ const TagsCon: React.FC<TagsConProps> = ({
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key == "Enter") { if (e.key == "Enter") {
@ -464,7 +465,7 @@ const TagsCon: React.FC<TagsConProps> = ({
if (val && !emailRegex.test(val)) { if (val && !emailRegex.test(val)) {
alert("Please enter a valid email address"); alert("Please enter a valid email address");
handleTagUpdate(index, "" as string) handleTagUpdate(item.originalIndex, "" as string)
e.currentTarget.textContent = ""; e.currentTarget.textContent = "";
e.currentTarget.focus(); // Optional: return focus if invalid e.currentTarget.focus(); // Optional: return focus if invalid
} }
@ -478,7 +479,7 @@ const TagsCon: React.FC<TagsConProps> = ({
if (val && !emailRegex.test(val)) { if (val && !emailRegex.test(val)) {
alert("Please enter a valid email address"); alert("Please enter a valid email address");
handleTagUpdate(index, "" as string) handleTagUpdate(item.originalIndex, "" as string)
e.currentTarget.textContent = ""; e.currentTarget.textContent = "";
e.currentTarget.focus(); // Optional: return focus if invalid e.currentTarget.focus(); // Optional: return focus if invalid
} }
@ -508,7 +509,7 @@ const TagsCon: React.FC<TagsConProps> = ({
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key == "Enter") { if (e.key == "Enter") {
@ -540,9 +541,14 @@ const TagsCon: React.FC<TagsConProps> = ({
> >
{ {
<input <input
onKeyDown={(e) => {
if (e.key == "e" || e.key == "E") {
e.preventDefault()
};
}}
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.value; const val = e.currentTarget.value;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
type="number" type="number"
className="outline-none h-full max-w-max" className="outline-none h-full max-w-max"
@ -568,7 +574,7 @@ const TagsCon: React.FC<TagsConProps> = ({
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key == "Enter") { if (e.key == "Enter") {
@ -630,7 +636,7 @@ const TagsCon: React.FC<TagsConProps> = ({
)) ? ( )) ? (
<FaSignature className="text-lg text-slate-600" /> <FaSignature className="text-lg text-slate-600" />
) : saved && saved.saveType != null && saved.saveType == "SELECT" ? ( ) : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
<><span style={{ fontFamily: saved?.font, fontSize: "18px" }}>{saved.signature}</span></> <><span className='absolute left-0 bottom-0' style={{ fontFamily: saved?.font, fontSize: "42px" }}>{saved.signature}</span></>
) : ( ) : (
<img <img
style={{ style={{
@ -670,7 +676,7 @@ const TagsCon: React.FC<TagsConProps> = ({
)) ? )) ?
<TbSignature className="text-lg text-slate-600" /> <TbSignature className="text-lg text-slate-600" />
: saved && saved.saveType != null && saved.saveType == "SELECT" ? ( : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
<><span style={{ fontFamily: saved?.font }}>{saved.initial}</span></> <><span className='absolute left-0 bottom-0' style={{ fontFamily: saved?.font, fontSize: "42px" }}>{saved.initial}</span></>
) : ) :
(<img (<img
style={{ style={{
@ -739,7 +745,7 @@ const TagsCon: React.FC<TagsConProps> = ({
className="outline-none" className="outline-none"
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.value; const val = e.currentTarget.value;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
> >
<option value="">Select</option> <option value="">Select</option>
@ -797,7 +803,7 @@ const TagsCon: React.FC<TagsConProps> = ({
}} }}
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.value; const val = e.currentTarget.value;
handleTagUpdate(index, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
style={{ opacity: `${item.id == isDateOpen ? "100" : "0"}` }} style={{ opacity: `${item.id == isDateOpen ? "100" : "0"}` }}
className="w-full px-2 outline-none absolute" className="w-full px-2 outline-none absolute"

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

@ -234,6 +234,9 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
const handleTransactionProcess = async (save: boolean = false) => { const handleTransactionProcess = async (save: boolean = false) => {
if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES === transactionTemplateToggle) save = true;
dispatch(showLoader("Saving Tags ...")) dispatch(showLoader("Saving Tags ..."))
if (Object.keys(droppedItems).length == 0) return; if (Object.keys(droppedItems).length == 0) return;
// if (!save) return; // if (!save) return;
@ -257,6 +260,9 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
// window.location.href = `${import.meta.env.VITE_BASE_URI}/transaction-sent/${accountId}/${transactionId}` // window.location.href = `${import.meta.env.VITE_BASE_URI}/transaction-sent/${accountId}/${transactionId}`
} }
dispatch(hideLoader()) dispatch(hideLoader())
} else {
navigate("/templates")
dispatch(hideLoader())
} }
// SENDING Transaction - END // SENDING Transaction - END
} }
@ -283,8 +289,15 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
}; };
// 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, originalWidth: number, originalHeight: number) => {
event.preventDefault(); event.preventDefault();
const imageElement = document.getElementById(`${docId}-${pageIndex}`) as HTMLImageElement;
const currentWidth = imageElement.offsetWidth;
const currentHeight = imageElement.offsetHeight;
const scaleX = currentWidth / originalWidth; // 350 / 700 = 0.5
const scaleY = currentHeight / originalHeight; // 225 / 450 = 0.5
const data = window.dragElemData; const data = window.dragElemData;
if (!data) return; if (!data) return;
@ -299,27 +312,33 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
// if (!field) return; // If not found, exit // if (!field) return; // If not found, exit
const dropZone = event.currentTarget.getBoundingClientRect(); const dropZone = event.currentTarget.getBoundingClientRect();
let x = event.clientX - dropZone.left - dragElemData.offsetX; let x = event.clientX - dropZone.left - (dragElemData.width / 2);
let y = event.clientY - dropZone.top - dragElemData.offsetY; let y = event.clientY - dropZone.top - (dragElemData.height / 2);
// Handling Drop Over Right // Handling Drop Over Right
if (dropZone.width < x + dragElemData.width) { // if (dropZone.width < x + dragElemData.width) {
x -= (x + dragElemData.width) - dropZone.width; // x -= (x + dragElemData.width) - dropZone.width;
} // }
// Handling Drop Over Bottom // Handling Drop Over Bottom
if (dropZone.height < y + dragElemData.height) { // if (dropZone.height < y + dragElemData.height) {
y -= (y + dragElemData.height) - dropZone.height; // y -= (y + dragElemData.height) - dropZone.height;
} // }
// Handling Drop Over Left // Handling Drop Over Left
if (x < 0) { // if (x < 0) {
x = 0; // x = 0;
} // }
// Handling Drop Over Top // Handling Drop Over Top
if (y < 0) { // if (y < 0) {
y = 0; // y = 0;
} // }
x = Math.max(0, Math.min(x, dropZone.width - dragElemData.width));
y = Math.max(0, Math.min(y, dropZone.height - dragElemData.height));
const key = `${docId}_${pageIndex}`; const key = `${docId}_${pageIndex}`;
// x = x * scaleX
// y = y * scaleY
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />; // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
let prepData = { let prepData = {
@ -340,7 +359,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
"bold": false, "bold": false,
"underline": false, "underline": false,
"color": "black", "color": "black",
"textSize": 14.0 "textSize": data.fontSize
} : null, } : null,
documentId: docId, documentId: docId,
pageIndex: pageIndex, pageIndex: pageIndex,
@ -380,7 +399,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
setTimeout(() => { setTimeout(() => {
const tagIndex = key in droppedItems ? droppedItems[key].length : 0; const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
setSelectedTag({ key, index: tagIndex }) setSelectedTag({ key, index: tagIndex })
}, 0) }, 1000)
}; };
// HANDLE DROP - END // HANDLE DROP - END
@ -517,16 +536,20 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
onFocus={() => handleDocumentFocus(key)} onFocus={() => handleDocumentFocus(key)}
key={indx} key={indx}
id={`${doc.id}${indx}`} id={`${doc.id}${indx}`}
onDrop={(e) => handleDrop(e, doc.id, indxDoc, page.index)} onDrop={(e) => handleDrop(e, doc.id, indxDoc, page.index, page.width, page.height)}
onDragOver={handleDragOver} onDragOver={handleDragOver}
className='drop-page-in shadow-md relative' className='drop-page-in shadow-md relative'
style={{ aspectRatio: `${page.width}/${page.height}` }}
> >
<img <img
// style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }} // style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}
style={{ "width": page.width, "height": page.height, "maxWidth": "100%", "maxHeight": "100%" }} // style={{ "width": page.width, "height": page.height, "maxWidth": "100%", "maxHeight": "100%" }}
// style={{ "width": "100%", "height": "100%", "maxWidth": "100%", "maxHeight": "100%" }} // style={{ "width": "100%", "height": "100%", "maxWidth": "100%", "maxHeight": "100%" }}
// className={`w-[${(page.width / 2)}px] h-[${(page.height / 2)}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`} // className={`w-[${(page.width / 2)}px] h-[${(page.height / 2)}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`}
id={`${doc.id}-${page.index}`}
className={`w-[${page.width / 2}px] h-[${page.height / 2}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`}
draggable="false" draggable="false"
width={page.width} width={page.width}
height={page.height} height={page.height}
@ -537,6 +560,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
<DroppedItemsTagsCon <DroppedItemsTagsCon
pageWidth={page.width} pageWidth={page.width}
pageHeight={page.height}
ref={childRef} ref={childRef}
droppedItems={droppedItems} droppedItems={droppedItems}
pageIdkey={key} pageIdkey={key}

12
src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
View File

@ -20,6 +20,7 @@ import { DroppedItem } from '../../../utlity/types';
interface DroppedItemsTagsConProps { interface DroppedItemsTagsConProps {
pageWidth: number; pageWidth: number;
pageHeight: number;
droppedItems: DroppedItemsObj; droppedItems: DroppedItemsObj;
pageIdkey: string; pageIdkey: string;
selectedTag: { key: string; index: number } | null; selectedTag: { key: string; index: number } | null;
@ -35,6 +36,7 @@ interface DroppedItemsTagsConProps {
// 👶 Child component with forwardRef // 👶 Child component with forwardRef
const DroppedItemsTagsCon = forwardRef(({ const DroppedItemsTagsCon = forwardRef(({
pageWidth, pageWidth,
pageHeight,
droppedItems, droppedItems,
pageIdkey, pageIdkey,
selectedTag, selectedTag,
@ -581,10 +583,14 @@ const DroppedItemsTagsCon = forwardRef(({
// }} // }}
style={{ style={{
// left: `${((item.dimensions.left / pageWidth) * 100)}%`,
// top: `${((item.dimensions.top / pageHeight) * 100)}%`,
// width: `${(item.dimensions.width / pageWidth) * 100}%`,
// height: `${(item.dimensions.height / pageHeight) * 100}%`,
left: `${((item.dimensions.left / pageWidth) * 100)}%`, left: `${((item.dimensions.left / pageWidth) * 100)}%`,
top: item.dimensions.top, top: `${((item.dimensions.top / pageHeight) * 100)}%`,
width: `${((item.dimensions.width / pageWidth) * 100)}%`, width: `${(item.dimensions.width / pageWidth) * 100}%`,
height: item.dimensions.height, height: `${(item.dimensions.height / pageHeight) * 100}%`,
}} }}
> >

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

@ -20,6 +20,8 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
height = innerIconConRect.height + 10 height = innerIconConRect.height + 10
} }
let fontSize = 14.0;
switch (label) { switch (label) {
case TagsTypes.STAMP: { case TagsTypes.STAMP: {
width = 160 width = 160
@ -29,11 +31,13 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
case TagsTypes.SIGNATURE: { case TagsTypes.SIGNATURE: {
width = 200 width = 200
height = 75 height = 75
fontSize = 42.0
break; break;
} }
case TagsTypes.INITIALS: { case TagsTypes.INITIALS: {
width = 85 width = 85
height = 75 height = 75
fontSize = 42.0
break; break;
} }
case TagsTypes.COMPANY: { case TagsTypes.COMPANY: {
@ -89,7 +93,8 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
recipientIndx: recipientIndx, recipientIndx: recipientIndx,
width, width,
height, height,
properties: tagsProperties properties: tagsProperties,
fontSize: fontSize
} }
if (obj.label.toLowerCase() == "radio" || obj.label.toLowerCase() == "checkbox") obj.group = uuidv4(); if (obj.label.toLowerCase() == "radio" || obj.label.toLowerCase() == "checkbox") obj.group = uuidv4();
@ -306,7 +311,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
// ); // );
return ( return (
<div className='flex flex-wrap gap-2 justify-start items-start max-w-[170px] sm:max-w-max'> <div className='flex flex-row sm:flex-wrap gap-2 justify-start items-start w-full overflow-x-auto'>
{tagsData.map((field, index) => { {tagsData.map((field, index) => {
const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />; const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;

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

@ -91,13 +91,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
<> <>
{/* Left Side Bar - START */} {/* Left Side Bar - START */}
{ {
(isPages || isFields) && <div className={`sm:block p-4 absolute top-[48px] sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 h-[calc(100vh-40px)] overflow-y-auto`}> (isPages || isFields) && <div className={`sm:block p-4 absolute sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 sm:h-[calc(100vh-40px)] overflow-y-auto sm:w-auto ${isFields ? "h-[150px] bottom-0 overflow-x-hidden w-full": "h-[calc(100vh-40px)]"} `}>
<div <div
onClick={() => { onClick={() => {
handleSetIsPages(false) handleSetIsPages(false)
handleSetIsFields(false) handleSetIsFields(false)
}} }}
className='absolute top-[5px] right-[5px] bg-white rounded-full'> className='absolute sm:hidden top-[5px] right-[10px] bg-white rounded-full text-2xl z-50'>
<IoMdClose /> <IoMdClose />
</div> </div>
@ -121,6 +121,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
{selectedRecipients.length > 0 && isFields && <> {selectedRecipients.length > 0 && isFields && <>
{/* Fields List and Recipeint - Start */} {/* Fields List and Recipeint - Start */}
{/* Side Bar showing Recipients */} {/* Side Bar showing Recipients */}
<div className='sm:relative sm:top-0 sm:left-0 absolute w-full'>
<div className='relative' <div className='relative'
tabIndex={0} tabIndex={0}
onBlur={() => setDropDownToggle(false)}> onBlur={() => setDropDownToggle(false)}>
@ -128,7 +130,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
<div <div
id='switch-recipients-left' id='switch-recipients-left'
onClick={() => setDropDownToggle(!dropDownToggle)} onClick={() => setDropDownToggle(!dropDownToggle)}
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'> className='flex items-center justify-between gap-2 w-[75%] sm:w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
<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 }} /> */}
@ -178,10 +180,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
{/* 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 w-full'>
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} /> <FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
</div> </div>
</div>
{/* Fields List and Recipeint - End */} {/* Fields List and Recipeint - End */}
</>} </>}
@ -280,54 +285,10 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
{/* Small Devices - START */} {/* Small Devices - START */}
<div>
{/* Left Side Pages */}
{!isPages && <div
onClick={() => {
handleSetIsPages(true)
handleSetIsFields(false)
}}
className='sm:hidden fixed top-[8%] left-0 bg-[var(--primary)] z-50 flex items-center text-white rounded-tr-md rounded-br-md cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'>
<div className='py-2'>
<FaAngleUp className='rotate-90' />
<p className='flex flex-col justify-center items-center text-xs tracking-widest mt-1 pt-1 border-t-1 border-white'>
<span>P</span>
<span>A</span>
<span>G</span>
<span>E</span>
<span>S</span>
</p>
</div>
</div>}
<div
className='sm:hidden fixed bottom-0 left-0 rounded-tr-md rounded-tl-md bg-[var(--primary)] z-50 w-full flex justify-center text-white cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'
onClick={() => {
handleSetIsPages(false)
handleSetIsFields(true)
}}
>
<div className='flex'>
<FaAngleUp />
<p className='flex justify-center items-center text-xs tracking-widest ml-1 pl-1 border-l-1 border-white'>
<span>T</span>
<span>A</span>
<span>G</span>
<span>S</span>
</p>
</div>
</div>
</div>
{/* Small Devices - END */} {/* Small Devices - END */}
</> </>
) )
} }

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

@ -191,7 +191,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
onSendClick(); onSendClick();
} }
} else { } else {
navigate(`/templates`); onSendClick();
} }
// }, 1000) // }, 1000)
} }

8
src/components/setting/Signature/AddSignatureModal.tsx
View File

@ -306,7 +306,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
Confirm your name and choose signature style. *Are required fields. Confirm your name and choose signature style. *Are required fields.
</h2> </h2>
<div className="grid grid-cols-2 gap-3 mb-6"> <div className="grid grid-cols-2 gap-2 mb-4">
<div> <div>
<label className="block text-sm font-medium mb-2"> <label className="block text-sm font-medium mb-2">
Full Name Full Name
@ -340,7 +340,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</div> </div>
{/* Signature Style Options */} {/* Signature Style Options */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-2">
{fontsMap.map((opt) => ( {fontsMap.map((opt) => (
<div <div
key={opt.acronym} key={opt.acronym}
@ -350,11 +350,11 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
? "ring-2 ring-[var(--mainPrimaryBtn)]" ? "ring-2 ring-[var(--mainPrimaryBtn)]"
: "hover:shadow-md"}`} : "hover:shadow-md"}`}
> >
<div style={{ fontFamily: opt.style, fontSize: "1.75rem" }}> <div style={{ fontFamily: opt.style, fontSize: "1rem" }}>
{fullName || "Full Name"} {fullName || "Full Name"}
</div> </div>
<div <div
style={{ fontFamily: opt.style, fontSize: "1.25rem", opacity: 0.7 }} style={{ fontFamily: opt.style, fontSize: "0.8rem", opacity: 0.7 }}
> >
{initials || "AB"} {initials || "AB"}
</div> </div>

10
src/components/signature/ClientSignCon.tsx
View File

@ -345,7 +345,7 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
Confirm your name and choose signature style. *Are required fields. Confirm your name and choose signature style. *Are required fields.
</h2> </h2>
<div className="grid grid-cols-2 gap-3 mb-6"> <div className="grid grid-cols-2 gap-2 mb-4">
<div> <div>
<label className="block text-sm font-medium mb-2"> <label className="block text-sm font-medium mb-2">
Full Name Full Name
@ -379,21 +379,21 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
</div> </div>
{/* Signature Style Options */} {/* Signature Style Options */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-2">
{fontsMap.map((opt) => ( {fontsMap.map((opt) => (
<div <div
key={opt.acronym} key={opt.acronym}
onClick={() => setSelectedSignature({ id: opt.acronym, style: opt.style })} onClick={() => setSelectedSignature({ id: opt.acronym, style: opt.style })}
className={`cursor-pointer border border-slate-200 rounded-xl p-4 text-center bg-white transition className={`cursor-pointer border border-slate-200 rounded-xl p-1 text-center bg-white transition
${selectedSignature.id == opt.acronym ${selectedSignature.id == opt.acronym
? "ring-2 ring-[var(--mainPrimaryBtn)]" ? "ring-2 ring-[var(--mainPrimaryBtn)]"
: "hover:shadow-md"}`} : "hover:shadow-md"}`}
> >
<div style={{ fontFamily: opt.style, fontSize: "1.75rem" }}> <div style={{ fontFamily: opt.style, fontSize: "1rem" }}>
{fullName || "Full Name"} {fullName || "Full Name"}
</div> </div>
<div <div
style={{ fontFamily: opt.style, fontSize: "1.25rem", opacity: 0.7 }} style={{ fontFamily: opt.style, fontSize: "0.8rem", opacity: 0.7 }}
> >
{initials || "AB"} {initials || "AB"}
</div> </div>

7
src/components/templates/TemplateTable.tsx
View File

@ -5,6 +5,10 @@ import logoRecord from "../../assets/record.svg";
import Loader from "../dashboard/Loader"; import Loader from "../dashboard/Loader";
import api from "../../config/api"; import api from "../../config/api";
import TemplateDeleteWarnModal from "./TemplateDeleteWarnModal"; import TemplateDeleteWarnModal from "./TemplateDeleteWarnModal";
import { resetRecipients } from "../../store/slices/selectedRecipientsSlice";
import { resetDocuments } from "../../store/slices/documentSlice";
import { AppDispatch } from "../../store/store";
import { useDispatch } from "react-redux";
interface Template { interface Template {
id: number; id: number;
@ -23,6 +27,7 @@ const formatDate = (isoString: string) => {
}; };
const TemplateTable = () => { const TemplateTable = () => {
const dispatch = useDispatch<AppDispatch>();
const [activeAccountId, setActiveAccountId] = useState<string | null>( const [activeAccountId, setActiveAccountId] = useState<string | null>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null') JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
@ -75,6 +80,8 @@ const TemplateTable = () => {
const handleUseClick = async (item: Template) => { const handleUseClick = async (item: Template) => {
try { try {
await dispatch(resetRecipients())
await dispatch(resetDocuments())
const payload = { const payload = {
name: item.name ?? "", name: item.name ?? "",
subject: item.description, subject: item.description,