MOSIP-35322, MOSIP-35350, MOSIP-35323 : Fixed the bugs. (#721)

* MOSIP-35322:Now message displayed in the List of SBI & Deactivate popup as per Devices Count Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-35350: The help text is inlined properly for the device subtype in french lang Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-35323: Resolved alignment issues when logged in Arabic for device provider Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-35323: Fixed the default height of dropdowns Signed-off-by: Anil_Kumar_Majji <[email protected]> --------- Signed-off-by: Anil_Kumar_Majji <[email protected]>
mosip · Aug 28, 2024 · 8218b71 · 8218b71
1 parent 7578b5c
commit 8218b71
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 17 deletions.
diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json
@@ -368,6 +368,7 @@
         "viewDevices": "عرض الأجهزة",
         "partnerId": "معرف الشريك",
         "partnerType": "نوع الشريك",
+        "device": "جهاز",
         "createdDate": "تاريخ ووقت إنشاء SBI",
         "expiryDate": "تاريخ ووقت انتهاء صلاحية SBI",
         "deactivate": "إلغاء تنشيط SBI",
@@ -427,7 +428,8 @@
         "description1": "عند النقر فوق تأكيد، تفاصيل SBI الخاصة بك و",
         "devicesMapped": "الأجهزة المعينة",
         "description2": "سيتم إلغاء تنشيطه",
-        "deactivateSbiHint": "سيتم إلغاء تنشيط جميع الأجهزة {{devicesCount}} المرتبطة بـ SBI هذا"
+        "deactivateSbiHintPlural": "سيتم إلغاء تنشيط جميع الأجهزة {{devicesCount}} المرتبطة بـ SBI هذا",
+        "deactivateSbiHintSingular": "سيتم إلغاء تنشيط {{devicesCount}} جهاز مرتبط بجهاز SBI هذا"
      },
     "viewDeviceDetails": {
         "viewDeviceDetails": "عرض تفاصيل الجهاز",

diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json
@@ -363,6 +363,7 @@
         "viewDevices": "View Devices",
         "partnerId": "Partner ID",
         "partnerType": "Partner Type",
+        "device": "device",
         "createdDate": "SBI Created Date & Time",
         "expiryDate": "SBI Expiry Date & Time",
         "deactivate": "Deactivate SBI",
@@ -422,7 +423,8 @@
         "description1": "On clicking Confirm, your SBI details and the ",
         "devicesMapped": "devices mapped ",
         "description2": "to it will be deactivated",
-        "deactivateSbiHint": "All {{devicesCount}} devices associated to this SBI will be deactivated"
+        "deactivateSbiHintPlural": "All {{devicesCount}} devices associated to this SBI will be deactivated",
+        "deactivateSbiHintSingular": "{{devicesCount}} device associated to this SBI will be deactivated"
     },
     "viewDeviceDetails": {
         "viewDeviceDetails": "View Device Details",

diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json
@@ -368,6 +368,7 @@
         "viewDevices": "Afficher les périphériques",
         "partnerId": "ID partenaire",
         "partnerType": "Type de partenaire",
+        "device": "appareil",
         "createdDate": "Date et heure de création du SBI",
         "expiryDate": "Date et heure d'expiration du SBI",
         "deactivate": "Désactiver SBI",
@@ -427,7 +428,8 @@
         "description1": "En cliquant sur Confirmer, vos détails SBI et le ",
         "devicesMapped": "appareils mappés",
         "description2": "il sera désactivé",
-        "deactivateSbiHint": "Tous les {{devicesCount}} appareils associés à ce SBI seront désactivés"
+        "deactivateSbiHintPlural": "Tous les {{devicesCount}} appareils associés à ce SBI seront désactivés",
+        "deactivateSbiHintSingular": "{{devicesCount}} appareil associé à ce SBI sera désactivé"
      },
     "viewDeviceDetails": {
         "viewDeviceDetails": "Afficher les détails de l'appareil",

diff --git a/pmp-reactjs-ui/src/pages/common/DeactivatePopup.js b/pmp-reactjs-ui/src/pages/common/DeactivatePopup.js
@@ -24,6 +24,15 @@ function DeactivatePopup({ closePopUp, popupData, request, headerMsg, descriptio
         closePopUp()
     };
 
+    const validateCountOfApprovedDevices = (countOfDevices) => {
+        if (countOfDevices > 1) {
+            return ('deactivateSbi.deactivateSbiHintPlural')
+        }
+        else {
+            return ('deactivateSbi.deactivateSbiHintSingular')
+        }
+    };
+
     const clickOnConfirm = async () => {
         setErrorCode("");
         setErrorMsg("");
@@ -89,7 +98,7 @@ function DeactivatePopup({ closePopUp, popupData, request, headerMsg, descriptio
                                     </div>
                                 </div>
                             )}
-                            <div className={`p-[10%] flex-col text-center justify-center items-center`}>
+                            <div className={`p-[8%] flex-col text-center justify-center items-center`}>
                                 {!isLoginLanguageRTL ?
                                     <p className="text-base leading-snug font-semibold text-black break-words px-[6%]">
                                         {t(headerMsg)} - '{popupData.isDeactivateDevice ? popupData.make + ' - ' + popupData.model : headerKeyName}'?
@@ -102,8 +111,8 @@ function DeactivatePopup({ closePopUp, popupData, request, headerMsg, descriptio
                                     {t(descriptionMsg)} {popupData.isDeactivateSbi && <span className="font-bold break-words">{t('deactivateSbi.devicesMapped')}</span>} {popupData.isDeactivateSbi && t('deactivateSbi.description2')}
                                 </p>
                                 {popupData.isDeactivateSbi &&
-                                    (<div className="bg-[#FFF7E5] py-1 px-0.5 border-2 break-words border-[#EDDCAF] rounded-md w-full">
-                                        <p className="text-sm font-inter text-[#8B6105]">{t('deactivateSbi.deactivateSbiHint', {devicesCount:popupData.countOfApprovedDevices})} {!isLoginLanguageRTL && t('!')}</p>
+                                    (<div className="bg-[#FFF7E5] border-2 break-words border-[#EDDCAF] rounded-md w-full p-[2%]">
+                                        <p className="text-sm font-inter text-[#8B6105]">{t(validateCountOfApprovedDevices(popupData.countOfApprovedDevices), {devicesCount: popupData.countOfApprovedDevices})} {!isLoginLanguageRTL && t('!')}</p>
                                     </div>)
                                 }
                                 <div className="flex flex-row items-center justify-center space-x-3 pt-[4%]">

diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/AddDevices.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/AddDevices.js
@@ -373,7 +373,7 @@ function AddDevices() {
     const styles = {
         outerDiv: "!ml-0 !mb-0",
         dropdownLabel: "!text-base !mb-1",
-        dropdownButton: "!w-full !h-10 !rounded-md !text-base !text-start",
+        dropdownButton: "!w-full !h-fit !rounded-md !text-base !text-start",
         selectionBox: "!top-10"
     };
 
@@ -399,7 +399,7 @@ function AddDevices() {
                                 backLink={previousPath.path} 
                                 status={!unexpectedError ? selectedSbidata.status : ''}
                                 version={!unexpectedError ? selectedSbidata.sbiVersion : ''}
-                                ></Title>
+                            />
                         </div>
                         <div className="bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center">
                             <div className="flex items-center justify-center p-2">
@@ -416,14 +416,14 @@ function AddDevices() {
                                             <p className="text-base text-[#3D4468] px-6 py-2">{t('requestPolicy.mandatoryFieldsMsg1')} <span className="text-crimson-red">*</span> {t('requestPolicy.mandatoryFieldsMsg2')}</p>
                                         )}
                                         {entry.successMsg && (
-                                            <div className={`flex justify-end max-w-7xl max-[800px]:w-1/3 absolute ${isLoginLanguageRTL ? "left-0" : "right-6"}`}>
+                                            <div className={`flex justify-end max-w-7xl max-[800px]:w-1/3 absolute ${isLoginLanguageRTL ? "left-6" : "right-6"}`}>
                                                 <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 bg-fruit-salad rounded-xl py-3 px-6 z-10">
                                                     <SuccessMessage successMsg={entry.successMsg} clickOnCancel={() => cancelSuccessMsg(index)}></SuccessMessage>
                                                 </div>
                                             </div>
                                         )}
                                         {entry.errorMsg && (
-                                            <div className={`flex justify-end max-w-7xl max-[800px]:w-1/3 absolute ${isLoginLanguageRTL ? "left-0" : "right-6"}`}>
+                                            <div className={`flex justify-end max-w-7xl max-[800px]:w-1/3 absolute ${isLoginLanguageRTL ? "left-6" : "right-6"}`}>
                                                 <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 bg-[#C61818] rounded-xl p-3 z-10">
                                                     <ErrorMessage errorCode={entry.errorCode} errorMessage={entry.errorMsg} clickOnCancel={() => cancelError(index)}></ErrorMessage>
                                                 </div>
@@ -432,7 +432,7 @@ function AddDevices() {
                                     </div>
                                     <form>
                                         <div className="flex justify-between max-[850px]:flex-wrap pl-5 pr-2 py-2">
-                                            <div className="flex-col w-[23%] max-[850px]:w-[47%] max-[585px]:w-full">
+                                            <div className="flex-col w-[24%] max-[850px]:w-[47%] max-[585px]:w-full">
                                                 <DropdownComponent
                                                     fieldName='deviceType'
                                                     dropdownDataList={entry.deviceTypeDropdownData}
@@ -445,7 +445,7 @@ function AddDevices() {
                                                     styleSet={styles}>
                                                 </DropdownComponent>
                                             </div>
-                                            <div className="flex-col w-[23%] max-[850px]:w-[47%] max-[585px]:w-full">
+                                            <div className="flex-col w-[24%] max-[850px]:w-[47%] max-[585px]:w-full">
                                                 <DropdownComponent
                                                     fieldName='deviceSubType'
                                                     dropdownDataList={entry.deviceSubTypeDropdownData}
@@ -458,14 +458,14 @@ function AddDevices() {
                                                     styleSet={styles}>
                                                 </DropdownComponent>
                                             </div>
-                                            <div className="flex flex-col w-[21.5%] max-[850px]:w-[47%] max-[585px]:w-full">
+                                            <div className="flex flex-col w-[22.5%] max-[850px]:w-[47%] max-[585px]:w-full">
                                                 <label className={`block text-dark-blue text-base font-semibold mb-1 ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>{t('addDevices.make')}<span className="text-crimson-red mx-1">*</span></label>
                                                 <input disabled={entry.isSubmitted} value={entry.make} onChange={(e) => handleInputChange(index, 'make', e.target.value)} maxLength={36}
                                                     className={`h-10 px-2 py-3 border border-[#707070] rounded-md text-base text-dark-blue ${entry.isSubmitted ? 'bg-[#EBEBEB]' : 'bg-white'} leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar`}
                                                     placeholder={t('addDevices.enterMake')} />
                                                 {entry.invalidMake && <span className="text-sm text-crimson-red font-semibold">{entry.invalidMake}</span>}
                                             </div>
-                                            <div className="flex flex-col w-[21.5%] max-[850px]:w-[47%] max-[585px]:w-full">
+                                            <div className="flex flex-col w-[22.5%] max-[850px]:w-[47%] max-[585px]:w-full">
                                                 <label className={`block text-dark-blue text-base font-semibold mb-1 ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>{t('addDevices.model')}<span className="text-crimson-red mx-1">*</span></label>
                                                 <input disabled={entry.isSubmitted} value={entry.model} onChange={(e) => handleInputChange(index, 'model', e.target.value)} maxLength={36}
                                                     className={`h-10 px-2 py-3 border border-[#707070] rounded-md text-base text-dark-blue ${entry.isSubmitted ? 'bg-[#EBEBEB]' : 'bg-white'} leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar`}

diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/SbiList.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/SbiList.js
@@ -164,7 +164,7 @@ function SbiList() {
                     )}
                     <div className="flex-col mt-7 !mb-4">
                         <div className="flex justify-between mb-5">
-                            <Title title='sbiList.listOfSbi' backLink='/partnermanagement' ></Title>
+                            <Title title='sbiList.listOfSbi' backLink='/partnermanagement'/>
                             {sbiList.length > 0 ?
                                 <button type="button" onClick={addSbi}
                                     className="h-10 text-sm font-semibold px-7 text-white bg-tory-blue rounded-md">
@@ -207,13 +207,13 @@ function SbiList() {
                                                             <div className='flex items-center w-fit px-2 mx-1'>
                                                                 <p className="text-xs font-semibold text-[#505E7C]">
                                                                     <span className={`text-xs font-semibold ${sbi.status === "deactivated" ? 'text-[#4F5E7C]' : 'text-tory-blue'} `}>
-                                                                        {sbi.countOfApprovedDevices} {t('sbiList.devices')}
+                                                                        {sbi.countOfApprovedDevices} {sbi.countOfApprovedDevices <=1 ? t('sbiList.device') : t('sbiList.devices')}
                                                                     </span> {t('sbiList.approved')}
                                                                 </p>
                                                                 <span className='mx-1'>{'|'}</span>
                                                                 <p className="text-xs font-semibold text-[#505E7C]">
                                                                     <span className={`text-xs font-semibold ${sbi.status === "deactivated" ? 'text-[#4F5E7C]' : 'text-[#ba5f04]'} `}>
-                                                                        {sbi.countOfPendingDevices} {t('sbiList.devices')}
+                                                                        {sbi.countOfPendingDevices} {sbi.countOfPendingDevices <=1 ? t('sbiList.device') : t('sbiList.devices')}
                                                                     </span> {t('sbiList.pendingForApprovalContx')}
                                                                 </p>
                                                             </div>