Merge pull request #1367 from OpenSignLabs/raktima-patch-7

Author: andrew-opensignlabs

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

@@ -682,6 +682,8 @@
    "form-title-2":"Security Setting",
   "public-tour-message":"The template needs to be public before you can generate a shareable link.",
   "add-user-template": "You need to add a role before you can add fields for it.",
-  "pdf-uncompatible": "This pdf is not compatible with opensign, please contact <[email protected]>"
+  "pdf-uncompatible": "This pdf is not compatible with opensign, please contact <[email protected]>",
+  "text-field-tour":"Fields of type 'Text' must be filled in advance before the document is sent. If you need the signers to provide input, use the 'Text Input' field instead.",
+  "attach-signer-tour":"You need to attach a Signer to every role. You can do that by clicking this icon. Once you select a Signer it will be attached to all the fields associated with that role which appear in the same colour."
 
 }

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

@@ -682,6 +682,8 @@
      "p3": "Consejo: si sus firmantes están familiarizados con OpenSign y lo utilizan con frecuencia, es posible que desee desactivar la visita guiada para disfrutar de una experiencia más fluida. Elija la opción que mejor se adapte a sus necesidades de firma de documentos"
    },
    "form-title-1": "Configuración del flujo de documentos",
-   "form-title-2": "Configuración de seguridad"
+   "form-title-2": "Configuración de seguridad",
+   "text-field-tour":"Los campos de tipo 'Texto' deben completarse con anticipación antes de enviar el documento. Si necesita que los firmantes proporcionen información, utilice el campo 'Entrada de texto'",
+   "attach-signer-tour" :"Debe adjuntar un firmante a cada función. Puede hacerlo haciendo clic en este icono. Una vez que seleccione un Firmante, se adjuntará a todos los campos asociados con ese rol que aparecen en el mismo color."
 
 }

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

@@ -681,7 +681,9 @@
    "form-title-2": "Paramètre de sécurité",
   "public-tour-message": "Le modèle doit être public avant que vous puissiez générer un lien partageable.",
   "add-user-template":"Vous devez ajouter un rôle avant de pouvoir lui ajouter des champs. ",
-  "pdf-uncompatible":"Ce pdf n'est pas compatible avec opensign, veuillez contacter <[email protected]>"
+  "pdf-uncompatible":"Ce pdf n'est pas compatible avec opensign, veuillez contacter <[email protected]>",
+  "text-field-tour" :"Les champs de type 'Texte' doivent être remplis à l'avance avant l'envoi du document. Si vous avez besoin que les signataires fournissent des informations, utilisez plutôt le champ 'Saisie de texte'.",
+  "attach-signer-tour" :"Vous devez associer un signataire à chaque rôle. Vous pouvez le faire en cliquant sur cette icône. Une fois que vous avez sélectionné un signataire, il sera attaché à tous les champs associés à ce rôle qui apparaissent dans la même couleur."
 
 
 }

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

@@ -356,18 +356,13 @@ function Placeholder(props) {
 
     if (props.data && props?.pos?.type !== textWidget) {
       props.setUniqueId(props?.data?.Id);
-      const checkIndex = props.xyPostion.findIndex(
-        (data) => data.Id === props.data.Id
-      );
-
+      const checkIndex = props.xyPostion
+        .filter((data) => data.Role !== "prefill")
+        .findIndex((data) => data.Id === props.data.Id);
       props.setIsSelectId(checkIndex || 0);
     } else if (props.data && props.pos.type === textWidget) {
       props.setTempSignerId(props.uniqueId);
       props.setUniqueId(props?.data?.Id);
-      const checkIndex = props.xyPostion.findIndex(
-        (data) => data.Id === props.data.Id
-      );
-      props.setIsSelectId(checkIndex || 0);
     }
 
     //checking widget's type and open widget copy modal for required widgets

apps/OpenSign/src/components/pdf/RenderPdf.js

@@ -361,6 +361,7 @@ function RenderPdf({
                                             fontColor={fontColor}
                                             setFontColor={setFontColor}
                                             isResize={isResize}
+                                            unSignedWidgetId={unSignedWidgetId}
                                           />
                                         </React.Fragment>
                                       );
@@ -555,6 +556,7 @@ function RenderPdf({
                                             fontColor={fontColor}
                                             setFontColor={setFontColor}
                                             isResize={isResize}
+                                            unSignedWidgetId={unSignedWidgetId}
                                           />
                                         </React.Fragment>
                                       );

apps/OpenSign/src/constant/Utils.js

@@ -1885,12 +1885,16 @@ export const handleCopyNextToWidget = (
   //get position of previous widget and create new widget next to that widget on same data except
   // xPosition and key
   let newposition = position;
-  const calculateXPosition =
-    parseInt(position.xPosition) +
-    defaultWidthHeight(widgetType).width +
-    resizeBorderExtraWidth();
+  const calculateXPosition = parseInt(position.xPosition) + 10;
+  const calculateYPosition = parseInt(position.yPosition) + 10;
+
   const newId = randomId();
-  newposition = { ...newposition, xPosition: calculateXPosition, key: newId };
+  newposition = {
+    ...newposition,
+    xPosition: calculateXPosition,
+    yPosition: calculateYPosition,
+    key: newId
+  };
   //if condition to create widget in request-sign flow
   if (userId) {
     filterSignerPos = xyPostion.filter((data) => data.Id === userId);

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -1950,7 +1950,7 @@ function PdfRequestFiles(props) {
                             })
                           }
                           type="button"
-                          className="op-btn op-btn-secondary"
+                          className="op-btn op-btn-secondary ml-1"
                         >
                           {t("close")}
                         </button>

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -151,6 +151,7 @@ function PlaceHolderSign() {
   const [scale, setScale] = useState(1);
   const [pdfRotateBase64, setPdfRotatese64] = useState("");
   const [planCode, setPlanCode] = useState("");
+  const [unSignedWidgetId, setUnSignedWidgetId] = useState("");
   const isMobile = window.innerWidth < 767;
   const [, drop] = useDrop({
     accept: "BOX",
@@ -844,17 +845,24 @@ function PlaceHolderSign() {
   };
   const alertSendEmail = async () => {
     const filterPrefill = signerPos?.filter((data) => data.Role !== "prefill");
-    const getPrefill = signerPos?.filter((data) => data.Role === "prefill");
+    const getPrefill = signerPos?.find((data) => data.Role === "prefill");
     let isLabel = false;
+    let unfilledTextWidgetId = "";
     //checking all signers placeholder exist or not
     const isPlaceholderExist = filterPrefill.every((data) => data.placeHolder);
-    const prefillPlaceholder = getPrefill[0]?.placeHolder;
+    const prefillPlaceholder = getPrefill?.placeHolder;
     //condition is used to check text widget data is empty or have response
-    if (getPrefill && getPrefill.length > 0) {
+    if (getPrefill) {
       if (prefillPlaceholder) {
         prefillPlaceholder.map((data) => {
           if (!isLabel) {
-            isLabel = data.pos.some((position) => !position.options.response);
+            const unfilledTextWidgets = data.pos.find(
+              (position) => !position.options.response
+            );
+            if (unfilledTextWidgets) {
+              isLabel = true;
+              unfilledTextWidgetId = unfilledTextWidgets.key;
+            }
           }
         });
       }
@@ -882,6 +890,7 @@ function PlaceHolderSign() {
     }
     if (getPrefill && isLabel) {
       setIsSendAlert({ mssg: textWidget, alert: true });
+      setUnSignedWidgetId(unfilledTextWidgetId);
     } else if (isSignatureExist) {
       if (isPlaceholderExist) {
         const IsSignerNotExist = filterPrefill?.filter((x) => !x.signerObjId);
@@ -1648,8 +1657,15 @@ function PlaceHolderSign() {
   const signerAssignTour = [
     {
       selector: '[data-tut="assignSigner"]',
-      content:
-        "You need to attach a Signer to every role. You can do that by clicking this icon. Once you select a Signer it will be attached to all the fields associated with that role which appear in the same colour. ",
+      content: t("attach-signer-tour"),
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
+  const textFieldTour = [
+    {
+      selector: '[data-tut="IsSigned"]',
+      content: t("text-field-tour"),
       position: "top",
       style: { fontSize: "13px" }
     }
@@ -1759,6 +1775,13 @@ function PlaceHolderSign() {
                 rounded={5}
                 closeWithMask={false}
               />
+              <Tour
+                onRequestClose={() => setIsSendAlert({})}
+                steps={textFieldTour}
+                isOpen={isSendAlert.mssg === textWidget}
+                rounded={5}
+                closeWithMask={false}
+              />
               {/* this component used to render all pdf pages in left side */}
               <RenderAllPdfPage
                 signPdfUrl={pdfDetails[0].URL}
@@ -1779,20 +1802,18 @@ function PlaceHolderSign() {
                 <div className=" w-full md:w-[95%] ">
                   {/* this modal is used show alert set placeholder for all signers before send mail */}
                   <ModalUi
-                    isOpen={isSendAlert.alert}
+                    isOpen={
+                      isSendAlert.alert && isSendAlert.mssg !== textWidget
+                    }
                     title={
                       isSendAlert.mssg === "sure" ||
-                      isSendAlert.mssg === textWidget
-                        ? t("fields-required")
-                        : isSendAlert.mssg === "confirm" && t("send-mail")
+                      (isSendAlert.mssg === "confirm" && t("send-mail"))
                     }
                     handleClose={() => handleCloseSendmailModal()}
                   >
                     <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
                       {isSendAlert.mssg === "sure" ? (
                         <span>{t("placeholder-alert-1")}</span>
-                      ) : isSendAlert.mssg === textWidget ? (
-                        <p>{t("placeholder-alert-2")}</p>
                       ) : (
                         isSendAlert.mssg === "confirm" && (
                           <>
@@ -2085,6 +2106,7 @@ function PlaceHolderSign() {
                         setFontSize={setFontSize}
                         fontColor={fontColor}
                         setFontColor={setFontColor}
+                        unSignedWidgetId={unSignedWidgetId}
                       />
                     )}
                   </div>

apps/OpenSign/src/script/locales/en/translation.json

@@ -682,6 +682,8 @@
   "form-title-2": "Security Setting",
   "public-tour-message": "The template needs to be public before you can generate a shareable link.",
   "add-user-template": "You need to add a role before you can add fields for it.",
-  "pdf-uncompatible": "This pdf is not compatible with opensign, please contact <[email protected]>"
+  "pdf-uncompatible": "This pdf is not compatible with opensign, please contact <[email protected]>",
+  "text-field-tour":"Fields of type 'Text' must be filled in advance before the document is sent. If you need the signers to provide input, use the 'Text Input' field instead.",
+  "attach-signer-tour":"You need to attach a Signer to every role. You can do that by clicking this icon. Once you select a Signer it will be attached to all the fields associated with that role which appear in the same colour."
 
 }

apps/OpenSign/src/script/locales/es/translation.json

@@ -682,5 +682,7 @@
     "p3": "Consejo: si sus firmantes están familiarizados con OpenSign y lo utilizan con frecuencia, es posible que desee desactivar la visita guiada para disfrutar de una experiencia más fluida. Elija la opción que mejor se adapte a sus necesidades de firma de documentos"
   },
   "form-title-1": "Configuración del flujo de documentos",
-  "form-title-2": "Configuración de seguridad"
+  "form-title-2": "Configuración de seguridad",
+  "text-field-tour":"Los campos de tipo 'Texto' deben completarse con anticipación antes de enviar el documento. Si necesita que los firmantes proporcionen información, utilice el campo 'Entrada de texto'",
+  "attach-signer-tour" :"Debe adjuntar un firmante a cada función. Puede hacerlo haciendo clic en este icono. Una vez que seleccione un Firmante, se adjuntará a todos los campos asociados con ese rol que aparecen en el mismo color."
 }