Add component for rendering consent details

src/client/modules/Contacts/ContactDetails/ConsentDetails.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import Table from '@govuk-react/table'
+
+import { SummaryTable } from '../../../components'
+
+const getConsentRows = (consentData) => {
+  const domainGroupedConsent = Object.groupBy(
+    consentData,
+    ({ consentDomain }) => consentDomain
+  )
+  const domainRows = Object.entries(domainGroupedConsent).map((domain) => {
+    {
+      const domainTitle = domain[0]
+      const domainTopics = domain[1]
+      return domainTopics.map((topic, index) => (
+        <Table.Row key={`domain_${index}`} data-test={`domain_${domainTitle}`}>
+          {index == 0 && <td rowSpan={domainTopics.length}>{domainTitle}</td>}
+          <Table.Cell>{topic.topic}</Table.Cell>
+          <Table.Cell>
+            {topic.emailContactConsent || topic.telephoneContactConsent
+              ? 'Yes'
+              : 'No'}
+          </Table.Cell>
+        </Table.Row>
+      ))
+    }
+  })
+
+  return (
+    <>
+      <Table.Row>
+        <Table.CellHeader>Domain</Table.CellHeader>
+        <Table.CellHeader>Topic</Table.CellHeader>
+        <Table.CellHeader>Consent Given</Table.CellHeader>
+      </Table.Row>
+      {domainRows}
+    </>
+  )
+}
+
+const ConsentDetails = ({ contact }) => (
+  <SummaryTable data-test="contact-consent-table" caption={'Contact consents'}>
+    {contact.consentData ? (
+      getConsentRows(contact.consentData)
+    ) : (
+      <Table.Row data-test="no-contact-consents">
+        <Table.Cell>No consent data is available for this contact</Table.Cell>
+      </Table.Row>
+    )}
+  </SummaryTable>
+)
+export default ConsentDetails

src/client/modules/Contacts/ContactDetails/ContactDetails.jsx

@@ -16,6 +16,7 @@ import {
 import { ID, TASK_ARCHIVE_CONTACT } from './state'
 import ArchiveForm from '../../../components/ArchiveForm'
 import ContactLayout from '../../../components/Layout/ContactLayout'
+import ConsentDetails from './ConsentDetails'
 
 const getAddress = (contact, companyAddress) => {
   const address = contact.addressSameAsCompany
@@ -103,6 +104,8 @@ const ContactDetails = ({ contactId, companyAddress, permissions }) => (
             </Button>
           ) : null}
 
+          <ConsentDetails contact={contact} />
+
           <ArchiveForm
             id={ID}
             submissionTaskName={TASK_ARCHIVE_CONTACT}

test/component/cypress/specs/Contacts/ConsentDetails.cy.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import ConsentDetails from '../../../../../src/client/modules/Contacts/ContactDetails/ConsentDetails'
+import { assertGovReactTable } from '../../../../functional/cypress/support/assertions'
+
+describe('ConsentDetails', () => {
+  context('When contact has no consent data', () => {
+    beforeEach(() => {
+      cy.mount(<ConsentDetails contact={{}} />)
+    })
+
+    it('should render a message that this data is missing for this contact', () => {
+      cy.get('[data-test=no-contact-consents]').should('exist')
+    })
+  })
+
+  context('When contact has consent data with multiple domains', () => {
+    beforeEach(() => {
+      cy.mount(
+        <ConsentDetails
+          contact={{
+            consentData: [
+              {
+                topic: 'Topic 2',
+                consentDomain: 'Domain 1',
+                emailContactConsent: false,
+                telephoneContactConsent: false,
+              },
+              {
+                topic: 'Topic 2',
+                consentDomain: 'Domain 2',
+                emailContactConsent: true,
+                telephoneContactConsent: true,
+              },
+              {
+                topic: 'Topic 1',
+                consentDomain: 'Domain 3',
+                emailContactConsent: false,
+                telephoneContactConsent: true,
+              },
+              {
+                topic: 'Topic 3',
+                consentDomain: 'Domain 4',
+                emailContactConsent: true,
+                telephoneContactConsent: false,
+              },
+            ],
+          }}
+        />
+      )
+    })
+
+    it('should render a row for each domain', () => {
+      assertGovReactTable({
+        element: '[data-test="contact-consent-table"]',
+        rows: [
+          ['Domain', 'Topic', 'Consent Given'],
+          ['Domain 1', 'Topic 2', 'No'],
+          ['Domain 2', 'Topic 2', 'Yes'],
+          ['Domain 3', 'Topic 1', 'Yes'],
+          ['Domain 4', 'Topic 3', 'Yes'],
+        ],
+      })
+    })
+  })
+})