Build company local nav in component

src/client/components/CompanyTabbedLocalNavigation/CompanyLocalTab.jsx

@@ -67,12 +67,12 @@ export const StyledAnchorTag = styled.a`
   }
 `
 const CompanyLocalTab = (props) => {
-  const { navItem, index } = props
+  const { navItem, index, isActive } = props
 
   return (
     <StyledListItem key={`tab-${index}`}>
       <StyledAnchorTag
-        selected={navItem.isActive}
+        selected={isActive}
         href={`${navItem.url}${navItem.search ? navItem.search : ''}`}
         id={`tab-${navItem.path}`}
         key={`tab-link-${navItem.path}`}

src/client/components/CompanyTabbedLocalNavigation/constants.js

@@ -0,0 +1,64 @@
+import urls from '../../../lib/urls'
+
+export const localNavItems = (companyId) => {
+  return [
+    {
+      path: 'overview',
+      url: urls.companies.overview.index(companyId),
+      label: 'Overview',
+      permissions: ['company.view_contact'],
+    },
+    {
+      path: 'activity',
+      url: urls.companies.activity.index(companyId),
+      label: 'Activity',
+      search: '?activityType%5B0%5D=dataHubActivity&page=1',
+      permissions: ['interaction.view_all_interaction'],
+    },
+    {
+      path: 'business-details',
+      url: urls.companies.businessDetails(companyId),
+      label: 'Business details',
+    },
+    {
+      path: 'contacts',
+      url: urls.companies.contacts(companyId),
+      label: 'Contacts',
+      search: '?archived%5B0%5D=false&sortby=modified_on%3Adesc&page=1',
+      permissions: ['company.view_contact'],
+      ariaDescription: 'Company contacts',
+    },
+    {
+      path: 'account-management',
+      url: urls.companies.accountManagement.index(companyId),
+      label: 'Account management',
+      ariaDescription: 'Account management',
+    },
+    {
+      path: 'investments',
+      url: urls.companies.investments.companyInvestmentProjectsWithSearch(
+        companyId
+      ),
+      label: 'Investment',
+      search: '/projects?page=1&sortby=created_on%3Adesc',
+      permissions: [
+        'investment.view_all_investmentproject',
+        'investment.view_associated_investmentproject',
+      ],
+      ariaDescription: 'Company investments',
+    },
+    {
+      path: 'exports',
+      url: urls.companies.exports.index(companyId),
+      label: 'Export',
+      permissions: ['company.view_companyexportcountry'],
+    },
+    {
+      path: 'orders',
+      url: urls.companies.orders(companyId),
+      label: 'Orders',
+      permissions: ['order.view_order'],
+      ariaDescription: 'Company orders',
+    },
+  ]
+}

src/client/components/CompanyTabbedLocalNavigation/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import styled from 'styled-components'
 import Paragraph from '@govuk-react/paragraph'
 import WarningText from '@govuk-react/warning-text'
@@ -10,6 +10,9 @@ import CompanyLocalTab from './CompanyLocalTab'
 import urls from '../../../lib/urls'
 import StatusMessage from '../../../client/components/StatusMessage'
 import { BLACK } from '../../../client/utils/colours'
+import { localNavItems } from './constants'
+import { state2props } from './state'
+import { filterNonPermittedItem } from '../../../modules/permissions/filters'
 
 const StyledGridRow = styled.div`
   margin-right: -15px;
@@ -55,7 +58,19 @@ const StyledLink = styled('a')`
 const showMatchingPrompt = (company) =>
   !company.dunsNumber && !company.pendingDnbInvestigation
 
-const CompanyTabbedLocalNavigation = ({ localNavItems, company }) => (
+const transformLocalNavItems = (navItems, userPermissions) =>
+  navItems
+    .filter(filterNonPermittedItem(userPermissions))
+    .map((item, index) => (
+      <CompanyLocalTab
+        navItem={item}
+        index={index}
+        isActive={location.pathname.includes(item.path)}
+        key={`company-tab-${index}`}
+      />
+    ))
+
+const CompanyTabbedLocalNavigation = ({ company, userPermissions }) => (
   <StyledGridRow>
     {showMatchingPrompt(company) && (
       <StatusMessage colour={BLACK} id="ga-company-details-matching-prompt">
@@ -83,31 +98,11 @@ const CompanyTabbedLocalNavigation = ({ localNavItems, company }) => (
     <StyledGridColumn>
       <StyledNav aria-label="local navigation" data-test="tabbedLocalNav">
         <StyledUnorderedList data-test="tabbedLocalNavList">
-          {localNavItems?.map((navItem, index) => (
-            <CompanyLocalTab
-              navItem={navItem}
-              index={index}
-              key={`company-tab-${index}`}
-            />
-          ))}
+          {transformLocalNavItems(localNavItems(company.id), userPermissions)}
         </StyledUnorderedList>
       </StyledNav>
     </StyledGridColumn>
   </StyledGridRow>
 )
 
-CompanyTabbedLocalNavigation.propTypes = {
-  localNavItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      path: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      permissions: PropTypes.array,
-      url: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      isActive: PropTypes.bool.isRequired,
-      ariaDescription: PropTypes.string,
-    })
-  ).isRequired,
-}
-
-export default CompanyTabbedLocalNavigation
+export default connect(state2props)(CompanyTabbedLocalNavigation)

src/client/components/CompanyTabbedLocalNavigation/state.js

@@ -0,0 +1,3 @@
+export const state2props = (state) => {
+  return { userPermissions: state.userPermissions }
+}