From e93636d2b6e51b79b21fe3a595870bf72a7d804d Mon Sep 17 00:00:00 2001
From: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com>
Date: Mon, 19 Aug 2024 11:58:36 +0530
Subject: [PATCH] MOSIP-34643: Updated the side menu for Device Provider (#702)

Signed-off-by: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com>
---
 pmp-reactjs-ui/src/nav/SideNav.js         | 26 +++++++++++++++++------
 pmp-reactjs-ui/src/nav/SideNavMenuItem.js | 10 +++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/pmp-reactjs-ui/src/nav/SideNav.js b/pmp-reactjs-ui/src/nav/SideNav.js
index 15c151c93..82cde9fab 100644
--- a/pmp-reactjs-ui/src/nav/SideNav.js
+++ b/pmp-reactjs-ui/src/nav/SideNav.js
@@ -11,7 +11,7 @@ function SideNav({ open, policyRequiredPartnerTypes, partnerType }) {
     const { t } = useTranslation();
     const [enablePoliciesMenu, setEnablePoliciesMenu] = useState(false);
     const [enableAuthenticationServicesMenu, setEnableAuthenticationServicesMenu] = useState(false);
-
+    const [enableDeviceProviderServicesMenu, setEnableDeviceProviderServicesMenu] = useState(false);
     useEffect(() => {
         //console.log(selectedPath);
         if (selectedPath.includes('dashboard')) {
@@ -26,6 +26,8 @@ function SideNav({ open, policyRequiredPartnerTypes, partnerType }) {
             setActiveIcon("policies");
         } else if (selectedPath.includes('authenticationServices')) {
             setActiveIcon("authenticationServices");
+        } else if (selectedPath.includes('deviceProviderServices')) {
+            setActiveIcon('deviceProviderServices');
         } else {
             setActiveIcon("home");
         }
@@ -39,6 +41,9 @@ function SideNav({ open, policyRequiredPartnerTypes, partnerType }) {
         if (partnerType === "AUTH_PARTNER") {
             setEnableAuthenticationServicesMenu(true);
         }
+        if (partnerType === "DEVICE_PROVIDER") {
+            setEnableDeviceProviderServicesMenu(true);
+        }
     }, [policyRequiredPartnerTypes, partnerType]);
 
     function showHome() {
@@ -57,27 +62,36 @@ function SideNav({ open, policyRequiredPartnerTypes, partnerType }) {
         navigate('/partnermanagement/authenticationServices/oidcClientsList');
         setActiveIcon("authenticationServices");
     };
+    const showDeviceProviderServices = () => {
+        navigate('/partnermanagement/deviceProviderServices/sbiList');
+    };
+
     return (
         <div className="flex font-inter bg-white h-screen z-40">
             <div className={`h-full ${open ? "absolute inset-y-14 w-64" : "absolute inset-y-14 w-[4.5rem]"} 
             flex-col duration-500`}>
                 <ul className="pt-3 h-full space-y-5 bg-[#FCFCFC] shadow-[rgba(0,0,0,0.13)_5px_2px_8px_-2px]">
-                    <li className="duration-700 cursor-pointer" onClick={() => showHome()} onKeyPress={(e)=>{e.key==='Enter' && showHome()}}>
-                        <SideNavMenuItem title={t('commons.home')} id='home' isExpanded={open} activeIcon={activeIcon}/>
+                    <li className="duration-700 cursor-pointer" onClick={() => showHome()} onKeyPress={(e) => { e.key === 'Enter' && showHome() }}>
+                        <SideNavMenuItem title={t('commons.home')} id='home' isExpanded={open} activeIcon={activeIcon} />
                     </li>
-                    <li className="duration-700 cursor-pointer" onClick={() => showPartnerCertificatesList()} onKeyPress={(e)=>{e.key==='Enter' && showPartnerCertificatesList()}}>
+                    <li className="duration-700 cursor-pointer" onClick={() => showPartnerCertificatesList()} onKeyPress={(e) => { e.key === 'Enter' && showPartnerCertificatesList() }}>
                         <SideNavMenuItem title={t('dashboard.partnerCertificate')} id='partnerCertificate' isExpanded={open} activeIcon={activeIcon} />
                     </li>
                     {enablePoliciesMenu &&
-                        <li className="duration-700 cursor-pointer" onClick={() => showPolicies()} onKeyPress={(e)=>{e.key==='Enter' && showPolicies()}}>
+                        <li className="duration-700 cursor-pointer" onClick={() => showPolicies()} onKeyPress={(e) => { e.key === 'Enter' && showPolicies() }}>
                             <SideNavMenuItem title={t('dashboard.policies')} id='policies' isExpanded={open} activeIcon={activeIcon} />
                         </li>
                     }
                     {enableAuthenticationServicesMenu &&
-                        <li className="duration-700 cursor-pointer" onClick={() => showAuthenticationServices()} onKeyPress={(e)=>{e.key==='Enter' && showAuthenticationServices()}}>
+                        <li className="duration-700 cursor-pointer" onClick={() => showAuthenticationServices()} onKeyPress={(e) => { e.key === 'Enter' && showAuthenticationServices() }}>
                             <SideNavMenuItem title={t('dashboard.authenticationServices')} id='authenticationServices' isExpanded={open} activeIcon={activeIcon} />
                         </li>
                     }
+                    {enableDeviceProviderServicesMenu &&
+                        <li className="duration-700 cursor-pointer" onClick={() => showDeviceProviderServices()} onKeyPress={(e) => { e.key === 'Enter' && showDeviceProviderServices() }}>
+                            <SideNavMenuItem title={t('dashboard.deviceProviderServices')} id='deviceProviderServices' isExpanded={open} activeIcon={activeIcon} />
+                        </li>
+                    }
                 </ul>
             </div>
         </div>
diff --git a/pmp-reactjs-ui/src/nav/SideNavMenuItem.js b/pmp-reactjs-ui/src/nav/SideNavMenuItem.js
index 7211644b0..db4a27067 100644
--- a/pmp-reactjs-ui/src/nav/SideNavMenuItem.js
+++ b/pmp-reactjs-ui/src/nav/SideNavMenuItem.js
@@ -65,6 +65,16 @@ export const SideNavMenuItem = ({ title, id, isExpanded, activeIcon }) => {
                             transform="translate(-180 858.46)"
                             fill={activeIcon === id ? "#1447b2" : "#7a7e82"} />
                     </svg>}
+                {
+                    id === 'deviceProviderServices' &&
+                    <svg xmlns="http://www.w3.org/2000/svg" 
+                    width="20" height="18" viewBox="0 0 42.748 33.748">
+                        <path id="tv_options_input_settings_24dp_FILL0_wght300_GRAD0_opsz24"
+                            d="M104.067-746.252a3.919,3.919,0,0,1-2.875-1.192A3.919,3.919,0,0,1,100-750.319v-25.614a3.92,3.92,0,0,1,1.192-2.875A3.92,3.92,0,0,1,104.067-780h34.614a3.92,3.92,0,0,1,2.875,1.192,3.92,3.92,0,0,1,1.192,2.875v25.614a3.919,3.919,0,0,1-1.192,2.875,3.919,3.919,0,0,1-2.875,1.192Zm0-3.375h34.614a.674.674,0,0,0,.5-.195.674.674,0,0,0,.195-.5v-25.614a.674.674,0,0,0-.195-.5.674.674,0,0,0-.5-.195H104.067a.674.674,0,0,0-.5.195.674.674,0,0,0-.195.5v25.614a.674.674,0,0,0,.195.5A.674.674,0,0,0,104.067-749.626Zm15.619-3.5h3.375l.458-2.682a9.388,9.388,0,0,0,1.633-.655,6.408,6.408,0,0,0,1.447-1.041l2.592.9,1.731-2.851-2.09-1.817a7.947,7.947,0,0,0,.221-1.852,7.947,7.947,0,0,0-.221-1.852l2.09-1.817-1.731-2.851-2.592.9a6.4,6.4,0,0,0-1.447-1.041,9.389,9.389,0,0,0-1.633-.655l-.458-2.682h-3.375l-.458,2.682a9.388,9.388,0,0,0-1.633.655,6.4,6.4,0,0,0-1.447,1.041l-2.592-.9-1.731,2.851,2.09,1.817a7.948,7.948,0,0,0-.221,1.852,7.948,7.948,0,0,0,.221,1.852l-2.09,1.817,1.731,2.851,2.592-.9a6.407,6.407,0,0,0,1.447,1.041,9.388,9.388,0,0,0,1.633.655Zm1.687-5.322a4.5,4.5,0,0,1-3.308-1.365,4.5,4.5,0,0,1-1.365-3.308,4.505,4.505,0,0,1,1.365-3.308,4.505,4.505,0,0,1,3.308-1.365,4.505,4.505,0,0,1,3.308,1.365,4.505,4.505,0,0,1,1.365,3.308,4.5,4.5,0,0,1-1.365,3.308A4.5,4.5,0,0,1,121.374-758.453Zm-18,8.826v0Z"
+                            transform="translate(-100 780)" fill={activeIcon === id ? "#1447b2" : "#7a7e82"} />
+                    </svg>
+
+                }
             </div>
             {isExpanded &&
                 <p className={`duration-200 ${!isExpanded && 'scale-0'} text-nowrap font-semibold text-xs text-dark-blue`}>