Merge branch 'staging' into issue/204

Author: nxglabs

apps/OpenSign/src/components/AppendFormInForm.js

@@ -241,39 +241,37 @@ const AppendFormInForm = (props) => {
               className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
             />
           </div>
-
           <div className="mb-3">
             <label
-              htmlFor="phone"
+              htmlFor="email"
               className="block text-xs text-gray-700 font-semibold"
             >
-              Phone
+              Email
               <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
-              type="text"
-              id="phone"
-              value={phone}
-              onChange={(e) => setPhone(e.target.value)}
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
               required
               disabled={addYourself}
               className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
             />
           </div>
-
           <div className="mb-3">
             <label
-              htmlFor="email"
+              htmlFor="phone"
               className="block text-xs text-gray-700 font-semibold"
             >
-              Email
+              Phone
               <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
-              type="email"
-              id="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              type="text"
+              id="phone"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
               required
               disabled={addYourself}
               className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"

apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/pdfkitAddPlaceholder.min.js

@@ -32,6 +32,7 @@
     "react-scrollbars-custom": "^4.1.1",
     "react-signature-canvas": "^1.0.6",
     "reactour": "^1.19.1",
+    "select-dom": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

microfrontends/SignDocuments/package-lock.json

@@ -25,6 +25,8 @@ import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
+import { modalAlign } from "../utils/Utils";
+import { $ } from 'select-dom';
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
   const [pdfDetails, setPdfDetails] = useState([]);
@@ -1020,7 +1022,11 @@ function SignYourSelf() {
           >
             {/* this modal is used show this document is already sign */}
 
-            <Modal show={showAlreadySignDoc.status}>
+            <Modal
+              show={showAlreadySignDoc.status}
+              onShow={() => modalAlign()}
+              backdropClassName="signature-backdrop"
+            >
               <ModalHeader style={{ background: themeColor() }}>
                 <span style={{ color: "white" }}> Sign Documents</span>
               </ModalHeader>

microfrontends/SignDocuments/package.json

@@ -28,6 +28,7 @@ import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import CustomModal from "./component/CustomModal";
+import { modalAlign } from "../utils/Utils";
 function EmbedPdfImage() {
   const { id, contactBookId } = useParams();
   const [isSignPad, setIsSignPad] = useState(false);
@@ -1018,7 +1019,11 @@ function EmbedPdfImage() {
             }}
           >
             {/* this modal is used show this document is already sign */}
-            <Modal show={isAlreadySign.status}>
+            <Modal
+              show={isAlreadySign.status}
+              onShow={() => modalAlign()}
+              backdropClassName="signature-backdrop"
+            >
               <ModalHeader style={{ background: themeColor() }}>
                 <span style={{ color: "white" }}> Sign Documents</span>
               </ModalHeader>

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -626,7 +626,7 @@ option {
     padding: 16px;
   }
 
-  /* The sticky class is added to the navbar 
+  /* The sticky class is added to the navbar
   with JS when it reaches its scroll position */
   .stickyHead {
     position: fixed;
@@ -644,9 +644,9 @@ option {
     right: 0rem;
   }
 
-  /* Add some top padding to the page content 
-  to prevent sudden quick movement (as the 
-  navigation bar gets a new position at the top of the 
+  /* Add some top padding to the page content
+  to prevent sudden quick movement (as the
+  navigation bar gets a new position at the top of the
   page (position:fixed and top:0) */
   .stickyHead+.content {
     padding-top: 60px;
@@ -776,4 +776,14 @@ option {
   .mobileHead {
     display: flex;
   }
+}
+
+.signature-backdrop {
+  position: fixed;
+  top: 0; bottom: 0; left: 0; right: 0;
+  background-color: #000;
+}
+
+.signature-backdrop.fade.in {
+  opacity: 0.5;
 }

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { $ } from 'select-dom';
 
 export async function getBase64FromUrl(url) {
   const data = await fetch(url);
@@ -307,5 +308,13 @@ export function urlValidator(url) {
     return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
   } catch (err) {
     return false;
+export const modalAlign = () => {
+  let modalDialog = $('.modal-dialog').getBoundingClientRect();
+  let mobileHead = $('.mobileHead').getBoundingClientRect()
+  let modal = $('.modal-dialog');
+  if (modalDialog.left < mobileHead.left) {
+    let leftOffset = mobileHead.left - modalDialog.left;
+    modal.style.left = leftOffset + 'px';
+    modal.style.top = (window.innerHeight/3) + 'px';
   }
 };