MOSIP-32692: Ui fixes in RequestPolicy page (#431)

Signed-off-by: SwethaKrish4 <[email protected]>

pmp-reactjs-ui/public/i18n/ara.json

@@ -1,4 +1,11 @@
 {
+    "commons": {
+        "home": "بيت",
+        "search": "يبحث",
+        "goBack": "عُد",
+        "emptyMsg": "لا تتوافر بيانات.",
+        "logout": "تسجيل خروج"
+    },
     "dashboard": {
         "welcomeMsg": "مرحباً {{firstName}} {{lastName}}",
         "partnerTypeRequest": "طلب نوع الشريك",
@@ -16,8 +23,7 @@
     },
     "header": {
         "partnerProfile": "الملف التعريفي للشريك",
-        "changePassword": "تغيير كلمة المرور",
-        "logout": "تسجيل خروج"
+        "changePassword": "تغيير كلمة المرور"
     },
     "footer": {
         "allRightsReserved": "كل الحقوق محفوظة.",
@@ -33,7 +39,8 @@
         "policyGroupError": "غير قادر على جلب أي مجموعات النهج. اتصل بالمسؤول.",
         "submit": "يُقدِّم",
         "viewLess": "عرض أقل",
-        "viewMore": "عرض المزيد"
+        "viewMore": "عرض المزيد",
+        "logoutMsg": "لا تريد تحديد مجموعة السياسات والمضي قدما؟"
     },
     "loading": "تحميل",
     "partnerCertificatesList": {
@@ -150,7 +157,9 @@
         "errorInMapPolicy": "أثناء طلب السياسة، واجهنا خطأ",
         "policySuccessHeader": "تم إرسال السياسة بنجاح!",
         "policySuccessMsg":"تم إرسال عملية طلب السياسة بنجاح. الموافقة في انتظار المشرف.",
-        "info":"تتوفر فقط معرفات الشركاء التي تم تحميل شهادة الشريك الخاصة بها في القائمة المنسدلة. إذا لم تجد معرف الشريك الخاص بك، فيرجى تحميل شهادة الشريك أولاً"
+        "info":"تتوفر فقط معرفات الشركاء التي تم تحميل شهادة الشريك الخاصة بها في القائمة المنسدلة. إذا لم تجد معرف الشريك الخاص بك، فيرجى تحميل شهادة الشريك أولاً",
+        "commentTooLong": "يجب ألا تسمح التعليقات بأكثر من 500 حرف.",
+        "specialCharNotAllowed": "يمنع استعمال الرموز."
     },
     "authenticationServices": {
         "authenticationServices": "خدمات المصادقة",
@@ -193,12 +202,6 @@
         "addNew": "اضف جديد",
         "commentBoxDesc": "اذكر الغرض من طلب عميل OIDC"
     },
-    "commons": {
-        "home": "بيت",
-        "search": "يبحث",
-        "goBack": "عُد",
-        "emptyMsg": "لا تتوافر بيانات."
-    },
     "serverError": {
         "PMS_COR_001": "معلمة الإدخال مفقود",
         "PMS_PRT_002": " مجموعة السياسة غير موجود",

pmp-reactjs-ui/public/i18n/eng.json

@@ -1,4 +1,11 @@
 {
+    "commons": {
+        "home": "Home",
+        "search": "Search",
+        "goBack": "Go Back",
+        "emptyMsg": "No Data Available.",
+        "logout": "Logout"
+    },
     "dashboard": {
         "welcomeMsg": "Welcome {{firstName}} {{lastName}}",
         "partnerTypeRequest": "Partner Type Request",
@@ -16,8 +23,7 @@
     },
     "header": {
         "partnerProfile": "Partner Profile",
-        "changePassword": "Change Password",
-        "logout": "Logout"
+        "changePassword": "Change Password"
     },
     "footer": {
         "allRightsReserved": "All rights reserved.",
@@ -33,7 +39,8 @@
         "policyGroupError": "Unable to fetch any policy groups. Contact the administrator.",
         "submit": "Submit",
         "viewLess": "View Less",
-        "viewMore": "View More"
+        "viewMore": "View More",
+        "logoutMsg": "Do not want to select policy group and proceed further?"
     },
     "loading": "Loading",
     "partnerCertificatesList": {
@@ -150,7 +157,9 @@
         "errorInMapPolicy": "While requesting a policy, we have encountered with an error",
         "policySuccessHeader": "Policy Submitted Successfully!",
         "policySuccessMsg":"Policy request process has been successfully submitted. Approval is pending with admin.",
-        "info":"Only those partner IDs whose partner certificate is uploaded is available in the dropdown. If you don't find your partner ID, please upload partner certificate first"
+        "info":"Only those partner IDs whose partner certificate is uploaded is available in the dropdown. If you don't find your partner ID, please upload partner certificate first",
+        "commentTooLong": "Comments should not allow more than 500 characters.",
+        "specialCharNotAllowed": "Special characters are not allowed."
     },
     "authenticationServices": {
         "authenticationServices": "Authentication Services",
@@ -193,12 +202,6 @@
         "addNew": "Add New",
         "commentBoxDesc": "Mention the purpose of requesting the OIDC Client"
     },
-    "commons": {
-        "home": "Home",
-        "search": "Search",
-        "goBack": "Go Back",
-        "emptyMsg": "No Data Available."
-    },
     "serverError": {
         "PMS_COR_001": "Missing Input Parameter",
         "PMS_PRT_002": " Policy group does not exist",

pmp-reactjs-ui/public/i18n/fra.json

@@ -1,4 +1,11 @@
 {
+    "commons": {
+        "home": "Maison",
+        "search": "Recherche",
+        "goBack": "Retourner",
+        "emptyMsg": "Pas de données disponibles.",
+        "logout": "Se déconnecter"
+    },
     "dashboard": {
         "welcomeMsg": "Bienvenue {{firstName}} {{lastName}}",
         "partnerTypeRequest": "Demande de type de partenaire",
@@ -16,8 +23,7 @@
     },
     "header": {
         "partnerProfile": "Profil du partenaire",
-        "changePassword": "Changer le mot de passe",
-        "logout": "Se déconnecter"
+        "changePassword": "Changer le mot de passe"
     },
     "footer": {
         "allRightsReserved": "Tous droits réservés.",
@@ -33,7 +39,8 @@
         "policyGroupError": "Impossible de récupérer des groupes de stratégies. Contactez l'administrateur.",
         "submit": "Soumettre",
         "viewLess": "Voir moins",
-        "viewMore": "Voir plus"
+        "viewMore": "Voir plus",
+        "logoutMsg": "Vous ne souhaitez pas sélectionner un groupe de stratégies et continuer ?"
     },
     "loading": "chargement",
     "partnerCertificatesList": {
@@ -151,7 +158,9 @@
         "errorInMapPolicy": "Lors de la demande d'une politique, nous avons rencontré une erreur",
         "policySuccessHeader": "Politique soumise avec succès !",
         "policySuccessMsg":"Le processus de demande de politique a été soumis avec succès. L'approbation est en attente auprès de l'administrateur.",
-        "info":"Seuls les ID de partenaire dont le certificat de partenaire est téléchargé sont disponibles dans la liste déroulante. Si vous ne trouvez pas votre identifiant de partenaire, veuillez d'abord télécharger le certificat de partenaire"
+        "info":"Seuls les ID de partenaire dont le certificat de partenaire est téléchargé sont disponibles dans la liste déroulante. Si vous ne trouvez pas votre identifiant de partenaire, veuillez d'abord télécharger le certificat de partenaire",
+        "commentTooLong": "Les commentaires ne doivent pas contenir plus de 500 caractères.",
+        "specialCharNotAllowed": "Les caractères spéciaux ne sont pas autorisés."
     },
     "authenticationServices": {
         "authenticationServices": "Services d'authentification",
@@ -194,12 +203,6 @@
         "addNew": "Ajouter un nouveau",
         "commentBoxDesc": "Mentionner le but de la demande du client OIDC"
     },
-    "commons": {
-        "home": "Maison",
-        "search": "Recherche",
-        "goBack": "Retourner",
-        "emptyMsg": "Pas de données disponibles."
-    },
     "serverError": {
         "PMS_COR_001": "Paramètre d'entrée manquant",
         "PMS_PRT_002": "Le groupe de stratégies n'existe pas",

pmp-reactjs-ui/src/nav/HeaderNav.js

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { getUserProfile } from '../services/UserProfileService.js';
 import { isLangRTL } from '../utils/AppUtils.js';
-import { handleMouseClickForDropdown, getPartnerManagerUrl } from '../utils/AppUtils.js';
+import { handleMouseClickForDropdown, logout } from '../utils/AppUtils.js';
 import profileIcon from '../profile_icon.png';
 import hamburgerIcon from '../svg/hamburger_icon.svg';
 import orgIcon from '../svg/org_icon.svg';
@@ -24,13 +24,6 @@ function HeaderNav({ open, setOpen }) {
     const openDropdown = () => {
         setIsDropdownOpen(!isDropdownOpen);
     };
-    const logout = async () => {
-        localStorage.clear();
-        let redirectUrl = process.env.NODE_ENV !== 'production' ? '' : window._env_.REACT_APP_PARTNER_MANAGER_API_BASE_URL;
-        redirectUrl = redirectUrl + getPartnerManagerUrl(`/logout/user?redirecturi=` + btoa(window.location.href), process.env.NODE_ENV);
-        console.log(redirectUrl);
-        window.location.href = redirectUrl;
-    }
 
     return (
         <nav className="sticky top-0 z-40 bg-white flex justify-between w-full h-16 font-inter 
@@ -88,7 +81,7 @@ function HeaderNav({ open, setOpen }) {
                             <div className="border-gray-100 border-t mx-2"></div>
                             <button className={`block px-4 py-2 text-sm text-gray-900 ${isLoginLanguageRTL ? "text-right" : "text-left"}`}>{t('header.changePassword')}</button>
                             <div className="border-t border-gray-100 mx-2"></div>
-                            <button className={`block px-4 py-2 text-sm text-red-700 ${isLoginLanguageRTL ? "text-right" : "text-left"}`} onClick={logout}>{t('header.logout')}</button>
+                            <button className={`block px-4 py-2 text-sm text-red-700 ${isLoginLanguageRTL ? "text-right" : "text-left"}`} onClick={logout}>{t('commons.logout')}</button>
                         </div>
                     )}
                 </div>

pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js

@@ -17,7 +17,7 @@ function DropdownWithSearchComponent({ fieldName, dropdownDataList, onDropDownCh
     fieldNameKey = containsAsterisk ? fieldNameKey.replace('*', '') : fieldNameKey;
 
     const filteredPolicyGroupList = dropdownDataList.filter(dropdownItem =>
-        dropdownItem.fieldCode.toLowerCase().includes(searchItem.toLowerCase())
+        dropdownItem.fieldValue.toLowerCase().includes(searchItem.toLowerCase())
     );
 
     useEffect(() => {

pmp-reactjs-ui/src/pages/dashboard/SelectPolicyPopup.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { HttpService } from "../../services/HttpService.js";
 import {
     getPartnerTypeDescription, createRequest,
-    getPolicyManagerUrl, getPartnerManagerUrl, handleServiceErrors
+    getPolicyManagerUrl, getPartnerManagerUrl, handleServiceErrors, logout
 } from '../../utils/AppUtils.js';
 import { useTranslation } from 'react-i18next';
 import { getUserProfile } from '../../services/UserProfileService.js';
@@ -171,7 +171,11 @@ function SelectPolicyPopup() {
                                 </div>
                             </form>
                         </div>
-                        <div className="p-5 flex justify-end relative">
+                        <div className="border-[#E5EBFA] border-t mx-2"></div>
+                        <div className="p-5 flex justify-between relative">
+                            <p className="text-[#333333] text-sm font-medium ml-2">{t('selectPolicyPopup.logoutMsg')} 
+                                <span className="text-tory-blue font-semibold cursor-pointer" onClick={logout}> {t('commons.logout')}</span>
+                            </p>
                             <button className="w-40 h-12 border-[#1447B2] border bg-tory-blue rounded-lg text-white text-sm font-semibold relative z-60" onClick={clickOnSubmit}>
                                 {t('selectPolicyPopup.submit')}
                             </button>

pmp-reactjs-ui/src/pages/policies/RequestPolicy.js

@@ -1,9 +1,9 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { getUserProfile } from "../../services/UserProfileService";
 import { isLangRTL } from "../../utils/AppUtils";
-import { getPartnerManagerUrl, getPolicyManagerUrl, handleServiceErrors, moveToPolicies, getPartnerTypeDescription, handleMouseClickForDropdown } from '../../utils/AppUtils';
+import { getPartnerManagerUrl, getPolicyManagerUrl, handleServiceErrors, moveToPolicies, getPartnerTypeDescription } from '../../utils/AppUtils';
 import { HttpService } from '../../services/HttpService';
 import LoadingIcon from "../common/LoadingIcon";
 import ErrorMessage from "../common/ErrorMessage";
@@ -27,6 +27,8 @@ function RequestPolicy() {
     const [partnerIdDropdownData, setPartnerIdDropdownData] = useState([]);
     const [policiesDropdownData, setPoliciesDropdownData] = useState([]);
     const [partnerData, setPartnerData] = useState([]);
+    const [policyList, setPolicyList] = useState([]);
+    const [validationError, setValidationError] = useState("");
 
     const cancelErrorMsg = () => {
         setErrorMsg("");
@@ -94,7 +96,7 @@ function RequestPolicy() {
             if (!alreadyAdded) {
                 dataArr.push({
                     fieldCode: item[fieldName],
-                    fieldValue: item.id,
+                    fieldValue: item[fieldName],
                     fieldDescription: item.descr
                 });
             }
@@ -114,10 +116,10 @@ function RequestPolicy() {
     };
 
     const onChangePolicyName = (fieldName, selectedValue) => {
-        const selectedPolicy = policiesDropdownData.find(item => item.fieldValue === selectedValue);
+        const selectedPolicy = policyList.find(item => item.name === selectedValue);
         if (selectedPolicy) {
-            setPolicyName(selectedPolicy.fieldCode);
-            setPolicyId(selectedValue);
+            setPolicyName(selectedValue);
+            setPolicyId(selectedPolicy.id);
         }
     };
 
@@ -133,6 +135,7 @@ function RequestPolicy() {
                 const responseData = response.data;
                 if (responseData && responseData.response) {
                     const resData = responseData.response;
+                    setPolicyList(resData);
                     setPoliciesDropdownData(createPoliciesDropdownData('name', resData));
                     console.log(`Response data: ${resData.length}`);
                 } else {
@@ -155,6 +158,7 @@ function RequestPolicy() {
         setPolicyName("");
         setPartnerComments("");
         setPoliciesDropdownData([]);
+        setValidationError("");
     };
 
     const clickOnSubmit = async () => {
@@ -195,6 +199,30 @@ function RequestPolicy() {
         return partnerId && policyName && partnerComments;
     };
 
+    const validateComments = (comments) => {
+        let error = "";
+        const maxLength = 500;
+        const regexPattern = /^[a-zA-Z0-9-_ ,.]*$/;
+
+        if (comments.length > maxLength) {
+            error = t('requestPolicy.commentTooLong');
+        } else if (!regexPattern.test(comments)) {
+            error = t('requestPolicy.specialCharNotAllowed');
+        }
+
+        setValidationError(error);
+        return error === "";
+    };
+
+    const handleCommentChange = (e) => {
+        const { value } = e.target;
+
+        if (validateComments(value)) {
+            setValidationError("");
+            setPartnerComments(value);
+        }
+    };
+
     const styles = {
         outerDiv: "!ml-0 !mb-0",
         dropdownLabel: "!text-base !mb-1",
@@ -284,6 +312,7 @@ function RequestPolicy() {
                                                     onDropDownChangeEvent={onChangePolicyName} 
                                                     fieldNameKey='requestPolicy.policyName*' 
                                                     placeHolderKey='requestPolicy.selectPolicyName'
+                                                    selectedDropdownValue={policyName}
                                                     searchKey='commons.search'
                                                     styleSet={styleForSearch}>
                                                 </DropdownWithSearchComponent>
@@ -292,9 +321,10 @@ function RequestPolicy() {
                                         <div className="flex my-[1%]">
                                             <div className="flex flex-col w-full">
                                                 <label className="block text-dark-blue text-base font-semibold mb-1">{t('requestPolicy.comments')}<span className="text-crimson-red">*</span></label>
-                                                <textarea value={partnerComments} onChange={(e) => setPartnerComments(e.target.value)} className="w-full h-12 px-2 py-2 border border-[#707070] rounded-md text-lg text-dark-blue dark:placeholder-gray-400 bg-white leading-tight focus:outline-none focus:shadow-outline
+                                                <textarea value={partnerComments} onChange={(e) => handleCommentChange(e)} className="w-full h-12 px-2 py-2 border border-[#707070] rounded-md text-lg text-dark-blue dark:placeholder-gray-400 bg-white leading-tight focus:outline-none focus:shadow-outline
                                                     overflow-x-auto whitespace-nowrap no-scrollbar" placeholder={t('requestPolicy.commentBoxDesc')}>
                                                 </textarea>
+                                                {validationError && <span className="text-sm text-crimson-red font-medium">{validationError}</span>}
                                             </div>
                                         </div>
                                     </div>

pmp-reactjs-ui/src/utils/AppUtils.js

@@ -132,4 +132,12 @@ export const isLangRTL = (langCode) => {
 
 export const moveToPolicies = (navigate) => {
     navigate('/partnermanagement/policies')
-};
+};
+
+export const logout = async () => {
+    localStorage.clear();
+    let redirectUrl = process.env.NODE_ENV !== 'production' ? '' : window._env_.REACT_APP_PARTNER_MANAGER_API_BASE_URL;
+    redirectUrl = redirectUrl + getPartnerManagerUrl(`/logout/user?redirecturi=` + btoa(window.location.href), process.env.NODE_ENV);
+    console.log(redirectUrl);
+    window.location.href = redirectUrl;
+}