fix: handle overlapping of date modal

refactor: spelling correction

apps/OpenSign/public/locales/de/translation.json

@@ -524,7 +524,7 @@
   "email-body": "E-Mail-Inhalt",
   "email-placeholder": "E-Mail-Text eingeben",
   "reset-to-default": "Auf Standard zurücksetzen",
-  "cutomize-email": "E-Mail anpassen",
+  "customize-email": "E-Mail anpassen",
   "upgrade-to-customize-email": "Upgrade, um E-Mails anzupassen",
   "sign-url": "Signatur-URL",
   "mails-sent": "E-Mails gesendet",

apps/OpenSign/public/locales/en/translation.json

@@ -525,7 +525,7 @@
   "email-body": "email body",
   "email-placeholder": "add body of email",
   "reset-to-default": "Reset to default",
-  "cutomize-email": "Cutomize email",
+  "customize-email": "Customize email",
   "upgrade-to-customize-email": "Upgrade to customize Email",
   "sign-url": "Sign url",
   "mails-sent": "Mails Sent",

apps/OpenSign/public/locales/es/translation.json

@@ -525,7 +525,7 @@
   "email-body": "cuerpo del correo",
   "email-placeholder": "agregar cuerpo del correo",
   "reset-to-default": "Restablecer a por defecto",
-  "cutomize-email": "Personalizar correo",
+  "customize-email": "Personalizar correo",
   "upgrade-to-customize-email": "Mejora para personalizar el correo",
   "sign-url": "URL de firma",
   "mails-sent": "Correos enviados",

apps/OpenSign/public/locales/fr/translation.json

@@ -524,7 +524,7 @@
   "email-body": "corps de l'e-mail",
   "email-placeholder": "Ajouter le corps de l'e-mail",
   "reset-to-default": "Réinitialiser aux valeurs par défaut",
-  "cutomize-email": "Personnaliser l'e-mail",
+  "customize-email": "Personnaliser l'e-mail",
   "upgrade-to-customize-email": "Mise à niveau pour personnaliser l'e-mail",
   "sign-url": "Signer l'URL",
   "mails-sent": "Mails envoyés avec succès !",

apps/OpenSign/public/locales/hi/translation.json

@@ -524,7 +524,7 @@
   "email-body": "ईमेल मुख्य भाग",
   "email-placeholder": "ईमेल का मुख्य भाग जोड़ें",
   "reset-to-default": "डिफ़ॉल्ट पर रीसेट करें",
-  "cutomize-email": "ईमेल अनुकूलित करें",
+  "customize-email": "ईमेल अनुकूलित करें",
   "upgrade-to-customize-email": "ईमेल अनुकूलित करने के लिए अपग्रेड करें",
   "sign-url": "यूआरएल पर हस्ताक्षर करें",
   "mails-sent": "मेल भेजे गए",

apps/OpenSign/public/locales/it/translation.json

@@ -524,7 +524,7 @@
   "email-body": "Corpo email",
   "email-placeholder": "aggiungi corpo dell'email",
   "reset-to-default": "Reimposta predefinita",
-  "cutomize-email": "Personalizza Email",
+  "customize-email": "Personalizza Email",
   "upgrade-to-customize-email": "Aggiorna per personalizzare l'Email",
   "sign-url": "URL Firma",
   "mails-sent": "Mail inviate",

apps/OpenSign/src/components/pdf/CustomizeMail.jsx

@@ -132,7 +132,7 @@ function CustomizeMail(props) {
                       className="op-link op-link-accent text-sm"
                       onClick={() => setIsCustomize(true)}
                     >
-                      {t("cutomize-email")}
+                      {t("customize-email")}
                     </span>
                   )
               }

apps/OpenSign/src/components/pdf/EditTemplate.jsx

@@ -577,6 +577,7 @@ const EditTemplate = ({
                   e.target.setCustomValidity(t("input-required"))
                 }
                 onInput={(e) => e.target.setCustomValidity("")}
+                min={1}
                 required
               />
             </div>

apps/OpenSign/src/components/pdf/Placeholder.jsx

@@ -25,13 +25,13 @@ import {
 import PlaceholderType from "./PlaceholderType";
 import moment from "moment";
 import "../../styles/opensigndrive.css";
-import ModalUi from "../../primitives/ModalUi";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { setIsShowModal } from "../../redux/reducers/widgetSlice";
 import { themeColor } from "../../constant/const";
 import { useGuidelinesContext } from "../../context/GuidelinesContext";
 import DatePicker from "react-datepicker";
+import DateWidgetModal from "../../primitives/DateWidgetModal";
 
 function Placeholder(props) {
   const { t } = useTranslation();
@@ -655,6 +655,9 @@ function Placeholder(props) {
     setIsToday(false);
     setSelectDate((prev) => ({ ...prev, date: "" }));
   };
+  const handleCloseDateModal = () => {
+    setIsDateModal(false);
+  };
   return (
     <>
       {/*  Check if a text widget (prefill type) exists. Once the user enters a value and clicks outside or the widget becomes non-selectable, it should appear as plain text (just like embedded text in a document). When the user clicks on the text again, it should become editable. */}
@@ -923,7 +926,7 @@ function Placeholder(props) {
           </div>
         </Rnd>
       )}
-      <ModalUi isOpen={isDateModal} title={t("widget-info")} showClose={false}>
+      <DateWidgetModal isOpen={isDateModal} title={t("widget-info")}>
         <div className="text-base-content h-[100%] p-[20px]">
           <div className="flex flex-col gap-3">
             <div className="flex flex-col md:items-center md:flex-row gap-y-3">
@@ -1132,8 +1135,15 @@ function Placeholder(props) {
           >
             {t("save")}
           </button>
+          <button
+            type="button"
+            className="op-btn op-btn-ghost text-base-content ml-1"
+            onClick={() => handleCloseDateModal()}
+          >
+            {t("cancel")}
+          </button>
         </div>
-      </ModalUi>
+      </DateWidgetModal>
     </>
   );
 }

apps/OpenSign/src/pages/Form.jsx

@@ -960,6 +960,7 @@ const Forms = (props) => {
                                 e.target.setCustomValidity(t("input-required"))
                               }
                               onInput={(e) => e.target.setCustomValidity("")}
+                              min={1}
                               required
                             />
                           </div>
@@ -1059,6 +1060,7 @@ const Forms = (props) => {
                                 e.target.setCustomValidity(t("input-required"))
                               }
                               onInput={(e) => e.target.setCustomValidity("")}
+                              min={1}
                               required
                             />
                           </div>
@@ -1109,6 +1111,7 @@ const Forms = (props) => {
                               e.target.setCustomValidity(t("input-required"))
                             }
                             onInput={(e) => e.target.setCustomValidity("")}
+                            min={1}
                             required
                           />
                         </div>

apps/OpenSign/src/primitives/DateWidgetModal.jsx

@@ -0,0 +1,27 @@
+import "../styles/signature.css";
+import { createPortal } from "react-dom";
+
+const DateWidgetModal = ({
+  children,
+  title,
+  isOpen
+}) => {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div id="dateWidgetModal" className="items-center op-modal op-modal-open">
+      <div className="md:min-w-[500px] op-modal-box p-0 max-h-90 overflow-y-auto hide-scrollbar text-sm">
+        {title && (
+          <h3 className="text-base-content text-left font-bold text-lg pt-[15px] px-[20px]">
+            {title}
+          </h3>
+        )}
+
+        <div>{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default DateWidgetModal;