fix: design of sent mail message,change variable name emailCount to emailList

Author: raktima-opensignlabs

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:
@@ -69,7 +69,7 @@ function EmailComponent({
     if (sendMail.data.result.status === "success") {
       setIsEmail(false);
       setEmailValue("");
-      setEmailCount("");
+      setEmailList([]);
       setSuccessEmail(true);
       setTimeout(() => {
         setSuccessEmail(false);
@@ -87,8 +87,8 @@ function EmailComponent({
 
   //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) => {
@@ -99,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("");
     }
   };
@@ -253,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
@@ -264,7 +264,7 @@ function EmailComponent({
                     flexWrap: "wrap"
                   }}
                 >
-                  {emailCount.map((data, ind) => {
+                  {emailList.map((data, ind) => {
                     return (
                       <div
                         className="emailChip"
@@ -297,7 +297,7 @@ function EmailComponent({
                     );
                   })}
                 </div>
-                {emailCount.length <= 9 && (
+                {emailList.length <= 9 && (
                   <input
                     type="text"
                     value={emailValue}
@@ -370,19 +370,19 @@ function EmailComponent({
             onClick={() => {
               setIsEmail(false);
               setEmailValue("");
-              setEmailCount("");
+              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,18 @@
+import React from "react";
+import "../../css/signature.css";
+
+function EmailToast({ isShow }) {
+  return (
+    <div
+      style={{ display: isShow ? "flex" : "none", justifyContent: "center" }}
+    >
+      <div className="emailToast">
+        <span style={{ fontSize: "12px", fontWeight: "500" }}>
+          Email sent successfully!
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default EmailToast;

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

@@ -4,6 +4,7 @@ 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 +275,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 +813,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

@@ -18,6 +18,14 @@
 .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;