feat(frontend): Add new Field on negotiation catalog

frontend/.env

@@ -18,3 +18,5 @@ REACT_APP_DELETE_REPORTS=/api/dashboard/deleteReport
 REACT_APP_GET_USER_BPDM_GATES=/api/dashboard/getAllUserBPDMGates?
 REACT_APP_DELETE_RATINGS=/api/dashboard/deleteRating
 REACT_APP_GET_COMPANY_USERS=/api/dashboard/getUserFromCompany?
+REACT_APP_GET_QUERY_CATALOG=/api/negotiation/queryCatalog?
+REACT_APP_POST_TRIGGER_NEGOTIATION=/api/negotiation/triggerNegotiation?

frontend/public/index.html

@@ -6,7 +6,7 @@
     <script>
       window.ENV = {
         REACT_APP_COUNTRY_RISK_API: "http://localhost:8080",
-        REACT_APP_AUTH_URL: "https://localhost:8081/auth",
+        REACT_APP_AUTH_URL: "http://localhost:8080/auth",
         REACT_APP_PORTAL_FRONTEND: "http://localhost:3000",
         REACT_APP_PORTAL_BACKEND: "http://localhost:8080",
         REACT_APP_COUNTRY_RISK_CLIENT: "country_risk_client",

frontend/src/components/dashboard/NavigationBar/UserInformation/UserInfo.js

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useState, useRef, useContext } from "react";
+import { useState, useRef, useContext, useEffect } from "react";
 import {
   UserAvatar,
   UserMenu,
@@ -36,7 +36,16 @@ import { CompanyUserContext } from "../../../../contexts/companyuser";
 export const UserInfo = () => {
   const [menuOpen, setMenuOpen] = useState(false);
   const wrapperRef = useRef(null);
-  const { companyUser } = useContext(CompanyUserContext);
+  const { companyUser, setCompanyUser } = useContext(CompanyUserContext);
+  const [cleanedRoles, setCleanedRoles] = useState([]);
+
+  useEffect(() => {
+    // Clean up roles by trimming whitespace
+    if (companyUser && companyUser.roles) {
+      const cleanedRoles = companyUser.roles.map((role) => role.trim());
+      setCleanedRoles(cleanedRoles);
+    }
+  }, [companyUser]);
 
   const openCloseMenu = () => setMenuOpen((prevVal) => !prevVal);
 
@@ -58,8 +67,9 @@ export const UserInfo = () => {
 
   // Add negotiation link for users with Negotiator or Admin roles
   if (
-    companyUser.roles.includes("Negotiator") ||
-    companyUser.roles.includes("Admin")
+    cleanedRoles.includes("Negotiator") ||
+    cleanedRoles.includes("Admin") ||
+    cleanedRoles.includes("Company Admin")
   ) {
     menuItems = [
       {

frontend/src/components/dashboard/NegotiationPage/NegotiationPage.js

@@ -37,6 +37,15 @@ const NegotiationPage = () => {
   const navigate = useNavigate();
   const [catalogItems, setCatalogItems] = useState([]);
   const [selectedItems, setSelectedItems] = useState([]);
+  const [cleanedRoles, setCleanedRoles] = useState([]);
+
+  useEffect(() => {
+    // Clean up roles by trimming whitespace
+    if (companyUser && companyUser.roles) {
+      const cleanedRoles = companyUser.roles.map((role) => role.trim());
+      setCleanedRoles(cleanedRoles);
+    }
+  }, [companyUser]);
 
   useEffect(() => {
     // Fetch catalog items from the API
@@ -111,6 +120,7 @@ const NegotiationPage = () => {
     const negotiationRequest = selectedItems.map((item) => ({
       id: item.id,
       offerId: item.offerId,
+      usagePurpose: item.usagePurpose,
     }));
 
     try {
@@ -146,8 +156,13 @@ const NegotiationPage = () => {
 
   // Check if the user has permission to initiate negotiations
   const userCanNegotiate =
-    companyUser.roles.includes("Negotiator") ||
-    companyUser.roles.includes("Admin"); // Adjust the role check as necessary
+    cleanedRoles.includes("Negotiator") ||
+    cleanedRoles.includes("Admin") ||
+    cleanedRoles.includes("Company Admin"); // Adjust the role check as necessary
+
+  console.log("cleanedRoles", cleanedRoles);
+  console.log("companyUser", companyUser);
+  console.log("userCanNegotiate", userCanNegotiate);
 
   return (
     <div className="negotiation-page">