From e20ee9b7716253124b5efc90153b57ec0c1ea1ad Mon Sep 17 00:00:00 2001
From: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com>
Date: Thu, 6 Jun 2024 17:05:46 +0530
Subject: [PATCH] MOSIP-33499: Ui changes in SelectPolicyPopup (#419)

Signed-off-by: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com>
---
 pmp-reactjs-ui/public/i18n/ara.json                      | 2 +-
 pmp-reactjs-ui/public/i18n/eng.json                      | 2 +-
 pmp-reactjs-ui/public/i18n/fra.json                      | 2 +-
 pmp-reactjs-ui/src/pages/common/LoadingIcon.js           | 4 ++--
 .../pages/common/fields/DropdownWithSearchComponent.js   | 2 +-
 pmp-reactjs-ui/src/pages/dashboard/SelectPolicyPopup.js  | 9 +++++----
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json
index c76a3abdc..6e005dcc6 100644
--- a/pmp-reactjs-ui/public/i18n/ara.json
+++ b/pmp-reactjs-ui/public/i18n/ara.json
@@ -39,7 +39,7 @@
     "partnerCertificatesList": {
         "partnerCertificate": "شهادة الشريك",
         "noPartnerTypesAreMapped": "لم يتم تعيين أي أنواع شركاء لمعرف المستخدم الخاص بك",
-        "uploadPartnerCertificate": "يرجى تحميل شهادة الشريك هنا",
+        "uploadPartnerCertificate": "قم بتحميل شهادة الشريك الموقّع من CA",
         "certificateFormatMsg": "يُسمح فقط بتحميل تنسيقات الشهادات .cer أو .pem",
         "download": "تحميل",
         "originalCertificate": "الشهادة الأصلية",
diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json
index 384850106..840e12cd6 100644
--- a/pmp-reactjs-ui/public/i18n/eng.json
+++ b/pmp-reactjs-ui/public/i18n/eng.json
@@ -39,7 +39,7 @@
     "partnerCertificatesList": {
         "partnerCertificate": "Partner Certificate",
         "noPartnerTypesAreMapped": "No partner types are mapped to your user id",
-        "uploadPartnerCertificate": "Please upload partner certificate here",
+        "uploadPartnerCertificate": "Upload CA Signed Partner Certificate",
         "certificateFormatMsg": "Only .cer or .pem certificate formats are allowed for upload",
         "download": "Download",
         "originalCertificate": "Original Certificate",
diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json
index eb4e71480..ecf68a351 100644
--- a/pmp-reactjs-ui/public/i18n/fra.json
+++ b/pmp-reactjs-ui/public/i18n/fra.json
@@ -39,7 +39,7 @@
     "partnerCertificatesList": {
         "partnerCertificate": "Certificat de partenaire",
         "noPartnerTypesAreMapped": "Aucun type de partenaire n'est mappé à votre identifiant utilisateur",
-        "uploadPartnerCertificate": "Veuillez télécharger le certificat de partenaire ici",
+        "uploadPartnerCertificate": "Télécharger le certificat de partenaire signé par une autorité de certification",
         "certificateFormatMsg": "Seuls les formats de certificat .cer ou .pem sont autorisés pour le téléchargement",
         "download": "Télécharger",
         "originalCertificate": "Certificat original",
diff --git a/pmp-reactjs-ui/src/pages/common/LoadingIcon.js b/pmp-reactjs-ui/src/pages/common/LoadingIcon.js
index 7d170fea2..cc0125077 100644
--- a/pmp-reactjs-ui/src/pages/common/LoadingIcon.js
+++ b/pmp-reactjs-ui/src/pages/common/LoadingIcon.js
@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next';
 
-function LoadingIcon() {
+function LoadingIcon({ styleSet }) {
     const { t } = useTranslation();
     return (
-        <div className="flex items-center justify-center h-full w-full">
+        <div className={`flex items-center justify-center h-full w-full ${(styleSet && styleSet.loadingDiv) ? styleSet.loadingDiv : ''}`}>
             <div role="status" className="flex items-center">
                 <svg aria-hidden="true" className="w-8 h-8 text-gray-200 animate-spin fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
diff --git a/pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js b/pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js
index f8fabc023..15c0bd5da 100644
--- a/pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js
+++ b/pmp-reactjs-ui/src/pages/common/fields/DropdownWithSearchComponent.js
@@ -73,7 +73,7 @@ function DropdownWithSearchComponent({ fieldName, dropdownDataList, onDropDownCh
                                     return (
                                         <div key={index} className="min-h-3">
                                             <button
-                                                className={`block ${dropdownItem.fieldDescription ? 'h-[4.5rem]' : 'h-8'} w-full px-4 py-1 text-left text-base text-dark-blue
+                                                className={`block ${dropdownItem.fieldDescription ? 'min-h-20' : 'min-h-8'} w-full px-4 py-1 text-left text-base text-dark-blue overflow-x-auto no-scrollbar
                                                     ${selectedDropdownEntry === dropdownItem.fieldCode ? 'bg-gray-100' : 'hover:bg-gray-100'}`}
                                                 onClick={() => changeDropdownSelection(dropdownItem.fieldValue)}>
                                                 <span className={`${dropdownItem.fieldDescription ? 'font-semibold' : 'font-normal'}`}>{dropdownItem.fieldCode}</span>
diff --git a/pmp-reactjs-ui/src/pages/dashboard/SelectPolicyPopup.js b/pmp-reactjs-ui/src/pages/dashboard/SelectPolicyPopup.js
index b392dc419..c598e2ada 100644
--- a/pmp-reactjs-ui/src/pages/dashboard/SelectPolicyPopup.js
+++ b/pmp-reactjs-ui/src/pages/dashboard/SelectPolicyPopup.js
@@ -65,14 +65,14 @@ function SelectPolicyPopup() {
         dataList.forEach(item => {
             let alreadyAdded = false;
             dataArr.forEach(item1 => {
-                if (item1.fieldValue === item.id) {
+                if (item1.fieldValue === item.name) {
                     alreadyAdded = true;
                 }
             });
             if (!alreadyAdded) {
                 dataArr.push({
                     fieldCode: item.name,
-                    fieldValue: item.id,
+                    fieldValue: item.name,
                     fieldDescription: item.desc
                 });
             }
@@ -115,14 +115,15 @@ function SelectPolicyPopup() {
         outerDiv: "!ml-0 !mb-0",
         dropdownLabel: "!text-base !my-2 mb-0",
         dropdownButton: "!w-full !h-11 !rounded-md !text-base !text-dark-blue",
-        selectionBox: ""
+        selectionBox: "",
+        loadingDiv: "!py-[50%]"
     }
 
     return (
         <div className="fixed inset-0 w-full flex items-center justify-center bg-black bg-opacity-50 z-50 font-inter">
             <div className={`bg-white w-1/3 mx-auto rounded-xl shadow-lg -mt-3`}>
                 {!dataLoaded && (
-                    <LoadingIcon></LoadingIcon>
+                    <LoadingIcon styleSet={styles}></LoadingIcon>
                 )}
                 {dataLoaded && (
                     <>