Migrate orders tab to React Router

uktrade · Jan 18, 2024 · 4911142 · 4911142
1 parent 2bf35aa
commit 4911142
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 74 deletions.
diff --git a/src/apps/companies/__test__/router.test.js b/src/apps/companies/__test__/router.test.js
@@ -10,7 +10,6 @@ describe('Company router', () => {
       '/:companyId',
       '/:companyId/details',
       '/:companyId/hierarchies/subsidiaries/:subsidiaryCompanyId/add',
-      '/:companyId/orders',
       '/:companyId/manage-company-list',
       '/:companyId/subsidiaries',
     ])

diff --git a/src/apps/companies/controllers/orders.js b/src/apps/companies/controllers/orders.js
diff --git a/src/apps/companies/router.js b/src/apps/companies/router.js
@@ -12,7 +12,6 @@ const {
 
 const { renderDetails } = require('./controllers/details')
 
-const { renderOrders } = require('./controllers/orders')
 const { archiveCompany, unarchiveCompany } = require('./controllers/archive')
 const { renderSubsidiaries } = require('./controllers/subsidiaries')
 
@@ -82,7 +81,6 @@ router.get(urls.companies.details.route, renderDetails)
 
 router.get(urls.companies.hierarchies.subsidiaries.add.route, addSubsidiary)
 
-router.get(urls.companies.orders.route, setReturnUrl, renderOrders)
 router.use(
   urls.companies.investments.companyInvestment.route,
   setReturnUrl,

diff --git a/src/apps/companies/views/orders.njk b/src/apps/companies/views/orders.njk
diff --git a/src/apps/routers.js b/src/apps/routers.js
@@ -115,6 +115,7 @@ const reactRoutes = [
   '/companies/:companyId/hierarchies/ghq/remove',
   '/companies/:companyId/activity',
   '/companies/:companyId/contacts',
+  '/companies/:companyId/orders',
 ]
 
 reactRoutes.forEach((path) => {

diff --git a/src/client/index.jsx b/src/client/index.jsx
@@ -28,7 +28,6 @@ import InteractionReferralDetails from './modules/Interactions/InteractionDetail
 import InvestmentProjectAdmin from '../apps/investments/views/admin/client/InvestmentProjectAdmin.jsx'
 import FlashMessages from './components/LocalHeader/FlashMessages.jsx'
 import PersonalisedDashboard from './components/PersonalisedDashboard'
-import CompanyOrdersCollection from '../client/modules/Omis/CollectionList/CompanyOrdersCollection'
 import InvestmentProjectForm from '../apps/investments/client/projects/create/InvestmentProjectForm'
 import ContactActivity from './modules/Contacts/ContactActivity/ContactActivity'
 import ContactLocalHeader from './components/ContactLocalHeader'
@@ -232,9 +231,6 @@ function App() {
             />
           )}
         </Mount>
-        <Mount selector="#company-orders-collection">
-          {(props) => <CompanyOrdersCollection {...props} />}
-        </Mount>
         <Mount selector="#contact-activity">
           {(props) => <ContactActivity {...props} />}
         </Mount>

diff --git a/src/client/modules/Omis/CollectionList/CompanyOrdersCollection.jsx b/src/client/modules/Omis/CollectionList/CompanyOrdersCollection.jsx
@@ -5,13 +5,15 @@ import { Link, Details } from 'govuk-react'
 import { H3 } from '@govuk-react/heading'
 import { HEADING_SIZES } from '@govuk-react/constants'
 import VisuallyHidden from '@govuk-react/visually-hidden'
+import { useParams } from 'react-router-dom'
 
 import { ORDERS__LOADED } from '../../../actions'
 
 import { FilteredCollectionList } from '../../../components'
 import { listSkeletonPlaceholder } from '../../../components/SkeletonPlaceholder'
 import { CompanyResource } from '../../../components/Resource'
-import CompanyLayout from '../../../components/Layout/CompanyLayout'
+import CompanyLayoutNew from '../../../components/Layout/CompanyLayoutNew'
+import DefaultLayoutBase from '../../../components/Layout/DefaultLayoutBase'
 
 import {
   companyOrdersState2props,
@@ -34,13 +36,14 @@ const StyledLinkHeader = styled(StyledHeader)`
 `
 
 const CompanyOrdersCollection = ({
-  companyId,
   payload,
   optionMetadata,
   selectedFilters,
   returnUrl,
   ...props
 }) => {
+  const { companyId } = useParams()
+
   const collectionListTask = {
     name: TASK_GET_ORDERS_LIST,
     id: COMPANY_ORDERS_LIST_ID,
@@ -64,44 +67,47 @@ const CompanyOrdersCollection = ({
   )
 
   return (
-    <CompanyResource id={companyId}>
-      {(company) => (
-        <CompanyLayout
-          company={company}
-          breadcrumbs={[{ text: 'Orders (OMIS)' }]}
-          returnUrl={returnUrl}
-        >
-          {company.archived && (
-            <Details
-              summary="Why can I not add an order?"
-              data-test="archived-details"
-            >
-              Orders cannot be added to an archived company.{' '}
-              <Link href={`/companies/${company.id}/unarchive`}>
-                Click here to unarchive
-              </Link>
-            </Details>
-          )}
-          <FilteredCollectionList
-            {...props}
-            collectionName="order"
-            sortOptions={optionMetadata.sortOptions}
-            taskProps={collectionListTask}
-            selectedFilters={selectedFilters}
-            addItemUrl={
-              company.archived ? null : urls.omis.create.form(company.id)
-            }
-            entityName="order"
-            entityNamePlural="orders"
-            titleRenderer={TitleRenderer}
-            defaultQueryParams={{
-              page: 1,
-              sortby: 'created_on:desc',
-            }}
-          />
-        </CompanyLayout>
-      )}
-    </CompanyResource>
+    <DefaultLayoutBase>
+      <CompanyResource id={companyId}>
+        {(company) => (
+          <CompanyLayoutNew
+            company={company}
+            breadcrumbs={[{ text: 'Orders (OMIS)' }]}
+            returnUrl={returnUrl}
+            pageTitle="Orders"
+          >
+            {company.archived && (
+              <Details
+                summary="Why can I not add an order?"
+                data-test="archived-details"
+              >
+                Orders cannot be added to an archived company.{' '}
+                <Link href={`/companies/${company.id}/unarchive`}>
+                  Click here to unarchive
+                </Link>
+              </Details>
+            )}
+            <FilteredCollectionList
+              {...props}
+              collectionName="order"
+              sortOptions={optionMetadata.sortOptions}
+              taskProps={collectionListTask}
+              selectedFilters={selectedFilters}
+              addItemUrl={
+                company.archived ? null : urls.omis.create.form(company.id)
+              }
+              entityName="order"
+              entityNamePlural="orders"
+              titleRenderer={TitleRenderer}
+              defaultQueryParams={{
+                page: 1,
+                sortby: 'created_on:desc',
+              }}
+            />
+          </CompanyLayoutNew>
+        )}
+      </CompanyResource>
+    </DefaultLayoutBase>
   )
 }
 

diff --git a/src/client/routes.js b/src/client/routes.js
@@ -87,6 +87,7 @@ import SetGlobalHQ from './modules/Companies/CompanyBusinessDetails/LinkGlobalHQ
 import RemoveGlobalHQ from './modules/Companies/CompanyBusinessDetails/LinkGlobalHQ/RemoveGlobalHQ'
 import CompanyActivityCollection from './components/ActivityFeed/CollectionList/index'
 import CompanyContactsCollection from './modules/Contacts/CollectionList/CompanyContactsCollection'
+import CompanyOrdersCollection from './modules/Omis/CollectionList/CompanyOrdersCollection'
 
 const routes = {
   companies: [
@@ -200,6 +201,11 @@ const routes = {
       module: 'datahub:companies',
       component: CompanyContactsCollection,
     },
+    {
+      path: '/companies/:companyId/orders',
+      module: 'datahub:companies',
+      component: CompanyOrdersCollection,
+    },
   ],
   contacts: [
     {