Minor fixes

src/components/CommonNav.tsx

@@ -372,11 +372,18 @@ const CommonNav: React.FC<AccountNavProps> = ({
           <div
             onClick={handleSettingsClick}
             className="bg-[#F6F6F6] rounded-md py-1.5 px-2 cursor-pointer transition-all duration-200 hover:bg-[#DCDADA] mr-3">
-            <svg width="16" height="20" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            {/* <svg width="16" height="20" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <g opacity="0.54">
                 <path d="M2 9.10996V14.88C2 17 2 17 4 18.35L9.5 21.53C10.33 22.01 11.68 22.01 12.5 21.53L18 18.35C20 17 20 17 20 14.89V9.10996C20 6.99996 20 6.99996 18 5.64996L12.5 2.46996C11.68 1.98996 10.33 1.98996 9.5 2.46996L4 5.64996C2 6.99996 2 6.99996 2 9.10996Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                 <path d="M11 15C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
               </g>
+            </svg> */}
+
+            <svg width="16" height="20" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g opacity="0.54">
+                <path d="M2 9.10996V14.88C2 17 2 17 4 18.35L9.5 21.53C10.33 22.01 11.68 22.01 12.5 21.53L18 18.35C20 17 20 17 20 14.89V9.10996C20 6.99996 20 6.99996 18 5.64996L12.5 2.46996C11.68 1.98996 10.33 1.98996 9.5 2.46996L4 5.64996C2 6.99996 2 6.99996 2 9.10996Z" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M11 15C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15Z" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </g>
             </svg>
           </div>
           {/* SETINGS - END */}

src/components/client/SignDocument.tsx

@@ -966,8 +966,6 @@ const SignDocument = () => {
                 // onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
                 >
 
-
-
                     {/* Nav Two - Options - START */}
                     <div className="flex flex-col w-full">
 

src/components/dashboard/Loader.tsx

@@ -10,7 +10,7 @@ const Loader = () => {
     const loaderData = useSelector((state: RootState) => state.loader);
 
     return (
-        <div className='fixed w-full h-full top-0 left-0 transition-all duration-75 z-50'>
+        <div className='fixed w-full h-full top-0 left-0 transition-all duration-75 z-100'>
             {/* Background */}
             {/* <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-gradient-to-br from-white/20 to-white/10 backdrop-blur-xs"></div> */}
             <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-[var(--hideModalBg)] opacity-60"></div>

src/components/home/StartNow.tsx

@@ -194,7 +194,6 @@ const StartNow = () => {
                 </button> */}
 
 
-                {/* ❌ Remove the old "relative inline-block group" div entirely, replace with: */}
                 <div ref={dropdownRef} className="relative inline-block mt-4 mb-6">
                     <button
                         onClick={() => setUploadDropdownOpen(prev => !prev)}

src/components/process/CompletionScreen/TransactionSentSuccess.tsx

@@ -68,6 +68,21 @@ const TransactionSentSuccess = () => {
     }
   }, [selectedRecipients])
 
+  let selfUserAlreadySigned: boolean = false;
+  if (selfUserSign && "recipientId" in selfUserSign && selfUserSign.sign) {
+
+    let matchedRec = selectedRecipients.filter((obj) => {
+      if (obj.id && typeof obj.id === "string" && typeof selfUserSign.recipientId === "string") {
+        return obj.id === selfUserSign.recipientId
+      }
+      return false
+    })
+
+    if (matchedRec && matchedRec.length && matchedRec[0]?.completed) {
+      selfUserAlreadySigned = true
+    }
+  }
+
   return (
     <div className="relative w-full overflow-hidden">
 
@@ -267,7 +282,7 @@ const TransactionSentSuccess = () => {
 
 
 
-                  {selfUserSign.sign && (
+                  {selfUserSign.sign && !selfUserAlreadySigned && (
                     <button
                       onClick={() =>
                         signSessionRedirect(
@@ -295,6 +310,23 @@ const TransactionSentSuccess = () => {
                     </button>
                   )}
 
+                  {selfUserAlreadySigned && (
+                    <button
+                      className="
+              pl-2
+              rounded-sm
+              text-green-800
+              font-medium
+              opacity-80
+              hover:opacity-100
+              transition
+              cursor-pointer
+            "
+                    >
+                      Great! You've successfully signed the document.
+                    </button>
+                  )}
+
                 </div>
               </div>
 

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -2,7 +2,7 @@ import SelectedDocuments from "./SelectedDocuments";
 import api from "../../../config/api";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../store/store";
-import { useEffect, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import { addRecipientAsync, fetchRecipients, recipientType, removeAllRecipients, removeRecipientAsync, resetRecipients, setSigningOrder, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientOrder } from "../../../store/slices/selectedRecipientsSlice";
@@ -91,16 +91,16 @@ const ProcessStepOne = () => {
   const [isTyping, setIsTyping] = useState(false);
 
   // Optional: use a timer to detect pause in typing
-  let typingTimeout = null;
+  const typingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const handleChange = (e) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setTemplateName(e.target.value);
     setIsTyping(true);
 
-    clearTimeout(typingTimeout);
+    if (typingTimeout.current) clearTimeout(typingTimeout.current);
-    typingTimeout = setTimeout(() => {
+    typingTimeout.current = setTimeout(() => {
       setIsTyping(false);
-    }, 5000); // hide icon while typing, show it again after 500ms of no input
+    }, 5000);
   };
 
   const [transactionDetails, setTransactionDetails] = useState<any>([]);
@@ -118,11 +118,14 @@ const ProcessStepOne = () => {
         setTransactionDetails(res.data)
 
         if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
-          setTemplateName(res.data.name)
+          setTemplateName(res.data.name ?? 'Untitled')
         }
 
         setEmailDtls(
-          { subject: res.data.subject ? res.data.subject : "Documents for Signature", message: res.data.message ? res.data.message : "" }
+          {
+            subject: res.data.subject ?? "Documents for Signature",
+            message: res.data.message ?? ""
+          }
         )
 
       } catch (e) {
@@ -143,14 +146,29 @@ const ProcessStepOne = () => {
     if (submitError.duplicateEmailSameRoutingOrder) setSubmitError(prev => ({ ...prev, duplicateEmailSameRoutingOrder: false }))
     if (submitError.documents) setSubmitError(prev => ({ ...prev, documents: false }))
     if (submitError.recipients) setSubmitError(prev => ({ ...prev, recipients: false }))
-
-    // Handle Signing Order for template and for transction - fill on refresh based on recipients routing order or prefill - START
-    let isSigningOrder = signingOrder;
-    selectedRecipients && selectedRecipients.length > 1 && selectedRecipients.some(recipient => recipient.routingOrder && recipient.routingOrder > 1) ? isSigningOrder = true : "";
-    isSigningOrder && handleSigningOrderChange(isSigningOrder);
-    // Handle Signing Order for template and for transction - fill on refresh based on recipients routing order or prefill - END
   }, [selectedRecipients])
 
+
+
+
+  useEffect(() => {
+    // Handle Signing Order for template and for transction - fill on refresh based on recipients routing order or prefill - START
+    // let isSigningOrder = signingOrder;
+    // selectedRecipients && selectedRecipients.length > 1 && selectedRecipients.some(recipient => recipient.routingOrder && recipient.routingOrder > 1) ? isSigningOrder = true : "";
+    // isSigningOrder && handleSigningOrderChange(isSigningOrder);
+    // Handle Signing Order for template and for transction - fill on refresh based on recipients routing order or prefill - END
+
+    if (selectedRecipients.length > 1) {
+      const hasMultipleOrders = selectedRecipients.some(
+        r => r.routingOrder && r.routingOrder > 1
+      );
+      if (hasMultipleOrders && !signingOrder) {
+        handleSigningOrderChange(true);
+      }
+    }
+
+  }, [selectedRecipients.length])
+
   const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
   const validationCheck = () => {

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../store/store'
 
@@ -73,6 +73,7 @@ export interface DocumentContainerRef {
 const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProps>(
     ({ isPages, zoomScale, transactionSaving, setTransactionSaving, isSend, isPreview = false, aId = null, tId = null, selectedRecipientIndx = 0, setIsPages, onHistoryChange }, ref) => {
 
+        const EMPTY_DROPPED_ITEMS: DroppedItemsObj = {};
         const scaleFactor: number = (zoomScale ?? 100) / 100;
 
         let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
@@ -138,9 +139,25 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
         }, [selectedDocuments]);
         // handle Tag - Document Pos and size for Responsiveness - START
 
+
+        useEffect(() => {
+            if (selectedDocuments.length > 0 && selectedDocuments[0].pages?.length > 0) {
+                const firstDoc = selectedDocuments[0];
+                const firstPage = firstDoc.pages[0];
+                if (!selectedDoc.key) {
+                    selectedDoc.key = `${firstDoc.id}_${firstPage.index}`;
+                }
+            }
+        }, [selectedDocuments]);
+
         // Redux state for dropped items
-        const transactionKey = `${accountId}_${transactionId}`;
+        const transactionKey = useMemo(
-        const droppedItems = useSelector((state: RootState) => state.documentTags.items[transactionKey] || {});
+            () => `${accountId}_${transactionId}`,
+            [accountId, transactionId]
+        );
+
+
+        const droppedItems = useSelector((state: RootState) => state.documentTags.items[transactionKey] ?? EMPTY_DROPPED_ITEMS);
         const droppedItemsCounter = useSelector((state: RootState) => state.documentTags.counter[transactionKey] || 0);
 
         interface HotKeysObj {
@@ -219,8 +236,9 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
         }, [transactionId])
         // NAVIGATING to Dashboard if Transaction is not created - END
 
-        const hotKeysObj = useRef<HotKeysObj>(hotKeysObjInitial); // use ref, not state
+        // const hotKeysObj = useRef<HotKeysObj>(hotKeysObjInitial); // use ref, not state
-        const docKeyListenerRef = useRef<((e: KeyboardEvent) => void) | null>(null);
+        // const docKeyListenerRef = useRef<((e: KeyboardEvent) => void) | null>(null);
+
         const selectedTagRef = useRef<{ key: string; index: number } | null>(null);
         const droppedItemsRef = useRef(droppedItems);
 
@@ -235,6 +253,40 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
             );
         };
 
+        // Global keydown listener — works regardless of which element has focus
+        useEffect(() => {
+            const handler = (event: KeyboardEvent) => {
+                // Don't intercept when user is typing in an input/textarea/contenteditable
+                const target = event.target as HTMLElement;
+                if (
+                    target.tagName === 'INPUT' ||
+                    target.tagName === 'TEXTAREA' ||
+                    target.isContentEditable
+                ) return;
+
+                const ctrl = event.ctrlKey || event.metaKey;
+                const shift = event.shiftKey;
+                const pressedKey = event.key.toLowerCase();
+
+                // Only intercept known hotkeys to avoid blocking browser shortcuts
+                const isKnownHotkey =
+                    (ctrl && ['c', 'v', 'a', 'z', 'y'].includes(pressedKey)) ||
+                    ['delete', 'backspace'].includes(pressedKey);
+
+                if (!isKnownHotkey) return;
+
+                event.preventDefault();
+
+                let hotKey = pressedKey;
+                if (ctrl && shift) hotKey = 'Ctrl+Shift+' + pressedKey;
+                else if (ctrl) hotKey = 'Ctrl+' + pressedKey;
+
+                handleHotKey(hotKey, selectedDoc.key ?? '');
+            };
+
+            document.addEventListener('keydown', handler);
+            return () => document.removeEventListener('keydown', handler);
+        }, []); // empty deps — handleHotKey uses refs so it's always fresh
 
         useEffect(() => {
             droppedItemsRef.current = droppedItems;
@@ -263,7 +315,6 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
         }, [selectedTag]);
 
         const handleUndo = () => {
-            console.log("Handle Undo Called")
             if (cursorRef.current <= 0) return; // nothing to undo
 
             cursorRef.current -= 1;
@@ -386,7 +437,6 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
             let updatedTags: any = [];
 
             for (const dropPagesId of Object.keys(droppedItems)) {
-                console.log("Dropped Item:", droppedItems[dropPagesId]);
                 updatedTags.push(...droppedItems[dropPagesId]);
             }
 
@@ -563,14 +613,14 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
         };
         // HANDLE DROP - END
 
-        useEffect(() => {
+        // useEffect(() => {
-            return () => {
+        //     return () => {
-                const targetCon = document.getElementById('doc-con');
+        //         const targetCon = document.getElementById('doc-con');
-                if (docKeyListenerRef.current && targetCon) {
+        //         if (docKeyListenerRef.current && targetCon) {
-                    targetCon.removeEventListener('keydown', docKeyListenerRef.current);
+        //             targetCon.removeEventListener('keydown', docKeyListenerRef.current);
-                }
+        //         }
-            };
+        //     };
-        }, []);
+        // }, []);
 
         const handleCopy = () => {
             const currentSelectedTag = selectedTagRef.current;
@@ -677,33 +727,8 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
 
         const handleDocumentFocus = (key: string) => {
             selectedDoc.key = key;
-
-            const targetCon = document.getElementById('doc-con');
-            if (!targetCon) return;
-
-            // Remove previous listener before adding new one
-            if (docKeyListenerRef.current) {
-                targetCon.removeEventListener('keydown', docKeyListenerRef.current);
-            }
-
-            const handler = (event: KeyboardEvent) => {
-                event.preventDefault();
-                const ctrl = event.ctrlKey || event.metaKey;
-                const shift = event.shiftKey;
-                const pressedKey = event.key.toLowerCase();
-
-                let hotKey = pressedKey;
-                if (ctrl && shift) hotKey = 'Ctrl+Shift+' + pressedKey;
-                else if (ctrl) hotKey = 'Ctrl+' + pressedKey;
-
-                handleHotKey(hotKey, key);
         };
 
-            docKeyListenerRef.current = handler;
-            targetCon.addEventListener('keydown', handler);
-        };
-
-
         return (
             <>
                 {/* Center Doc Container - START */}

src/components/process/processStepTwo/FieldList.tsx

@@ -316,8 +316,6 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
                 if (!IconComponent) return null;
 
                 return (
-                    <>
-                    {/* <div key={index} draggable={true} onDragStart={(e) => handleDragStart(e, field.label, recipientId)} className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300"> */}
                     <div
                         draggable={true}
                         key={index}
@@ -337,8 +335,6 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
                             {field.type.toLowerCase()}
                         </p>
                     </div>
-                    {/* </div> */}
-                    </>
                 )
             }
 

src/components/process/processStepTwo/LeftSideBar.tsx

@@ -11,6 +11,7 @@ import { useParams } from 'react-router-dom';
 import { fetchDocuments } from '../../../store/slices/documentSlice';
 import { FaAngleUp } from 'react-icons/fa';
 import { SlDocs } from "react-icons/sl";
+import { IoMdClose } from 'react-icons/io';
 
 interface LeftSideBarProps {
     isFields: boolean;
@@ -27,12 +28,15 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
     const dispatch = useDispatch();
     const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
     const accountId = params.accountId;
-    let transactionId = params.transactionId
+    let transactionId = params.transactionId;
+
+
     if (!transactionId) {
         transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
         transactionId = params.templateId;
         dispatch(toggleToTemplates());
     }
+
     if (!accountId || !transactionId) {
         window.location.href = "/";
         return null;
@@ -82,40 +86,23 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
         return <div className='sm:col-span-2 bg-white h-full p-4 overflow-y-auto'></div>;
     }
 
+
     return (
         <>
             {/* Left Side Bar - START */}
             <div className='sm:col-span-2'>
 
                 {
-                    (isFields || window.innerWidth > 638) && <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 || window.innerWidth > 638) ? "h-[100px] bottom-0 overflow-x-hidden w-full" : "h-[calc(100vh-40px)]"} `}>
-                        {/* <div
-                            onClick={() => {
-                                // handleSetIsPages(false)
-                                handleSetIsFields(false)
-                            }}
-                            className='absolute sm:hidden top-[5px] right-[10px] bg-white rounded-full text-2xl z-50'>
-                            <IoMdClose />
-                        </div> */}
-
-                        {/* <div className='hidden sm:flex flex-col md:flex-row justify-between items-center bg-slate-100 p-1.5 rounded-2xl border-1 border-gray-200 mb-3'>
                     <div
-                                onClick={() => handleSetIsFields(!isFields)}
+                        tabIndex={-1}
-                                className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
+                        onBlur={() => handleSetIsFields(false)}
-                                <LuTableOfContents />
+                        className={`
-                                <p className='tracking-wide'>Tags</p>
+                        ${(isFields || window.innerWidth > 638) ? "" : "hidden"} 
-                            </div>
+                        sm:block p-4 fixed 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 || window.innerWidth > 638) ? "h-[100px] bottom-0 overflow-x-hidden w-full" : "h-[calc(100vh-40px)]"} 
+                        `}
+                    >
 
-                            <div
+                        {selectedRecipients.length > 0 && <>
-                                // onClick={() => handleSetIsPages(!isPages)}
-                                className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isPages ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
-                                <IoIosDocument />
-                                <p className='tracking-wide'>Pages</p>
-                            </div>
-                        </div> */}
-
-
-                        {selectedRecipients.length > 0 && (isFields || window.innerWidth > 638) && <>
                             {/* Fields List and Recipeint - Start */}
                             {/* Side Bar showing Recipients */}
                             <div className='sm:relative sm:top-0 sm:left-0 fixed w-full'>
@@ -124,6 +111,9 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                     tabIndex={0}
                                     onBlur={() => setDropDownToggle(false)}>
                                     {/* Selected Recipient */}
+
+                                    <div className='relative'>
+
                                         <div
                                             id='switch-recipients-left'
                                             onClick={() => setDropDownToggle(!dropDownToggle)}
@@ -142,6 +132,12 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                             <MdKeyboardArrowDown />
                                         </div>
 
+                                        <IoMdClose
+                                            onClick={() => handleSetIsFields(false)}
+                                            className='absolute top-[-10px] left-[88vw] text-xl sm:hidden text-slate-400'
+                                        />
+                                    </div>
+
                                     <div
                                         className={`absolute bottom-full mb-2 sm:top-1 sm:bottom-auto w-full shadow-md rounded-md px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
                                         {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
@@ -240,7 +236,6 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
 
                 {/* Small Devices - END  */}
             </div>
-
         </>
     )
 }

src/components/process/processStepTwo/NavTwo.tsx

@@ -112,11 +112,10 @@ const NavTwo: React.FC<NavTwoProps> = ({
         "loading": false
     });
 
-    console.log(editRecipientsModal)
-
     const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
     let accountId = params.accountId;
     let transactionId = params.transactionId
+    
     if (!transactionId) {
         transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
         transactionId = params.templateId;
@@ -553,7 +552,13 @@ const NavTwo: React.FC<NavTwoProps> = ({
                     {!isPreview && <>
                         <div
                             id='send-sign-dash-btn'
-                            onClick={() => setConfirmSendModalOpen({ open: true, confirm: false, loading: false })}
+                            onClick={() => {
+                                if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+                                    handleSend();
+                                } else {
+                                    setConfirmSendModalOpen({ open: true, confirm: false, loading: false });
+                                }
+                            }}
                             className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]'>
                             <p className='tracking-wide text-white'>
                                 {transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? "Save" : "Send"}

src/components/process/processStepTwo/ProcessStepTwo.tsx

@@ -29,6 +29,7 @@ const ProcessStepTwo = () => {
   const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
   let accountId = params.accountId;
   let transactionId = params.transactionId
+
   if (!transactionId) {
     transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
     transactionId = params.templateId;
@@ -36,7 +37,6 @@ const ProcessStepTwo = () => {
   }
   if (!accountId || !transactionId) {
     window.location.href = "/";
-    return null;
   }
 
   const windowWidth = window.innerWidth;
@@ -74,7 +74,7 @@ const ProcessStepTwo = () => {
 
 
   const handleSetIsFields = (setTo: boolean) => {
-    setIsFields(true)
+    setIsFields(setTo)
     setIsPages(false)
   }
 

src/components/process/processStepTwo/documentPages/DocumentPages.tsx

@@ -99,9 +99,9 @@ const DocumentPages: React.FC<{
 
                             const activeRecipientTagsCount =
                                 (droppedItems[key] && droppedItems[key].length) > 0
-                                    ? droppedItems[key].reduce((acc, item) => {
+                                    ? droppedItems[key].reduce((acc, item, indx) => {
                                         return !item.isDeleted &&
-                                            item.recipientIndx == selectedRecipientIndx
+                                            (("id" in selectedRecipient && "recipientId" in item && selectedRecipient.id === item.recipientId) || ("recipientIndx" in item && item.recipientIndx == selectedRecipientIndx))
                                             ? acc + 1
                                             : acc;
                                     }, 0)

src/helper/iconMap.tsx

@@ -51,28 +51,28 @@ const typeToIconMap = {
   </svg>,
   TEMPORAL:
     <svg width="20" height="20" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M13.3333 3.33334V8.33334M26.6667 3.33334V8.33334M5.83333 15.15H34.1667M35 14.1667V28.3333C35 33.3333 32.5 36.6667 26.6667 36.6667H13.3333C7.5 36.6667 5 33.3333 5 28.3333V14.1667C5 9.16668 7.5 5.83334 13.3333 5.83334H26.6667C32.5 5.83334 35 9.16668 35 14.1667Z" stroke="#0D6EFD" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M13.3333 3.33334V8.33334M26.6667 3.33334V8.33334M5.83333 15.15H34.1667M35 14.1667V28.3333C35 33.3333 32.5 36.6667 26.6667 36.6667H13.3333C7.5 36.6667 5 33.3333 5 28.3333V14.1667C5 9.16668 7.5 5.83334 13.3333 5.83334H26.6667C32.5 5.83334 35 9.16668 35 14.1667Z" stroke="#0D6EFD" strokeWidth="2.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M26.1583 22.8333H26.1733M26.1583 27.8333H26.1733M19.9916 22.8333H20.0083M19.9916 27.8333H20.0083M13.8233 22.8333H13.84M13.8233 27.8333H13.84" stroke="#FBC249" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M26.1583 22.8333H26.1733M26.1583 27.8333H26.1733M19.9916 22.8333H20.0083M19.9916 27.8333H20.0083M13.8233 22.8333H13.84M13.8233 27.8333H13.84" stroke="#FBC249" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   ,
   NUMBER:
     <svg width="20" height="20" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M30.6157 2L21.8867 34.5769" stroke="#FBC249" stroke-width="3.38462" stroke-linecap="round" />
+      <path d="M30.6157 2L21.8867 34.5769" stroke="#FBC249" strokeWidth="3.38462" strokeLinecap="round" />
-      <path d="M15.6528 2L6.92383 34.5769" stroke="#FBC249" stroke-width="3.38462" stroke-linecap="round" />
+      <path d="M15.6528 2L6.92383 34.5769" stroke="#FBC249" strokeWidth="3.38462" strokeLinecap="round" />
-      <path d="M34.9991 13H3.69141" stroke="#0D6EFD" stroke-width="3.38462" stroke-linecap="round" />
+      <path d="M34.9991 13H3.69141" stroke="#0D6EFD" strokeWidth="3.38462" strokeLinecap="round" />
-      <path d="M33.3077 24.8462H2" stroke="#0D6EFD" stroke-width="3.38462" stroke-linecap="round" />
+      <path d="M33.3077 24.8462H2" stroke="#0D6EFD" strokeWidth="3.38462" strokeLinecap="round" />
     </svg>
   ,
   IMAGE: <FaRegImage />,
   STAMP: <svg width="20" height="20" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_575_574)">
+    <g clipPath="url(#clip0_575_574)">
       <mask id="mask0_575_574" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
         <path d="M0 3.8147e-06H40V40H0V3.8147e-06Z" fill="white" />
       </mask>
       <g mask="url(#mask0_575_574)">
-        <path d="M32.8125 29.7656H7.1875C7.1875 26.3138 9.9857 23.5156 13.4375 23.5156H26.5625C30.0143 23.5156 32.8125 26.3138 32.8125 29.7656Z" stroke="#0D6EFD" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M32.8125 29.7656H7.1875C7.1875 26.3138 9.9857 23.5156 13.4375 23.5156H26.5625C30.0143 23.5156 32.8125 26.3138 32.8125 29.7656Z" stroke="#0D6EFD" strokeWidth="2.34375" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M37.2656 38.8281H2.73437C1.87141 38.8281 1.17188 38.1285 1.17188 37.2656V31.3281C1.17188 30.4651 1.87141 29.7656 2.73437 29.7656H37.2656C38.1286 29.7656 38.8281 30.4651 38.8281 31.3281V37.2656C38.8281 38.1285 38.1286 38.8281 37.2656 38.8281Z" stroke="#FBC249" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M37.2656 38.8281H2.73437C1.87141 38.8281 1.17188 38.1285 1.17188 37.2656V31.3281C1.17188 30.4651 1.87141 29.7656 2.73437 29.7656H37.2656C38.1286 29.7656 38.8281 30.4651 38.8281 31.3281V37.2656C38.8281 38.1285 38.1286 38.8281 37.2656 38.8281Z" stroke="#FBC249" strokeWidth="2.34375" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M26.8428 8.924C27.3573 4.80775 24.1476 1.17182 19.9993 1.17182C15.8509 1.17182 12.6413 4.80775 13.1558 8.924L14.9797 23.5156H25.0188L26.8428 8.924Z" stroke="#0D6EFD" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M26.8428 8.924C27.3573 4.80775 24.1476 1.17182 19.9993 1.17182C15.8509 1.17182 12.6413 4.80775 13.1558 8.924L14.9797 23.5156H25.0188L26.8428 8.924Z" stroke="#0D6EFD" strokeWidth="2.34375" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
       </g>
     </g>
     <defs>
@@ -98,26 +98,26 @@ const typeToIconMap = {
   FILE: <FaFileAlt />,
   ATTACHMENT:
     <svg width="20" height="20" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M20.3329 19.6667L17.9829 22.0167C16.6829 23.3167 16.6829 25.4333 17.9829 26.7333C19.2829 28.0333 21.3996 28.0333 22.6996 26.7333L26.3996 23.0333C27.6482 21.7811 28.3493 20.085 28.3493 18.3167C28.3493 16.5484 27.6482 14.8522 26.3996 13.6C25.1474 12.3514 23.4513 11.6503 21.6829 11.6503C19.9146 11.6503 18.2185 12.3514 16.9663 13.6L12.9329 17.6333C12.4019 18.1639 11.9806 18.794 11.6932 19.4875C11.4058 20.181 11.2578 20.9243 11.2578 21.675C11.2578 22.4257 11.4058 23.169 11.6932 23.8625C11.9806 24.556 12.4019 25.1861 12.9329 25.7167" stroke="#FBC249" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M20.3329 19.6667L17.9829 22.0167C16.6829 23.3167 16.6829 25.4333 17.9829 26.7333C19.2829 28.0333 21.3996 28.0333 22.6996 26.7333L26.3996 23.0333C27.6482 21.7811 28.3493 20.085 28.3493 18.3167C28.3493 16.5484 27.6482 14.8522 26.3996 13.6C25.1474 12.3514 23.4513 11.6503 21.6829 11.6503C19.9146 11.6503 18.2185 12.3514 16.9663 13.6L12.9329 17.6333C12.4019 18.1639 11.9806 18.794 11.6932 19.4875C11.4058 20.181 11.2578 20.9243 11.2578 21.675C11.2578 22.4257 11.4058 23.169 11.6932 23.8625C11.9806 24.556 12.4019 25.1861 12.9329 25.7167" stroke="#FBC249" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M15.0007 36.6667H25.0007C33.334 36.6667 36.6673 33.3333 36.6673 25V15C36.6673 6.66668 33.334 3.33334 25.0007 3.33334H15.0007C6.66732 3.33334 3.33398 6.66668 3.33398 15V25C3.33398 33.3333 6.66732 36.6667 15.0007 36.6667Z" stroke="#0D6EFD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M15.0007 36.6667H25.0007C33.334 36.6667 36.6673 33.3333 36.6673 25V15C36.6673 6.66668 33.334 3.33334 25.0007 3.33334H15.0007C6.66732 3.33334 3.33398 6.66668 3.33398 15V25C3.33398 33.3333 6.66732 36.6667 15.0007 36.6667Z" stroke="#0D6EFD" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   ,
   RADIO:
     <svg width="20" height="20" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M18 1.125C27.3139 1.125 34.875 8.68612 34.875 18C34.875 27.3139 27.3139 34.875 18 34.875C8.68612 34.875 1.125 27.3139 1.125 18C1.125 8.68612 8.68612 1.125 18 1.125ZM18 3.375C9.92812 3.375 3.375 9.92812 3.375 18C3.375 26.0719 9.92812 32.625 18 32.625C26.0719 32.625 32.625 26.0719 32.625 18C32.625 9.92812 26.0719 3.375 18 3.375Z" fill="#0D6EFD" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M18 1.125C27.3139 1.125 34.875 8.68612 34.875 18C34.875 27.3139 27.3139 34.875 18 34.875C8.68612 34.875 1.125 27.3139 1.125 18C1.125 8.68612 8.68612 1.125 18 1.125ZM18 3.375C9.92812 3.375 3.375 9.92812 3.375 18C3.375 26.0719 9.92812 32.625 18 32.625C26.0719 32.625 32.625 26.0719 32.625 18C32.625 9.92812 26.0719 3.375 18 3.375Z" fill="#0D6EFD" />
       <path d="M27 18C27 13.0331 22.9669 9 18 9C13.0331 9 9 13.0331 9 18C9 22.9669 13.0331 27 18 27C22.9669 27 27 22.9669 27 18Z" fill="#FBC249" />
     </svg>
   ,
   EMAIL:
     <svg width="20" height="20" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.8903 4.5H26.1098C28.845 4.49996 31.0496 4.49992 32.7836 4.73304C34.5838 4.97508 36.0994 5.49286 37.3034 6.6967C38.5072 7.90054 39.025 9.41628 39.267 11.2165C39.5 12.9504 39.5 15.1551 39.5 17.8903V22.1098C39.5 24.845 39.5 27.0496 39.267 28.7836C39.025 30.5838 38.5072 32.0994 37.3034 33.3034C36.0994 34.5072 34.5838 35.025 32.7836 35.267C31.0496 35.5 28.845 35.5 26.1098 35.5H13.8903C11.1551 35.5 8.95044 35.5 7.2165 35.267C5.41628 35.025 3.90054 34.5072 2.6967 33.3034C1.49287 32.0994 0.975079 30.5838 0.733047 28.7836C0.499925 27.0496 0.499959 24.845 0.500001 22.1098V17.8903C0.499959 15.1551 0.499925 12.9504 0.733047 11.2165C0.975079 9.41628 1.49287 7.90054 2.6967 6.6967C3.90054 5.49286 5.41628 4.97508 7.2165 4.73304C8.95044 4.49992 11.1551 4.49996 13.8903 4.5ZM7.61624 7.7063C6.1487 7.9036 5.37154 8.2645 4.81802 8.81802C4.2645 9.37154 3.9036 10.1487 3.7063 11.6162C3.50318 13.1269 3.5 15.1292 3.5 18V22C3.5 24.8708 3.50318 26.873 3.7063 28.3838C3.9036 29.8514 4.2645 30.6284 4.81802 31.182C5.37154 31.7356 6.1487 32.0964 7.61624 32.2938C9.12694 32.4968 11.1292 32.5 14 32.5H26C28.8708 32.5 30.873 32.4968 32.3838 32.2938C33.8514 32.0964 34.6284 31.7356 35.182 31.182C35.7356 30.6284 36.0964 29.8514 36.2938 28.3838C36.4968 26.873 36.5 24.8708 36.5 22V18C36.5 15.1292 36.4968 13.1269 36.2938 11.6162C36.0964 10.1487 35.7356 9.37154 35.182 8.81802C34.6284 8.2645 33.8514 7.9036 32.3838 7.7063C30.873 7.50318 28.8708 7.5 26 7.5H14C11.1292 7.5 9.12694 7.50318 7.61624 7.7063Z" fill="#0D6EFD" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M13.8903 4.5H26.1098C28.845 4.49996 31.0496 4.49992 32.7836 4.73304C34.5838 4.97508 36.0994 5.49286 37.3034 6.6967C38.5072 7.90054 39.025 9.41628 39.267 11.2165C39.5 12.9504 39.5 15.1551 39.5 17.8903V22.1098C39.5 24.845 39.5 27.0496 39.267 28.7836C39.025 30.5838 38.5072 32.0994 37.3034 33.3034C36.0994 34.5072 34.5838 35.025 32.7836 35.267C31.0496 35.5 28.845 35.5 26.1098 35.5H13.8903C11.1551 35.5 8.95044 35.5 7.2165 35.267C5.41628 35.025 3.90054 34.5072 2.6967 33.3034C1.49287 32.0994 0.975079 30.5838 0.733047 28.7836C0.499925 27.0496 0.499959 24.845 0.500001 22.1098V17.8903C0.499959 15.1551 0.499925 12.9504 0.733047 11.2165C0.975079 9.41628 1.49287 7.90054 2.6967 6.6967C3.90054 5.49286 5.41628 4.97508 7.2165 4.73304C8.95044 4.49992 11.1551 4.49996 13.8903 4.5ZM7.61624 7.7063C6.1487 7.9036 5.37154 8.2645 4.81802 8.81802C4.2645 9.37154 3.9036 10.1487 3.7063 11.6162C3.50318 13.1269 3.5 15.1292 3.5 18V22C3.5 24.8708 3.50318 26.873 3.7063 28.3838C3.9036 29.8514 4.2645 30.6284 4.81802 31.182C5.37154 31.7356 6.1487 32.0964 7.61624 32.2938C9.12694 32.4968 11.1292 32.5 14 32.5H26C28.8708 32.5 30.873 32.4968 32.3838 32.2938C33.8514 32.0964 34.6284 31.7356 35.182 31.182C35.7356 30.6284 36.0964 29.8514 36.2938 28.3838C36.4968 26.873 36.5 24.8708 36.5 22V18C36.5 15.1292 36.4968 13.1269 36.2938 11.6162C36.0964 10.1487 35.7356 9.37154 35.182 8.81802C34.6284 8.2645 33.8514 7.9036 32.3838 7.7063C30.873 7.50318 28.8708 7.5 26 7.5H14C11.1292 7.5 9.12694 7.50318 7.61624 7.7063Z" fill="#0D6EFD" />
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.75183 13.168C7.21135 12.4787 8.14267 12.2924 8.83195 12.7519L14.1756 16.3143C15.816 17.4079 16.9479 18.1601 17.8927 18.6516C18.8049 19.1261 19.4187 19.2889 19.9999 19.2889C20.5811 19.2889 21.1949 19.1261 22.1071 18.6516C23.0519 18.1601 24.1839 17.4079 25.8243 16.3143L31.1679 12.7519C31.8571 12.2924 32.7885 12.4787 33.2479 13.168C33.7075 13.8572 33.5213 14.7886 32.8319 15.2481L27.4191 18.8567C25.8647 19.893 24.5979 20.7374 23.4917 21.313C22.3365 21.914 21.2353 22.289 19.9999 22.289C18.7645 22.289 17.6634 21.914 16.5082 21.313C15.4019 20.7374 14.1351 19.893 12.5807 18.8566L7.16785 15.2481C6.47857 14.7886 6.29231 13.8572 6.75183 13.168Z" fill="#FBC249" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M6.75183 13.168C7.21135 12.4787 8.14267 12.2924 8.83195 12.7519L14.1756 16.3143C15.816 17.4079 16.9479 18.1601 17.8927 18.6516C18.8049 19.1261 19.4187 19.2889 19.9999 19.2889C20.5811 19.2889 21.1949 19.1261 22.1071 18.6516C23.0519 18.1601 24.1839 17.4079 25.8243 16.3143L31.1679 12.7519C31.8571 12.2924 32.7885 12.4787 33.2479 13.168C33.7075 13.8572 33.5213 14.7886 32.8319 15.2481L27.4191 18.8567C25.8647 19.893 24.5979 20.7374 23.4917 21.313C22.3365 21.914 21.2353 22.289 19.9999 22.289C18.7645 22.289 17.6634 21.914 16.5082 21.313C15.4019 20.7374 14.1351 19.893 12.5807 18.8566L7.16785 15.2481C6.47857 14.7886 6.29231 13.8572 6.75183 13.168Z" fill="#FBC249" />
     </svg>
   ,
   NAME:
     <svg width="20" height="20" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M34.3169 36.6667C34.3169 30.2167 27.9003 25 20.0003 25C12.1003 25 5.68359 30.2167 5.68359 36.6667" stroke="#0D6EFD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M34.3169 36.6667C34.3169 30.2167 27.9003 25 20.0003 25C12.1003 25 5.68359 30.2167 5.68359 36.6667" stroke="#0D6EFD" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M25.8919 17.5592C24.3291 19.122 22.2095 20 19.9993 20C17.7892 20 15.6696 19.122 14.1068 17.5592C12.544 15.9964 11.666 13.8768 11.666 11.6666C11.666 9.45651 12.544 7.33689 14.1068 5.77409C15.6696 4.21129 17.7892 3.33331 19.9993 3.33331C22.2095 3.33331 24.3291 4.21129 25.8919 5.77409C27.4547 7.33689 28.3327 9.45651 28.3327 11.6666C28.3327 13.8768 27.4547 15.9964 25.8919 17.5592Z" stroke="#FBC249" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M25.8919 17.5592C24.3291 19.122 22.2095 20 19.9993 20C17.7892 20 15.6696 19.122 14.1068 17.5592C12.544 15.9964 11.666 13.8768 11.666 11.6666C11.666 9.45651 12.544 7.33689 14.1068 5.77409C15.6696 4.21129 17.7892 3.33331 19.9993 3.33331C22.2095 3.33331 24.3291 4.21129 25.8919 5.77409C27.4547 7.33689 28.3327 9.45651 28.3327 11.6666C28.3327 13.8768 27.4547 15.9964 25.8919 17.5592Z" stroke="#FBC249" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   ,
   COMPANY:

src/store/slices/selectedRecipientsSlice.tsx

@@ -25,6 +25,7 @@ export interface Recipient {
     provideOwnTags?: boolean;
     uuid?: string;
     newOne?: boolean;
+    completed?: boolean; 
 }
 
 export interface SelectedRecipientInt {