Template fix and auto save fix

src/components/client/SignCompletionScreen.tsx

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

src/components/home/StartNow.tsx

@@ -50,7 +50,7 @@ const StartNow = () => {
             <div
                 onClick={() => fileInputRef.current?.click()}
                 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 */}
                 <div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
                     <FiUpload className="text-lg" />

src/components/home/StartSection.tsx

@@ -28,16 +28,17 @@ const cards = [
     //     buttonText: 'Start Now',
     //     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" />,
         title: 'Use a Template',
         description: 'Pick from ready-made templates for common agreements.',
+        link: "/templates",
         bg: 'bg-white/60',
     },
 ];
@@ -54,19 +55,19 @@ const StartSection = () => {
 
     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(() => {
@@ -87,10 +88,10 @@ const StartSection = () => {
 
                 <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) => (
                         <div
-                            onClick={() => handleStartSectionClick(card)}
+                            onClick={() => handleStartSectionClick(card.link)}
                             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`}
                         >

src/components/process/CompletionScreen/DocumentCompletionScreen.tsx

@@ -285,8 +285,8 @@ const DocumentCompletionScreen = () => {
                         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)]">
-                            <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>
 
                         {/* <button

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -95,6 +95,15 @@ const ProcessStepOne = () => {
       try {
         const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
         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)
       } catch (e) {
         console.log("Error - transactions details")
@@ -265,7 +274,7 @@ const ProcessStepOne = () => {
         }
 
       } else {
-       await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
+        await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
       }
       dispatch(showLoader("Processing Message..."));
 
@@ -425,7 +434,7 @@ const ProcessStepOne = () => {
             {
               (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
               <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 />} */}
 
                 <div

src/components/process/processStepOne/RecipientCards.tsx

@@ -26,12 +26,13 @@ const getInitials = (name: string) => {
 };
 
 type CardsData = {
+    editRecipient: any;
     setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
     setEditCase: (string: any) => void;
     transactionTemplateToggle: string
 };
 
-const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle , editRecipient ,editCase }: CardsData) => {
+const RecipientCards = ({ editRecipient, setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => {
     const templateId = useParams<{ templateId: string }>().templateId;
     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">
-                        {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 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>
-
+                            )
-                                {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>
                 </>
             ) : (

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -77,35 +77,35 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         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
     useEffect(() => {
         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();
     }, [selectedRecipients]);
 
@@ -161,7 +161,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                     delete updateTags[updateTags.length - 1].update
                 }
             }
-
             updatedData[recipientId] = updateTags
         }
 
@@ -174,16 +173,30 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         });
 
         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) {
             console.error("Error submitting recipient tags:", error);
         }
@@ -300,6 +313,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
 
         await sendTagsToRecipients(tagsData, accountId, transactionId);
 
+        // if (save) {
+        //     setSelectedTag(null);
+        //     await fetchTags();
+        // }
+
         // SENDING Transaction - START
         if (!save) {
             const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
@@ -363,19 +381,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         const key = `${docId}_${pageIndex}`;
         // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
 
-        // Handling Initia Width and height of Some tags - START
-        if (dragElemData.label === TagsTypes.STAMP) {
-            dragElemData.width = 160
-            dragElemData.height = 160
-        } else if (dragElemData.label === TagsTypes.SIGNATURE) {
-            dragElemData.width = 200
-            dragElemData.height = 75
-        } else if (dragElemData.label === TagsTypes.INITIALS) {
-            dragElemData.width = 85
-            dragElemData.height = 75
-        }
-        // Handling Initia Width and height of Some tags - END
-
         let prepData = {
             properties: data.properties,
             icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,

src/components/process/processStepTwo/FieldList.tsx

@@ -4,7 +4,7 @@ import fields from '../../../helper/fieldsListData';
 import { useParams } from 'react-router-dom';
 import typeToIconMap from '../../../helper/iconMap';
 import { FaQuestionCircle } from 'react-icons/fa';
-import { TagsProperties } from '../../../utlity/types';
+import { TagsProperties, TagsTypes } from '../../../utlity/types';
 import { v4 as uuidv4 } from "uuid";
 import axios from 'axios';
 
@@ -13,12 +13,25 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
     let width = dragElemRect.width
     let height = dragElemRect.height
 
-    if (label === "radio" || label === "checkbox") {
+    if (label === TagsTypes.RADIO || label === TagsTypes.CHECKBOX) {
         const innerIconConRect = event.currentTarget.children[0].getBoundingClientRect();
         width = innerIconConRect.width + 10
         height = innerIconConRect.height + 10
     }
 
+    // Handling Initia Width and height of Some tags - START
+    if (label === TagsTypes.STAMP) {
+        width = 160
+        height = 160
+    } else if (label === TagsTypes.SIGNATURE) {
+        width = 200
+        height = 75
+    } else if (label === TagsTypes.INITIALS) {
+        width = 85
+        height = 75
+    }
+    // Handling Initia Width and height of Some tags - END
+
     const offsetX = event.clientX - dragElemRect.left;
     const offsetY = event.clientY - dragElemRect.top;
 
@@ -46,12 +59,12 @@ interface FieldListProps {
 }
 
 const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx, acntId = null }) => {
-    
+
     const [tagsData, setTagsData] = useState<TagsProperties[]>([]);
 
     let { accountId } = useParams<{ accountId: string }>();
 
-    if(acntId) {
+    if (acntId) {
         accountId = acntId;
     }
 

src/components/process/processStepTwo/LeftSideBar.tsx

@@ -24,8 +24,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
     let transactionId = params.transactionId
     if (!transactionId) {
         transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
-        transactionId =  params.templateId;
+        transactionId = params.templateId;
-         dispatch(toggleToTemplates());
+        dispatch(toggleToTemplates());
     }
     if (!accountId || !transactionId) {
         window.location.href = "/";
@@ -80,7 +80,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                 <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 }} /> */}
-                                    <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>
                                 <MdKeyboardArrowDown />
                             </div>
@@ -101,7 +107,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                         <div className='flex items-center gap-1.5'>
                                             <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 }} /> */}
-                                            <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>
                                         {selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />}
                                     </div>)
@@ -111,9 +123,9 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                         {/* Side Bar showing Recipients  - ENDS*/}
 
                         {/* 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} />
                         </div>
 

src/components/process/processStepTwo/NavTwo.tsx

@@ -125,11 +125,11 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
         setTimeout(() => {
             if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
                 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 {
                 navigate(`/templates`);
                 toast.success("Template Saved...!", {

src/components/process/processStepTwo/rightSideBar/RecipientsAttrCon.tsx

@@ -53,7 +53,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                     <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 }} /> */}
-                        <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>
                     <MdKeyboardArrowDown />
                 </div>
@@ -65,7 +71,7 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                             key={indx}
                             className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
                             onClick={() => {
-                             handlePropertyChange('recipientId', recipient.id);
+                                handlePropertyChange('recipientId', recipient.id);
                                 setTimeout(() => {
                                     setDropDownToggle(false);
                                 }, 0)
@@ -74,7 +80,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                             <div className='flex items-center gap-1.5'>
                                 <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 }} /> */}
-                                <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>
                             {selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
                         </div>)

src/components/signature/SignCon.tsx

@@ -26,7 +26,7 @@ import { FaSpinner } from "react-icons/fa";
 import { GrCheckboxSelected } from "react-icons/gr";
 import { Bounce, toast } from "react-toastify";
 import axios from 'axios';
-import { SaveType } from '../client/SignDocument';
+import { SaveType, SaveTypeEnum } from '../client/SignDocument';
 import { CiSaveDown1 } from 'react-icons/ci';
 import api from '../../config/api';
 
@@ -160,6 +160,21 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
             })
             if (res?.data) {
                 let preSavedSignatures = res?.data
+                if (res.data.length) {
+                    const defaultVal = res.data.filter((obj, indx) => "default" in obj && obj.default);
+                    const { initialsBlob, signatureBlob } = defaultVal[0];
+
+                    if (initialsBlob && signatureBlob) {
+                        setSaved({
+                            signatureId: res.data.id,
+                            saveType: SaveTypeEnum.DRAW,
+                            save: true,
+                            signature: signatureBlob,
+                            initial: initialsBlob,
+                        });
+                        console.log("saved Called Line 174")
+                    }
+                }
                 setPreSaveSignatures(preSavedSignatures)
             }
         })()
@@ -279,6 +294,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                     initials: "",
                 })
                 setSaved({
+                    signatureId: res.data.id ?? null,
                     saveType: res.data.signatureType ?? null,
                     save: true,
                     signature: res.data.signatureBlob ?? null,
@@ -633,7 +649,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                 </>
                             ) : (
                                 <>
-                                    CREATE SIGNATURE
+                                    {activeTab === "SAVED" ? "CHANGE SIGNATURE" : "CREATE SIGNATURE"}
                                     {/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */}
                                 </>
                             )}

src/components/transactions/TransactionView.tsx

@@ -9,6 +9,7 @@ import { IoCloseOutline } from 'react-icons/io5';
 import { MdEditDocument } from "react-icons/md";
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store/store';
+import { SignTypeEnum } from '../../utlity/types';
 
 // Sample recipient data — you can replace this with actual API data later
 const recipients = [
@@ -62,7 +63,7 @@ const TransactionView = () => {
 
 
     const handleNavigateToSign = (id: number) => {
-        window.open(`./../../../../sign/${id}`)
+        window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`)
     }
 
     return (
@@ -138,7 +139,7 @@ const TransactionView = () => {
                                                         {recipient.email === user.email && recipient.status !== "COMPLETED" &&
                                                             <p
                                                             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
                                                             </p>}
                                                     </div>