Added Tour

package-lock.json

@@ -26,6 +26,7 @@
         "react-draggable": "^4.4.6",
         "react-icons": "^5.5.0",
         "react-id-generator": "^3.0.2",
+        "react-joyride": "^2.9.3",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.2.0",
         "react-sortablejs": "^6.1.4",
@@ -921,6 +922,12 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@gilbarbara/deep-equal": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz",
+      "integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2658,6 +2665,12 @@
         }
       }
     },
+    "node_modules/deep-diff": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
+      "integrity": "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2665,6 +2678,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3438,6 +3460,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-lite": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-1.2.1.tgz",
+      "integrity": "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw==",
+      "license": "MIT"
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -4163,6 +4191,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -4323,12 +4362,84 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/react-innertext": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
+      "integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": ">=0.0.0 <=99",
+        "react": ">=0.0.0 <=99"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-joyride": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.3.tgz",
+      "integrity": "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "deep-diff": "^1.0.2",
+        "deepmerge": "^4.3.1",
+        "is-lite": "^1.2.1",
+        "react-floater": "^0.7.9",
+        "react-innertext": "^1.1.5",
+        "react-is": "^16.13.1",
+        "scroll": "^3.0.1",
+        "scrollparent": "^2.1.0",
+        "tree-changes": "^0.11.2",
+        "type-fest": "^4.27.0"
+      },
+      "peerDependencies": {
+        "react": "15 - 18",
+        "react-dom": "15 - 18"
+      }
+    },
+    "node_modules/react-joyride/node_modules/react-floater": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.9.tgz",
+      "integrity": "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "is-lite": "^0.8.2",
+        "popper.js": "^1.16.0",
+        "prop-types": "^15.8.1",
+        "tree-changes": "^0.9.1"
+      },
+      "peerDependencies": {
+        "react": "15 - 18",
+        "react-dom": "15 - 18"
+      }
+    },
+    "node_modules/react-joyride/node_modules/react-floater/node_modules/@gilbarbara/deep-equal": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz",
+      "integrity": "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA==",
+      "license": "MIT"
+    },
+    "node_modules/react-joyride/node_modules/react-floater/node_modules/is-lite": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-0.8.2.tgz",
+      "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw==",
+      "license": "MIT"
+    },
+    "node_modules/react-joyride/node_modules/react-floater/node_modules/tree-changes": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.9.3.tgz",
+      "integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.1.1",
+        "is-lite": "^0.8.2"
+      }
+    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -4623,6 +4734,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/scroll": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/scroll/-/scroll-3.0.1.tgz",
+      "integrity": "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==",
+      "license": "MIT"
+    },
+    "node_modules/scrollparent": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
+      "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==",
+      "license": "ISC"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -4890,6 +5013,16 @@
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
       "license": "MIT"
     },
+    "node_modules/tree-changes": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.11.3.tgz",
+      "integrity": "sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag==",
+      "license": "MIT",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "is-lite": "^1.2.1"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -4934,6 +5067,18 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",

package.json

@@ -29,6 +29,7 @@
     "react-draggable": "^4.4.6",
     "react-icons": "^5.5.0",
     "react-id-generator": "^3.0.2",
+    "react-joyride": "^2.9.3",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.2.0",
     "react-sortablejs": "^6.1.4",

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom"
+import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom"
 import Dashboard from "./components/dashboard/Dashboard"
 import Home from "./components/home/Home"
 import Login from "./components/login/Login";
@@ -20,10 +20,14 @@ import Account from "./components/accounts/Account";
 import TransactionView from "./components/transactions/TransactionView";
 import Templates from "./components/templates/Templates";
 import DocumentCompletionScreen from "./components/process/CompletionScreen/DocumentCompletionScreen";
+import JoyrideController from "./utlity/JoyRideTour";
 
 const App = () => {
+
   return (
+    <>
       <BrowserRouter>
+
         {/* <HashRouter> */}
         <ToastContainer />
 
@@ -93,8 +97,13 @@ const App = () => {
           {/* Links work wothout Login */}
         </Routes>
 
+        <JoyrideController />
+
         {/* </HashRouter> */}
       </BrowserRouter>
+
+    </>
+
   )
 }
 

src/components/CommonNav.tsx

@@ -152,7 +152,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
       if (item) {
         const userData = {
           id: item?.id,
-          name : item?.firstName + " " + item?.lastName ,
+          name: item?.firstName + " " + item?.lastName,
           email: item?.email,
           language: "",
           account: {
@@ -162,7 +162,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
           },
         };
 
-        console.log("userData",userData)
+        console.log("userData", userData)
 
         setUser(userData);
         sessionStorage.setItem('userDetails', JSON.stringify(userData));
@@ -295,6 +295,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
       <div className="flex items-center space-x-2">
         <div className="relative" ref={dropdownRef}>
           <button
+            id='user-details-avatar'
             className="flex items-center space-x-2 p-1 cursor-pointer rounded-lg transition-colors"
             onClick={handleMainDropdownToggle}
             aria-expanded={open}

src/components/client/DocumentPages.tsx

@@ -9,7 +9,7 @@ interface DocumentPagesInterface {
 
 const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {
     return (
-        <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
+        <div className='bg-white h-full p-4 overflow-y-auto'>
 
             <div className="flex flex-col gap-2">
                 {selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {

src/components/client/SignDocument.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import axios from "axios"
 import { RootState } from "../../store/store";
 import { useParams } from "react-router-dom"
-import { DroppedItem, DroppedItemsObj } from "../../utlity/types";
+import { DroppedItem, DroppedItemsObj, TagsTypes } from "../../utlity/types";
 
 import Loader from "../dashboard/Loader";
 import SignCon from "../signature/SignCon";
@@ -172,6 +172,8 @@ const SignDocument = () => {
     const [hideTags, setHideTags] = useState<boolean>(false);
     const [transparentTags, setTransparentTags] = useState<boolean>(false);
 
+    const [provideTags, setProvideTags] = useState(false)
+
     const [saved, setSaved] = useState<SaveType>({
         saveType: null,
         save: false,
@@ -308,6 +310,10 @@ const SignDocument = () => {
                     setTransaction(res.data.transaction)
                     setRecSignStatus(res.data.status)
 
+                    if ("provideOwnTags" in res.data.details && res.data.details.provideOwnTags) {
+                        setProvideTags(true)
+                    }
+
                     setTimeout(() => {
                         dispatch(hideLoader());
                     }, 600);
@@ -850,7 +856,9 @@ const SignDocument = () => {
                             {(!transparentTags && !hideTags) ? <button
                                 // onClick={() => handleFormSubmitBtnClick()}
                                 className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)] outline-none'>
-                                <p className='tracking-wide text-white'>
+                                <p
+                                    id="sign-client-side-btn"
+                                    className='tracking-wide text-white'>
                                     Sign
                                 </p>
                                 <FaSignature className='text-white text-md' />
@@ -870,9 +878,10 @@ const SignDocument = () => {
 
                         {/* Left Side pages start */}
                         {/* <div className="lg:col-span-2 bg-slate-100 h-full p-4 overflow-y-auto"></div> */}
-
+                        <div
-                        <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
+                            id="tags-list-client-side"
-                            {recipientId && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
+                            className={`col-span-2 h-full p-4 overflow-y-auto ${provideTags ? "bg-white" : "order-last"}`}>
+                            {recipientId && provideTags && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
                         </div>
 
 
@@ -1188,6 +1197,31 @@ const SignDocument = () => {
                                                                                 {/* TEMPORAL FIELD - END */}
 
 
+                                                                                {/* Attachment Field - START */}
+                                                                                {item.type.toLowerCase() === TagsTypes.ATTACHMENT &&
+                                                                                    <div
+                                                                                        tabIndex={1}
+                                                                                        id={item.id}
+                                                                                        // onClick={() => handleStampClick(index)}
+                                                                                        className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
+                                                                                    // style={{ height: item.dimensions.height + "px" }}
+                                                                                    >
+                                                                                        {!transparentTags && !hideTags ?
+                                                                                            (
+                                                                                                <p className="text-lg text-slate-600">
+                                                                                                    {typeToIconMap.ATTACHMENT}
+                                                                                                </p>
+                                                                                            )
+                                                                                            :
+                                                                                            (
+                                                                                                <p className="text-lg text-slate-600">
+                                                                                                    {typeToIconMap.ATTACHMENT}
+                                                                                                </p>
+                                                                                            )
+                                                                                        }
+                                                                                    </div>}
+                                                                                {/* Attachment Field - END */}
+
 
 
                                                                                 {/* Focus Show Element */}
@@ -1257,9 +1291,12 @@ const SignDocument = () => {
 
                         </div>
 
-
+                        <div className={`col-span-2 ${provideTags ? "" : "order-first"}`}>
-                        <DocumentPages selectedDocuments={selectedDocuments} setDropDownTogglePage={setDropDownTogglePage} dropDownTogglePage={dropDownTogglePage} />
+                            <DocumentPages
-
+                                selectedDocuments={selectedDocuments}
+                                setDropDownTogglePage={setDropDownTogglePage}
+                                dropDownTogglePage={dropDownTogglePage} />
+                        </div>
 
                         {/* Right Side - START */}
                         {/* <div className="col-span-2 bg-slate-100 h-full p-4 overflow-y-auto">

src/components/dashboard/SendForSign.tsx

@@ -76,7 +76,9 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
     // }
 
     return (
-        <div className='relative max-h-max pb-3'
+        <div 
+        id='send-for-sign-self-sign-btn'
+        className='relative max-h-max pb-3'
             tabIndex={0}
             ref={dropDownRef}
             onBlur={() => setSendForSignDropdown(false)}

src/components/dashboard/SideBar.tsx

@@ -60,7 +60,9 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
                         {showSideBar ? 'Sign Made Easy' : 'SME'}
                     </h1>
 
-                    <div className={`flex flex-col mt-4 ${showSideBar ? '' : 'items-center'}`}>
+                    <div 
+                    id="nav-link-dash"
+                    className={`flex flex-col mt-4 ${showSideBar ? '' : 'items-center'}`}>
                         <SendForSign showSideBar={showSideBar} />
                         <NavLink to="/" icon={<FaHome />} label="Home" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                         <NavLink to="/templates" icon={<HiTemplate />} label="Templates" showSideBar={showSideBar} menuPathMap={menuPathMap} />

src/components/home/StartNow.tsx

@@ -49,6 +49,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">
                 {/* Upload icon with subtle animation */}
                 <div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -62,7 +62,7 @@ const ProcessStepOne = () => {
   console.log("selectedRecipients", selectedRecipients)
 
   useEffect(() => {
-<<<<<<< HEAD
+// <<<<<<< HEAD
     // Fetching Transaction Details - START 
     (async () => {
       try {
@@ -74,12 +74,12 @@ const ProcessStepOne = () => {
     })()
     // Fetching Transaction Details - END
 
-=======
+// =======
-    (async () => {
+    // (async () => {
-      const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
+    //   const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
-      console.log(res.data);
+    //   console.log(res.data);
-    })()
+    // })()
->>>>>>> origin/main
+// >>>>>>> origin/main
 
     selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
     selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
@@ -308,12 +308,14 @@ const ProcessStepOne = () => {
             <p className="text-base font-normal text-gray-700 border-l pl-4">Add Recipient and Message</p>
           </div>
 
-          <div className='flex items-center gap-3'>
+          <div 
+          id="add-tags-btn-step-one"
+          className='flex items-center gap-3'>
             <button
               onClick={() => handleNextClick(false)}
               className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition"
             >
-              Add Tags
+              {signType === SignTypeEnum.selfSign ? "Add Tags" : "Add Tags"}
             </button>
           </div>
         </div>

src/components/process/processStepOne/RecipientAddCard.tsx

@@ -159,6 +159,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
     <form
       ref={formRef}
       onSubmit={handleRecipientAdd}
+      id="add-recipient-step-one"
       className="w-full bg-white border border-gray-200 rounded-lg shadow-md px-6 py-4 space-y-3 relative"
     >
       {transactionTemplateToggle === 'templates' && (

src/components/process/processStepOne/RecipientCards.tsx

@@ -59,15 +59,15 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
 
     const handleRemoveRecipient = (recipient) => {
         if (!accountId || !transactionId) return;
-<<<<<<< HEAD
+// <<<<<<< HEAD
         // dispatch(removeSelectedRecipient(recipient))
-        dispatch(removeRecipientAsync([{
+        // dispatch(removeRecipientAsync([{
-            recipientId: recipient.id,
+        //     recipientId: recipient.id,
-            email: recipient.email,
+        //     email: recipient.email,
-            accountId: accountId,
+        //     accountId: accountId,
-            transactionId: transactionId,
+        //     transactionId: transactionId,
-        }]))
+        // }]))
-=======
+// =======
         if (recipient.uuid) {
             dispatch(removeSelectedRecipient(recipient))
         } else {
@@ -78,7 +78,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                 transactionId: transactionId,
             }))
         }
->>>>>>> origin/main
+// >>>>>>> origin/main
         if (recipients.length === 2) {
             let leftRecipient = recipients.filter((obj) => {
                 if ("id" in obj && "id" in recipient) {

src/components/process/processStepOne/SelectedDocuments.tsx

@@ -87,7 +87,9 @@ const SelectedDocuments = ({transactionTemplateToggle}) => {
     return (
         <>
             {/* Upload Card First */}
-            <div className="flex flex-wrap gap-3">
+            <div 
+            id='upload-doc-step-one'
+            className="flex flex-wrap gap-3">
                 {/* Uploaded documents */}
                 <ReactSortable
                     className="flex flex-wrap gap-3"

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -5,7 +5,7 @@ import { RootState } from '../../../store/store'
 import api from '../../../config/api';
 
 import RightSideBar from './rightSideBar/RightSideBar';
-import { DroppedItem } from '../../../utlity/types';
+import { DroppedItem, TagsTypes } from '../../../utlity/types';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { IoMdClose } from 'react-icons/io';
@@ -19,6 +19,7 @@ import { IoAdd } from 'react-icons/io5';
 import Loader from '../../dashboard/Loader';
 // import { TRANSACTION_TEMPLATE_TOGGLE } from "../../../store/slices/selectedRecipientsSlice";
 import { handleGroupBorderPosition } from '../../../utlity/tagGroupConUtils';
+import { hideLoader, showLoader } from '../../../store/slices/loaderSlice';
 
 export interface DroppedItemsObj {
     [key: string]: DroppedItem[]
@@ -65,7 +66,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
     // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
     const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
 
-    console.log("selectedDocuments",selectedDocuments)
+    console.log("selectedDocuments", selectedDocuments)
 
     const [droppedItems, setDroppedItems] = useState<DroppedItemsObj>({});
     console.log("droppedItems", droppedItems)
@@ -190,7 +191,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
     useEffect(() => {
         if (isSend === null) return;
 
-        // dispatch(showLoader("Creating Transaction"))
+        dispatch(showLoader("Loading ..."))
 
         let updatedTags = { ...droppedItems }
 
@@ -209,7 +210,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
             for (const dropTag of updatedTags[dropPageIds]) {
                 let mask = null
 
-
                 // console.log(dropTag, "line 132")
 
                 // if (dropTag.subType?.toLowerCase() === "password") {
@@ -248,8 +248,8 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
                         "color": "black",
                         "textSize": 0
                     },
-                    // "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
+                    "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
-                    "required": "required" in dropTag ? dropTag.required : true,
+                    // "required": "required" in dropTag ? dropTag.required : ,
                     "update": "update" in dropTag ? dropTag.update : false,
                     "readOnly": false,
                 }
@@ -292,13 +292,17 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
         // for(const recipient of selectedRecipients) {
         //     const recrecipient
         // }
+
+
         tagsData = groupByRecipientId(tagsData);
+
         sendTagsToRecipients(tagsData, accountId, transactionId);
 
         (async () => {
             const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
             // const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, { status: "SENT" })
             console.log(res, "Check123")
+            dispatch(hideLoader())
         })()
     }, [isSend])
     // Save Tags - END
@@ -331,6 +335,19 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
         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 />,
@@ -355,6 +372,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
             pageIndex: pageIndex,
             recipientId: dragElemData.recipientId,
             recipientIndx: dragElemData.recipientIndx,
+            required: (dragElemData.label !== TagsTypes.SIGNATURE && dragElemData.label !== TagsTypes.INITIALS) ? false : true,
             update: true,
             isDeleted: false
         }
@@ -726,7 +744,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
     };
 
     // Enhanced handleGroupBorderPosition with better positioning logic
-const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
+    const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
         if (!groupElements || groupElements.length === 0) return;
 
         const groupId = groupElements[0].getAttribute('group');
@@ -823,7 +841,7 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
                     break;
             }
         });
-};
+    };
 
     const handleAddGroupItemClicked = (key: string, item: any) => {
         console.log("handleAddGroupItemClicked", item);
@@ -835,6 +853,12 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
             'group' in existingItem && existingItem.group === groupId
         ) || [];
 
+        const existingGroupItem = droppedItems[key]?.filter(existingItem =>
+            'group' in existingItem && existingItem.group === groupId
+        ) || [];
+
+        existingGroupItem[0].options
+
         // Find the bottom-most item in the group
         let bottomMostItem = item;
         if (existingGroupItems.length > 0) {
@@ -893,113 +917,9 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
         }, 100);
 
         return () => clearTimeout(timeoutId);
-}, [droppedItems]); // Re-run when droppedItems changes
+    }, [droppedItems]); // Re-run when droppedItems changes
 
 
-
-    // const handleAddRadio = (e: React.MouseEvent<HTMLElement>, key: string, index: number) => {
-    //     // const dataToSet: DroppedItemsObj = {
-    //     //     ...droppedItems,
-    //     //     [key]: [...(droppedItems[key] || []),
-    //     //     {
-    //     //         ...prepData,
-    //     //         radioGroups: dragElemData.label === "radio" ? [{ ...prepData }] : []
-    //     //     }],
-    //     // }
-
-    //     // const lastRadioElemRect = e.currentTarget?.parentElement.previousSibling.getBoundingClientRect();
-    //     // console.log(lastRadioElemRect, "lastRadioElemRect")
-
-    //     const setNewData = droppedItems;
-
-    //     if (Array.isArray(setNewData[key][index].radioGroups) && setNewData[key][index].radioGroups?.length > 0) {
-    //         setNewData[key][index].radioGroups?.push(setNewData[key][index].radioGroups[0])
-    //     }
-
-    //     setDroppedItems(setNewData);
-    // };
-
-
-
-    // const handleRadioTagMouseDown = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number, radioIndex: number) => {
-
-    //     event.preventDefault();
-
-    //     let targetContainer = event?.currentTarget?.parentElement;
-    //     let targetElement = event?.currentTarget;
-
-    //     if (!targetContainer || !targetElement) return;
-
-    //     const containerRect = targetContainer.getBoundingClientRect();
-    //     const elementRect = targetElement.getBoundingClientRect();
-
-    //     // Calculate the initial offset (where the mouse was clicked inside the element)
-    //     const offsetX = event.clientX - elementRect.left;
-    //     const offsetY = event.clientY - elementRect.top;
-
-    //     const handleMouseMove = (event: PointerEvent) => {
-    //         // Get new X and Y positions relative to the container
-    //         // let x = offsetX;
-    //         // let y = offsetY;
-
-    //         let x = event.clientX - elementRect.left;
-    //         let y = event.clientY - elementRect.top;
-
-    //         const newData = droppedItems;
-
-    //         if (newData[key][index].radioGroups && newData[key][index].radioGroups.length > 0) {
-    //             newData[key][index].radioGroups[radioIndex].dimensions.left = x;
-    //             newData[key][index].radioGroups[radioIndex].dimensions.top = y;
-
-    //             let topMin = Number.POSITIVE_INFINITY;
-    //             let topMax = Number.NEGATIVE_INFINITY;
-    //             let leftMin = Number.POSITIVE_INFINITY;
-    //             let leftMax = Number.NEGATIVE_INFINITY;
-
-    //             for (const radio of newData[key][index].radioGroups) {
-    //                 if (radio.dimensions.left < leftMin) {
-    //                     leftMin = radio.dimensions.left;
-    //                 }
-    //                 if (radio.dimensions.left > leftMax) {
-    //                     leftMax = radio.dimensions.left;
-    //                 }
-    //                 if (radio.dimensions.top < topMin) {
-    //                     topMin = radio.dimensions.top;
-    //                 }
-    //                 if (radio.dimensions.top > topMax) {
-    //                     topMax = radio.dimensions.top;
-    //                 }
-    //             }
-
-    //             newData[key][index].radioPosition = {
-    //                 topMin: topMin,
-    //                 topMax: topMax,
-    //                 leftMin: leftMin,
-    //                 leftMax: leftMax,
-    //                 width: leftMax - leftMin,
-    //                 height: topMax - topMin
-    //             }
-
-    //             newData[key][index].dimensions.left = x;
-    //             newData[key][index].dimensions.top = y;
-    //         }
-
-    //         setDroppedItems({ ...newData });
-    //     };
-
-    //     const handleMouseUp = () => {
-    //         document.removeEventListener("pointermove", handleMouseMove);
-    //         document.removeEventListener("pointerup", handleMouseUp);
-    //     };
-
-    //     // Add event listeners
-    //     document.addEventListener("pointermove", handleMouseMove);
-    //     document.addEventListener("pointerup", handleMouseUp);
-    // }
-
-
-    // NEW DIRECTIONAL MOVEMENT HANDLER - START
-  
     const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
         if (!selectedTag) return;
 
@@ -1043,8 +963,8 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
     };
 
     // Add this new handler function to your parent component
-const handleDirectPositionChange = (newLeft: number, newTop: number) => {
+    const handleDirectPositionChange = (newLeft: number, newTop: number) => {
-    console.log("handleDirectPositionChange",newLeft,newTop)
+        console.log("handleDirectPositionChange", newLeft, newTop)
         if (!selectedTag) return;
 
         const { key, index } = selectedTag;
@@ -1074,7 +994,7 @@ const handleDirectPositionChange = (newLeft: number, newTop: number) => {
                 )
                 : [],
         });
-};
+    };
 
     return (
         <>
@@ -1149,7 +1069,7 @@ const handleDirectPositionChange = (newLeft: number, newTop: number) => {
 
 
                                                                     {/* Expand Circle - STARTS */}
-                                                                    {item.type !== "radio" && <div
+                                                                    {item.type !== "radio" && item.type !== "checkbox" && <div
                                                                         onPointerDown={(e) => handleExpandTag(e, key, index)}
                                                                         className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'>
                                                                     </div>}
@@ -1178,8 +1098,6 @@ const handleDirectPositionChange = (newLeft: number, newTop: number) => {
                                                                 {
                                                                     "group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
                                                                     <>
-
-
                                                                         <div className="group-border" border-group={item.group} border-pos="top"></div>
                                                                         <div className="group-border" border-group={item.group} border-pos="right"></div>
                                                                         <div className="group-border bottom-border" border-group={item.group} border-pos="bottom">

src/components/process/processStepTwo/LeftSideBar.tsx

@@ -65,7 +65,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
         <>
             {/* Left Side Bar - START */}
             {
-                selectedRecipients.length && <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
+                selectedRecipients.length > 0 && <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
                     {isFields && <>
                         {/* Fields List and Recipeint - Start */}
                         {/* Side Bar showing Recipients */}
@@ -74,6 +74,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                             onBlur={() => setDropDownToggle(false)}>
                             {/* Selected Recipient */}
                             <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'>
                                 <div className='flex items-center gap-1.5'>
@@ -110,7 +111,9 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                         {/* Side Bar showing Recipients  - ENDS*/}
 
                         {/* Drag Drop Tags Start */}
-                        <div className='mt-4'>
+                        <div 
+                        id='tags-con-dash-left'
+                        className='mt-4'>
                             <FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
                         </div>
 

src/components/process/processStepTwo/NavTwo.tsx

@@ -262,6 +262,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
 
                     {/* Send */}
                     <div
+                        id='send-sign-dash-btn'
                         onClick={() => handleSend()}
                         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'>Send</p>

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

@@ -44,11 +44,8 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   };
 
   const handlePositionInputChange = (type: 'left' | 'top', value: string) => {
-    if (type === 'left') {
+    if (type === 'left') setLeftValue(value);
-      setLeftValue(value);
+    else setTopValue(value);
-    } else {
-      setTopValue(value);
-    }
   };
 
   const handlePositionInputBlur = (type: 'left' | 'top') => {
@@ -57,11 +54,8 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
     const numericValue = parseFloat(type === 'left' ? leftValue : topValue);
     if (isNaN(numericValue)) {
       const { top = 0, left = 0 } = selectedType || {};
-      if (type === 'left') {
       setLeftValue(Math.round(left).toString());
-      } else {
       setTopValue(Math.round(top).toString());
-      }
       return;
     }
 
@@ -73,9 +67,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   };
 
   const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter') handlePositionInputBlur(type);
-      handlePositionInputBlur(type);
-    }
   };
 
   useEffect(() => {
@@ -84,20 +76,11 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
 
       switch (event.key) {
         case 'ArrowUp':
-          event.preventDefault();
-          handleMove('up');
-          break;
         case 'ArrowDown':
-          event.preventDefault();
-          handleMove('down');
-          break;
         case 'ArrowLeft':
-          event.preventDefault();
-          handleMove('left');
-          break;
         case 'ArrowRight':
           event.preventDefault();
-          handleMove('right');
+          handleMove(event.key.replace('Arrow', '').toLowerCase() as any);
           break;
       }
     };
@@ -107,59 +90,34 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   }, [disabled, stepSize]);
 
   const buttonClass = `
-  p-1 rounded-sm transition-all duration-200 border shadow-sm text-[10px]
+    w-8 h-8 flex items-center justify-center rounded-full border shadow-sm text-[12px]
     ${disabled
       ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-      : 'bg-white text-gray-600 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'}
+      : 'bg-white text-gray-700 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'}
-  flex items-center justify-center w-6 h-6 `;
-
-  const inputClass = `
-    w-12 h-6 text-[10px] text-center border rounded px-1 bg-white
-    ${disabled
-      ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-300'
-      : 'text-gray-600 border-gray-300 focus:border-blue-400 focus:outline-none'}
   `;
 
-  const { top = 0, left = 0, width = 0, height = 0 } = selectedType || {};
+  const inputClass = `
+    w-14 text-center text-[12px] rounded border px-1 py-0.5 bg-white
+    ${disabled
+      ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+      : 'border-gray-300 text-gray-700 focus:outline-none focus:ring focus:border-blue-400'}
+  `;
 
   return (
-    <div className={`flex flex-col items-center space-y-4 text-[10px] text-gray-700 ${className}`}>
+    <div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}>
-      {/* Top Button */}
+      {/* Top */}
-      <div className="flex justify-center me-4">
+      <button onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
-        <div className="flex flex-col items-center">
+        <FaArrowUp />
-          <button
-            onClick={() => handleMove('up')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move up"
-            type="button"
-          >
-            <FaArrowUp size={12} />
       </button>
-          <span className="mt-1">Top</span>
-        </div>
-      </div>
 
-      {/* Middle Row: Left - Center (Inputs) - Right */}
+      {/* Middle: Left / Inputs / Right */}
-      <div className="flex items-center space-x-1">
+      <div className="flex items-center space-x-3">
-        {/* Left Button */}
+        <button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
-        <div className="flex flex-col items-center">
+          <FaArrowLeft />
-          <button
-            onClick={() => handleMove('left')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move left"
-            type="button"
-          >
-            <FaArrowLeft size={12} />
         </button>
-          <span className="mt-1">Left</span>
-        </div>
 
-        {/* Center Panel */}
+        {/* Input fields */}
-        <div className="relative flex items-center justify-center bg-white rounded-lg px-1 py-2 w-24">
+        <div className="flex flex-col items-center space-y-1">
-          {/* Floating dimensions tooltip */}
-          <div className="absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-[1px] text-[10px] font-mono text-black z-10 rounded-sm flex items-center gap-[2px]">
           <input
             type="number"
             value={leftValue}
@@ -167,9 +125,9 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
             onBlur={() => handlePositionInputBlur('left')}
             onKeyPress={(e) => handleKeyPress(e, 'left')}
             disabled={disabled}
-              className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
+            className={inputClass}
+            placeholder="Left"
           />
-            <span className="mx-[1px]">×</span>
           <input
             type="number"
             value={topValue}
@@ -177,45 +135,22 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
             onBlur={() => handlePositionInputBlur('top')}
             onKeyPress={(e) => handleKeyPress(e, 'top')}
             disabled={disabled}
-              className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
+            className={inputClass}
+            placeholder="Top"
           />
         </div>
-        </div>
 
-
+        <button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
-        {/* Right Button */}
+          <FaArrowRight />
-        <div className="flex flex-col items-center">
-          <button
-            onClick={() => handleMove('right')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move right"
-            type="button"
-          >
-            <FaArrowRight size={12} />
         </button>
-          <span className="mt-1">Right</span>
-        </div>
       </div>
 
-      {/* Bottom Button */}
+      {/* Bottom */}
-      <div className="flex justify-center me-4">
+      <button onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
-        <div className="flex flex-col items-center">
+        <FaArrowDown />
-          <button
-            onClick={() => handleMove('down')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move down"
-            type="button"
-          >
-            <FaArrowDown size={12} />
       </button>
-          <span className="mt-1">Bottom</span>
-        </div>
-      </div>
     </div>
   );
-
 };
 
 export default DirectionalControls;

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

@@ -122,28 +122,26 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
         console.log("changeTo", changeTo, "changeWith", changeWith)
         if (changeTo === '' || changeWith === '') return
 
-        if (changeWith === "paragraph") {
+        // if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
-            return
+        //     // let change: string = changeWith;
-        }
+        //     // if (change === "DATE TIME") {
+        //     //     change = "DATE_TIME"
+        //     // }
+        //     setDroppedItems((prev) => {
+        //         console.log("Temporal30", prev);
+        //         return {
+        //             ...prev,
+        //             [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
+        //                 ? prev[selTagKey].map((item, i) =>
+        //                     i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
+        //                 )
+        //                 : [], // Fallback in case it's undefined or not an array
+        //         };
+        //     });
 
-        if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
+        // } else 
-            // let change: string = changeWith;
-            // if (change === "DATE TIME") {
-            //     change = "DATE_TIME"
-            // }
-            setDroppedItems((prev) => {
-                console.log("Temporal30", prev);
-                return {
-                    ...prev,
-                    [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
-                        ? prev[selTagKey].map((item, i) =>
-                            i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
-                        )
-                        : [], // Fallback in case it's undefined or not an array
-                };
-            });
             
-        } else if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
+            if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
             console.log("Second check")
             console.log("Line 161")
             setDroppedItems((prev) => (
@@ -174,13 +172,26 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                 }// Provide a fallback in case it's undefined or not an array
             ));
 
-        } else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
+        } 
+        
+        
+        
+        else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
             console.log("Fourth Check")
             let val = timeFormats[0].format;
-            if (!is24Hrs) {
+            console.log(is24Hrs, "is24Hrs Line 176")
+            if (is24Hrs === null) {
+                val = timeFormats[0].format
+            } else if(!is24Hrs) {
                 val = timeFormats[1].format
+            } else {
+                val = timeFormats[0].format
             }
-            console.log("val", val)
+            // console.log("val", val, is24Hrs)
+
+            // if(is24Hrs === null) {
+            //     changeWith = changeWith + " " + val;
+            // }
 
             setDroppedItems((prev) => {
                 const updatedArray = Array.isArray(prev[selTagKey])
@@ -199,9 +210,9 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                     [selTagKey]: updatedArray,
                 };
             });
+        } 
         
-
+        else {
-        } else {
             setDroppedItems((prev) => {
 
                 const updatedItems = Array.isArray(prev[selTagKey])
@@ -284,6 +295,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
         const tagHeight = selectedTag?.dimensions?.height - 18;
 
         if (
+            selectedTag.type === TagsTypes.TEXT &&
             selectedTag.subType !== TEXT.PASSWORD &&
             selectedTag.subType !== TEXT.PARAGRAPH &&
             tagHeight > fontSize * 2

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

@@ -39,7 +39,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                 return newState;
             });
         }
-};
+    };
 
 
     const handleSelectOptionDel = (indx: number) => {
@@ -65,14 +65,11 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                 <input
                     type="text"
                     onChange={(e) => setSelectedOption(e.target.value)}
-                    value={selectedOption}
+                    // value={selectedOption}
                     onKeyUp={(e) => {
                         if (e.code === "Enter") {
-                            // if (selectedOption) {
+                            e.currentTarget.value = "";
-                            //     setSelectedOptions((prev) => [...prev, selectedOption]);
+                            handleAddSelectOption();
-                            //     setSelectedOption("");
-                            // }
-                            handleAddSelectOption()
                         }
                     }}
                     className="bg-slate-100 w-full outline-none p-2 rounded" />

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

@@ -27,6 +27,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
     const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
 
     const handleIs24HrsClick = (checked: boolean) => {
+        console.log(is24Hrs, checked, "line 30")
         if (subType === TEMPORAL.TIME) {
             if (!checked) {
                 handlePropertyChange("format", timeFormats[1].format, is24Hrs)
@@ -34,6 +35,9 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
                 handlePropertyChange("format", timeFormats[0].format, is24Hrs)
             }
         }
+        else if (subType === TEMPORAL.DATE_TIME) {
+            handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
+        }
         setIs24Hrs(checked)
     }
 
@@ -86,11 +90,11 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
                                 val = val + " " + timeFormats[1].format;
                             }
                         }
-                        console.log('line 89' , val )
+                        console.log('line 89', val)
                         return (
                             <div
                                 key={indx}
-                                onClick={() => handlePropertyChange("format", valObj["format"])}
+                                onClick={() => handlePropertyChange("format", valObj["format"], is24Hrs)}
                                 className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
                             >
                                 {val}

src/utlity/JoyRideTour.tsx

@@ -0,0 +1,244 @@
+import { useLocation } from "react-router-dom";
+import { useEffect, useState } from "react";
+import Joyride, { CallBackProps, STATUS, Step } from "react-joyride";
+
+const JoyrideController = () => {
+  const location = useLocation();
+  const [runTour, setRunTour] = useState(false);
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [stepIndex, setStepIndex] = useState(0);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+
+    const tryStartTour = () => {
+      let currentSteps: Step[] = [];
+
+      if (location.pathname === "/") {
+        currentSteps = [
+          {
+            target: "body", // This makes the welcome step show in center of screen
+            content: "👋 Welcome to the SME! Let's take a quick tour.",
+            placement: "center",
+            disableBeacon: true,
+          },
+          {
+            target: "#user-details-avatar",
+            content: "User Details",
+            placement: "left",
+            disableBeacon: true,
+
+          },
+          {
+            target: "#send-for-sign-self-sign-btn",
+            content: "Send document for signature, or for Self Sign",
+            placement: "left",
+            disableBeacon: true,
+
+          },
+          {
+            target: "#nav-link-dash",
+            content: (
+              <div>
+                <p>Easy Navigation to see transaction and templates.</p>
+                <p>
+                  <strong>Templates:</strong> you can save all recipient documents and tags and
+                  use them multiple times on one click.
+                </p>
+              </div>
+            ),
+            placement: "left",
+            disableBeacon: true,
+
+          },
+          {
+            target: "#start-now-upload-con",
+            content: (
+              <div>
+                <p>Let's Start Some Action</p>
+                <p>
+                  Click On <strong>Start Now</strong> To upload your first document for signature
+                </p>
+              </div>
+            ),
+            placement: "top",
+            disableBeacon: true,
+
+          },
+        ];
+      } else if (location.pathname.includes("/process-step-one")) {
+        currentSteps = [
+          {
+            target: "body", // This makes the welcome step show in center of screen
+            content: (
+              <div>
+                <p>👋 Welcome To process step one</p>
+                <p>
+                  Here we have to add core two ingredients <strong>Document, Recipient</strong> to start cooking
+                </p>
+              </div>
+            ),
+            placement: "center",
+            disableBeacon: true,
+          },
+          {
+            target: "#upload-doc-step-one",
+            content: "Add Documents",
+            placement: "right",
+            disableBeacon: true,
+
+          },
+          {
+            target: "#add-recipient-step-one",
+            content: "Add recipient for sign",
+            placement: "right",
+            disableBeacon: true,
+
+          },
+          {
+            target: "#add-tags-btn-step-one",
+            content: "Click On Add Tags",
+            placement: "right",
+            disableBeacon: true,
+
+          },
+        ];
+      } else if (location.pathname.includes("/process-step-two")) {
+        currentSteps = [
+          {
+            target: "body", // This makes the welcome step show in center of screen
+            content: (
+              <div>
+                <p>👋 This is Final Step</p>
+                <br />
+                <p>Here we can add tags in documents and assign them to recipients</p>
+              </div>
+            ),
+            placement: "center",
+            disableBeacon: true,
+          },
+          {
+            target: "#switch-recipients-left",
+            content: "Switch Recipients",
+            placement: "right",
+            disableBeacon: true,
+          },
+          {
+            target: "#tags-con-dash-left",
+            content: "All Tags, Drag and drop on the document",
+            placement: "right",
+            disableBeacon: true,
+          },
+          {
+            target: "#send-sign-dash-btn",
+            content: <div>
+              <p>When setisfied with all the change, Click on <strong>Send</strong></p>
+            </div>,
+            placement: "right",
+            disableBeacon: true,
+          },
+        ];
+      } else if (location.pathname.includes("/sign/")) {
+        currentSteps = [
+          {
+            target: "body", // This makes the welcome step show in center of screen
+            content: (
+              <div>
+                <p>👋 Welcome to SME, Let's Start the tour</p>
+              </div>
+            ),
+            placement: "center",
+            disableBeacon: true,
+          },
+          {
+            target: "#tags-list-client-side",
+            content: <div>
+              <p>Drag and drop tags onto the document to fill or sign.</p>
+            </div>,
+            placement: "right",
+            disableBeacon: true,
+          },
+          {
+            target: "#sign-client-side-btn",
+            content: <div>
+              <p>Check your document carefully When you're satisfied Click on Sign button</p>
+            </div>,
+            placement: "right",
+            disableBeacon: true,
+          },
+        ];
+      }
+
+      const allTargetsExist = currentSteps.every((step) =>
+        step.target === "body" ? true : document.querySelector(step.target)
+      );
+
+      if (allTargetsExist) {
+        setSteps(currentSteps);
+        setRunTour(true);
+        setStepIndex(0);
+      } else {
+        // Try again after slight delay (in case DOM not ready yet)
+        timeout = setTimeout(tryStartTour, 300);
+      }
+    };
+
+    setRunTour(false);
+    setSteps([]);
+    setStepIndex(0);
+    timeout = setTimeout(tryStartTour, 300);
+
+    return () => clearTimeout(timeout);
+  }, [location]);
+
+  // Optional: handle callback (e.g. restart, stop, next)
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { status, type } = data;
+    const finished = [STATUS.FINISHED, STATUS.SKIPPED].includes(status);
+    if (finished) {
+      setRunTour(false);
+    }
+  };
+
+  return (
+    <Joyride
+      steps={steps}
+      run={runTour}
+      callback={handleJoyrideCallback}
+      continuous
+      scrollToFirstStep
+      showProgress
+      showSkipButton
+      disableOverlayClose
+      styles={{
+        options: {
+          zIndex: 9999,
+          primaryColor: "#3D74B6",   // Changes "Next"/"Done" button
+          textColor: "#111827",      // Content text color
+          backgroundColor: "#F9FAFB",// Tooltip background
+          arrowColor: "#F9FAFB",     // Arrow background
+        },
+        buttonNext: {
+          backgroundColor: "#3D74B6",  // Indigo
+          color: "#FFFFFF",
+        },
+        buttonBack: {
+          color: "#4F46E5",            // Indigo text
+        },
+        buttonSkip: {
+          color: "#EF4444",            // Red skip button
+        }
+      }}
+      locale={{
+        back: "Back",
+        close: "Close",
+        last: "Done",
+        next: "Next",
+        skip: "Skip",
+      }}
+    />
+
+  );
+};
+
+export default JoyrideController;