From d3b1615435205a0cc3b3a1a61dc6b9a5bce82c8e Mon Sep 17 00:00:00 2001
From: Christopher Sunkel <christopher.sunkel@digital.trade.gov.uk>
Date: Fri, 17 Jan 2025 11:06:37 +0000
Subject: [PATCH] Migrate ContactLayout pages to React Router (#7461)

* Migrate ContactLayout to use DefaultLayout

* Migrate ContactDetails to React Router

* Migrate ContactActivity to React Router

* Migrate ContactAuditHistory to React Router

* Remove legacy code

* Update tests
---
 src/apps/contacts/__test__/router.test.js     |   2 -
 src/apps/contacts/constants.js                |   4 +-
 src/apps/contacts/controllers/activity.js     |  20 --
 src/apps/contacts/controllers/audit.js        |  19 --
 src/apps/contacts/controllers/details.js      |  19 --
 src/apps/contacts/controllers/index.js        |   2 -
 src/apps/contacts/router.js                   |  15 +-
 src/apps/contacts/views/audit.njk             |  10 -
 src/apps/contacts/views/details.njk           |  10 -
 src/apps/contacts/views/interactions.njk      |  10 -
 src/apps/routers.js                           |   3 +
 src/client/DataHub/App.jsx                    |  17 --
 .../components/ContactLocalHeader/index.jsx   | 114 +++++-----
 .../components/Layout/ContactLayout.jsx       |  95 +++++----
 .../components/Layout/DefaultLayout.jsx       |  29 +--
 .../ContactActivity/ContactActivity.jsx       |  18 +-
 .../ContactAuditHistory.jsx                   |  46 ++--
 .../ContactDetails/ContactDetails.jsx         | 201 +++++++++---------
 src/client/routes.js                          |  27 +++
 test/a11y/cypress/config/urlTestExclusions.js |   4 +
 .../specs/Contacts/ContactLocalHeader.cy.jsx  |  14 +-
 .../cypress/specs/DIT/companies-spec.js       |   7 +-
 .../cypress/specs/contacts/activity-spec.js   |   4 +-
 23 files changed, 323 insertions(+), 367 deletions(-)
 delete mode 100644 src/apps/contacts/controllers/activity.js
 delete mode 100644 src/apps/contacts/controllers/audit.js
 delete mode 100644 src/apps/contacts/views/audit.njk
 delete mode 100644 src/apps/contacts/views/details.njk
 delete mode 100644 src/apps/contacts/views/interactions.njk

diff --git a/src/apps/contacts/__test__/router.test.js b/src/apps/contacts/__test__/router.test.js
index 5137413ebd3..34f3fb847a5 100644
--- a/src/apps/contacts/__test__/router.test.js
+++ b/src/apps/contacts/__test__/router.test.js
@@ -7,9 +7,7 @@ describe('Contacts router', () => {
       ['/create', '/:contactId/edit'],
       '/export',
       '/:contactId',
-      '/:contactId/details',
       '/:id/unarchive',
-      '/:contactId/audit',
     ])
   })
 })
diff --git a/src/apps/contacts/constants.js b/src/apps/contacts/constants.js
index 4d56fe8476e..82e2ebdf0a6 100644
--- a/src/apps/contacts/constants.js
+++ b/src/apps/contacts/constants.js
@@ -1,5 +1,3 @@
-const { concat } = require('lodash')
-
 const GLOBAL_NAV_ITEM = {
   path: '/contacts',
   headerKey: 'datahub-contacts',
@@ -24,7 +22,7 @@ const LOCAL_NAV = [
   },
 ]
 
-const APP_PERMISSIONS = concat(LOCAL_NAV, GLOBAL_NAV_ITEM)
+const APP_PERMISSIONS = [LOCAL_NAV, GLOBAL_NAV_ITEM]
 
 const QUERY_FIELDS = [
   'archived',
diff --git a/src/apps/contacts/controllers/activity.js b/src/apps/contacts/controllers/activity.js
deleted file mode 100644
index e8d4073dafe..00000000000
--- a/src/apps/contacts/controllers/activity.js
+++ /dev/null
@@ -1,20 +0,0 @@
-function renderContactActivityForEntity(req, res, next) {
-  try {
-    const { view, contactId } = res.locals?.interactions
-    const permissions = res.locals?.user.permissions
-    const breadcrumbTitle = 'Activity'
-
-    res.breadcrumb(breadcrumbTitle).render(view, {
-      props: {
-        contactId,
-        permissions,
-      },
-    })
-  } catch (error) {
-    next(error)
-  }
-}
-
-module.exports = {
-  renderContactActivityForEntity,
-}
diff --git a/src/apps/contacts/controllers/audit.js b/src/apps/contacts/controllers/audit.js
deleted file mode 100644
index 1cc6689d868..00000000000
--- a/src/apps/contacts/controllers/audit.js
+++ /dev/null
@@ -1,19 +0,0 @@
-async function getAudit(req, res, next) {
-  try {
-    const contactId = req.params.contactId
-    const permissions = res.locals?.user.permissions
-
-    return res.breadcrumb('Audit history').render('contacts/views/audit', {
-      props: {
-        contactId,
-        permissions,
-      },
-    })
-  } catch (error) {
-    next(error)
-  }
-}
-
-module.exports = {
-  getAudit,
-}
diff --git a/src/apps/contacts/controllers/details.js b/src/apps/contacts/controllers/details.js
index 4a14d41defd..9b4616e1b1f 100644
--- a/src/apps/contacts/controllers/details.js
+++ b/src/apps/contacts/controllers/details.js
@@ -27,25 +27,6 @@ async function getCommon(req, res, next) {
   }
 }
 
-function getDetails(req, res, next) {
-  try {
-    const contactId = req.params.contactId
-    const companyAddress = res.locals?.company.address
-    const permissions = res.locals?.user.permissions
-
-    res.render('contacts/views/details', {
-      props: {
-        contactId,
-        companyAddress,
-        permissions,
-      },
-    })
-  } catch (error) {
-    next(error)
-  }
-}
-
 module.exports = {
-  getDetails,
   getCommon,
 }
diff --git a/src/apps/contacts/controllers/index.js b/src/apps/contacts/controllers/index.js
index 55089ea3442..0a3b72f469b 100644
--- a/src/apps/contacts/controllers/index.js
+++ b/src/apps/contacts/controllers/index.js
@@ -1,11 +1,9 @@
 const details = require('./details')
 const edit = require('./edit')
 const archive = require('./archive')
-const audit = require('./audit')
 
 module.exports = {
   details,
   edit,
   archive,
-  audit,
 }
diff --git a/src/apps/contacts/router.js b/src/apps/contacts/router.js
index 4f90e3bd3ed..6d7a08b6257 100644
--- a/src/apps/contacts/router.js
+++ b/src/apps/contacts/router.js
@@ -12,13 +12,9 @@ const {
   redirectToFirstNavItem,
   handleRoutePermissions,
 } = require('../middleware')
-const { getCommon, getDetails } = require('./controllers/details')
+const { getCommon } = require('./controllers/details')
 const createAndEdit = require('./controllers/create-and-edit')
 const { unarchiveContact } = require('./controllers/archive')
-const { getAudit } = require('./controllers/audit')
-const { renderContactActivityForEntity } = require('./controllers/activity')
-
-const { setInteractionsDetails } = require('./middleware/interactions')
 
 router.get(['/create', '/:contactId/edit'], createAndEdit)
 
@@ -32,16 +28,7 @@ router.use(
 )
 
 router.get('/:contactId', redirectToFirstNavItem)
-router.get('/:contactId/details', getDetails)
 
 router.get('/:id/unarchive', unarchiveContact)
 
-router.get('/:contactId/audit', getAudit)
-
-router.use(
-  '/:contactId/interactions',
-  setInteractionsDetails,
-  renderContactActivityForEntity
-)
-
 module.exports = router
diff --git a/src/apps/contacts/views/audit.njk b/src/apps/contacts/views/audit.njk
deleted file mode 100644
index eaf62860e5c..00000000000
--- a/src/apps/contacts/views/audit.njk
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "_layouts/template-no-local-header.njk" %}
-
-{% block body %}
-  <div class="govuk-grid-column-full">
-    {% component 'react-slot', {
-        id: 'contact-audit-history',
-        props: props
-      } %}
-  </div>
-{% endblock %}
diff --git a/src/apps/contacts/views/details.njk b/src/apps/contacts/views/details.njk
deleted file mode 100644
index 06fc8822e8b..00000000000
--- a/src/apps/contacts/views/details.njk
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "_layouts/template-no-local-header.njk" %}
-
-{% block body %}
-  <div class="govuk-grid-column-full">
-    {% component 'react-slot', {
-        id: 'contact-details',
-        props: props
-      } %}
-  </div>
-{% endblock %}
diff --git a/src/apps/contacts/views/interactions.njk b/src/apps/contacts/views/interactions.njk
deleted file mode 100644
index e4ac914720b..00000000000
--- a/src/apps/contacts/views/interactions.njk
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "_layouts/template-no-local-header.njk" %}
-
-{% block body %}
-  <div class="govuk-grid-column-full">
-    {% component 'react-slot', {
-        id: 'contact-activity',
-        props: props
-      } %}
-  </div>
-{% endblock %}
diff --git a/src/apps/routers.js b/src/apps/routers.js
index 61fc6b98fcd..634f80652fc 100644
--- a/src/apps/routers.js
+++ b/src/apps/routers.js
@@ -139,6 +139,9 @@ const reactRoutes = [
   '/investments/eyb-leads/:eybLeadId/details',
   '/companies/:companyId/referrals/send',
   '/companies/:companyId/referrals/:referralId',
+  '/contacts/:contactId/details',
+  '/contacts/:contactId/interactions',
+  '/contacts/:contactId/audit',
 ]
 
 reactRoutes.forEach((path) => {
diff --git a/src/client/DataHub/App.jsx b/src/client/DataHub/App.jsx
index 38fa615ba36..5d691e07f3f 100644
--- a/src/client/DataHub/App.jsx
+++ b/src/client/DataHub/App.jsx
@@ -20,10 +20,6 @@ import ManageAdviser from '../../apps/companies/apps/advisers/client/ManageAdvis
 import FlashMessages from '../components/LocalHeader/FlashMessages.jsx'
 import PersonalisedDashboard from '../components/PersonalisedDashboard/index.jsx'
 import InvestmentProjectForm from '../../apps/investments/client/projects/create/InvestmentProjectForm.jsx'
-import ContactActivity from '../modules/Contacts/ContactActivity/ContactActivity.jsx'
-import ContactLocalHeader from '../components/ContactLocalHeader/index.jsx'
-import ContactDetails from '../modules/Contacts/ContactDetails/ContactDetails.jsx'
-import ContactAuditHistory from '../modules/Contacts/ContactAuditHistory/ContactAuditHistory.jsx'
 import InteractionDetails from '../modules/Interactions/InteractionDetails/index.jsx'
 import PropositionDetails from '../modules/Investments/Projects/Propositions/PropositionDetails.jsx'
 import CompanyHierarchy from '../modules/Companies/CompanyHierarchy/index.jsx'
@@ -173,22 +169,9 @@ export const App = () => {
             />
           )}
         </Mount>
-        <Mount selector="#ie-banner">{() => <IEBanner />}</Mount>
         <Mount selector="#contact-form">
           {(props) => <ContactForm {...props} id="contact-form" />}
         </Mount>
-        <Mount selector="#contact-activity">
-          {(props) => <ContactActivity {...props} />}
-        </Mount>
-        <Mount selector="#contact-local-header">
-          {(props) => <ContactLocalHeader {...props} />}
-        </Mount>
-        <Mount selector="#contact-details">
-          {(props) => <ContactDetails {...props} />}
-        </Mount>
-        <Mount selector="#contact-audit-history">
-          {(props) => <ContactAuditHistory {...props} />}
-        </Mount>
         <Mount selector="#interaction-details">
           {(props) => <InteractionDetails {...props} />}
         </Mount>
diff --git a/src/client/components/ContactLocalHeader/index.jsx b/src/client/components/ContactLocalHeader/index.jsx
index 08450a0bee9..1fbf2cbd006 100644
--- a/src/client/components/ContactLocalHeader/index.jsx
+++ b/src/client/components/ContactLocalHeader/index.jsx
@@ -10,6 +10,7 @@ import LocalHeaderHeading from '../../../client/components/LocalHeader/LocalHead
 import { Badge } from '..'
 import urls from '../../../lib/urls'
 import ArchivePanel from '../ArchivePanel'
+import { ContactResource } from '../Resource'
 
 const dispatchToProps = (dispatch) => ({
   writeFlashMessage: (message) =>
@@ -58,60 +59,69 @@ const buildBreadcrumbs = (currentTab, id, name) => {
   return initialBreadcrumbs.concat(dynamicBreadcrumbs)
 }
 
-const ContactLocalHeader = ({ contact, writeFlashMessage }) => {
-  return (
-    <>
-      <LocalHeader
-        breadcrumbs={buildBreadcrumbs(currentTab, contact.id, contact.name)}
-      >
-        <GridRow>
-          <GridCol>
-            <StyledLink
-              data-test="company-link"
-              href={urls.companies.overview.index(contact.company.id)}
+export const ContactLocalHeaderComponent = ({ contact, writeFlashMessage }) => (
+  <LocalHeader
+    breadcrumbs={buildBreadcrumbs(currentTab, contact.id, contact.name)}
+  >
+    <GridRow>
+      <GridCol>
+        <StyledLink
+          data-test="company-link"
+          href={urls.companies.overview.index(contact.company.id)}
+        >
+          {contact.company.name}
+        </StyledLink>
+        <StyledLocalHeaderHeading data-test="contact-name">
+          {contact.name}
+          {contact.primary && (
+            <Badge
+              data-test="primary-badge"
+              borderColour="purple"
+              textColour="purple"
+              fontSize={FONT_SIZE.SIZE_24}
             >
-              {contact.company.name}
-            </StyledLink>
-            <StyledLocalHeaderHeading data-test="contact-name">
-              {contact.name}
-              {contact.primary && (
-                <Badge
-                  data-test="primary-badge"
-                  borderColour="purple"
-                  textColour="purple"
-                  fontSize={FONT_SIZE.SIZE_24}
-                >
-                  Primary
-                </Badge>
-              )}
-            </StyledLocalHeaderHeading>
-          </GridCol>
-          {!contact.archived && (
-            <GridCol setWidth="one-quarter">
-              <Button
-                as={'a'}
-                data-test="add-interaction-button"
-                href={urls.companies.interactions.create(contact.company.id)}
-              >
-                Add interaction
-              </Button>
-            </GridCol>
+              Primary
+            </Badge>
           )}
-        </GridRow>
-        {contact.archived && (
-          <ArchivePanel
-            archivedBy={contact.archivedBy}
-            archivedOn={contact.archivedOn}
-            archiveReason={contact.archivedReason}
-            unarchiveUrl={urls.contacts.unarchive(contact.id)}
-            onClick={() => {
-              writeFlashMessage('Contact record updated')
-            }}
-            type="contact"
-          />
-        )}
-      </LocalHeader>
-    </>
+        </StyledLocalHeaderHeading>
+      </GridCol>
+      {!contact.archived && (
+        <GridCol setWidth="one-quarter">
+          <Button
+            as={'a'}
+            data-test="add-interaction-button"
+            href={urls.companies.interactions.create(contact.company.id)}
+          >
+            Add interaction
+          </Button>
+        </GridCol>
+      )}
+    </GridRow>
+    {contact.archived && (
+      <ArchivePanel
+        archivedBy={contact.archivedBy}
+        archivedOn={contact.archivedOn}
+        archiveReason={contact.archivedReason}
+        unarchiveUrl={urls.contacts.unarchive(contact.id)}
+        onClick={() => {
+          writeFlashMessage('Contact record updated')
+        }}
+        type="contact"
+      />
+    )}
+  </LocalHeader>
+)
+
+const ContactLocalHeader = ({ contactId, writeFlashMessage }) => {
+  return (
+    <ContactResource id={contactId}>
+      {(contact) => (
+        <ContactLocalHeaderComponent
+          contact={contact}
+          writeFlashMessage={writeFlashMessage}
+        />
+      )}
+    </ContactResource>
   )
 }
 
diff --git a/src/client/components/Layout/ContactLayout.jsx b/src/client/components/Layout/ContactLayout.jsx
index 56801eed8e1..6dbd412e808 100644
--- a/src/client/components/Layout/ContactLayout.jsx
+++ b/src/client/components/Layout/ContactLayout.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import GridCol from '@govuk-react/grid-col'
@@ -7,65 +8,87 @@ import { SPACING } from '@govuk-react/constants'
 
 import {
   ContactLocalHeader,
+  DefaultLayout,
   LocalNav,
   LocalNavLink,
-  Main,
 } from '../../components'
 import urls from '../../../lib/urls'
+import { ContactResource } from '../Resource'
+import { state2props } from './state'
 
 const StyledNavWrapper = styled('div')`
   margin-bottom: ${SPACING.SCALE_5};
 `
 
-const ContactLayout = ({ contact, flashMessages, permissions, children }) => {
-  const canViewActivityLink = permissions.includes(
+const ContactName = ({ id }) => (
+  <ContactResource.Inline id={id}>
+    {(contact) => contact.name}
+  </ContactResource.Inline>
+)
+
+const ContactLayout = ({
+  contactId,
+  flashMessages,
+  userPermissions,
+  children,
+}) => {
+  const canViewActivityLink = userPermissions.includes(
     'interaction.view_all_interaction'
   )
   return (
-    <>
-      <ContactLocalHeader contact={contact} writeFlashMessage={flashMessages} />
-      <Main>
-        <GridRow>
-          <GridCol setWidth="one-quarter">
-            <StyledNavWrapper>
-              <LocalNav>
-                <LocalNavLink
-                  dataTest="contact-details-link"
-                  href={urls.contacts.details(contact.id)}
-                >
-                  Details
-                </LocalNavLink>
-                {canViewActivityLink && (
-                  <LocalNavLink
-                    dataTest="contact-activity-link"
-                    href={urls.contacts.interactions.index(contact.id)}
-                  >
-                    Activity
-                  </LocalNavLink>
-                )}
+    <DefaultLayout
+      pageTitle={
+        <>
+          <ContactName id={contactId} /> - Contacts
+        </>
+      }
+      localHeader={
+        <ContactLocalHeader
+          contactId={contactId}
+          writeFlashMessage={flashMessages}
+        />
+      }
+      useReactRouter={false}
+    >
+      <GridRow>
+        <GridCol setWidth="one-quarter">
+          <StyledNavWrapper>
+            <LocalNav>
+              <LocalNavLink
+                dataTest="contact-details-link"
+                href={urls.contacts.details(contactId)}
+              >
+                Details
+              </LocalNavLink>
+              {canViewActivityLink && (
                 <LocalNavLink
-                  dataTest="contact-audit-link"
-                  href={urls.contacts.audit(contact.id)}
+                  dataTest="contact-activity-link"
+                  href={urls.contacts.interactions.index(contactId)}
                 >
-                  Audit history
+                  Activity
                 </LocalNavLink>
-              </LocalNav>
-            </StyledNavWrapper>
-          </GridCol>
-          <GridCol>{children}</GridCol>
-        </GridRow>
-      </Main>
-    </>
+              )}
+              <LocalNavLink
+                dataTest="contact-audit-link"
+                href={urls.contacts.audit(contactId)}
+              >
+                Audit history
+              </LocalNavLink>
+            </LocalNav>
+          </StyledNavWrapper>
+        </GridCol>
+        <GridCol>{children}</GridCol>
+      </GridRow>
+    </DefaultLayout>
   )
 }
 
 ContactLayout.propTypes = {
   contact: PropTypes.object.isRequired,
-  permissions: PropTypes.array.isRequired,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.element),
     PropTypes.element,
   ]).isRequired,
 }
 
-export default ContactLayout
+export default connect(state2props)(ContactLayout)
diff --git a/src/client/components/Layout/DefaultLayout.jsx b/src/client/components/Layout/DefaultLayout.jsx
index fb053d24acb..0811244b910 100644
--- a/src/client/components/Layout/DefaultLayout.jsx
+++ b/src/client/components/Layout/DefaultLayout.jsx
@@ -26,6 +26,7 @@ const DefaultLayout = ({
   children,
   useReactRouter = false,
   localHeaderChildren,
+  localHeader,
 }) => {
   const [showVerticalNav, setShowVerticalNav] = useState(false)
 
@@ -43,18 +44,22 @@ const DefaultLayout = ({
         showVerticalNav={showVerticalNav}
         onShowVerticalNav={setShowVerticalNav}
       />
-      <LocalHeader
-        heading={heading}
-        headingLink={headingLink}
-        subheading={subheading}
-        flashMessages={flashMessages}
-        breadcrumbs={
-          breadcrumbs || [{ link: '/', text: 'Home' }, { text: heading }]
-        }
-        useReactRouter={useReactRouter}
-      >
-        {localHeaderChildren}
-      </LocalHeader>
+      {localHeader ? (
+        localHeader
+      ) : (
+        <LocalHeader
+          heading={heading}
+          headingLink={headingLink}
+          subheading={subheading}
+          flashMessages={flashMessages}
+          breadcrumbs={
+            breadcrumbs || [{ link: '/', text: 'Home' }, { text: heading }]
+          }
+          useReactRouter={useReactRouter}
+        >
+          {localHeaderChildren}
+        </LocalHeader>
+      )}
       <Main>
         <GridRow>
           <GridCol>{children}</GridCol>
diff --git a/src/client/modules/Contacts/ContactActivity/ContactActivity.jsx b/src/client/modules/Contacts/ContactActivity/ContactActivity.jsx
index 8e00db1f29f..38dc06eb97d 100644
--- a/src/client/modules/Contacts/ContactActivity/ContactActivity.jsx
+++ b/src/client/modules/Contacts/ContactActivity/ContactActivity.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { GridRow, GridCol } from 'govuk-react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import qs from 'qs'
 
 import { TASK_GET_CONTACT_ACTIVITIES, ID, state2props } from './state'
@@ -18,16 +18,18 @@ import ContactLayout from '../../../components/Layout/ContactLayout'
 import { ContactResource } from '../../../components/Resource'
 import { ItemTemplate } from '../../Companies/CompanyActivity'
 
-const ContactActivity = ({ contactId, results, count, permissions }) => {
+const ContactActivity = ({ results, count }) => {
+  const { contactId } = useParams()
+
   const totalPages = Math.ceil(count / 10)
   const qsParams = qs.parse(location.search.slice(1))
   const page = parseInt(qsParams.page, 10) || 1
   const navigate = useNavigate()
 
   return (
-    <ContactResource id={contactId}>
-      {(contact) => (
-        <ContactLayout contact={contact} permissions={permissions}>
+    <ContactLayout contactId={contactId}>
+      <ContactResource id={contactId}>
+        {(contact) => (
           <GridRow>
             <GridCol setWidth="full">
               <SectionHeader type="contact-activity">
@@ -80,9 +82,9 @@ const ContactActivity = ({ contactId, results, count, permissions }) => {
               </Task.Status>
             </GridCol>
           </GridRow>
-        </ContactLayout>
-      )}
-    </ContactResource>
+        )}
+      </ContactResource>
+    </ContactLayout>
   )
 }
 
diff --git a/src/client/modules/Contacts/ContactAuditHistory/ContactAuditHistory.jsx b/src/client/modules/Contacts/ContactAuditHistory/ContactAuditHistory.jsx
index 8d5f54a2c06..e1663dd246a 100644
--- a/src/client/modules/Contacts/ContactAuditHistory/ContactAuditHistory.jsx
+++ b/src/client/modules/Contacts/ContactAuditHistory/ContactAuditHistory.jsx
@@ -1,39 +1,27 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { useParams } from 'react-router-dom'
 
-import {
-  ContactResource,
-  ContactAuditHistoryResource,
-} from '../../../components/Resource'
+import { ContactAuditHistoryResource } from '../../../components/Resource'
 import { getValue, mapFieldNameToLabel } from './transformers'
 import { AuditHistory, SectionHeader } from '../../../components'
 import ContactLayout from '../../../components/Layout/ContactLayout'
 import { EXCLUDED_FIELDS } from './constants'
 
-const ContactAuditHistory = ({ contactId, permissions }) => (
-  <ContactResource id={contactId}>
-    {(contact) => (
-      <>
-        <ContactLayout contact={contact} permissions={permissions}>
-          <>
-            <SectionHeader type="audit">Audit history</SectionHeader>
-            <AuditHistory
-              resource={ContactAuditHistoryResource}
-              id={contactId}
-              valueTransformer={getValue}
-              fieldMapper={mapFieldNameToLabel}
-              excludedFields={EXCLUDED_FIELDS}
-              auditType="the contact"
-            />
-          </>
-        </ContactLayout>
-      </>
-    )}
-  </ContactResource>
-)
-
-ContactAuditHistory.propTypes = {
-  contactId: PropTypes.string.isRequired,
+const ContactAuditHistory = () => {
+  const { contactId } = useParams()
+  return (
+    <ContactLayout contactId={contactId}>
+      <SectionHeader type="audit">Audit history</SectionHeader>
+      <AuditHistory
+        resource={ContactAuditHistoryResource}
+        id={contactId}
+        valueTransformer={getValue}
+        fieldMapper={mapFieldNameToLabel}
+        excludedFields={EXCLUDED_FIELDS}
+        auditType="the contact"
+      />
+    </ContactLayout>
+  )
 }
 
 export default ContactAuditHistory
diff --git a/src/client/modules/Contacts/ContactDetails/ContactDetails.jsx b/src/client/modules/Contacts/ContactDetails/ContactDetails.jsx
index 89ece6364d3..e92d484ce61 100644
--- a/src/client/modules/Contacts/ContactDetails/ContactDetails.jsx
+++ b/src/client/modules/Contacts/ContactDetails/ContactDetails.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Button from '@govuk-react/button'
+import { useParams } from 'react-router-dom'
 
 import { BLACK, GREY_3 } from '../../../../client/utils/colours'
-import { ContactResource } from '../../../components/Resource'
+import { CompanyResource, ContactResource } from '../../../components/Resource'
 import { SummaryTable, ErrorSummary } from '../../../components'
 import urls from '../../../../lib/urls'
 import {
@@ -20,8 +20,8 @@ import ContactLayout from '../../../components/Layout/ContactLayout'
 const getAddress = (contact, companyAddress) => {
   const address = contact.addressSameAsCompany
     ? {
-        line1: companyAddress.line_1,
-        line2: companyAddress.line_2,
+        line1: companyAddress.line1,
+        line2: companyAddress.line2,
         town: companyAddress.town,
         region: companyAddress.county || null,
         postcode: companyAddress.postcode,
@@ -45,101 +45,108 @@ const getAddress = (contact, companyAddress) => {
 
 const errorMsg = 'The email address has been flagged as invalid'
 
-const ContactDetails = ({ contactId, companyAddress, permissions }) => (
-  <ContactResource id={contactId}>
-    {(contact) => (
-      <>
-        <ContactLayout contact={contact} permissions={permissions}>
-          {contact.validEmail === false ? (
-            <ErrorSummary
-              heading="Please update the email address"
-              description={errorMsg}
-              errors={[]}
-            />
-          ) : null}
-          <SummaryTable
-            caption="Contact details"
-            data-test="contact-details-table"
-          >
-            <SummaryTable.Row heading="Job title" children={contact.jobTitle} />
-            <SummaryTable.Row
-              hideWhenEmpty={true}
-              heading="Phone number"
-              children={contact.fullTelephoneNumber}
-            />
-            <SummaryTable.Row
-              heading="Address"
-              children={getAddress(contact, companyAddress)}
-            />
-            <SummaryTable.Row
-              heading="Email"
-              children={contact.email}
-              flag={contact.validEmail === false}
-            />
-            {contact.notes ? (
-              <SummaryTable.Row
-                heading="More details"
-                children={contact.notes}
-              />
-            ) : null}
-            <SummaryTable.Row
-              heading="Email marketing"
-              children={
-                contact.acceptsDitEmailMarketing
-                  ? EMAIL_CONSENT_YES
-                  : EMAIL_CONSENT_NO
-              }
-            />
-          </SummaryTable>
-          {!contact.archived ? (
-            <Button
-              as={'a'}
-              href={urls.contacts.edit(contactId)}
-              buttonColour={GREY_3}
-              buttonTextColour={BLACK}
-              data-test="edit-contact-button"
-            >
-              Edit Contact
-            </Button>
-          ) : null}
+const ContactDetails = () => {
+  const { contactId } = useParams()
+  return (
+    <ContactLayout contactId={contactId}>
+      <ContactResource id={contactId}>
+        {(contact) => (
+          <CompanyResource id={contact.company.id}>
+            {(company) => (
+              <>
+                {contact.validEmail === false ? (
+                  <ErrorSummary
+                    heading="Please update the email address"
+                    description={errorMsg}
+                    errors={[]}
+                  />
+                ) : null}
+                <SummaryTable
+                  caption="Contact details"
+                  data-test="contact-details-table"
+                >
+                  <SummaryTable.Row
+                    heading="Job title"
+                    children={contact.jobTitle}
+                  />
+                  <SummaryTable.Row
+                    hideWhenEmpty={true}
+                    heading="Phone number"
+                    children={contact.fullTelephoneNumber}
+                  />
 
-          <ArchiveForm
-            id={ID}
-            submissionTaskName={TASK_ARCHIVE_CONTACT}
-            type="contact"
-            isArchived={contact.archived}
-            transformPayload={(values) => ({
-              values,
-              contactId,
-            })}
-            flashMessage={() => `Contact record updated`}
-            redirectUrl={urls.contacts.details(contactId)}
-            analyticsFormName="archiveContact"
-            archiveReasons={[
-              {
-                label: LEFT_COMPANY_OPTION,
-                value: LEFT_COMPANY_OPTION,
-              },
-              {
-                label: NO_CONTACT_OPTION,
-                value: NO_CONTACT_OPTION,
-              },
-              {
-                label: ROLE_CHANGE_OPTION,
-                value: ROLE_CHANGE_OPTION,
-              },
-            ]}
-            radioHint="This contact has:"
-          />
-        </ContactLayout>
-      </>
-    )}
-  </ContactResource>
-)
+                  <SummaryTable.Row
+                    heading="Address"
+                    children={getAddress(contact, company.address)}
+                  />
 
-ContactDetails.propTypes = {
-  contactId: PropTypes.string.isRequired,
-  companyAddress: PropTypes.object.isRequired,
+                  <SummaryTable.Row
+                    heading="Email"
+                    children={contact.email}
+                    flag={contact.validEmail === false}
+                  />
+                  {contact.notes ? (
+                    <SummaryTable.Row
+                      heading="More details"
+                      children={contact.notes}
+                    />
+                  ) : null}
+                  <SummaryTable.Row
+                    heading="Email marketing"
+                    children={
+                      contact.acceptsDitEmailMarketing
+                        ? EMAIL_CONSENT_YES
+                        : EMAIL_CONSENT_NO
+                    }
+                  />
+                </SummaryTable>
+                {!contact.archived ? (
+                  <Button
+                    as={'a'}
+                    href={urls.contacts.edit(contactId)}
+                    buttonColour={GREY_3}
+                    buttonTextColour={BLACK}
+                    data-test="edit-contact-button"
+                  >
+                    Edit Contact
+                  </Button>
+                ) : null}
+
+                <ArchiveForm
+                  id={ID}
+                  submissionTaskName={TASK_ARCHIVE_CONTACT}
+                  type="contact"
+                  isArchived={contact.archived}
+                  transformPayload={(values) => ({
+                    values,
+                    contactId,
+                  })}
+                  flashMessage={() => `Contact record updated`}
+                  redirectUrl={urls.contacts.details(contactId)}
+                  analyticsFormName="archiveContact"
+                  archiveReasons={[
+                    {
+                      label: LEFT_COMPANY_OPTION,
+                      value: LEFT_COMPANY_OPTION,
+                    },
+                    {
+                      label: NO_CONTACT_OPTION,
+                      value: NO_CONTACT_OPTION,
+                    },
+                    {
+                      label: ROLE_CHANGE_OPTION,
+                      value: ROLE_CHANGE_OPTION,
+                    },
+                  ]}
+                  radioHint="This contact has:"
+                />
+              </>
+            )}
+          </CompanyResource>
+        )}
+      </ContactResource>
+    </ContactLayout>
+  )
 }
 
 export default ContactDetails
diff --git a/src/client/routes.js b/src/client/routes.js
index 3312dea1612..3657412a4f4 100644
--- a/src/client/routes.js
+++ b/src/client/routes.js
@@ -109,6 +109,9 @@ import CustomerFeedback from './modules/ExportWins/CustomerFeedback'
 import EYBLeadDetails from './modules/Investments/EYBLeads/EYBLeadDetails'
 import SendReferralForm from './modules/Companies/Referrals/SendReferralForm/SendReferralForm'
 import ReferralDetails from './modules/Companies/Referrals/ReferralDetails'
+import ContactDetails from './modules/Contacts/ContactDetails/ContactDetails'
+import ContactActivity from './modules/Contacts/ContactActivity/ContactActivity'
+import ContactAuditHistory from './modules/Contacts/ContactAuditHistory/ContactAuditHistory'
 
 function Routes() {
   const routes = useRoutes([
@@ -385,6 +388,30 @@ function Routes() {
         </ProtectedRoute>
       ),
     },
+    {
+      path: '/contacts/:contactId/details',
+      element: (
+        <ProtectedRoute module={'datahub:contacts'}>
+          <ContactDetails />
+        </ProtectedRoute>
+      ),
+    },
+    {
+      path: '/contacts/:contactId/interactions',
+      element: (
+        <ProtectedRoute module={'datahub:contacts'}>
+          <ContactActivity />
+        </ProtectedRoute>
+      ),
+    },
+    {
+      path: '/contacts/:contactId/audit',
+      element: (
+        <ProtectedRoute module={'datahub:contacts'}>
+          <ContactAuditHistory />
+        </ProtectedRoute>
+      ),
+    },
     {
       path: '/community',
       element: (
diff --git a/test/a11y/cypress/config/urlTestExclusions.js b/test/a11y/cypress/config/urlTestExclusions.js
index 0e6c8b928fd..86febd4369c 100644
--- a/test/a11y/cypress/config/urlTestExclusions.js
+++ b/test/a11y/cypress/config/urlTestExclusions.js
@@ -78,6 +78,10 @@ export const urlTestExclusions = [
   { url: '/companies/:companyId/hierarchies/ghq/:globalHqId/add' },
   { url: '/companies/:companyId/hierarchies/ghq/remove' },
   { url: '/companies/:companyId' },
+  { url: '/contacts/:contactId/interactions/:interactionId' },
+  { url: '/contacts/:contactId/interactions/create' },
+  { url: '/contacts/:contactId/interactions/create/:theme/:kind' },
+  { url: '/contacts/:contactId/interactions/:interactionId/edit' },
   // API calls with redirect
   { url: '/company-lists/' }, // Redirects to homepage (which is tested)
   { url: '/tasks/:taskId/status-complete' },
diff --git a/test/component/cypress/specs/Contacts/ContactLocalHeader.cy.jsx b/test/component/cypress/specs/Contacts/ContactLocalHeader.cy.jsx
index d623c8be9eb..acdc566653c 100644
--- a/test/component/cypress/specs/Contacts/ContactLocalHeader.cy.jsx
+++ b/test/component/cypress/specs/Contacts/ContactLocalHeader.cy.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import ContactLocalHeader from '../../../../../src/client/components/ContactLocalHeader'
+import { ContactLocalHeaderComponent } from '../../../../../src/client/components/ContactLocalHeader'
 import urls from '../../../../../src/lib/urls'
 
 const notPrimaryContact = require('../../../../sandbox/fixtures/v3/contact/contact-incomplete-details-uk.json')
@@ -35,7 +35,9 @@ const addInteractionUrl = urls.companies.interactions.create(
 describe('ContactLocalHeader', () => {
   context('When a primary contact is passed in', () => {
     beforeEach(() => {
-      cy.mountWithProvider(<ContactLocalHeader contact={primaryContact} />)
+      cy.mountWithProvider(
+        <ContactLocalHeaderComponent contact={primaryContact} />
+      )
     })
 
     it('should render the company link', () => {
@@ -63,7 +65,9 @@ describe('ContactLocalHeader', () => {
 
   context('When a contact that is not primary is passed in', () => {
     beforeEach(() => {
-      cy.mountWithProvider(<ContactLocalHeader contact={notPrimaryContact} />)
+      cy.mountWithProvider(
+        <ContactLocalHeaderComponent contact={notPrimaryContact} />
+      )
     })
 
     it('should render the company link', () => {
@@ -91,7 +95,9 @@ describe('ContactLocalHeader', () => {
 
   context('When an archived contact is passed in', () => {
     beforeEach(() => {
-      cy.mountWithProvider(<ContactLocalHeader contact={archivedContact} />)
+      cy.mountWithProvider(
+        <ContactLocalHeaderComponent contact={archivedContact} />
+      )
     })
 
     it('should render the company link', () => {
diff --git a/test/end-to-end/cypress/specs/DIT/companies-spec.js b/test/end-to-end/cypress/specs/DIT/companies-spec.js
index bc140513164..d1fd2dd490e 100644
--- a/test/end-to-end/cypress/specs/DIT/companies-spec.js
+++ b/test/end-to-end/cypress/specs/DIT/companies-spec.js
@@ -5,6 +5,9 @@ const userActions = require('../../support/user-actions')
 const { companies, contacts } = require('../../../../../src/lib/urls')
 
 const { assertKeyValueTable } = require('../../support/assertions')
+const {
+  assertFlashMessage,
+} = require('../../../../functional/cypress/support/assertions')
 
 describe('Advisors', () => {
   const company = fixtures.company.create.corp()
@@ -47,7 +50,9 @@ describe('Contacts', () => {
     cy.visit(contacts.create(company.pk))
     userActions.contacts.create(data)
 
-    cy.contains('You have successfully added a new contact Company Contact')
+    assertFlashMessage(
+      'You have successfully added a new contact Company Contact'
+    )
 
     assertKeyValueTable('bodyMainContent', {
       'Job title': 'Coffee machine operator',
diff --git a/test/functional/cypress/specs/contacts/activity-spec.js b/test/functional/cypress/specs/contacts/activity-spec.js
index 5a34a777863..c8a55cc86ca 100644
--- a/test/functional/cypress/specs/contacts/activity-spec.js
+++ b/test/functional/cypress/specs/contacts/activity-spec.js
@@ -55,7 +55,7 @@ describe('Contact activity', () => {
     })
 
     it('should display 0 activities', () => {
-      cy.get('#contact-activity').contains('0 activities')
+      cy.get('[data-test="collection-header"]').contains('0 activities')
     })
   })
 
@@ -71,7 +71,7 @@ describe('Contact activity', () => {
     })
 
     it('should display the total number of activites', () => {
-      cy.get('#contact-activity').contains('25 activities')
+      cy.get('[data-test="collection-header"]').contains('25 activities')
       cy.get('[data-test=pagination-summary]').contains('Page 1 of 3')
       cy.get('[data-test=pagination]').should(
         'have.attr',