From cdc4d442b0b1152fdf624de03749496a6f5c99e0 Mon Sep 17 00:00:00 2001
From: Richard Pentecost <richardpentecost@DBT000444.local>
Date: Tue, 23 Jan 2024 11:36:07 +0000
Subject: [PATCH 1/2] change project details to render the layout before
 loading the resource, create new layout and layout header for investments

---
 .../InvestmentLocalHeader/index.jsx           | 161 +++++
 .../InvestmentProjectLocalHeader/index.jsx    |   6 +-
 .../components/Layout/InvestmentLayout.jsx    |  70 ++
 .../components/Layout/ProjectLayoutNew.jsx    | 176 +++++
 src/client/components/Resource/Resource.jsx   |   4 +-
 src/client/components/index.jsx               |   2 +
 .../Projects/Details/ProjectDetails.jsx       | 647 +++++++++---------
 7 files changed, 744 insertions(+), 322 deletions(-)
 create mode 100644 src/client/components/InvestmentLocalHeader/index.jsx
 create mode 100644 src/client/components/Layout/InvestmentLayout.jsx
 create mode 100644 src/client/components/Layout/ProjectLayoutNew.jsx

diff --git a/src/client/components/InvestmentLocalHeader/index.jsx b/src/client/components/InvestmentLocalHeader/index.jsx
new file mode 100644
index 00000000000..71ab7e509b6
--- /dev/null
+++ b/src/client/components/InvestmentLocalHeader/index.jsx
@@ -0,0 +1,161 @@
+import React, { Children, Fragment, cloneElement } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { SPACING } from '@govuk-react/constants'
+import Main from '@govuk-react/main'
+import Breadcrumbs from '@govuk-react/breadcrumbs'
+import { Link } from 'react-router-dom'
+
+import { GREY_4 } from '../../../client/utils/colours'
+import LocalHeaderHeading from '../LocalHeader/LocalHeaderHeading'
+import FlashMessages from '../LocalHeader/FlashMessages'
+import { InvestmentResource } from '../Resource'
+import urls from '../../../lib/urls'
+
+// Using <div> as there is already a <header> on the page
+// role="region" gives the element significance as a landmark
+const StyledHeader = styled('div')`
+  padding-bottom: ${SPACING.SCALE_5};
+  background-color: ${GREY_4};
+  padding-top: ${SPACING.SCALE_3};
+`
+
+const StyledMain = styled(Main)`
+  padding-top: 0;
+`
+
+const BreadcrumbsWrapper = styled(Breadcrumbs)`
+  margin-bottom: ${SPACING.SCALE_5};
+  margin-top: 0;
+`
+
+const StyledLink = styled('a')({
+  fontSize: 20,
+  display: 'inline-block',
+  fontFamily: 'Arial, sans-serif',
+  marginTop: 8,
+  marginBottom: 8,
+})
+
+/**
+ * The generic local header component.
+ */
+const InvestmentLocalHeader = ({
+  breadcrumbs,
+  flashMessages,
+  projectId,
+  children,
+  useReactRouter = false,
+}) => {
+  const renderChildren = (project) => {
+    return Children.map(children, (child) => {
+      return cloneElement(child, {
+        investment: project,
+      })
+    })
+  }
+
+  return (
+    <StyledHeader
+      aria-label="local header"
+      data-auto-id="localHeader"
+      data-test="localHeader"
+      role="region"
+    >
+      <StyledMain>
+        <BreadcrumbsWrapper data-test="breadcrumbs">
+          {breadcrumbs?.map((breadcrumb) =>
+            breadcrumb.link ? (
+              useReactRouter && breadcrumb.text !== 'Home' ? (
+                <Breadcrumbs.Link
+                  as={Link}
+                  key={breadcrumb.link}
+                  to={breadcrumb.link}
+                >
+                  {breadcrumb.text}
+                </Breadcrumbs.Link>
+              ) : (
+                <Breadcrumbs.Link key={breadcrumb.link} href={breadcrumb.link}>
+                  {breadcrumb.text}
+                </Breadcrumbs.Link>
+              )
+            ) : (
+              <Fragment key={breadcrumb.text}>{breadcrumb.text}</Fragment>
+            )
+          )}
+        </BreadcrumbsWrapper>
+        <FlashMessages flashMessages={flashMessages} />
+        <InvestmentResource id={projectId}>
+          {(project) => (
+            <>
+              <StyledLink
+                data-test="heading-link"
+                href={urls.companies.detail(project.investorCompany.id)}
+              >
+                {project.investorCompany.name}
+              </StyledLink>
+              <LocalHeaderHeading data-test="heading">
+                {project.name}
+              </LocalHeaderHeading>
+              {renderChildren(project)}
+            </>
+          )}
+        </InvestmentResource>
+      </StyledMain>
+    </StyledHeader>
+  )
+}
+
+InvestmentLocalHeader.propTypes = {
+  /**
+   * Contains the breadcrumbs
+   */
+  breadcrumbs: PropTypes.arrayOf(
+    PropTypes.shape({
+      link: PropTypes.string,
+      text: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+        .isRequired,
+    })
+  ),
+  /**
+   * Contains the flash messages
+   */
+  flashMessages: PropTypes.shape({
+    type: PropTypes.oneOfType([
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          body: PropTypes.string.isRequired,
+          heading: PropTypes.string.isRequired,
+          id: PropTypes.string,
+        })
+      ),
+      PropTypes.arrayOf(PropTypes.string).isRequired,
+    ]),
+  }),
+  /**
+   * Contains the heading text to be displayed
+   */
+  heading: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * Contains the subheading text to be displayed
+   */
+  subheading: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Contains a link that appears above the heading
+   */
+  headingLink: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+  }),
+  /**
+   * Contains an item that renders above the heading (in the same position as the headingLink)
+   */
+  superheading: PropTypes.node,
+  /**
+   * Contains an item that renders below the heading
+   */
+  children: PropTypes.node,
+}
+
+export default InvestmentLocalHeader
diff --git a/src/client/components/InvestmentProjectLocalHeader/index.jsx b/src/client/components/InvestmentProjectLocalHeader/index.jsx
index c8dc4514d79..b527f0f73a9 100644
--- a/src/client/components/InvestmentProjectLocalHeader/index.jsx
+++ b/src/client/components/InvestmentProjectLocalHeader/index.jsx
@@ -79,11 +79,11 @@ const InvestmentProjectLocalHeader = ({ investment }) => (
       <MetaListItem text="Created on">
         {formatMediumDateTime(investment.createdOn)}
       </MetaListItem>
-      {investment.createdBy?.ditTeam?.name && (
+      {investment.createdBy?.ditTeam?.name ? (
         <MetaListItem text="Created by">
           {investment.createdBy.ditTeam.name}
         </MetaListItem>
-      )}
+      ) : null}
     </MetaList>
     <ThemeProvider theme={timelineTheme}>
       <Timeline
@@ -108,7 +108,7 @@ InvestmentProjectLocalHeader.propTypes = {
   /**
    * An investment project
    */
-  investment: PropTypes.object.isRequired,
+  investment: PropTypes.object,
 }
 
 export default InvestmentProjectLocalHeader
diff --git a/src/client/components/Layout/InvestmentLayout.jsx b/src/client/components/Layout/InvestmentLayout.jsx
new file mode 100644
index 00000000000..9f451cfd165
--- /dev/null
+++ b/src/client/components/Layout/InvestmentLayout.jsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react'
+import { createGlobalStyle } from 'styled-components'
+import PropTypes from 'prop-types'
+import GridCol from '@govuk-react/grid-col'
+import GridRow from '@govuk-react/grid-row'
+
+import Footer from '../Footer'
+import Main from '../Main'
+import DataHubHeader from '../DataHubHeader'
+import { InvestmentLocalHeader } from '../../components'
+
+const GlobalStyles = createGlobalStyle`
+  *, *:before, *:after {
+    box-sizing: initial;
+  }
+`
+
+const InvestmentLayout = ({
+  projectId,
+  heading,
+  pageTitle,
+  flashMessages,
+  breadcrumbs,
+  children,
+  useReactRouter = false,
+  localHeaderChildren,
+}) => {
+  const [showVerticalNav, setShowVerticalNav] = useState(false)
+  useEffect(() => {
+    document.title = `${pageTitle} - DBT Data Hub`
+  }, [pageTitle])
+  return (
+    <>
+      <GlobalStyles />
+      <DataHubHeader
+        showVerticalNav={showVerticalNav}
+        onShowVerticalNav={setShowVerticalNav}
+      />
+      <InvestmentLocalHeader
+        projectId={projectId}
+        flashMessages={flashMessages}
+        breadcrumbs={
+          breadcrumbs || [{ link: '/', text: 'Home' }, { text: heading }]
+        }
+        useReactRouter={useReactRouter}
+      >
+        {localHeaderChildren}
+      </InvestmentLocalHeader>
+      <Main>
+        <GridRow>
+          <GridCol>{children}</GridCol>
+        </GridRow>
+      </Main>
+      <Footer />
+    </>
+  )
+}
+
+InvestmentLayout.propTypes = {
+  heading: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  headingLink: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+  }),
+  subheading: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  pageTitle: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+}
+
+export default InvestmentLayout
diff --git a/src/client/components/Layout/ProjectLayoutNew.jsx b/src/client/components/Layout/ProjectLayoutNew.jsx
new file mode 100644
index 00000000000..c6c0b6df9c3
--- /dev/null
+++ b/src/client/components/Layout/ProjectLayoutNew.jsx
@@ -0,0 +1,176 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import GridCol from '@govuk-react/grid-col'
+import GridRow from '@govuk-react/grid-row'
+import { SPACING } from '@govuk-react/constants'
+import { connect } from 'react-redux'
+
+import {
+  InvestmentLayout,
+  InvestmentProjectLocalHeader,
+  LocalNav,
+  LocalNavLink,
+} from '../../components'
+import urls from '../../../lib/urls'
+import { state2props } from './state'
+import { buildProjectBreadcrumbs } from '../../modules/Investments/utils'
+
+const StyledNavWrapper = styled('div')`
+  margin-bottom: ${SPACING.SCALE_5};
+`
+
+const userCanViewInteractions = (permissions) =>
+  permissions.includes(
+    'interaction.view_associated_investmentproject_interaction'
+  ) || permissions.includes('interaction.view_all_interaction')
+
+const userCanViewPropositions = (permissions) =>
+  permissions.includes('proposition.view_all_proposition') ||
+  permissions.includes('proposition.view_associated_proposition')
+
+const userCanViewAdmin = (permissions) =>
+  permissions.includes('investment.change_to_any_stage_investmentproject')
+
+const localProjectUrl = (url, projectId) => projectId && url(projectId)
+
+export const ProjectLayoutNew = ({
+  projectId,
+  projectName,
+  pageTitle,
+  children,
+  userPermissions,
+  flashMessages,
+}) => {
+  return (
+    <InvestmentLayout
+      projectId={projectId}
+      heading={projectName}
+      pageTitle={`${pageTitle} - ${projectName} - Projects - Investments`}
+      breadcrumbs={buildProjectBreadcrumbs({ text: projectName })}
+      flashMessages={flashMessages}
+      useReactRouter={false}
+      localHeaderChildren={<InvestmentProjectLocalHeader />}
+    >
+      <GridRow>
+        <GridCol setWidth="one-quarter">
+          <StyledNavWrapper>
+            <LocalNav>
+              <LocalNavLink
+                dataTest="project-details-link"
+                href={localProjectUrl(
+                  urls.investments.projects.details,
+                  projectId
+                )}
+              >
+                Project details
+              </LocalNavLink>
+              <LocalNavLink
+                dataTest="project-team-link"
+                href={localProjectUrl(
+                  urls.investments.projects.team,
+                  projectId
+                )}
+              >
+                Project team
+              </LocalNavLink>
+              <LocalNavLink
+                dataTest="project-tasks-link"
+                href={localProjectUrl(
+                  urls.investments.projects.tasks.index,
+                  projectId
+                )}
+              >
+                Tasks
+              </LocalNavLink>
+              {userCanViewInteractions(userPermissions) ? (
+                <LocalNavLink
+                  dataTest="project-interactions-link"
+                  href={localProjectUrl(
+                    urls.investments.projects.interactions.index,
+                    projectId
+                  )}
+                  aria-label="Project interactions"
+                >
+                  Interactions
+                </LocalNavLink>
+              ) : null}
+              {userCanViewPropositions(userPermissions) ? (
+                <LocalNavLink
+                  dataTest="project-propositions-link"
+                  href={localProjectUrl(
+                    urls.investments.projects.propositions,
+                    projectId
+                  )}
+                >
+                  Propositions
+                </LocalNavLink>
+              ) : null}
+              <LocalNavLink
+                dataTest="project-evaluation-link"
+                href={localProjectUrl(
+                  urls.investments.projects.evaluation,
+                  projectId
+                )}
+              >
+                Evaluations
+              </LocalNavLink>
+              <LocalNavLink
+                dataTest="project-history-link"
+                href={localProjectUrl(
+                  urls.investments.editHistory.index,
+                  projectId
+                )}
+              >
+                Edit history
+              </LocalNavLink>
+              <LocalNavLink
+                dataTest="project-evidence-link"
+                href={localProjectUrl(
+                  urls.investments.projects.evidence.index,
+                  projectId
+                )}
+              >
+                Evidence
+              </LocalNavLink>
+              {userCanViewAdmin(userPermissions) ? (
+                <LocalNavLink
+                  dataTest="project-admin-link"
+                  href={localProjectUrl(
+                    urls.investments.projects.admin,
+                    projectId
+                  )}
+                >
+                  Admin
+                </LocalNavLink>
+              ) : null}
+            </LocalNav>
+          </StyledNavWrapper>
+        </GridCol>
+        <GridCol>{children}</GridCol>
+      </GridRow>
+    </InvestmentLayout>
+  )
+}
+
+ProjectLayoutNew.propTypes = {
+  projectId: PropTypes.string.isRequired,
+  projectName: PropTypes.node.isRequired,
+  pageTitle: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  userPermissions: PropTypes.array.isRequired,
+  flashMessages: PropTypes.shape({
+    type: PropTypes.oneOfType([
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          body: PropTypes.string.isRequired,
+          heading: PropTypes.string.isRequired,
+          id: PropTypes.string,
+        })
+      ),
+      PropTypes.arrayOf(PropTypes.string).isRequired,
+    ]),
+  }),
+}
+
+export default connect(state2props)(ProjectLayoutNew)
diff --git a/src/client/components/Resource/Resource.jsx b/src/client/components/Resource/Resource.jsx
index 4c4deabb23f..7d687ccaaa0 100644
--- a/src/client/components/Resource/Resource.jsx
+++ b/src/client/components/Resource/Resource.jsx
@@ -152,7 +152,9 @@ export const createEntityResource = (name, endpoint) => {
     <Resource transformer={transformer} {...props} name={name} />
   )
 
-  Component.Inline = (props) => <Resource.Inline {...props} name={name} />
+  Component.Inline = (props) => (
+    <Resource.Inline transformer={transformer} {...props} name={name} />
+  )
 
   Component.propTypes = _.omit(Component.propTypes, 'name')
   Component.tasks = {
diff --git a/src/client/components/index.jsx b/src/client/components/index.jsx
index 324c32316bb..4ec76a59fa9 100644
--- a/src/client/components/index.jsx
+++ b/src/client/components/index.jsx
@@ -15,6 +15,7 @@ export { default as ContactInformation } from './ContactInformation'
 export { default as DeleteCompanyListSection } from './CompanyLists/DeleteCompanyListSection'
 export { default as DateField } from './DateField'
 export { default as EntityList } from './EntityList'
+export { default as InvestmentLocalHeader } from './InvestmentLocalHeader'
 export { default as Main } from './Main'
 export { default as Metadata } from './Metadata'
 export { default as NewWindowLink } from './NewWindowLink'
@@ -82,6 +83,7 @@ export { default as RoutedTeamsTypeahead } from './RoutedTeamsTypeahead'
 export { LocalNav, LocalNavLink } from './LocalNav'
 export { default as DefaultLayout } from './Layout/DefaultLayout'
 export { default as FormLayout } from './Layout/FormLayout'
+export { default as InvestmentLayout } from './Layout/InvestmentLayout'
 export { default as ProtectedRoute } from './ProtectedRoute'
 export { default as ProtectedLink } from './ProtectedLink'
 export { default as LocalHeader } from './LocalHeader/LocalHeader'
diff --git a/src/client/modules/Investments/Projects/Details/ProjectDetails.jsx b/src/client/modules/Investments/Projects/Details/ProjectDetails.jsx
index 1980109aa2d..b8ac0df02a3 100644
--- a/src/client/modules/Investments/Projects/Details/ProjectDetails.jsx
+++ b/src/client/modules/Investments/Projects/Details/ProjectDetails.jsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { Button, InsetText, Link } from 'govuk-react'
 import { useParams } from 'react-router-dom'
 
-import ProjectLayout from '../../../../components/Layout/ProjectLayout'
+import ProjectLayoutNew from '../../../../components/Layout/ProjectLayoutNew'
 import ProjectIncompleteFields from '../ProjectIncompleteFields'
 import { SummaryTable } from '../../../../components'
 import {
@@ -61,362 +61,373 @@ const checkIfValueStarted = (project) => {
   return !valueFields.every((field) => field == null)
 }
 
+const InvestmentName = (props) => (
+  <InvestmentResource.Inline {...props}>
+    {(project) => project.name}
+  </InvestmentResource.Inline>
+)
+
 const ProjectDetails = ({ currentAdviserId }) => {
   const { projectId } = useParams()
   return (
-    <InvestmentResource id={projectId}>
-      {(project) => (
-        <ProjectLayout
-          project={project}
-          breadcrumbs={[{ text: project.name }]}
-          pageTitle={project.name}
-        >
-          <InvestmentProjectStageResource>
-            {(projectStages) => (
-              <ProjectIncompleteFields
-                project={project}
-                currentAdviserId={currentAdviserId}
-                projectStages={projectStages}
-              />
-            )}
-          </InvestmentProjectStageResource>
-          <SummaryTable
-            data-test="project-details-table"
-            caption="Investment project summary"
-          >
-            <SummaryTable.TextRow
-              heading="Client"
-              value={
-                <Link
-                  href={urls.companies.overview.index(
-                    project.investorCompany?.id
-                  )}
-                  data-test="company-link"
-                >
-                  {project.investorCompany?.name}
-                </Link>
-              }
-            />
-            {project.investmentType && (
-              <SummaryTable.TextRow
-                heading="Investment type"
-                value={
-                  project.investmentType.name === 'FDI'
-                    ? transformFdiType(
-                        project.investmentType.name,
-                        project.fdiType?.name
-                      )
-                    : project.investmentType.name
-                }
-              />
-            )}
-            {project.sector && (
-              <SummaryTable.TextRow
-                heading="Primary sector"
-                value={project.sector?.name}
-              />
-            )}
-            {project.businessActivities &&
-              project.businessActivities.length > 0 && (
-                <SummaryTable.TextRow
-                  heading="Business activity"
-                  value={transformBusinessActivity(
-                    project.businessActivities,
-                    project.otherBusinessActivity
-                  )}
+    <ProjectLayoutNew
+      projectId={projectId}
+      projectName={<InvestmentName id={projectId} />}
+      pageTitle="Page title"
+    >
+      <InvestmentResource id={projectId}>
+        {(project) => (
+          <>
+            <InvestmentProjectStageResource>
+              {(projectStages) => (
+                <ProjectIncompleteFields
+                  project={project}
+                  currentAdviserId={currentAdviserId}
+                  projectStages={projectStages}
                 />
               )}
-            {project.clientContacts && project.clientContacts.length > 0 && (
+            </InvestmentProjectStageResource>
+            <SummaryTable
+              data-test="project-details-table"
+              caption="Investment project summary"
+            >
               <SummaryTable.TextRow
-                heading="Client contacts"
-                value={project.clientContacts.map((contact, i) => (
+                heading="Client"
+                value={
                   <Link
-                    key={`${contact}-${i}`}
-                    href={urls.contacts.contact(contact.id)}
-                    data-test={`contact-` + i}
+                    href={urls.companies.overview.index(
+                      project.investorCompany?.id
+                    )}
+                    data-test="company-link"
                   >
-                    {contact.name}
+                    {project.investorCompany?.name}
                   </Link>
-                ))}
-              />
-            )}
-            {project.description ? (
-              <SummaryTable.TextRow
-                heading="Project description"
-                value={project.description}
-              />
-            ) : null}
-            {project.anonymousDescription ? (
-              <SummaryTable.TextRow
-                heading="Anonymised description"
-                value={project.anonymousDescription}
-              />
-            ) : null}
-            {project.estimatedLandDate ? (
-              <SummaryTable.TextRow
-                heading="Estimated land date"
-                value={format(project.estimatedLandDate, 'MMMM yyyy')}
-              />
-            ) : null}
-            {project.likelihoodToLand ? (
-              <SummaryTable.TextRow
-                heading="Likelihood of landing"
-                value={project.likelihoodToLand?.name}
-              />
-            ) : null}
-            {project.actualLandDate ? (
-              <SummaryTable.TextRow
-                heading="Actual land date"
-                value={format(project.actualLandDate, DATE_LONG_FORMAT_1)}
-              />
-            ) : null}
-            {project.investorType ? (
-              <SummaryTable.TextRow
-                heading="New or existing investor"
-                value={project.investorType?.name}
-              />
-            ) : null}
-            {project.levelOfInvolvement ? (
-              <SummaryTable.TextRow
-                heading="Level of involvement"
-                value={project.levelOfInvolvement?.name}
-              />
-            ) : null}
-            {project.specificProgramme ? (
-              <SummaryTable.TextRow
-                heading="Specific investment programme"
-                value={project.specificProgramme?.name}
+                }
               />
-            ) : null}
-          </SummaryTable>
-          <Button
-            as={Link}
-            href={urls.investments.projects.editDetails(project.id)}
-            buttonColour={GREY_3}
-            buttonTextColour={BLACK}
-            data-test="edit-details-button"
-          >
-            Edit summary
-          </Button>
-
-          <SummaryTable
-            data-test="project-requirements-table"
-            caption="Requirements and location"
-          >
-            {project.strategicDrivers &&
-              project.strategicDrivers.length > 0 && (
+              {project.investmentType && (
                 <SummaryTable.TextRow
-                  heading="Strategic drivers"
-                  value={transformArray(project.strategicDrivers)}
+                  heading="Investment type"
+                  value={
+                    project.investmentType.name === 'FDI'
+                      ? transformFdiType(
+                          project.investmentType.name,
+                          project.fdiType?.name
+                        )
+                      : project.investmentType.name
+                  }
                 />
               )}
-            {project.clientRequirements ? (
-              <SummaryTable.TextRow
-                heading="Client requirements"
-                value={project.clientRequirements}
-              />
-            ) : null}
-            {project.competitorCountries &&
-              project.competitorCountries.length > 0 && (
+              {project.sector && (
                 <SummaryTable.TextRow
-                  heading="Competitor countries"
-                  value={transformArray(project.competitorCountries)}
+                  heading="Primary sector"
+                  value={project.sector?.name}
                 />
               )}
-            {project.ukRegionLocations &&
-              project.ukRegionLocations.length > 0 && (
+              {project.businessActivities &&
+                project.businessActivities.length > 0 && (
+                  <SummaryTable.TextRow
+                    heading="Business activity"
+                    value={transformBusinessActivity(
+                      project.businessActivities,
+                      project.otherBusinessActivity
+                    )}
+                  />
+                )}
+              {project.clientContacts && project.clientContacts.length > 0 && (
                 <SummaryTable.TextRow
-                  heading="Possible UK locations"
-                  value={transformArray(project.ukRegionLocations)}
-                />
-              )}
-            {project.actualUkRegions && project.actualUkRegions.length > 0 && (
-              <SummaryTable.TextRow
-                heading="UK regions landed"
-                value={transformArray(project.actualUkRegions)}
-              />
-            )}
-            <SummaryTable.TextRow
-              heading="UK recipient company"
-              value={
-                project.ukCompany ? (
-                  <>
-                    {project.ukCompany.name}
-                    <br />
-                    <br />
-                    <Link
-                      href={
-                        urls.investments.projects.recipientCompany(project.id) +
-                        '?name=' +
-                        project.ukCompany.name
-                      }
-                      data-test="edit-company-link"
-                    >
-                      Edit company
-                    </Link>
-                    <br />
+                  heading="Client contacts"
+                  value={project.clientContacts.map((contact, i) => (
                     <Link
-                      href={urls.investments.projects.removeRecipientCompany(
-                        project.id
-                      )}
-                      data-test="remove-company-link"
+                      key={`${contact}-${i}`}
+                      href={urls.contacts.contact(contact.id)}
+                      data-test={`contact-` + i}
                     >
-                      Remove company
+                      {contact.name}
                     </Link>
-                  </>
-                ) : (
-                  <Link
-                    href={urls.investments.projects.recipientCompany(
-                      project.id
-                    )}
-                    data-test="find-company-link"
-                  >
-                    Find company
-                  </Link>
-                )
-              }
-            />
-            {project.deliveryPartners &&
-              project.deliveryPartners.length > 0 && (
-                <SummaryTable.TextRow
-                  heading="Delivery partners"
-                  value={transformArray(project.deliveryPartners)}
+                  ))}
                 />
               )}
-          </SummaryTable>
-          {checkIfRequirementsStarted(project) ? (
+              {project.description ? (
+                <SummaryTable.TextRow
+                  heading="Project description"
+                  value={project.description}
+                />
+              ) : null}
+              {project.anonymousDescription ? (
+                <SummaryTable.TextRow
+                  heading="Anonymised description"
+                  value={project.anonymousDescription}
+                />
+              ) : null}
+              {project.estimatedLandDate ? (
+                <SummaryTable.TextRow
+                  heading="Estimated land date"
+                  value={format(project.estimatedLandDate, 'MMMM yyyy')}
+                />
+              ) : null}
+              {project.likelihoodToLand ? (
+                <SummaryTable.TextRow
+                  heading="Likelihood of landing"
+                  value={project.likelihoodToLand?.name}
+                />
+              ) : null}
+              {project.actualLandDate ? (
+                <SummaryTable.TextRow
+                  heading="Actual land date"
+                  value={format(project.actualLandDate, DATE_LONG_FORMAT_1)}
+                />
+              ) : null}
+              {project.investorType ? (
+                <SummaryTable.TextRow
+                  heading="New or existing investor"
+                  value={project.investorType?.name}
+                />
+              ) : null}
+              {project.levelOfInvolvement ? (
+                <SummaryTable.TextRow
+                  heading="Level of involvement"
+                  value={project.levelOfInvolvement?.name}
+                />
+              ) : null}
+              {project.specificProgramme ? (
+                <SummaryTable.TextRow
+                  heading="Specific investment programme"
+                  value={project.specificProgramme?.name}
+                />
+              ) : null}
+            </SummaryTable>
             <Button
               as={Link}
-              href={urls.investments.projects.editRequirements(project.id)}
+              href={urls.investments.projects.editDetails(project.id)}
               buttonColour={GREY_3}
               buttonTextColour={BLACK}
-              data-test="edit-requirements-button"
+              data-test="edit-details-button"
             >
-              Edit requirements
+              Edit summary
             </Button>
-          ) : (
-            <>
-              <InsetText data-test="requirements-inset">
-                Please complete this section to move to Assign PM stage
-              </InsetText>
+
+            <SummaryTable
+              data-test="project-requirements-table"
+              caption="Requirements and location"
+            >
+              {project.strategicDrivers &&
+                project.strategicDrivers.length > 0 && (
+                  <SummaryTable.TextRow
+                    heading="Strategic drivers"
+                    value={transformArray(project.strategicDrivers)}
+                  />
+                )}
+              {project.clientRequirements ? (
+                <SummaryTable.TextRow
+                  heading="Client requirements"
+                  value={project.clientRequirements}
+                />
+              ) : null}
+              {project.competitorCountries &&
+                project.competitorCountries.length > 0 && (
+                  <SummaryTable.TextRow
+                    heading="Competitor countries"
+                    value={transformArray(project.competitorCountries)}
+                  />
+                )}
+              {project.ukRegionLocations &&
+                project.ukRegionLocations.length > 0 && (
+                  <SummaryTable.TextRow
+                    heading="Possible UK locations"
+                    value={transformArray(project.ukRegionLocations)}
+                  />
+                )}
+              {project.actualUkRegions &&
+                project.actualUkRegions.length > 0 && (
+                  <SummaryTable.TextRow
+                    heading="UK regions landed"
+                    value={transformArray(project.actualUkRegions)}
+                  />
+                )}
+              <SummaryTable.TextRow
+                heading="UK recipient company"
+                value={
+                  project.ukCompany ? (
+                    <>
+                      {project.ukCompany.name}
+                      <br />
+                      <br />
+                      <Link
+                        href={
+                          urls.investments.projects.recipientCompany(
+                            project.id
+                          ) +
+                          '?name=' +
+                          project.ukCompany.name
+                        }
+                        data-test="edit-company-link"
+                      >
+                        Edit company
+                      </Link>
+                      <br />
+                      <Link
+                        href={urls.investments.projects.removeRecipientCompany(
+                          project.id
+                        )}
+                        data-test="remove-company-link"
+                      >
+                        Remove company
+                      </Link>
+                    </>
+                  ) : (
+                    <Link
+                      href={urls.investments.projects.recipientCompany(
+                        project.id
+                      )}
+                      data-test="find-company-link"
+                    >
+                      Find company
+                    </Link>
+                  )
+                }
+              />
+              {project.deliveryPartners &&
+                project.deliveryPartners.length > 0 && (
+                  <SummaryTable.TextRow
+                    heading="Delivery partners"
+                    value={transformArray(project.deliveryPartners)}
+                  />
+                )}
+            </SummaryTable>
+            {checkIfRequirementsStarted(project) ? (
               <Button
                 as={Link}
                 href={urls.investments.projects.editRequirements(project.id)}
-                data-test="add-requirements-button"
+                buttonColour={GREY_3}
+                buttonTextColour={BLACK}
+                data-test="edit-requirements-button"
               >
-                Add requirements
+                Edit requirements
               </Button>
-            </>
-          )}
-          <SummaryTable data-test="project-value-table" caption="Value">
-            {project.clientCannotProvideTotalInvestment != null && (
-              <SummaryTable.TextRow
-                heading="Total investment"
-                value={
-                  project.totalInvestment
-                    ? currencyGBP(project.totalInvestment)
-                    : 'Client cannot provide this information'
-                }
-              />
-            )}
-            {project.clientCannotProvideForeignInvestment != null && (
-              <SummaryTable.TextRow
-                heading="Capital expenditure value"
-                value={
-                  project.foreignEquityInvestment
-                    ? currencyGBP(project.foreignEquityInvestment)
-                    : 'Client cannot provide this information'
-                }
-              />
-            )}
-            {project.grossValueAdded && (
-              <SummaryTable.CurrencyRow
-                heading="Gross Value Added (GVA)"
-                value={+project.grossValueAdded}
-              />
-            )}
-            {project.governmentAssistance != null && (
-              <SummaryTable.TextRow
-                heading="Government assistance"
-                value={
-                  project.governmentAssistance
-                    ? 'Has government assistance'
-                    : 'No government assistance'
-                }
-              />
-            )}
-            {(project.numberNewJobs || project.numberNewJobs === 0) && (
-              <SummaryTable.TextRow
-                heading="New jobs"
-                value={project.numberNewJobs + ' new jobs'}
-              />
-            )}
-            {project.averageSalary && (
-              <SummaryTable.TextRow
-                heading="Average salary of new jobs"
-                value={project.averageSalary?.name}
-              />
-            )}
-            {(project.numberSafeguardedJobs ||
-              project.numberSafeguardedJobs === 0) && (
-              <SummaryTable.TextRow
-                heading="Safeguarded jobs"
-                value={project.numberSafeguardedJobs + ' safeguarded jobs'}
-              />
-            )}
-            {project.rAndDBudget != null && (
-              <SummaryTable.TextRow
-                heading="R&D budget"
-                value={transformRAndDBudget(project.rAndDBudget)}
-              />
-            )}
-            {checkIfValueStarted(project) && (
-              <SummaryTable.TextRow
-                heading="Non-FDI R&D project"
-                value={transformFdiRAndDProject(project)}
-              />
-            )}
-            {project.newTechToUk != null && (
-              <SummaryTable.TextRow
-                heading="New-to-world tech"
-                value={transformNewTech(project.newTechToUk)}
-              />
-            )}
-            {project.exportRevenue != null && (
-              <SummaryTable.TextRow
-                heading="Export revenue"
-                value={transformExportRevenue(project.exportRevenue)}
-              />
+            ) : (
+              <>
+                <InsetText data-test="requirements-inset">
+                  Please complete this section to move to Assign PM stage
+                </InsetText>
+                <Button
+                  as={Link}
+                  href={urls.investments.projects.editRequirements(project.id)}
+                  data-test="add-requirements-button"
+                >
+                  Add requirements
+                </Button>
+              </>
             )}
-          </SummaryTable>
-          {checkIfValueStarted(project) ? (
-            <Button
-              as={Link}
-              href={urls.investments.projects.editValue(project.id)}
-              buttonColour={GREY_3}
-              buttonTextColour={BLACK}
-              data-test="edit-value-button"
-            >
-              Edit value
-            </Button>
-          ) : (
-            <>
-              <InsetText data-test="value-inset">
-                Please complete ‘Total investment’ and ‘Number of new jobs’ to
-                move to Assign PM stage
-              </InsetText>
+            <SummaryTable data-test="project-value-table" caption="Value">
+              {project.clientCannotProvideTotalInvestment != null && (
+                <SummaryTable.TextRow
+                  heading="Total investment"
+                  value={
+                    project.totalInvestment
+                      ? currencyGBP(project.totalInvestment)
+                      : 'Client cannot provide this information'
+                  }
+                />
+              )}
+              {project.clientCannotProvideForeignInvestment != null && (
+                <SummaryTable.TextRow
+                  heading="Capital expenditure value"
+                  value={
+                    project.foreignEquityInvestment
+                      ? currencyGBP(project.foreignEquityInvestment)
+                      : 'Client cannot provide this information'
+                  }
+                />
+              )}
+              {project.grossValueAdded && (
+                <SummaryTable.CurrencyRow
+                  heading="Gross Value Added (GVA)"
+                  value={+project.grossValueAdded}
+                />
+              )}
+              {project.governmentAssistance != null && (
+                <SummaryTable.TextRow
+                  heading="Government assistance"
+                  value={
+                    project.governmentAssistance
+                      ? 'Has government assistance'
+                      : 'No government assistance'
+                  }
+                />
+              )}
+              {(project.numberNewJobs || project.numberNewJobs === 0) && (
+                <SummaryTable.TextRow
+                  heading="New jobs"
+                  value={project.numberNewJobs + ' new jobs'}
+                />
+              )}
+              {project.averageSalary && (
+                <SummaryTable.TextRow
+                  heading="Average salary of new jobs"
+                  value={project.averageSalary?.name}
+                />
+              )}
+              {(project.numberSafeguardedJobs ||
+                project.numberSafeguardedJobs === 0) && (
+                <SummaryTable.TextRow
+                  heading="Safeguarded jobs"
+                  value={project.numberSafeguardedJobs + ' safeguarded jobs'}
+                />
+              )}
+              {project.rAndDBudget != null && (
+                <SummaryTable.TextRow
+                  heading="R&D budget"
+                  value={transformRAndDBudget(project.rAndDBudget)}
+                />
+              )}
+              {checkIfValueStarted(project) && (
+                <SummaryTable.TextRow
+                  heading="Non-FDI R&D project"
+                  value={transformFdiRAndDProject(project)}
+                />
+              )}
+              {project.newTechToUk != null && (
+                <SummaryTable.TextRow
+                  heading="New-to-world tech"
+                  value={transformNewTech(project.newTechToUk)}
+                />
+              )}
+              {project.exportRevenue != null && (
+                <SummaryTable.TextRow
+                  heading="Export revenue"
+                  value={transformExportRevenue(project.exportRevenue)}
+                />
+              )}
+            </SummaryTable>
+            {checkIfValueStarted(project) ? (
               <Button
                 as={Link}
                 href={urls.investments.projects.editValue(project.id)}
-                data-test="add-value-button"
+                buttonColour={GREY_3}
+                buttonTextColour={BLACK}
+                data-test="edit-value-button"
               >
-                Add value
+                Edit value
               </Button>
-            </>
-          )}
-        </ProjectLayout>
-      )}
-    </InvestmentResource>
+            ) : (
+              <>
+                <InsetText data-test="value-inset">
+                  Please complete ‘Total investment’ and ‘Number of new jobs’ to
+                  move to Assign PM stage
+                </InsetText>
+                <Button
+                  as={Link}
+                  href={urls.investments.projects.editValue(project.id)}
+                  data-test="add-value-button"
+                >
+                  Add value
+                </Button>
+              </>
+            )}
+          </>
+        )}
+      </InvestmentResource>
+    </ProjectLayoutNew>
   )
 }
 

From 7636733d009228d4e7ac0f24edd01b0be2ad521e Mon Sep 17 00:00:00 2001
From: Sophie Wenban <s.maclennan@hotmail.co.uk>
Date: Tue, 23 Jan 2024 14:24:22 +0000
Subject: [PATCH 2/2] Fix ProjectLayoutNew so end-to-end tests pass

---
 src/client/components/Layout/ProjectLayoutNew.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/client/components/Layout/ProjectLayoutNew.jsx b/src/client/components/Layout/ProjectLayoutNew.jsx
index c6c0b6df9c3..3b58b45abbf 100644
--- a/src/client/components/Layout/ProjectLayoutNew.jsx
+++ b/src/client/components/Layout/ProjectLayoutNew.jsx
@@ -83,7 +83,7 @@ export const ProjectLayoutNew = ({
               >
                 Tasks
               </LocalNavLink>
-              {userCanViewInteractions(userPermissions) ? (
+              {userCanViewInteractions(userPermissions) && (
                 <LocalNavLink
                   dataTest="project-interactions-link"
                   href={localProjectUrl(
@@ -94,8 +94,8 @@ export const ProjectLayoutNew = ({
                 >
                   Interactions
                 </LocalNavLink>
-              ) : null}
-              {userCanViewPropositions(userPermissions) ? (
+              )}
+              {userCanViewPropositions(userPermissions) && (
                 <LocalNavLink
                   dataTest="project-propositions-link"
                   href={localProjectUrl(
@@ -105,7 +105,7 @@ export const ProjectLayoutNew = ({
                 >
                   Propositions
                 </LocalNavLink>
-              ) : null}
+              )}
               <LocalNavLink
                 dataTest="project-evaluation-link"
                 href={localProjectUrl(
@@ -133,7 +133,7 @@ export const ProjectLayoutNew = ({
               >
                 Evidence
               </LocalNavLink>
-              {userCanViewAdmin(userPermissions) ? (
+              {userCanViewAdmin(userPermissions) && (
                 <LocalNavLink
                   dataTest="project-admin-link"
                   href={localProjectUrl(
@@ -143,7 +143,7 @@ export const ProjectLayoutNew = ({
                 >
                   Admin
                 </LocalNavLink>
-              ) : null}
+              )}
             </LocalNav>
           </StyledNavWrapper>
         </GridCol>