Migrate CompanyOverview page to use React Router

uktrade · Jan 5, 2024 · 8986a37 · 8986a37
1 parent 577b2d0
commit 8986a37
Show file tree

Hide file tree

Showing 27 changed files with 117 additions and 153 deletions.
diff --git a/src/apps/companies/apps/company-overview/client/CompanyOverview.jsx b/src/apps/companies/apps/company-overview/client/CompanyOverview.jsx
diff --git a/src/apps/companies/apps/company-overview/controllers.js b/src/apps/companies/apps/company-overview/controllers.js
diff --git a/src/apps/companies/apps/company-overview/router.js b/src/apps/companies/apps/company-overview/router.js
diff --git a/src/apps/companies/apps/company-overview/views/client-container.njk b/src/apps/companies/apps/company-overview/views/client-container.njk
diff --git a/src/apps/companies/router.js b/src/apps/companies/router.js
@@ -42,7 +42,6 @@ const formatPostcodes = require('./middleware/format-postcodes')
 const addCompanyFormRouter = require('./apps/add-company/router')
 const editCompanyFormRouter = require('./apps/edit-company/router')
 const activityFeedRouter = require('./apps/activity-feed/router')
-const companyOverviewRouter = require('./apps/company-overview/router')
 const dnbHierarchyRouter = require('./apps/dnb-hierarchy/router')
 const businessDetailsRouter = require('./apps/business-details/router')
 const editHistoryRouter = require('./apps/edit-history/router')
@@ -121,7 +120,6 @@ router.use(businessDetailsRouter)
 router.use(matchCompanyRouter)
 router.use(exportsRouter)
 router.use(referralsRouter)
-router.use(companyOverviewRouter)
 router.use(accountManagementRouter)
 
 module.exports = router
diff --git a/src/apps/routers.js b/src/apps/routers.js
@@ -109,6 +109,7 @@ const reactRoutes = [
   '/tasks/:taskId/details',
   '/tasks/create',
   '/tasks/:taskId/edit',
+  '/companies/:companyId/overview',
 ]
 
 reactRoutes.forEach((path) => {

diff --git a/src/client/index.jsx b/src/client/index.jsx
@@ -22,7 +22,6 @@ import EditCompanyList from '../apps/company-lists/client/EditCompanyList'
 import CreateListForm from '../apps/company-lists/client/CreateListForm'
 import ManageAdviser from '../apps/companies/apps/advisers/client/ManageAdviser'
 import CompanyBusinessDetails from '../apps/companies/apps/business-details/client/CompanyBusinessDetails'
-import CompanyOverview from '../apps/companies/apps/company-overview/client/CompanyOverview'
 import ExportsIndex from '../apps/companies/apps/exports/client/ExportsIndex'
 import ExportsHistory from '../apps/companies/apps/exports/client/ExportsHistory/'
 import ReferralDetails from '../apps/companies/apps/referrals/details/client/ReferralDetails'
@@ -241,9 +240,6 @@ function App() {
         <Mount selector="#contact-form">
           {(props) => <ContactForm {...props} id="contact-form" />}
         </Mount>
-        <Mount selector="#company-overview">
-          {(props) => <CompanyOverview {...props} />}
-        </Mount>
         <Mount selector="#company-projects-collection">
           {(props) => <CompanyProjectsCollection {...props} />}
         </Mount>

diff --git a/src/client/modules/Companies/CompanyOverview/CompanyOverview.jsx b/src/client/modules/Companies/CompanyOverview/CompanyOverview.jsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import { GridCol, GridRow } from 'govuk-react'
+import styled from 'styled-components'
+import { useParams } from 'react-router-dom'
+
+import {
+  AccountManagementCard,
+  ActiveInvestmentProjectsCard,
+  ActivityCard,
+  BusinessDetailsCard,
+  ExportStatusCard,
+  InvestmentStatusCard,
+} from './TableCards'
+import { FILTER_FEED_TYPE } from '../../../../apps/companies/apps/activity-feed/constants'
+import { CompanyResource } from '../../../components/Resource/index'
+import CompanyLayoutNew from '../../../components/Layout/CompanyLayoutNew'
+
+const CardContainer = styled('div')`
+  border: 1px solid #b1b4b6;
+  padding: 20px;
+  margin-bottom: 20px;
+`
+
+const CompanyOverview = () => {
+  const { companyId } = useParams()
+  return (
+    <CompanyResource id={companyId}>
+      {(company) => (
+        <CompanyLayoutNew
+          company={company}
+          breadcrumbs={[{ text: 'Overview' }]}
+          pageTitle="Overview"
+        >
+          <GridRow>
+            <GridCol columnOneHalf={true}>
+              <CardContainer>
+                <BusinessDetailsCard company={company} />
+              </CardContainer>
+              <CardContainer>
+                <AccountManagementCard company={company} />
+              </CardContainer>
+              <CardContainer>
+                <ExportStatusCard company={company} />
+              </CardContainer>
+              <CardContainer>
+                <InvestmentStatusCard companyId={company.id} />
+              </CardContainer>
+            </GridCol>
+            <GridCol columnOneHalf={true}>
+              <CardContainer>
+                <ActivityCard
+                  company={company}
+                  numberOfItems={3}
+                  feedType={FILTER_FEED_TYPE.RECENT}
+                />
+              </CardContainer>
+              <CardContainer>
+                <ActivityCard
+                  company={company}
+                  numberOfItems={2}
+                  feedType={FILTER_FEED_TYPE.UPCOMING}
+                />
+              </CardContainer>
+              <CardContainer>
+                <ActiveInvestmentProjectsCard companyId={companyId} />
+              </CardContainer>
+            </GridCol>
+          </GridRow>
+        </CompanyLayoutNew>
+      )}
+    </CompanyResource>
+  )
+}
+
+export default CompanyOverview
diff --git a/...iew-table-cards/AccountManagementCard.jsx → ...view/TableCards/AccountManagementCard.jsx b/...iew-table-cards/AccountManagementCard.jsx → ...view/TableCards/AccountManagementCard.jsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import pluralize from 'pluralize'
 
-import { SummaryTable } from '../../../../../client/components'
-import { isItaTierDAccount } from '../../../../../client/modules/Companies/utils'
+import { SummaryTable } from '../../../../components'
+import { isItaTierDAccount } from '../../utils'
 import urls from '../../../../../lib/urls'
 import { buildCellContents } from './transformers'
 import {

diff --git a/...le-cards/ActiveInvestmentProjectsCard.jsx → ...bleCards/ActiveInvestmentProjectsCard.jsx b/...le-cards/ActiveInvestmentProjectsCard.jsx → ...bleCards/ActiveInvestmentProjectsCard.jsx
@@ -6,9 +6,9 @@ import { connect } from 'react-redux'
 import { kebabCase } from 'lodash'
 
 import { companies, investments } from '../../../../../lib/urls'
-import { Tag } from '../../../../../client/components'
+import { Tag } from '../../../../components'
 import { companyProjectsState2props } from './state'
-import { BLUE, GREY_2 } from '../../../../../client/utils/colours'
+import { BLUE, GREY_2 } from '../../../../utils/colours'
 import { buildCellContents } from './transformers'
 import { StyledSummaryTable, StyledTableRow } from './components'
 

diff --git a/...iew/overview-table-cards/ActivityCard.jsx → ...mpanyOverview/TableCards/ActivityCard.jsx b/...iew/overview-table-cards/ActivityCard.jsx → ...mpanyOverview/TableCards/ActivityCard.jsx
@@ -4,15 +4,15 @@ import PropTypes from 'prop-types'
 import camelCase from 'camelcase'
 import styled from 'styled-components'
 
-import { ActivityFeedApp, SummaryTable } from '../../../../../client/components'
+import { ActivityFeedApp, SummaryTable } from '../../../../components'
 import { companies } from '../../../../../lib/urls'
-import CompanyActivityFeed from '../../activity-feed/client/CompanyActivityFeed'
+import CompanyActivityFeed from '../../../../../apps/companies/apps/activity-feed/client/CompanyActivityFeed'
 import {
   StyledLastTableCell,
   StyledTableCell,
   StyledTableRow,
 } from './components'
-import { FILTER_KEYS } from '../../activity-feed/constants'
+import { FILTER_KEYS } from '../../../../../apps/companies/apps/activity-feed/constants'
 
 const StyledSummaryTable = styled(SummaryTable)`
   margin: 0;

diff --git a/...rview-table-cards/BusinessDetailsCard.jsx → ...erview/TableCards/BusinessDetailsCard.jsx b/...rview-table-cards/BusinessDetailsCard.jsx → ...erview/TableCards/BusinessDetailsCard.jsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import { UNITED_KINGDOM_ID } from '../../../../../common/constants'
-import { NewWindowLink, SummaryTable } from '../../../../../client/components'
-import { currencyGBP } from '../../../../../client/utils/number-utils'
+import { NewWindowLink, SummaryTable } from '../../../../components'
+import { currencyGBP } from '../../../../utils/number-utils'
 import urls from '../../../../../lib/urls'
 import { buildCellContents } from './transformers'
 import {

diff --git a/...overview-table-cards/ExportStatusCard.jsx → ...yOverview/TableCards/ExportStatusCard.jsx b/...overview-table-cards/ExportStatusCard.jsx → ...yOverview/TableCards/ExportStatusCard.jsx
@@ -5,16 +5,16 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { kebabCase } from 'lodash'
 
-import { SummaryTable, Tag } from '../../../../../client/components'
-import Task from '../../../../../client/components/Task'
+import { SummaryTable, Tag } from '../../../../components'
+import Task from '../../../../components/Task'
 import {
   TASK_GET_LATEST_EXPORT_WINS,
   OVERVIEW_COMPANY_EXPORT_WINS_LIST_ID,
   exportWinsState2props,
 } from './state'
-import { OVERVIEW__EXPORT_WINS_SUMMARY } from '../../../../../client/actions'
-import { format } from '../../../../../client/utils/date'
-import { transformExportCountries } from '../../exports/transformer'
+import { OVERVIEW__EXPORT_WINS_SUMMARY } from '../../../../actions'
+import { format } from '../../../../utils/date'
+import { transformExportCountries } from '../../../../../apps/companies/apps/exports/transformer'
 import { companies } from '../../../../../lib/urls'
 import { buildCellContents } from './transformers'
 import {

diff --git a/...view-table-cards/InvestmentStatusCard.jsx → ...rview/TableCards/InvestmentStatusCard.jsx b/...view-table-cards/InvestmentStatusCard.jsx → ...rview/TableCards/InvestmentStatusCard.jsx
@@ -3,23 +3,23 @@ import { Link } from 'govuk-react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
-import { SummaryTable } from '../../../../../client/components'
+import { SummaryTable } from '../../../../components'
 import {
   TASK_GET_PROJECT_WON_COUNT,
   OVERVIEW_COMPANY_PROJECTS_LIST_ID,
   companyProjectsState2props,
 } from './state'
-import { OVERVIEW__COMPANY_INVESTMENT_WON_COUNT } from '../../../../../client/actions'
+import { OVERVIEW__COMPANY_INVESTMENT_WON_COUNT } from '../../../../actions'
 import urls from '../../../../../lib/urls'
-import Task from '../../../../../client/components/Task'
+import Task from '../../../../components/Task'
 import {
   StyledLastTableCell,
   StyledSpan,
   StyledSummaryTable,
   StyledTableRow,
 } from './components'
 
-const { format } = require('../../../../../client/utils/date')
+const { format } = require('../../../../utils/date')
 
 const buildProjectStatusUrl = (companyId, param) =>
   urls.companies.investments.companyInvestmentProjects(companyId) + param

diff --git a/...rview/overview-table-cards/components.jsx → ...CompanyOverview/TableCards/components.jsx b/...rview/overview-table-cards/components.jsx → ...CompanyOverview/TableCards/components.jsx
@@ -5,8 +5,8 @@
 import styled from 'styled-components'
 import { Table } from 'govuk-react'
 
-import { SummaryTable } from '../../../../../client/components'
-import { GREY_1 } from '../../../../../client/utils/colours'
+import { SummaryTable } from '../../../../components'
+import { GREY_1 } from '../../../../utils/colours'
 
 export const StyledTableCell = styled(Table.Cell)`
   border: 0;

diff --git a/...erview-table-cards/exportStatusReducer.js → ...verview/TableCards/exportStatusReducer.js b/...erview-table-cards/exportStatusReducer.js → ...verview/TableCards/exportStatusReducer.js
@@ -1,4 +1,4 @@
-import { OVERVIEW__EXPORT_WINS_SUMMARY } from '../../../../../client/actions'
+import { OVERVIEW__EXPORT_WINS_SUMMARY } from '../../../../actions'
 
 const initialState = {
   results: [],

diff --git a/...y-overview/overview-table-cards/index.jsx → ...nies/CompanyOverview/TableCards/index.jsx b/...y-overview/overview-table-cards/index.jsx → ...nies/CompanyOverview/TableCards/index.jsx
diff --git a/...-overview/overview-table-cards/reducer.js → ...ies/CompanyOverview/TableCards/reducer.js b/...-overview/overview-table-cards/reducer.js → ...ies/CompanyOverview/TableCards/reducer.js
@@ -1,7 +1,7 @@
 import { camelCase } from 'lodash'
 
-import { OVERVIEW__COMPANY_INVESTMENT_WON_COUNT } from '../../../../../client/actions'
-import { STAGE_ACTIVE } from '../../../../../client/modules/Investments/Projects/constants'
+import { OVERVIEW__COMPANY_INVESTMENT_WON_COUNT } from '../../../../actions'
+import { STAGE_ACTIVE } from '../../../Investments/Projects/constants'
 
 const initialState = {
   results: [],

diff --git a/...ny-overview/overview-table-cards/state.js → ...anies/CompanyOverview/TableCards/state.js b/...ny-overview/overview-table-cards/state.js → ...anies/CompanyOverview/TableCards/state.js
@@ -1,5 +1,5 @@
-import { SORT_OPTIONS } from '../../../../../client/modules/Contacts/CollectionList/constants'
-import { parseQueryString } from '../../../../../client/utils'
+import { SORT_OPTIONS } from '../../../Contacts/CollectionList/constants'
+import { parseQueryString } from '../../../../utils'
 
 export const OVERVIEW_COMPANY_PROJECTS_LIST_ID = 'overviewCompanyProjectsList'
 export const TASK_GET_PROJECT_WON_COUNT = 'TASK_GET_PROJECT_WON_COUNT'

diff --git a/...ny-overview/overview-table-cards/tasks.js → ...anies/CompanyOverview/TableCards/tasks.js b/...ny-overview/overview-table-cards/tasks.js → ...anies/CompanyOverview/TableCards/tasks.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 
-import { apiProxyAxios } from '../../../../../client/components/Task/utils'
-import { NOT_IMPLEMENTED } from '../../exports/client/ExportWins/state'
+import { apiProxyAxios } from '../../../../components/Task/utils'
+import { NOT_IMPLEMENTED } from '../../../../../apps/companies/apps/exports/client/ExportWins/state'
 
 export const getProjectsWon = async ({ companyId }) => {
   return await apiProxyAxios

diff --git a/...view/overview-table-cards/transformers.js → ...ompanyOverview/TableCards/transformers.js b/...view/overview-table-cards/transformers.js → ...ompanyOverview/TableCards/transformers.js
diff --git a/src/client/reducers.js b/src/client/reducers.js
@@ -49,12 +49,12 @@ import {
 import {
   OVERVIEW_COMPANY_EXPORT_WINS_LIST_ID,
   OVERVIEW_COMPANY_PROJECTS_LIST_ID,
-} from '../apps/companies/apps/company-overview/overview-table-cards/state'
+} from './modules/Companies/CompanyOverview/TableCards/state.js'
 
 import investmentProjectsReducer from './modules/Investments/Projects/reducer'
 import investmentProjectReducer from './modules/Investments/Projects/investmentProjectReducer'
-import overviewInvestmentProjectReducer from '../apps/companies/apps/company-overview/overview-table-cards/reducer'
-import overviewExportWinsReducer from '../apps/companies/apps/company-overview/overview-table-cards/exportStatusReducer'
+import overviewInvestmentProjectReducer from './modules/Companies/CompanyOverview/TableCards/reducer.js'
+import overviewExportWinsReducer from './modules/Companies/CompanyOverview/TableCards/exportStatusReducer.js'
 
 import { ID as COMPANIES_ID } from './modules/Companies/CollectionList/state'
 import companiesReducer from './modules/Companies/CollectionList/reducer'