From 5a4114b786a8d2027a65bb33089962d49b528f12 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 26 Jun 2024 14:36:04 +0530
Subject: [PATCH 1/3] fix: ui of share button in inprogress report, declined
 document popup hiding the navigation menu in mobile view, add loader to load
 animation of send request

---
 .../src/components/sidebar/Sidebar.js         |  2 +-
 apps/OpenSign/src/pages/GenerateToken.js      |  6 +-
 apps/OpenSign/src/pages/PlaceHolderSign.js    | 10 +--
 .../OpenSign/src/primitives/DotLottieReact.js | 62 +++++++++++++++++++
 .../src/primitives/GetReportDisplay.js        | 10 +--
 .../src/primitives/PdfDeclineModal.js         |  2 +-
 6 files changed, 75 insertions(+), 17 deletions(-)
 create mode 100644 apps/OpenSign/src/primitives/DotLottieReact.js

diff --git a/apps/OpenSign/src/components/sidebar/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js
index 4d7da0bff..8e01910df 100644
--- a/apps/OpenSign/src/components/sidebar/Sidebar.js
+++ b/apps/OpenSign/src/components/sidebar/Sidebar.js
@@ -63,7 +63,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
   };
   return (
     <aside
-      className={`absolute lg:relative bg-base-100 h-screen overflow-y-auto transition-all z-[100] shadow-lg hide-scrollbar
+      className={`absolute lg:relative bg-base-100 h-screen overflow-y-auto transition-all z-[999] shadow-lg hide-scrollbar
      ${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
     >
       <div className="flex px-2 py-3 gap-2 items-center shadow-md">
diff --git a/apps/OpenSign/src/pages/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js
index 53b4a9efe..775fd5b0d 100644
--- a/apps/OpenSign/src/pages/GenerateToken.js
+++ b/apps/OpenSign/src/pages/GenerateToken.js
@@ -135,8 +135,8 @@ function GenerateToken() {
                     id="token"
                     className={`${
                       isSubscribe || !isEnableSubscription
-                        ? "bg-white/20 pointer-events-none select-none"
-                        : ""
+                        ? ""
+                        : "bg-white/20 pointer-events-none select-none"
                     } md:text-end py-2 md:py-0`}
                   >
                     <span
@@ -146,7 +146,7 @@ function GenerateToken() {
                       {apiToken ? apiToken : "_____"}
                     </span>
                     <button
-                      className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2"
+                      className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2 cursor-pointer"
                       onClick={() => copytoclipboard(apiToken)}
                     >
                       <i className="fa-light fa-copy"></i>
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 25aeddc95..e550a00de 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -49,10 +49,10 @@ import { EmailBody } from "../components/pdf/EmailBody";
 import Upgrade from "../primitives/Upgrade";
 import Alert from "../primitives/Alert";
 import Loader from "../primitives/Loader";
-import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { useSelector } from "react-redux";
 import TextFontSetting from "../components/pdf/TextFontSetting";
 import PdfZoom from "../components/pdf/PdfZoom";
+import LottieWithLoader from "../primitives/DotLottieReact";
 
 function PlaceHolderSign() {
   const editorRef = useRef();
@@ -1934,13 +1934,7 @@ function PlaceHolderSign() {
                     <div className="h-[100%] p-[20px]">
                       {mailStatus === "success" ? (
                         <div className="text-center mb-[10px]">
-                          <DotLottieReact
-                            dotLottieRefCallback={null}
-                            src="https://lottie.host/00a72a09-f2d4-493a-9b2d-2843bf067638/Ic7jJ44wLJ.json"
-                            autoplay
-                            loop={false}
-                            className="w-[120px] h-[120px] mx-auto"
-                          />
+                          <LottieWithLoader />
                           <p>
                             You have successfully sent mails to all recipients!
                           </p>
diff --git a/apps/OpenSign/src/primitives/DotLottieReact.js b/apps/OpenSign/src/primitives/DotLottieReact.js
new file mode 100644
index 000000000..b3b001d00
--- /dev/null
+++ b/apps/OpenSign/src/primitives/DotLottieReact.js
@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from "react";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import Loader from "./Loader";
+
+const LottieWithLoader = ({
+  src = "https://lottie.host/00a72a09-f2d4-493a-9b2d-2843bf067638/Ic7jJ44wLJ.json",
+  minLoaderTime = 1000,
+  timeout = 10000
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [animationSrc, setAnimationSrc] = useState(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setHasError(true);
+    }, timeout);
+
+    fetch(src)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.blob();
+      })
+      .then((blob) => {
+        const objectURL = URL.createObjectURL(blob);
+        setAnimationSrc(objectURL);
+        setTimeout(() => {
+          setIsLoaded(true);
+        }, minLoaderTime);
+      })
+      .catch((error) => {
+        console.error("There was a problem with the fetch operation:", error);
+        setHasError(true);
+      });
+
+    return () => clearTimeout(timer);
+  }, [src, minLoaderTime, timeout]);
+
+  return (
+    <div>
+      {!isLoaded && !hasError && (
+        <div className="loader">
+          {" "}
+          <Loader />
+        </div>
+      )}
+      {hasError && <div className="error">Failed to load animation</div>}
+      {isLoaded && animationSrc && (
+        <DotLottieReact
+          src={animationSrc}
+          loop
+          autoplay
+          style={{ display: "block" }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default LottieWithLoader;
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index a39cb17ac..7b1f35e4d 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -1408,6 +1408,7 @@ const ReportTable = (props) => {
                               handleClose={() => {
                                 setIsShare({});
                                 setActLoader({});
+                                setCopied(false);
                               }}
                             >
                               <div className="m-[20px]">
@@ -1416,22 +1417,23 @@ const ReportTable = (props) => {
                                     key={i}
                                     className="text-sm font-normal text-black flex my-2 justify-between items-center"
                                   >
-                                    <span className="text-sm font-semibold">
+                                    <span className="w-[180px] md:w-[300px] whitespace-nowrap overflow-hidden text-ellipsis   text-sm font-semibold">
                                       {share.email}
                                     </span>
-                                    <div>
+                                    <div className="flex items-center gap-1">
                                       <RWebShare
                                         data={{
                                           url: share.url,
                                           title: "Sign url"
                                         }}
                                       >
-                                        <button className="bg-[#002864] text-white rounded w-[32px] h-[30px] focus:outline-none">
+                                        <button className="op-btn op-btn-primary op-btn-xs md:op-btn-sm ">
                                           <i className="fa-light fa-share-from-square"></i>{" "}
+                                          Share
                                         </button>
                                       </RWebShare>
                                       <button
-                                        className="ml-2 bg-[#002864] text-white rounded w-[100px] h-[30px] focus:outline-none"
+                                        className="op-btn op-btn-primary op-btn-xs md:op-btn-sm"
                                         onClick={() => copytoclipboard(share)}
                                       >
                                         <i className="fa-light fa-link"></i>{" "}
diff --git a/apps/OpenSign/src/primitives/PdfDeclineModal.js b/apps/OpenSign/src/primitives/PdfDeclineModal.js
index 7030dc5f8..6345fb02f 100644
--- a/apps/OpenSign/src/primitives/PdfDeclineModal.js
+++ b/apps/OpenSign/src/primitives/PdfDeclineModal.js
@@ -11,7 +11,7 @@ function CustomModal({
 }) {
   return (
     show && (
-      <dialog className="op-modal op-modal-open absolute z-[1999]">
+      <dialog className="op-modal op-modal-open absolute z-[998]">
         <div className="w-[80%] md:w-[40%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
           <h3 className="text-[#de4337] font-bold text-lg pt-[15px] px-[20px]">
             {headMsg && headMsg}

From 0580a18b0d2e53d0a0b4dce3b1bd7e711b4098cd Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 26 Jun 2024 15:33:45 +0530
Subject: [PATCH 2/3] fix: remove solid share button design to outline

---
 apps/OpenSign/src/primitives/GetReportDisplay.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 7b1f35e4d..de3bc6cff 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -1420,20 +1420,20 @@ const ReportTable = (props) => {
                                     <span className="w-[180px] md:w-[300px] whitespace-nowrap overflow-hidden text-ellipsis   text-sm font-semibold">
                                       {share.email}
                                     </span>
-                                    <div className="flex items-center gap-1">
+                                    <div className="flex items-center gap-2">
                                       <RWebShare
                                         data={{
                                           url: share.url,
                                           title: "Sign url"
                                         }}
                                       >
-                                        <button className="op-btn op-btn-primary op-btn-xs md:op-btn-sm ">
+                                        <button className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm ">
                                           <i className="fa-light fa-share-from-square"></i>{" "}
                                           Share
                                         </button>
                                       </RWebShare>
                                       <button
-                                        className="op-btn op-btn-primary op-btn-xs md:op-btn-sm"
+                                        className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm"
                                         onClick={() => copytoclipboard(share)}
                                       >
                                         <i className="fa-light fa-link"></i>{" "}

From 18992e0334da2ef5e327cacfa91924effb350897 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 26 Jun 2024 15:51:04 +0530
Subject: [PATCH 3/3] refactor: refactor code

---
 apps/OpenSign/src/primitives/GetReportDisplay.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index de3bc6cff..259bad27c 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -1417,7 +1417,7 @@ const ReportTable = (props) => {
                                     key={i}
                                     className="text-sm font-normal text-black flex my-2 justify-between items-center"
                                   >
-                                    <span className="w-[180px] md:w-[300px] whitespace-nowrap overflow-hidden text-ellipsis   text-sm font-semibold">
+                                    <span className="w-[150px] mr-[5px] md:mr-0 md:w-[300px] whitespace-nowrap overflow-hidden text-ellipsis text-sm font-semibold">
                                       {share.email}
                                     </span>
                                     <div className="flex items-center gap-2">