Merge pull request #1295 from nxglabs/sync-to-public_repo-17787708673

fix: show signer name in typed signature instead in selfsign flow

Author: prafull-opensignlabs

apps/OpenSign/package.json

@@ -3,13 +3,13 @@
   "version": "2.26.0",
   "private": true,
   "dependencies": {
-    "@formkit/auto-animate": "^0.8.4",
+    "@formkit/auto-animate": "^0.9.0",
     "@imgly/background-removal": "^1.7.0",
-    "@lottiefiles/dotlottie-react": "^0.15.2",
+    "@lottiefiles/dotlottie-react": "^0.16.2",
     "@pdf-lib/fontkit": "^1.1.1",
     "@radix-ui/themes": "^3.2.1",
     "@reduxjs/toolkit": "^2.8.2",
-    "axios": "^1.11.0",
+    "axios": "^1.12.2",
     "date-fns-tz": "^3.2.0",
     "file-saver": "^2.0.5",
     "i18next": "^25.4.0",
@@ -42,7 +42,7 @@
     "react-quill-new": "^3.6.0",
     "react-redux": "^9.2.0",
     "react-rnd": "^10.5.2",
-    "react-router": "^7.8.2",
+    "react-router": "^7.9.1",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.10.2",
     "react-signature-canvas": "^1.1.0-alpha.2",
@@ -101,7 +101,7 @@
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.12",
+    "@types/react": "^19.1.13",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.21",
@@ -113,7 +113,7 @@
     "eslint": "^9.34.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.0.0",
     "lint-staged": "^16.1.6",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",

apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx

@@ -671,18 +671,21 @@ function WidgetsValueModal(props) {
       }
     }
     if (isTab === "type") {
+      const signerName = localStorage.getItem("signer")
+        ? JSON.parse(localStorage.getItem("signer"))?.Name
+        : currentUserName;
       //trim user name or typed name value to show in initial signature
       const trimmedName = typedSignature
         ? typedSignature?.trim()
         : props?.journey === "kiosk-signing" && kiosk_signer
           ? kiosk_signer[0]?.Name?.trim()
-          : currentUserName?.trim();
+          : signerName?.trim();
       //get full name of user
       const fullUserName =
         typedSignature ||
         (props?.journey === "kiosk-signing" && kiosk_signer
           ? kiosk_signer[0]?.Name
-          : currentUserName);
+          : signerName);
       const firstCharacter = trimmedName?.charAt(0);
       const userName =
         currWidgetsDetails?.type === "initials" ? firstCharacter : fullUserName;
@@ -1201,8 +1204,8 @@ function WidgetsValueModal(props) {
                     )
                   ) : isTab === "type" ? (
                     <>
-                      <div className="flex justify-between items-center tabWidth">
-                        <span className="mr-[5px] text-[12px]">
+                      <div className="flex justify-between items-center tabWidth rounded-[4px]">
+                        <span className="ml-[5px] text-[12px] text-base-content">
                           {currWidgetsDetails?.type === "initials"
                             ? t("initial-teb")
                             : t("signature-tab")}
@@ -1229,7 +1232,7 @@ function WidgetsValueModal(props) {
                           }}
                         />
                       </div>
-                      <div className="border-[1px] border-[#d6d3d3] mt-[10px] ml-[5px]">
+                      <div className="border-[1px] border-[#d6d3d3] mt-[10px] rounded-[4px]">
                         {fontOptions.map((font, ind) => {
                           return (
                             <div
@@ -1252,7 +1255,7 @@ function WidgetsValueModal(props) {
                               >
                                 {typedSignature
                                   ? typedSignature
-                                  : "Your signature"}
+                                  : t("Your-Signature")}
                               </div>
                             </div>
                           );
@@ -1656,7 +1659,7 @@ function WidgetsValueModal(props) {
       }
     }, []);
     return (
-      <span className="text-center text-[12px]">
+      <span className="text-center text-[12px] text-base-content">
         {t("required-mssg", { leftRequiredWidget, totalWidget })}
       </span>
     );
@@ -1888,15 +1891,15 @@ function WidgetsValueModal(props) {
           {isFinish ? (
             <>
               <div className="p-1 mt-3">
-                <span className="text-base">{t("finish-mssg")}</span>
+                <span className="text-base text-base-content">
+                  {t("finish-mssg")}
+                </span>
               </div>
               <div className="flex gap-3 items-center mt-4">
                 <button
                   type="button"
                   className="op-btn op-btn-primary op-btn-sm px-4"
-                  onClick={() => {
-                    handleFinish();
-                  }}
+                  onClick={() => handleFinish()}
                 >
                   {t("finish")}
                 </button>
@@ -1956,9 +1959,7 @@ function WidgetsValueModal(props) {
                     <button
                       type="button"
                       className="op-btn op-btn-primary op-btn-sm"
-                      onClick={() => {
-                        handleClickOnNext();
-                      }}
+                      onClick={() => handleClickOnNext()}
                       disabled={handleDisable()}
                     >
                       {t("save")}
@@ -1968,20 +1969,15 @@ function WidgetsValueModal(props) {
                       type="button"
                       className="op-btn op-btn-primary op-btn-sm"
                       disabled={handleDisable()}
-                      onClick={() => {
-                        const isFinishDoc = true;
-                        handleClickOnNext(isFinishDoc);
-                      }}
+                      onClick={() => handleClickOnNext(true)} // isFinishDoc
                     >
                       {t("done")}
                     </button>
                   ) : (
                     <button
                       type="button"
                       className="op-btn op-btn-primary op-btn-sm text-xs md:text-sm"
-                      onClick={() => {
-                        handleClickOnNext();
-                      }}
+                      onClick={() => handleClickOnNext()}
                       disabled={handleDisable()}
                     >
                       {t("next-field")}

apps/OpenSign/src/pages/Form.jsx

@@ -631,10 +631,12 @@ const Forms = (props) => {
   };
 
   return (
-    <div className="shadow-md rounded-box my-[2px] p-3 bg-base-100 text-base-content">
+    <div
+      className={`${isSubmit ? "" : "shadow-md rounded-box my-[2px] p-3 bg-base-100 text-base-content"}`}
+    >
       {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
       {isSubmit ? (
-        <div className="h-[300px] flex justify-center items-center">
+        <div className="flex flex-col justify-center items-center h-[100vh]">
           <Loader />
         </div>
       ) : (

apps/OpenSign/src/pages/UserProfile.jsx

@@ -487,7 +487,7 @@ function UserProfile() {
               ) : (
                 <>
                   {deleteUserRes ? (
-                    <div className="h-[100px] p-[20px] flex justify-center items-center text-sm md:text-base">
+                    <div className="h-[100px] p-[20px] flex justify-center items-center text-base-content text-sm md:text-base">
                       {deleteUserRes}
                     </div>
                   ) : (