Merge pull request #257 from OpenSignLabs/send-mail

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

@@ -20,14 +20,14 @@ function EmailComponent({
   pdfName,
   sender
 }) {
-  const [emailCount, setEmailCount] = useState([]);
+  const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
   const [isLoading, setIsLoading] = useState(false);
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
     let sendMail;
-    for (let i = 0; i < emailCount.length; i++) {
+    for (let i = 0; i < emailList.length; i++) {
       try {
         const imgPng =
           "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
@@ -44,7 +44,7 @@ function EmailComponent({
         let params = {
           pdfName: pdfName,
           url: pdfUrl,
-          recipient: emailCount[i],
+          recipient: emailList[i],
           subject: `${sender.name} has signed the doc - ${pdfName}`,
           from: sender.email,
           html:
@@ -67,11 +67,14 @@ function EmailComponent({
     }
 
     if (sendMail.data.result.status === "success") {
-      setIsEmail(false);
       setSuccessEmail(true);
       setTimeout(() => {
         setSuccessEmail(false);
-      }, 3000);
+        setIsEmail(false);
+        setEmailValue("");
+        setEmailList([]);
+      }, 1500);
+
       setIsLoading(false);
     } else if (sendMail.data.result.status === "error") {
       setIsLoading(false);
@@ -81,10 +84,11 @@ function EmailComponent({
       alert("Something went wrong!");
     }
   };
+
   //function for remove email
   const removeChip = (index) => {
-    const updateEmailCount = emailCount.filter((data, key) => key !== index);
-    setEmailCount(updateEmailCount);
+    const updateEmailCount = emailList.filter((data, key) => key !== index);
+    setEmailList(updateEmailCount);
   };
   //function for get email value
   const handleEmailValue = (e) => {
@@ -95,10 +99,10 @@ function EmailComponent({
   //function for save email in array after press enter
   const handleEnterPress = (e) => {
     if (e.key === "Enter" && emailValue) {
-      setEmailCount((prev) => [...prev, emailValue]);
+      setEmailList((prev) => [...prev, emailValue]);
       setEmailValue("");
     } else if (e === "add" && emailValue) {
-      setEmailCount((prev) => [...prev, emailValue]);
+      setEmailList((prev) => [...prev, emailValue]);
       setEmailValue("");
     }
   };
@@ -249,7 +253,7 @@ function EmailComponent({
           >
             Recipients added here will get a copy of the signed document.
           </p>
-          {emailCount.length > 0 ? (
+          {emailList.length > 0 ? (
             <>
               <div className="addEmail">
                 <div
@@ -260,7 +264,7 @@ function EmailComponent({
                     flexWrap: "wrap"
                   }}
                 >
-                  {emailCount.map((data, ind) => {
+                  {emailList.map((data, ind) => {
                     return (
                       <div
                         className="emailChip"
@@ -293,7 +297,7 @@ function EmailComponent({
                     );
                   })}
                 </div>
-                {emailCount.length <= 9 && (
+                {emailList.length <= 9 && (
                   <input
                     type="text"
                     value={emailValue}
@@ -363,18 +367,22 @@ function EmailComponent({
             }}
             type="button"
             className="finishBtn"
-            onClick={() => setIsEmail(false)}
+            onClick={() => {
+              setIsEmail(false);
+              setEmailValue("");
+              setEmailList([]);
+            }}
           >
             Close
           </button>
           <button
-            disabled={emailCount.length === 0 && true}
+            disabled={emailList.length === 0 && true}
             style={{
               background: themeColor(),
               color: "white"
             }}
             type="button"
-            className={emailCount.length === 0 ? "defaultBtn" : "finishBtn"}
+            className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
             onClick={() => sendEmail()}
           >
             Send

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

@@ -0,0 +1,21 @@
+import React from "react";
+import "../../css/signature.css";
+
+function EmailToast({ isShow }) {
+  return (
+    <>
+      {isShow && (
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <div
+            className="alert alert-success successBox"
+            style={{ zIndex: "1051" }}
+          >
+            Email sent successfully!
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default EmailToast;

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/Component/component/renderPdf.js

@@ -1,9 +1,9 @@
 import React from "react";
 import RSC from "react-scrollbars-custom";
-import Toast from "react-bootstrap/Toast";
 import { Rnd } from "react-rnd";
 import { themeColor } from "../../utils/ThemeColor/backColor";
 import { Document, Page, pdfjs } from "react-pdf";
+import EmailToast from "./emailToast";
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
@@ -274,20 +274,7 @@ function RenderPdf({
           ref={drop}
           id="container"
         >
-          <div className="d-flex justify-content-center">
-            <Toast
-              show={successEmail}
-              delay={3000}
-              autohide
-              className="d-inline-block m-1"
-              bg="success"
-              style={{ background: "#348545" }}
-            >
-              <Toast.Body className={"text-white"}>
-                Email sent successful!
-              </Toast.Body>
-            </Toast>
-          </div>
+          <EmailToast isShow={successEmail} />
           {pdfLoadFail.status &&
             (recipient
               ? !pdfUrl &&
@@ -825,20 +812,7 @@ function RenderPdf({
             ref={drop}
             id="container"
           >
-            <div className="d-flex justify-content-center">
-              <Toast
-                show={successEmail}
-                delay={3000}
-                autohide
-                className="d-inline-block m-1"
-                bg="success"
-                style={{ background: "#348545" }}
-              >
-                <Toast.Body className={"text-white"}>
-                  Email sent successful!
-                </Toast.Body>
-              </Toast>
-            </div>
+            <EmailToast isShow={successEmail} />
             {pdfLoadFail.status &&
               (recipient
                 ? !pdfUrl &&

microfrontends/SignDocuments/src/css/signature.css

@@ -8,7 +8,24 @@
 .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);
+}
+.emailToast{
+  position: absolute;
+  z-index: 10;
+  background: #aeedae;
+  padding: 0 3px 3px 3px;
+  margin: 2px;
+  border-radius: 2px;
+}
 .signatureBtn {
   border: 1.5px solid #47a3ad;
   margin-bottom: 10px;