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(() => {
const allRequiredFields = droppedItems.filter((item, idx) => {
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}`) in signConfObj && signConfObj[`${item.id}`].accepted
) : (
(`${idx}`) in signConfObj && signConfObj[`${idx}`].accepted
)
)
) return false
) {
return false
} else {
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) => {
@ -1043,7 +1050,9 @@ const SignDocument = () => {
doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
const key = `${doc.documentId}_${page.index}`;
// 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 }
return (
<div

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

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

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

@ -234,6 +234,9 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
const handleTransactionProcess = async (save: boolean = false) => {
if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES === transactionTemplateToggle) save = true;
dispatch(showLoader("Saving Tags ..."))
if (Object.keys(droppedItems).length == 0) 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}`
}
dispatch(hideLoader())
} else {
navigate("/templates")
dispatch(hideLoader())
}
// SENDING Transaction - END
}
@ -283,8 +289,15 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
};
// 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();
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;
if (!data) return;
@ -299,27 +312,33 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
// if (!field) return; // If not found, exit
const dropZone = event.currentTarget.getBoundingClientRect();
let x = event.clientX - dropZone.left - dragElemData.offsetX;
let y = event.clientY - dropZone.top - dragElemData.offsetY;
let x = event.clientX - dropZone.left - (dragElemData.width / 2);
let y = event.clientY - dropZone.top - (dragElemData.height / 2);
// Handling Drop Over Right
if (dropZone.width < x + dragElemData.width) {
x -= (x + dragElemData.width) - dropZone.width;
}
// if (dropZone.width < x + dragElemData.width) {
// x -= (x + dragElemData.width) - dropZone.width;
// }
// Handling Drop Over Bottom
if (dropZone.height < y + dragElemData.height) {
y -= (y + dragElemData.height) - dropZone.height;
}
// if (dropZone.height < y + dragElemData.height) {
// y -= (y + dragElemData.height) - dropZone.height;
// }
// Handling Drop Over Left
if (x < 0) {
x = 0;
}
// if (x < 0) {
// x = 0;
// }
// Handling Drop Over Top
if (y < 0) {
y = 0;
}
// if (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}`;
// x = x * scaleX
// y = y * scaleY
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
let prepData = {
@ -340,7 +359,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
"bold": false,
"underline": false,
"color": "black",
"textSize": 14.0
"textSize": data.fontSize
} : null,
documentId: docId,
pageIndex: pageIndex,
@ -380,7 +399,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
setTimeout(() => {
const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
setSelectedTag({ key, index: tagIndex })
}, 0)
}, 1000)
};
// HANDLE DROP - END
@ -517,16 +536,20 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
onFocus={() => handleDocumentFocus(key)}
key={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}
className='drop-page-in shadow-md relative'
style={{ aspectRatio: `${page.width}/${page.height}` }}
>
<img
// 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%" }}
// 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"
width={page.width}
height={page.height}
@ -537,6 +560,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
<DroppedItemsTagsCon
pageWidth={page.width}
pageHeight={page.height}
ref={childRef}
droppedItems={droppedItems}
pageIdkey={key}
@ -573,7 +597,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
}
</div >
</div>
{selectedTag && selectedTag != null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
droppedItems={droppedItems}

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

@ -20,6 +20,7 @@ import { DroppedItem } from '../../../utlity/types';
interface DroppedItemsTagsConProps {
pageWidth: number;
pageHeight: number;
droppedItems: DroppedItemsObj;
pageIdkey: string;
selectedTag: { key: string; index: number } | null;
@ -35,6 +36,7 @@ interface DroppedItemsTagsConProps {
// 👶 Child component with forwardRef
const DroppedItemsTagsCon = forwardRef(({
pageWidth,
pageHeight,
droppedItems,
pageIdkey,
selectedTag,
@ -581,10 +583,14 @@ const DroppedItemsTagsCon = forwardRef(({
// }}
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)}%`,
top: item.dimensions.top,
width: `${((item.dimensions.width / pageWidth) * 100)}%`,
height: item.dimensions.height,
top: `${((item.dimensions.top / pageHeight) * 100)}%`,
width: `${(item.dimensions.width / pageWidth) * 100}%`,
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
}
let fontSize = 14.0;
switch (label) {
case TagsTypes.STAMP: {
width = 160
@ -29,11 +31,13 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
case TagsTypes.SIGNATURE: {
width = 200
height = 75
fontSize = 42.0
break;
}
case TagsTypes.INITIALS: {
width = 85
height = 75
fontSize = 42.0
break;
}
case TagsTypes.COMPANY: {
@ -89,7 +93,8 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
recipientIndx: recipientIndx,
width,
height,
properties: tagsProperties
properties: tagsProperties,
fontSize: fontSize
}
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 (
<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) => {
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 */}
{
(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
onClick={() => {
handleSetIsPages(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 />
</div>
@ -121,6 +121,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
{selectedRecipients.length > 0 && isFields && <>
{/* Fields List and Recipeint - Start */}
{/* Side Bar showing Recipients */}
<div className='sm:relative sm:top-0 sm:left-0 absolute w-full'>
<div className='relative'
tabIndex={0}
onBlur={() => setDropDownToggle(false)}>
@ -128,7 +130,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
<div
id='switch-recipients-left'
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'>
<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 }} /> */}
@ -178,10 +180,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
{/* Drag Drop Tags Start */}
<div
id='tags-con-dash-left'
className='mt-4'>
className='mt-4 w-full'>
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
</div>
</div>
{/* Fields List and Recipeint - End */}
</>}
@ -280,54 +285,10 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
{/* 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 */}
</>
)
}

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

@ -173,7 +173,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
// dispatch(showLoader("Loading ..."));
const transactionSendValidationObj = transactionSendValidation()
if(transactionSendValidationObj.oneSignerIsRequiredError) {
if (transactionSendValidationObj.oneSignerIsRequiredError) {
return
}
@ -191,7 +191,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
onSendClick();
}
} else {
navigate(`/templates`);
onSendClick();
}
// }, 1000)
}
@ -435,7 +435,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
</div>
{/* Right Side - ENDS */}
</div >
</div>
{/* Nav Two - Oprions - End */}
</>
)

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.
</h2>
<div className="grid grid-cols-2 gap-3 mb-6">
<div className="grid grid-cols-2 gap-2 mb-4">
<div>
<label className="block text-sm font-medium mb-2">
Full Name
@ -340,7 +340,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</div>
{/* Signature Style Options */}
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-2 gap-2">
{fontsMap.map((opt) => (
<div
key={opt.acronym}
@ -350,11 +350,11 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
? "ring-2 ring-[var(--mainPrimaryBtn)]"
: "hover:shadow-md"}`}
>
<div style={{ fontFamily: opt.style, fontSize: "1.75rem" }}>
<div style={{ fontFamily: opt.style, fontSize: "1rem" }}>
{fullName || "Full Name"}
</div>
<div
style={{ fontFamily: opt.style, fontSize: "1.25rem", opacity: 0.7 }}
style={{ fontFamily: opt.style, fontSize: "0.8rem", opacity: 0.7 }}
>
{initials || "AB"}
</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.
</h2>
<div className="grid grid-cols-2 gap-3 mb-6">
<div className="grid grid-cols-2 gap-2 mb-4">
<div>
<label className="block text-sm font-medium mb-2">
Full Name
@ -379,21 +379,21 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
</div>
{/* Signature Style Options */}
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-2 gap-2">
{fontsMap.map((opt) => (
<div
key={opt.acronym}
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
? "ring-2 ring-[var(--mainPrimaryBtn)]"
: "hover:shadow-md"}`}
>
<div style={{ fontFamily: opt.style, fontSize: "1.75rem" }}>
<div style={{ fontFamily: opt.style, fontSize: "1rem" }}>
{fullName || "Full Name"}
</div>
<div
style={{ fontFamily: opt.style, fontSize: "1.25rem", opacity: 0.7 }}
style={{ fontFamily: opt.style, fontSize: "0.8rem", opacity: 0.7 }}
>
{initials || "AB"}
</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 api from "../../config/api";
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 {
id: number;
@ -23,6 +27,7 @@ const formatDate = (isoString: string) => {
};
const TemplateTable = () => {
const dispatch = useDispatch<AppDispatch>();
const [activeAccountId, setActiveAccountId] = useState<string | null>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
@ -75,6 +80,8 @@ const TemplateTable = () => {
const handleUseClick = async (item: Template) => {
try {
await dispatch(resetRecipients())
await dispatch(resetDocuments())
const payload = {
name: item.name ?? "",
subject: item.description,