diff --git a/src/client/components/ActivityFeed/activities/DirectoryFormsApi.jsx b/src/client/components/ActivityFeed/activities/DirectoryFormsApi.jsx index 2f740f3ea3a..c3f94748576 100644 --- a/src/client/components/ActivityFeed/activities/DirectoryFormsApi.jsx +++ b/src/client/components/ActivityFeed/activities/DirectoryFormsApi.jsx @@ -8,7 +8,6 @@ import CardUtils from './card/CardUtils' import ActivityCardWrapper from './card/ActivityCardWrapper' import ActivityCardLabels from './card/ActivityCardLabels' import ActivityCardSubject from './card/ActivityCardSubject' -import ActivityCardNotes from './card/ActivityCardNotes' import ActivityCardMetadata from './card/ActivityCardMetadata' import ActivityOverviewSummary from './card/item-renderers/ActivityOverviewSummary' @@ -104,38 +103,6 @@ export default class DirectoryFormsApi extends React.PureComponent { ) - } else { - kind = 'great.gov.uk Enquiry' - const metadata = [ - { label: 'Date', value: format(sentDate) }, - { - label: 'Name', - value: `${formData.first_name} ${formData.last_name}`, - }, - { label: 'Job title', value: formData.position }, - { label: 'Email', value: formData.email }, - ] - return isOverview ? ( - - ) : ( - - Enquiry - - - - - ) } } } diff --git a/src/client/components/ActivityFeed/activities/card/ActivityCardNotes.jsx b/src/client/components/ActivityFeed/activities/card/ActivityCardNotes.jsx deleted file mode 100644 index e50db5be14c..00000000000 --- a/src/client/components/ActivityFeed/activities/card/ActivityCardNotes.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { FONT_SIZE, FONT_WEIGHTS, SPACING } from '@govuk-react/constants' -import styled from 'styled-components' - -const StyledCardNotes = styled('div')` - font-size: ${FONT_SIZE.SIZE_16}; - font-weight: ${FONT_WEIGHTS.regular}; - line-height: ${FONT_SIZE.SIZE_24}; - margin-bottom: ${SPACING.SCALE_1}; -` - -const ActivityCardNotes = ({ notes, maxLength = 255 }) => ( - - {notes.length < maxLength - ? notes - : notes.slice(0, maxLength).split(' ').slice(0, -1).join(' ') + - ' ...'}{' '} - -) - -ActivityCardNotes.propTypes = { - notes: PropTypes.string.isRequired, - maxLength: PropTypes.number, -} - -export default ActivityCardNotes diff --git a/src/client/modules/Companies/CompanyActivity/constants.js b/src/client/modules/Companies/CompanyActivity/constants.js index fe32be83e68..8b0dbe85c25 100644 --- a/src/client/modules/Companies/CompanyActivity/constants.js +++ b/src/client/modules/Companies/CompanyActivity/constants.js @@ -71,3 +71,9 @@ export const NEW_ORDER_TAG = { colour: 'grey', dataTest: 'order-kind-label', } + +export const GREAT_EXPORT_TAG = { + text: 'great.gov.uk', + colour: TAGS.ACTIVITY_LABELS.KIND, + dataTest: 'great-kind-label', +} diff --git a/src/client/modules/Companies/CompanyActivity/transformers.js b/src/client/modules/Companies/CompanyActivity/transformers.js index 4ebe2b8afd4..469051fc412 100644 --- a/src/client/modules/Companies/CompanyActivity/transformers.js +++ b/src/client/modules/Companies/CompanyActivity/transformers.js @@ -1,7 +1,12 @@ import React from 'react' import Link from '@govuk-react/link' -import { TAGS, NEW_PROJECT_TAG, NEW_ORDER_TAG } from './constants' +import { + TAGS, + NEW_PROJECT_TAG, + NEW_ORDER_TAG, + GREAT_EXPORT_TAG, +} from './constants' import urls from '../../../../lib/urls' import { formatDate, DATE_FORMAT_MEDIUM } from '../../../utils/date-utils' import { truncateData } from '../utils' @@ -291,38 +296,37 @@ export const transformOrderToListItem = (activity) => { } export const transformGreatExportEnquiryToListItem = (activity) => { - const great = activity.great_export_enquiry + const greatExportEnquiry = activity.great_export_enquiry + const contact = greatExportEnquiry.contact return { - id: great.id, + id: greatExportEnquiry.id, metadata: [ - { label: 'Date', value: formatDate(activity.date, DATE_FORMAT_MEDIUM) }, { - label: 'Contact', - value: formattedContacts([great.contact]), + label: '', + value: truncateData(greatExportEnquiry.data_enquiry), }, + { label: 'Date', value: formatDate(activity.date, DATE_FORMAT_MEDIUM) }, { - label: 'Comment', - value: truncateData(great.data_enquiry), + label: 'Contact', + value: contact.name.length && contact.name, }, + { label: 'Job title', value: contact?.job_title }, + { label: 'Email', value: greatExportEnquiry.meta_email_address }, ].filter(({ value }) => Boolean(value)), tags: [ { text: 'great.gov.uk Enquiry', - colour: TAGS.ACTIVITY_LABELS.KIND, - dataTest: 'great-kind-label', + colour: TAGS.ACTIVITY_LABELS.THEME, + dataTest: 'great-theme-label', }, { - text: 'service', + text: 'Export', colour: TAGS.ACTIVITY_LABELS.SERVICE, dataTest: 'great-service-label', }, - { - text: 'great.gov.uk', - colour: TAGS.ACTIVITY_LABELS.THEME, - dataTest: 'great-theme-label', - }, + GREAT_EXPORT_TAG, ].filter(({ text }) => Boolean(text)), - headingText: `Enquiry ` + truncateData(great.meta_subject, 35), + headingText: `Enquiry ` + truncateData(greatExportEnquiry.meta_subject, 35), } } diff --git a/src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers.js b/src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers.js index 208b05d88c5..0459e250830 100644 --- a/src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers.js +++ b/src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers.js @@ -2,6 +2,7 @@ import { TAGS, NEW_PROJECT_TAG, NEW_ORDER_TAG, + GREAT_EXPORT_TAG, } from '../../../CompanyActivity/constants' import { isDateInFuture } from '../../../../../utils/date' import { formatDate, DATE_FORMAT_MEDIUM } from '../../../../../utils/date-utils' @@ -171,20 +172,16 @@ export const transformOrderToListItem = (activity) => { } export const transformGreatExportEnquiryToListItem = (activity) => { - const great = activity.great_export_enquiry + const greatExportEnquiry = activity.great_export_enquiry return { - id: great.id, + id: greatExportEnquiry.id, date: formatDate(activity.date, DATE_FORMAT_MEDIUM), - - tags: [ - { - text: 'great.gov.uk Enquiry', - colour: TAGS.ACTIVITY_LABELS.KIND, - dataTest: 'great-kind-label', - }, - ].filter(({ text }) => Boolean(text)), - headingText: truncateData(great.meta_subject, 35), - summary: `Enquirer ${great.contact.first_name} ${great.contact.last_name}`, + tags: [GREAT_EXPORT_TAG].filter(({ text }) => Boolean(text)), + headingText: truncateData(greatExportEnquiry.meta_subject, 35), + summary: + greatExportEnquiry.contact.name.length > 0 + ? `Enquirer ${greatExportEnquiry.contact?.name}` + : 'Unknown enquirer', } } diff --git a/src/client/modules/Companies/utils.js b/src/client/modules/Companies/utils.js index 869a9daefd0..faa76b6f92e 100644 --- a/src/client/modules/Companies/utils.js +++ b/src/client/modules/Companies/utils.js @@ -80,6 +80,6 @@ export const companyCollectionListMetadataTask = (ID) => { } export const truncateData = (enquiry, maxLength = 200) => - enquiry.length < maxLength + enquiry.length == 0 || enquiry.length < maxLength ? enquiry : enquiry.slice(0, maxLength).split(' ').slice(0, -1).join(' ') + ' ...' diff --git a/test/component/cypress/specs/Companies/CompanyActivity/GreatExportActivity.cy.jsx b/test/component/cypress/specs/Companies/CompanyActivity/GreatExportActivity.cy.jsx new file mode 100644 index 00000000000..795e57c4f42 --- /dev/null +++ b/test/component/cypress/specs/Companies/CompanyActivity/GreatExportActivity.cy.jsx @@ -0,0 +1,114 @@ +import React from 'react' + +import { ItemTemplate } from '../../../../../../src/client/modules/Companies/CompanyActivity' +import { transformGreatExportEnquiryToListItem } from '../../../../../../src/client/modules/Companies/CompanyActivity/transformers' +import { CollectionList } from '../../../../../../src/client/components' +import { + assertMetadataItems, + assertGreatKindLabel, + assertText, +} from '../../../support/activity-assertions' +import { + CONTACT_1, + CREATED_BY, + CREATED_ON, + EMPTY_CONTACT, +} from '../../../support/activity-constants' + +const SUBJECT = 'Lorem ipsum dolor' +const NOTES = + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.' +const LONG_NOTES = + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.' + +const buildAndMountActivity = ( + showOptionalFields, + notes = NOTES, + subject = SUBJECT +) => { + const activity = { + date: CREATED_ON, + great_export_enquiry: { + id: '2', + contact: showOptionalFields ? CONTACT_1 : EMPTY_CONTACT, + data_enquiry: showOptionalFields ? notes : '', + meta_subject: subject, + meta_email_address: showOptionalFields ? CREATED_BY.email : '', + }, + } + + cy.mountWithProvider( + + ) +} + +describe('Great Export Enquiry activity card', () => { + context('When the card is rendered with a complete enquiry', () => { + beforeEach(() => { + buildAndMountActivity(true) + cy.get('[data-test=collection-item]').should('exist') + }) + + it('should render the labels and metadata', () => { + assertGreatLabels() + cy.get(`[data-test="collection-item"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', `Enquiry ${SUBJECT}`) + .should('not.have.attr', 'href') + assertMetadataItems([ + ` ${NOTES}`, + 'Date 25 Nov 2058', + 'Contact Alexander Hamilton', + 'Job title Test Job', + 'Email bernardharrispatel@test.com', + ]) + }) + }) + + context('When the enquiry has missing fields', () => { + beforeEach(() => { + buildAndMountActivity(false) + cy.get('[data-test=collection-item]').should('exist') + }) + + it('should render the date and the labels', () => { + assertGreatLabels() + assertMetadataItems(['Date 25 Nov 2058']) + }) + }) + + context('When the enquiry has a long name and notes', () => { + beforeEach(() => { + buildAndMountActivity(true, LONG_NOTES, LONG_NOTES) + cy.get('[data-test=collection-item]').should('exist') + }) + + it('should truncate the long fields', () => { + assertGreatLabels() + cy.get(`[data-test="collection-item"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', 'Enquiry Lorem ipsum dolor sit amet, ...') + .should('not.have.attr', 'href') + assertMetadataItems([ + ' Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ...', + 'Date 25 Nov 2058', + 'Contact Alexander Hamilton', + 'Job title Test Job', + 'Email bernardharrispatel@test.com', + ]) + }) + }) +}) + +const assertGreatLabels = () => { + assertText('[data-test="great-theme-label"]', 'great.gov.uk Enquiry') + assertText('[data-test="great-service-label"]', 'Export') + assertGreatKindLabel() +} diff --git a/test/component/cypress/specs/Companies/CompanyOverview/ActivityCard/GreatExportActivityCard.cy.jsx b/test/component/cypress/specs/Companies/CompanyOverview/ActivityCard/GreatExportActivityCard.cy.jsx new file mode 100644 index 00000000000..5614818d18b --- /dev/null +++ b/test/component/cypress/specs/Companies/CompanyOverview/ActivityCard/GreatExportActivityCard.cy.jsx @@ -0,0 +1,101 @@ +import React from 'react' + +import { transformGreatExportEnquiryToListItem } from '../../../../../../../src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers' +import { ItemTemplate } from '../../../../../../../src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/ActivityCard' +import { CollectionList } from '../../../../../../../src/client/components' +import { assertGreatKindLabel } from '../../../../support/activity-assertions' +import { + CONTACT_1, + CREATED_ON, + EMPTY_CONTACT, +} from '../../../../support/activity-constants' + +const SUBJECT = 'Lorem ipsum dolor' +const LONG_NOTES = + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.' + +const buildAndMountActivity = (showOptionalFields, subject = SUBJECT) => { + const activity = { + date: CREATED_ON, + great_export_enquiry: { + id: '2', + contact: showOptionalFields ? CONTACT_1 : EMPTY_CONTACT, + meta_subject: subject, + }, + } + + cy.mountWithProvider( + + ) +} + +describe('Great activity card', () => { + context('When the card is rendered with a complete enquiry', () => { + beforeEach(() => { + buildAndMountActivity(true) + cy.get('[data-test="activity-card-wrapper"]').should('exist') + }) + + it('should render the labels and metadata', () => { + assertGreatKindLabel() + cy.get(`[data-test="activity-card-wrapper"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', SUBJECT) + .should('not.have.attr', 'href') + cy.get('[data-test="activity-date"]').should('have.text', '25 Nov 2058') + cy.get('[data-test="activity-summary"]').should( + 'have.text', + 'Enquirer Alexander Hamilton' + ) + }) + }) + + context('When the enquiry subject is over 35 characters', () => { + beforeEach(() => { + buildAndMountActivity(true, LONG_NOTES) + cy.get('[data-test="activity-card-wrapper"]').should('exist') + }) + + it('should render the truncated label', () => { + assertGreatKindLabel() + cy.get(`[data-test="activity-card-wrapper"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', 'Lorem ipsum dolor sit amet, ...') + .should('not.have.attr', 'href') + cy.get('[data-test="activity-date"]').should('have.text', '25 Nov 2058') + cy.get('[data-test="activity-summary"]').should( + 'have.text', + 'Enquirer Alexander Hamilton' + ) + }) + }) + + context('When the contact is blank', () => { + beforeEach(() => { + buildAndMountActivity(false) + cy.get('[data-test="activity-card-wrapper"]').should('exist') + }) + + it('should render the truncated label', () => { + assertGreatKindLabel() + cy.get(`[data-test="activity-card-wrapper"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', SUBJECT) + .should('not.have.attr', 'href') + cy.get('[data-test="activity-date"]').should('have.text', '25 Nov 2058') + cy.get('[data-test="activity-summary"]').should( + 'have.text', + 'Unknown enquirer' + ) + }) + }) +}) diff --git a/test/component/cypress/support/activity-assertions.js b/test/component/cypress/support/activity-assertions.js index 92c14f41008..8e3f3516120 100644 --- a/test/component/cypress/support/activity-assertions.js +++ b/test/component/cypress/support/activity-assertions.js @@ -47,3 +47,7 @@ export const assertProjectKindLabel = () => { export const assertOrderKindLabel = () => { assertText('[data-test="order-kind-label"]', 'New Order') } + +export const assertGreatKindLabel = () => { + assertText('[data-test="great-kind-label"]', 'great.gov.uk') +} diff --git a/test/component/cypress/support/activity-constants.js b/test/component/cypress/support/activity-constants.js index e5a441a7bf9..130bf3ab2c0 100644 --- a/test/component/cypress/support/activity-constants.js +++ b/test/component/cypress/support/activity-constants.js @@ -46,3 +46,9 @@ export const ADVISER_2 = { name: 'Test Team 2', }, } + +export const EMPTY_CONTACT = { + id: '', + name: '', + job_title: '', +} diff --git a/test/functional/cypress/specs/companies/activity-feed-spec.js b/test/functional/cypress/specs/companies/activity-feed-spec.js index f9ce0cd7299..8ce61e57e23 100644 --- a/test/functional/cypress/specs/companies/activity-feed-spec.js +++ b/test/functional/cypress/specs/companies/activity-feed-spec.js @@ -77,24 +77,21 @@ describe('Company activity feed', () => { activity.great_export_enquiry.data_enquiry ) it('displays the correct activity type label', () => { - cy.get('[data-test="great-kind-label"]').contains( - 'great.gov.uk Enquiry', - { - matchCase: false, - } + cy.get('[data-test="great-kind-label"]').should( + 'have.text', + 'great.gov.uk' ) }) it('displays the correct topic label', () => { - cy.get('[data-test="great-theme-label"]').contains('great.gov.uk', { - matchCase: false, - }) + cy.get('[data-test="great-theme-label"]').should( + 'have.text', + 'great.gov.uk Enquiry' + ) }) it('displays the correct sub-topic label', () => { - cy.get('[data-test="great-service-label"]').contains('service', { - matchCase: false, - }) + cy.get('[data-test="great-service-label"]').should('have.text', 'Export') }) it('displays the Great export enquiry subject', () => { cy.get('[data-test="collection-item"]').each(() =>