feat: mail button on header after sign document in signyourself flow

Author: raktima-opensignlabs

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -989,6 +989,7 @@ function SignYourSelf() {
               currentSigner={true}
               alreadySign={pdfUrl ? true : false}
               isSignYourself={true}
+              setIsEmail={setIsEmail}
             />
 
             {/* className="hidePdf" */}

microfrontends/SignDocuments/src/Component/component/emailComponent.js

@@ -68,10 +68,13 @@ function EmailComponent({
 
     if (sendMail.data.result.status === "success") {
       setIsEmail(false);
+      setEmailValue("");
+      setEmailCount("");
       setSuccessEmail(true);
       setTimeout(() => {
         setSuccessEmail(false);
-      }, 3000);
+      }, 1000);
+
       setIsLoading(false);
     } else if (sendMail.data.result.status === "error") {
       setIsLoading(false);
@@ -81,6 +84,7 @@ function EmailComponent({
       alert("Something went wrong!");
     }
   };
+
   //function for remove email
   const removeChip = (index) => {
     const updateEmailCount = emailCount.filter((data, key) => key !== index);
@@ -363,7 +367,11 @@ function EmailComponent({
             }}
             type="button"
             className="finishBtn"
-            onClick={() => setIsEmail(false)}
+            onClick={() => {
+              setIsEmail(false);
+              setEmailValue("");
+              setEmailCount("");
+            }}
           >
             Close
           </button>

microfrontends/SignDocuments/src/Component/component/header.js

@@ -33,7 +33,8 @@ function Header({
   currentSigner,
   dataTut4,
   alreadySign,
-  isSignYourself
+  isSignYourself,
+  setIsEmail
 }) {
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
@@ -329,9 +330,29 @@ function Header({
                       </DropdownMenu.Item>
                     ) : (
                       isSignYourself && (
-                        <DropdownMenu.Item className="DropdownMenuItem">
-                          <CertificateDropDown />
-                        </DropdownMenu.Item>
+                        <>
+                          <DropdownMenu.Item className="DropdownMenuItem">
+                            <CertificateDropDown />
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            className="DropdownMenuItem"
+                            onClick={() => setIsEmail(true)}
+                          >
+                            <div
+                              style={{
+                                display: "flex",
+                                flexDirection: "row"
+                              }}
+                            >
+                              <i
+                                class="fa fa-envelope"
+                                style={{ marginRight: "2px" }}
+                                aria-hidden="true"
+                              ></i>
+                              Mail
+                            </div>
+                          </DropdownMenu.Item>
+                        </>
                       )
                     )}
                     <DropdownMenu.Item
@@ -690,6 +711,28 @@ function Header({
                 ></i>
                 Download
               </button>
+              <button
+                type="button"
+                className="defaultBtn mailBtn"
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  marginLeft: "10px"
+                }}
+                onClick={() => setIsEmail(true)}
+              >
+                <i
+                  class="fa fa-envelope"
+                  style={{
+                    color: "white",
+                    fontSize: "15px",
+                    marginRight: "3px"
+                  }}
+                  aria-hidden="true"
+                ></i>
+                Mail
+              </button>
             </div>
           ) : (
             <div>

microfrontends/SignDocuments/src/css/signature.css

@@ -8,7 +8,16 @@
 .penContainer {
   width: 460px;
 }
-
+.mailBtn{
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+    padding: 3px 15px !important;
+    background-color: rgb(79 190 241);
+    border: none !important;
+    color: white !important;
+}
+.mailBtn:hover {
+  box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+}
 .signatureBtn {
   border: 1.5px solid #47a3ad;
   margin-bottom: 10px;