style(EMS-3574): problem with service - content iterations (#2741)

e2e-tests/commands/shared-commands/assertions/assert-contact-details-content.js

@@ -0,0 +1,20 @@
+import { emailLink, emailPrefix } from '../../../pages/shared';
+import contactDetails from '../../../partials/contactDetails';
+import { CONTACT_DETAILS } from '../../../content-strings';
+
+const { PHONE, EMAIL, OPENING_TIMES } = CONTACT_DETAILS;
+
+/**
+ * assertContactDetailsContent
+ * Check contact details content
+ */
+const assertContactDetailsContent = () => {
+  cy.checkText(emailPrefix(), `${EMAIL.PREFIX}:`);
+
+  cy.checkLink(emailLink(), EMAIL.VALUE, EMAIL.TEXT);
+
+  cy.checkText(contactDetails.phone(), `${PHONE.PREFIX}: ${PHONE.VALUE}`);
+  cy.checkText(contactDetails.openingTimes(), OPENING_TIMES);
+};
+
+export default assertContactDetailsContent;

e2e-tests/commands/shared-commands/assertions/index.js

@@ -28,6 +28,8 @@ Cypress.Commands.add('assertSuffix', require('./assert-suffix'));
 Cypress.Commands.add('assertTextareaRendering', require('./assert-textarea-rendering'));
 Cypress.Commands.add('assertDynamicCharacterCount', require('./assert-dynamic-character-count'));
 
+Cypress.Commands.add('assertContactDetailsContent', require('./assert-contact-details-content'));
+
 Cypress.Commands.add('checkAriaLabel', require('./check-aria-label'));
 Cypress.Commands.add('checkClassName', require('./check-class-name'));
 Cypress.Commands.add('checkEmailFieldRendering', require('./check-email-field-rendering'));

e2e-tests/constants/ukef-contact-details.js → e2e-tests/constants/contact-details.js

@@ -3,4 +3,5 @@ export const UKEF_CONTACT_DETAILS = {
     CREDIT_INSURANCE_SUPPORT: '[email protected]',
     UNDERWRITING: '[email protected]',
   },
+  PHONE: '+44 (0)207 271 8010',
 };

e2e-tests/constants/index.js

@@ -16,5 +16,5 @@ export * from './percentages-of-cover';
 export * from './routes';
 export * from './supported-currencies';
 export * from './total-contract-value';
-export * from './ukef-contact-details';
+export * from './contact-details';
 export * from './validation';

e2e-tests/content-strings/contact.js

@@ -6,4 +6,9 @@ export const CONTACT_DETAILS = {
     TEXT: UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT,
     VALUE: `mailto:${UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT}`,
   },
+  PHONE: {
+    PREFIX: 'Phone',
+    VALUE: UKEF_CONTACT_DETAILS.PHONE,
+  },
+  OPENING_TIMES: 'Opening times: Monday to Friday, 9am to 5pm (excluding public holidays)',
 };

e2e-tests/content-strings/pages/index.js

@@ -199,7 +199,8 @@ const CONTACT_US_PAGE = {
 };
 
 const PROBLEM_WITH_SERVICE_PAGE = {
-  PAGE_TITLE: 'Problem with the service',
+  PAGE_TITLE: 'Sorry, there is a problem with the service',
+  BODY: 'Contact us if you think this is an error or you cannot continue your application.',
 };
 
 const FEEDBACK_PAGE = {

e2e-tests/insurance/cypress/e2e/journeys/problem-with-service.spec.js

@@ -1,3 +1,4 @@
+import { body } from '../../../../pages/shared';
 import { PAGES } from '../../../../content-strings';
 import { ROUTES } from '../../../../constants';
 
@@ -29,4 +30,12 @@ context('Problem with service page - Insurance', () => {
       assertCookies: false,
     });
   });
+
+  it('renders body text', () => {
+    cy.checkText(body(), CONTENT_STRINGS.BODY);
+  });
+
+  it('renders a `contact details` section', () => {
+    cy.assertContactDetailsContent();
+  });
 });

e2e-tests/partials/contactDetails.js

@@ -0,0 +1,6 @@
+const contactDetails = {
+  phone: () => cy.get('[data-cy="contact-details-phone"]'),
+  openingTimes: () => cy.get('[data-cy="contact-details-opening-times"]'),
+};
+
+export default contactDetails;

e2e-tests/partials/index.js

@@ -1,5 +1,6 @@
-import creditPeriodWithBuyer from './creditPeriodWithBuyer';
+import contactDetails from './contactDetails';
 import cookieBanner from './cookieBanner';
+import creditPeriodWithBuyer from './creditPeriodWithBuyer';
 import footer from './footer';
 import header from './header';
 import insurancePartials from './insurance';
@@ -10,6 +11,7 @@ import ukGoodsOrServicesCalculateDescription from './ukGoodsOrServicesCalculateD
 import ukGoodsOrServicesDescription from './ukGoodsAndServicesDescription';
 
 const partials = {
+  contactDetails,
   cookieBanner,
   creditPeriodWithBuyer,
   errorSummaryListHeading: () => cy.get('.govuk-error-summary h2'),

e2e-tests/quote/cypress/e2e/journeys/quote/problem-with-service.spec.js

@@ -1,3 +1,4 @@
+import { body } from '../../../../../pages/shared';
 import { PAGES } from '../../../../../content-strings';
 import { ROUTES } from '../../../../../constants';
 
@@ -29,4 +30,12 @@ context('Problem with service page - Quote', () => {
       assertCookies: false,
     });
   });
+
+  it('renders body text', () => {
+    cy.checkText(body(), CONTENT_STRINGS.BODY);
+  });
+
+  it('renders a `contact details` section', () => {
+    cy.assertContactDetailsContent();
+  });
 });

src/ui/server/constants/ukef-contact-details.ts

@@ -3,4 +3,5 @@ export const UKEF_CONTACT_DETAILS = {
     CREDIT_INSURANCE_SUPPORT: '[email protected]',
     UNDERWRITING: '[email protected]',
   },
+  PHONE: '+44 (0)207 271 8010',
 };

src/ui/server/content-strings/contact/index.ts

@@ -6,4 +6,9 @@ export const CONTACT_DETAILS = {
     TEXT: UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT,
     VALUE: `mailto:${UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT}`,
   },
+  PHONE: {
+    PREFIX: 'Phone',
+    VALUE: UKEF_CONTACT_DETAILS.PHONE,
+  },
+  OPENING_TIMES: 'Opening times: Monday to Friday, 9am to 5pm (excluding public holidays)',
 };

src/ui/server/content-strings/pages/index.ts

@@ -181,7 +181,9 @@ const PAGE_NOT_FOUND_PAGE = {
 };
 
 const PROBLEM_WITH_SERVICE_PAGE = {
-  PAGE_TITLE: 'Problem with the service',
+  PAGE_TITLE: 'Sorry, there is a problem with the service',
+  BODY: 'Contact us if you think this is an error or you cannot continue your application.',
+  CONTACT_DETAILS,
 };
 
 const CONTACT_US_PAGE = {

src/ui/templates/partials/contact-details.njk

@@ -0,0 +1,14 @@
+{% set contactDetails = CONTENT_STRINGS.CONTACT_DETAILS %}
+
+{% set EMAIL = contactDetails.EMAIL %}
+{% set PHONE = contactDetails.PHONE %}
+{% set OPENING_TIMES = contactDetails.OPENING_TIMES %}
+
+<p data-cy="contact-details-email">
+  <span data-cy="email-prefix">{{ EMAIL.PREFIX }}: </span>
+  <a class="govuk-link" href="{{ EMAIL.VALUE }}" data-cy="email-link">{{ EMAIL.TEXT }}</a>
+</p>
+
+<p data-cy="contact-details-phone">{{ PHONE.PREFIX }}: {{ PHONE.VALUE }}</p>
+
+<p data-cy="contact-details-opening-times">{{ OPENING_TIMES }}</p>

src/ui/templates/problem-with-service.njk

@@ -6,6 +6,16 @@
 
 {% block content %}
 
-  <h1 class="govuk-heading-xl" data-cy="{{ DATA_CY.HEADING }}">{{ CONTENT_STRINGS.PAGE_TITLE }}</h1>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds-from-desktop">
+
+      <h1 class="govuk-heading-xl" data-cy="{{ DATA_CY.HEADING }}">{{ CONTENT_STRINGS.PAGE_TITLE }}</h1>
+
+    </div>
+  </div>
+
+  <p class="govuk-body" data-cy="body">{{ CONTENT_STRINGS.BODY }}</p>
+
+  {% include "partials/contact-details.njk" %}
 
 {% endblock %}