Fix: LCFS BUG - Navigating directly to organization detail errors #1586

frontend/src/assets/locales/en/fuelCode.json

@@ -31,7 +31,7 @@
     "company": "Company",
     "contactName": "Contact name",
     "contactEmail": "Contact email",
-    "carbonIntensity": "Carbon intensity (gCO²e/MJ)",
+    "carbonIntensity": "Carbon intensity (gCO₂e/MJ)",
     "edrms": "EDRMS#",
     "applicationDate": "Application date",
     "approvalDate": "Approval date",

frontend/src/components/BCDataGrid/BCDataGridServer.jsx

@@ -289,7 +289,9 @@ const BCDataGridServer = ({
 
   // Memorized default column definition parameters
   const defaultColDefParams = useMemo(() => ({
-    headerComponent: AccessibleHeader,
+    headerComponentParams: {
+      innerHeaderComponent: AccessibleHeader
+    },
     suppressHeaderFilterButton: true,
     resizable: true,
     sortable: true,

frontend/src/components/BCDataGrid/BCGridViewer.jsx

@@ -1,7 +1,10 @@
 import BCAlert, { FloatingAlert } from '@/components/BCAlert'
 import BCBox from '@/components/BCBox'
 import { BCGridBase } from '@/components/BCDataGrid/BCGridBase'
-import { AccessibleHeader, BCPagination } from '@/components/BCDataGrid/components'
+import {
+  AccessibleHeader,
+  BCPagination
+} from '@/components/BCDataGrid/components'
 import '@ag-grid-community/styles/ag-grid.css'
 import '@ag-grid-community/styles/ag-theme-material.css'
 import { useCallback, useMemo, useRef, useState } from 'react'
@@ -161,7 +164,9 @@ export const BCGridViewer = ({
 
   const defaultColDefParams = useMemo(
     () => ({
-      headerComponent: AccessibleHeader,
+      headerComponentParams: {
+        innerHeaderComponent: AccessibleHeader
+      },
       suppressHeaderFilterButton: true,
       resizable: true,
       sortable: true,

frontend/src/components/Login.jsx

@@ -188,6 +188,7 @@ export const Login = () => {
                     <BCButton
                       variant="contained"
                       color="primary"
+                      aria-label="Login with BCeID"
                       onClick={() => {
                         keycloak.login({
                           idpHint: IDENTITY_PROVIDERS.BCEID_BUSINESS,
@@ -221,6 +222,7 @@ export const Login = () => {
                     <BCButton
                       variant="outlined"
                       color="white"
+                      aria-label="Login with IDIR"
                       onClick={() => {
                         keycloak.login({
                           idpHint: IDENTITY_PROVIDERS.IDIR,

frontend/src/hooks/useOrganization.js

@@ -2,6 +2,7 @@ import { apiRoutes } from '@/constants/routes'
 import { useApiService } from '@/services/useApiService'
 import { useQuery } from '@tanstack/react-query'
 import { useCurrentUser } from './useCurrentUser'
+import { roles } from '@/constants/roles'
 
 export const useOrganization = (orgID, options) => {
   const client = useApiService()
@@ -29,14 +30,24 @@ export const useOrganizationUser = (orgID, userID, options) => {
 
 export const useOrganizationBalance = (orgID, options) => {
   const client = useApiService()
+  const { hasRoles } = useCurrentUser()
+  const hasAccess = hasRoles(roles.government)
 
   return useQuery({
     queryKey: ['organization-balance', orgID],
-    queryFn: async () =>
-      orgID ? (await client.get(`/organizations/balances/${orgID}`)).data : {},
+    queryFn: async () => {
+      if (!hasAccess) {
+        return null
+      }
+      return orgID
+        ? (await client.get(`/organizations/balances/${orgID}`)).data
+        : {}
+    },
+    enabled: hasAccess && !!orgID,
     ...options
   })
 }
+
 export const useCurrentOrgBalance = (options) => {
   const client = useApiService()
 

frontend/src/views/Organizations/ViewOrganization/ViewOrganization.jsx

@@ -42,12 +42,9 @@ export const ViewOrganization = () => {
     orgID ?? currentUser?.organization?.organizationId
   )
 
-  let orgBalance = {}
-  if (hasRoles(roles.government)) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    orgBalance = useOrganizationBalance(orgID)
-  }
-  const { data: orgBalaceInfo } = orgBalance
+  const { data: orgBalanceInfo } = useOrganizationBalance(
+    orgID ?? currentUser?.organization?.organizationId
+  )
 
   const canEdit = hasRoles(roles.administrator)
   const editButtonRoute = canEdit
@@ -174,9 +171,9 @@ export const ViewOrganization = () => {
                   <Role roles={[roles.government]}>
                     <BCTypography variant="body4">
                       <strong>{t('org:complianceUnitBalance')}:</strong>{' '}
-                      {orgBalaceInfo?.totalBalance.toLocaleString()} (
+                      {orgBalanceInfo?.totalBalance?.toLocaleString()} (
                       {Math.abs(
-                        orgBalaceInfo?.reservedBalance
+                        orgBalanceInfo?.reservedBalance || 0
                       ).toLocaleString()}
                       )
                     </BCTypography>