Merge pull request #291 from abilpraju-aot/feature/FWF-3534

modified formbuilder-modal

forms-flow-components/package.json

@@ -52,7 +52,9 @@
     "webpack-merge": "^5.8.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "react-i18next": "^12.1.4"
   },
   "dependencies": {
     "@types/react": "^17.0.19",

forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx

@@ -1,9 +1,10 @@
-import React, { useRef, useEffect } from "react";
+import React, { useState } from "react";
 import Modal from "react-bootstrap/Modal";
 import { CustomButton } from "./Button";
 import { FormTextArea } from "./FormTextArea";
 import { CloseIcon } from "../SvgIcons/index";
 import { FormInput } from "./FormInput";
+import { useTranslation } from "react-i18next";
 
 interface BuildFormModalProps {
   showBuildForm: boolean;
@@ -12,11 +13,11 @@ interface BuildFormModalProps {
     field: string,
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => void;
-  primaryBtnAction?: () => void;
+  primaryBtnAction?: (name: string, description: string) => void; // Now expects name and description
   secondaryBtnAction?: () => void;
-  setFormDescription?: (value: string) => void;
   setNameError?: (value: string) => void;
   nameError?: string;
+  description?: string;
   formSubmitted?: boolean;
   modalHeader?: string;
   nameLabel?: string;
@@ -42,8 +43,8 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
     handleChange,
     primaryBtnAction,
     secondaryBtnAction = onClose, // Default to onClose if not provided
-    setFormDescription,
     setNameError,
+    description,
     nameError,
     formSubmitted,
     modalHeader,
@@ -62,6 +63,17 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
     placeholderForForm,
     placeholderForDescription,
   }) => {
+    const { t } = useTranslation();
+    const [name, setName] = useState<string>(""); // State for form name
+    const [formDescription, setFormDescription] = useState<string>(description || ""); // State for form description
+
+    const handlePrimaryAction = () => {
+      // Pass name and description to primaryBtnAction
+      if (primaryBtnAction) {
+        primaryBtnAction(name, formDescription);
+      }
+    };
+
     return (
       <>
         <Modal
@@ -79,16 +91,17 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
           </Modal.Header>
           <Modal.Body className="p-5">
             <label className="form-label">{nameLabel}</label>
-            <span className="valiation-astrisk">*</span>
+            <span className="validation-astrisk">*</span>
             <FormInput
               type="text"
               placeholder={placeholderForForm}
               className={`form-input ${nameError ? "input-error" : ""}`}
-              aria-label="Name of the form"
+              aria-label={t("Name of the form")}
               data-testid={nameInputDataTestid}
               onBlur={nameValidationOnBlur}
               onChange={(event) => {
                 setNameError("");
+                setName(event.target.value); // Set the name state
                 handleChange("title", event);
               }}
               required
@@ -98,24 +111,26 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             )}
 
             <label className="form-label">{descriptionLabel}</label>
-
             <FormTextArea
-              onChange={(e) => setFormDescription(e.target.value)}
               placeholder={placeholderForDescription}
               className="form-input"
-              aria-label="Description of the new form"
+              aria-label={t("Description of the new form")}
               data-testid={descriptionDataTestid}
-              maxRows={1}
+              value={formDescription} // Bind description state
+              onChange={(event) => {
+                setFormDescription(event.target.value); // Set the description state
+              }}
+              minRows={5}
             />
           </Modal.Body>
           <Modal.Footer className="d-flex justify-content-start">
             <CustomButton
               variant={nameError ? "dark" : "primary"}
               size="md"
-              disabled={!!nameError || formSubmitted}
+              disabled={!!nameError || formSubmitted || !name || !formDescription} // Disable if errors or fields are empty
               label={primaryBtnLabel}
               buttonLoading={!nameError && formSubmitted ? true : false}
-              onClick={primaryBtnAction}
+              onClick={handlePrimaryAction} // Use the new handler
               dataTestid={primaryBtndataTestid}
               ariaLabel={primaryBtnariaLabel}
             />

forms-flow-components/src/resourceBundles/i18n.js

@@ -0,0 +1,12 @@
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import {i18nService} from "@formsflow/service";
+
+i18nService.use(LanguageDetector)
+.use(initReactI18next)
+.init({
+  fallbackLng: 'en'
+});
+
+
+export default i18nService;

forms-flow-service/src/resourceBundles/bg/resourceBundles.ts

@@ -1202,4 +1202,11 @@ export const RESOURCE_BUNDLES_BG = {
   "Please provide your tenant name to sign in": "Моля, предоставете името на вашата аренда, за да влезете",
   "Tenant not found":"Наемателят не е намерен",
   "Access Roles": "Роли за достъп",
+  "Description of the new form": "Описание на новата форма",
+  "Name of the form": "Име на формуляра",
+  "Duplicate": "Дублирай",
+  "New Form Name": "Ново име на формуляра",
+  "New Form Description": "Ново описание на формуляра",
+  "Save and Edit form": "Запазване и редактиране на формуляра",
+  "Build New Form": "Създай нов формуляр",
 }

forms-flow-service/src/resourceBundles/de/resourceBundles.ts

@@ -1207,5 +1207,11 @@ export const RESOURCE_BUNDLES_DE = {
   "Please provide your tenant name to sign in": "Bitte geben Sie Ihren Mandantenname zum Anmelden ein",
   "Tenant not found":"Mandant nicht gefunden",
   "Access Roles": "Zugriffsrollen",
-
+  "Description of the new form": "Beschreibung des neuen Formulars",
+  "Name of the form": "Formularname",
+  "Duplicate": "Duplikat",
+  "New Form Name": "Neuer Formularname",
+  "New Form Description": "Neue Formularbeschreibung",
+  "Save and Edit form": "Formular speichern und bearbeiten",
+  "Build New Form": "Neues Formular erstellen",
 }

forms-flow-service/src/resourceBundles/en/resourceBundles.ts

@@ -710,4 +710,11 @@ export const RESOURCE_BUNDLES_EN ={
   "Please provide your tenant name to sign in": "Please provide your tenant name to sign in",
   "Tenant not found":"Tenant not found",
   "Access Roles" :"Access Roles",
+  "Description of the new form": "Description of the new form",
+    "Name of the form": "Name of the form",
+    "Duplicate": "Duplicate",
+    "New Form Name": "New Form Name",
+    "New Form Description": "New Form Description",
+    "Save and Edit form": "Save and Edit form",
+    "Build New Form": "Build New Form"
 }

forms-flow-service/src/resourceBundles/es/resourceBundles.ts

@@ -691,4 +691,11 @@ export const RESOURCE_BUNDLES_ES = {
     "Please provide your tenant name to sign in": "Por favor, proporcione el nombre de su inquilino para iniciar sesión",
     "Tenant not found":"Inquilino no encontrado",
     "Access Roles": "Roles de acceso",
+    "Description of the new form": "Descripción del nuevo formulario",
+    "Name of the form": "Nombre del formulario",
+    "Duplicate": "Duplicar",
+    "New Form Name": "Nuevo nombre del formulario",
+    "New Form Description": "Nueva descripción del formulario",
+    "Save and Edit form": "Guardar y editar formulario",
+    "Build New Form": "Crear nuevo formulario",
 }

forms-flow-service/src/resourceBundles/fr/resourceBundles.ts

@@ -1205,6 +1205,13 @@ export const RESOURCE_BUNDLES_FR ={
   "Please provide your tenant name to sign in": "Veuillez fournir le nom de votre locataire pour vous connecter",
   "Tenant not found":"Locataire non trouvé",
   "Access Roles": "Rôles d'accès",
+  "Description of the new form": "Description du nouveau formulaire",
+  "Name of the form": "Nom du formulaire",
+  "Duplicate": "Dupliquer",
+  "New Form Name": "Nouveau nom de formulaire",
+  "New Form Description": "Nouvelle description de formulaire",
+  "Save and Edit form": "Enregistrer et modifier le formulaire",
+  "Build New Form": "Créer un nouveau formulaire",
 }
 
 

forms-flow-service/src/resourceBundles/pt/resourceBundles.ts

@@ -1204,4 +1204,11 @@ export const RESOURCE_BUNDLES_PT ={
   "Please provide your tenant name to sign in": "Por favor, forneça o nome do seu inquilino para entrar",
   "Tenant not found":"Inquilino não encontrado",
   "Access Roles": "Funções de Acesso",
+  "Description of the new form": "Descrição do novo formulário",
+  "Name of the form": "Nome do formulário",
+  "Duplicate": "Duplicar",
+  "New Form Name": "Novo nome do formulário",
+  "New Form Description": "Nova descrição do formulário",
+  "Save and Edit form": "Salvar e Editar formulário",
+  "Build New Form": "Criar novo formulário",
 };

forms-flow-service/src/resourceBundles/zh/resourceBundles.ts

@@ -1191,4 +1191,11 @@ export const RESOURCE_BUNDLES_ZH = {
   "Please provide your tenant name to sign in": "请提供您的租户名称以登录",
   "Tenant not found":"未找到租户",
   "Access Roles": "访问角色",
+  "Description of the new form": "新表单的描述",
+  "Name of the form": "表单名称",
+  "Duplicate": "复制",
+  "New Form Name": "新表单名称",
+  "New Form Description": "新表单描述",
+  "Save and Edit form": "保存并编辑表单",
+  "Build New Form": "创建新表单"
 }