feat(EMS-3502-3567-3568): content updates - email links

UK-Export-Finance · Jul 12, 2024 · 48048d6 · 48048d6
1 parent 4054d3d
commit 48048d6
Show file tree

Hide file tree

Showing 12 changed files with 106 additions and 30 deletions.
diff --git a/e2e-tests/content-strings/contact.js b/e2e-tests/content-strings/contact.js
@@ -3,6 +3,7 @@ import { UKEF_CONTACT_DETAILS } from '../constants';
 export const CONTACT_DETAILS = {
   EMAIL: {
     PREFIX: 'Email',
-    VALUE: UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT,
+    TEXT: UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT,
+    VALUE: `mailto:${UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT}`,
   },
 };
diff --git a/e2e-tests/insurance/cypress/e2e/journeys/account/manage/account-manage.spec.js b/e2e-tests/insurance/cypress/e2e/journeys/account/manage/account-manage.spec.js
@@ -95,8 +95,12 @@ context(
           cy.checkText(intro(), INTRO);
         });
 
+        it('renders `email prefix` copy', () => {
+          cy.checkText(manageAccountPage.emailPrefix(), EMAIL.PREFIX);
+        });
+
         it('renders `email us` copy', () => {
-          cy.checkText(manageAccountPage.email(), `${EMAIL.PREFIX} ${EMAIL.VALUE}`);
+          cy.checkLink(manageAccountPage.emailLink(), EMAIL.VALUE, EMAIL.TEXT);
         });
       });
     });

diff --git a/...ce/cypress/e2e/journeys/account/suspended/email-sent/account-suspended-email-sent.spec.js b/...ce/cypress/e2e/journeys/account/suspended/email-sent/account-suspended-email-sent.spec.js
@@ -81,7 +81,9 @@ context(
         });
 
         it('should render `email if having problems`', () => {
-          cy.checkText(emailSentPage.email(), `${EMAIL.PREFIX} ${EMAIL.VALUE}`);
+          cy.checkText(emailSentPage.emailPrefix(), EMAIL.PREFIX);
+
+          cy.checkLink(emailSentPage.emailLink(), EMAIL.VALUE, EMAIL.TEXT);
 
           cy.checkText(emailSentPage.emailOutro(), OUTRO);
         });

diff --git a/e2e-tests/insurance/cypress/e2e/journeys/contact-us.spec.js b/e2e-tests/insurance/cypress/e2e/journeys/contact-us.spec.js
@@ -7,7 +7,12 @@ const { generalEnquiries, applicationEnquiries } = contactUsPage;
 
 const CONTENT_STRINGS = PAGES.CONTACT_US_PAGE;
 
-const { GENERAL_ENQUIRIES, APPLICATION_ENQUIRES, CONTACT_DETAILS, QUOTE_REFERENCE_NUMBER } = CONTENT_STRINGS;
+const {
+  GENERAL_ENQUIRIES,
+  APPLICATION_ENQUIRES,
+  CONTACT_DETAILS: { EMAIL },
+  QUOTE_REFERENCE_NUMBER,
+} = CONTENT_STRINGS;
 
 const baseUrl = Cypress.config('baseUrl');
 
@@ -41,19 +46,39 @@ context('Contact us page - Insurance', () => {
     cy.checkText(contactUsPage.whoToContactText(), CONTENT_STRINGS.WHO_TO_CONTACT);
   });
 
-  it('renders a `general enquiries` section', () => {
-    cy.checkText(generalEnquiries.heading(), GENERAL_ENQUIRIES.HEADING);
+  describe('`application enquiries` section', () => {
+    it('renders a heading', () => {
+      cy.checkText(generalEnquiries.heading(), GENERAL_ENQUIRIES.HEADING);
+    });
 
-    cy.checkText(generalEnquiries.email(), `${CONTACT_DETAILS.EMAIL.PREFIX}: ${CONTACT_DETAILS.EMAIL.VALUE}`);
+    it('renders `email prefix` copy', () => {
+      cy.checkText(generalEnquiries.emailPrefix(), EMAIL.PREFIX);
+    });
 
-    cy.checkText(generalEnquiries.quoteReferenceNumber(), QUOTE_REFERENCE_NUMBER);
+    it('renders an email link', () => {
+      cy.checkLink(generalEnquiries.emailLink(), EMAIL.VALUE, EMAIL.TEXT);
+    });
+
+    it('renders a `quote reference number` link', () => {
+      cy.checkText(generalEnquiries.quoteReferenceNumber(), QUOTE_REFERENCE_NUMBER);
+    });
   });
 
-  it('renders an `application enquiries` section', () => {
-    cy.checkText(applicationEnquiries.heading(), APPLICATION_ENQUIRES.HEADING);
+  describe('`application enquiries` section', () => {
+    it('renders a heading', () => {
+      cy.checkText(applicationEnquiries.heading(), APPLICATION_ENQUIRES.HEADING);
+    });
 
-    cy.checkText(applicationEnquiries.email(), `${CONTACT_DETAILS.EMAIL.PREFIX}: ${CONTACT_DETAILS.EMAIL.VALUE}`);
+    it('renders `email prefix` copy', () => {
+      cy.checkText(applicationEnquiries.emailPrefix(), EMAIL.PREFIX);
+    });
 
-    cy.checkText(applicationEnquiries.quoteReferenceNumber(), QUOTE_REFERENCE_NUMBER);
+    it('renders an email link', () => {
+      cy.checkLink(applicationEnquiries.emailLink(), EMAIL.VALUE, EMAIL.TEXT);
+    });
+
+    it('renders a `quote reference number` link', () => {
+      cy.checkText(applicationEnquiries.quoteReferenceNumber(), QUOTE_REFERENCE_NUMBER);
+    });
   });
 });
diff --git a/e2e-tests/pages/contact-us.js b/e2e-tests/pages/contact-us.js
@@ -3,11 +3,13 @@ export const contactUsPage = {
   whoToContactText: () => cy.get('[data-cy="who-to-contact"]'),
   generalEnquiries: {
     heading: () => cy.get('[data-cy="general-enquiries-heading"]'),
+    emailPrefix: () => cy.get('[data-cy="general-enquiries-email-prefix"]'),
     email: () => cy.get('[data-cy="general-enquiries-email"]'),
     quoteReferenceNumber: () => cy.get('[data-cy="general-enquiries-quote-reference-number"]'),
   },
   applicationEnquiries: {
     heading: () => cy.get('[data-cy="application-enquiries-heading"]'),
+    emailPrefix: () => cy.get('[data-cy="application-enquiries-email-prefix"]'),
     email: () => cy.get('[data-cy="application-enquiries-email"]'),
     quoteReferenceNumber: () => cy.get('[data-cy="application-enquiries-quote-reference-number"]'),
   },

diff --git a/e2e-tests/pages/insurance/account/manage/index.js b/e2e-tests/pages/insurance/account/manage/index.js
@@ -1,5 +1,6 @@
 const manageAccountPage = {
-  email: () => cy.get('[data-cy="email"]'),
+  emailLink: () => cy.get('[data-cy="email-link"]'),
+  emailPrefix: () => cy.get('[data-cy="email-prefix"]'),
 };
 
 export default manageAccountPage;
diff --git a/e2e-tests/pages/insurance/account/suspended/emailSent.js b/e2e-tests/pages/insurance/account/suspended/emailSent.js
@@ -1,7 +1,8 @@
 const emailSentPage = {
   weSentLinkTo: () => cy.get('[data-cy="we-sent-link-to"]'),
   checkYourEmail: () => cy.get('[data-cy="check-your-email"]'),
-  email: () => cy.get('[data-cy="email"]'),
+  emailPrefix: () => cy.get('[data-cy="email-prefix"]'),
+  emailLink: () => cy.get('[data-cy="email-link"]'),
   emailOutro: () => cy.get('[data-cy="email-outro"]'),
 };
 

diff --git a/e2e-tests/quote/cypress/e2e/journeys/quote/contact-us.spec.js b/e2e-tests/quote/cypress/e2e/journeys/quote/contact-us.spec.js
@@ -7,7 +7,12 @@ const { generalEnquiries, applicationEnquiries } = contactUsPage;
 
 const CONTENT_STRINGS = PAGES.CONTACT_US_PAGE;
 
-const { GENERAL_ENQUIRIES, APPLICATION_ENQUIRES, CONTACT_DETAILS, QUOTE_REFERENCE_NUMBER } = CONTENT_STRINGS;
+const {
+  GENERAL_ENQUIRIES,
+  APPLICATION_ENQUIRES,
+  CONTACT_DETAILS: { EMAIL },
+  QUOTE_REFERENCE_NUMBER,
+} = CONTENT_STRINGS;
 
 const baseUrl = Cypress.config('baseUrl');
 
@@ -42,19 +47,39 @@ context('Contact us page - Quote', () => {
     cy.checkText(contactUsPage.whoToContactText(), CONTENT_STRINGS.WHO_TO_CONTACT);
   });
 
-  it('renders a `general enquiries` section', () => {
-    cy.checkText(generalEnquiries.heading(), GENERAL_ENQUIRIES.HEADING);
+  describe('`application enquiries` section', () => {
+    it('renders a heading', () => {
+      cy.checkText(generalEnquiries.heading(), GENERAL_ENQUIRIES.HEADING);
+    });
 
-    cy.checkText(generalEnquiries.email(), `${CONTACT_DETAILS.EMAIL.PREFIX}: ${CONTACT_DETAILS.EMAIL.VALUE}`);
+    it('renders `email prefix` copy', () => {
+      cy.checkText(generalEnquiries.emailPrefix(), EMAIL.PREFIX);
+    });
 
-    cy.checkText(generalEnquiries.quoteReferenceNumber(), QUOTE_REFERENCE_NUMBER);
+    it('renders an email link', () => {
+      cy.checkLink(generalEnquiries.emailLink(), EMAIL.VALUE, EMAIL.TEXT);
+    });
+
+    it('renders a `quote reference number` link', () => {
+      cy.checkText(generalEnquiries.quoteReferenceNumber(), QUOTE_REFERENCE_NUMBER);
+    });
   });
 
-  it('renders an `application enquiries` section', () => {
-    cy.checkText(applicationEnquiries.heading(), APPLICATION_ENQUIRES.HEADING);
+  describe('`application enquiries` section', () => {
+    it('renders a heading', () => {
+      cy.checkText(applicationEnquiries.heading(), APPLICATION_ENQUIRES.HEADING);
+    });
 
-    cy.checkText(applicationEnquiries.email(), `${CONTACT_DETAILS.EMAIL.PREFIX}: ${CONTACT_DETAILS.EMAIL.VALUE}`);
+    it('renders `email prefix` copy', () => {
+      cy.checkText(applicationEnquiries.emailPrefix(), EMAIL.PREFIX);
+    });
 
-    cy.checkText(applicationEnquiries.quoteReferenceNumber(), QUOTE_REFERENCE_NUMBER);
+    it('renders an email link', () => {
+      cy.checkLink(applicationEnquiries.emailLink(), EMAIL.VALUE, EMAIL.TEXT);
+    });
+
+    it('renders a `quote reference number` link', () => {
+      cy.checkText(applicationEnquiries.quoteReferenceNumber(), QUOTE_REFERENCE_NUMBER);
+    });
   });
 });
diff --git a/src/ui/server/content-strings/contact/index.ts b/src/ui/server/content-strings/contact/index.ts
@@ -3,6 +3,7 @@ import { UKEF_CONTACT_DETAILS } from '../../constants';
 export const CONTACT_DETAILS = {
   EMAIL: {
     PREFIX: 'Email',
-    VALUE: UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT,
+    TEXT: UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT,
+    VALUE: `mailto:${UKEF_CONTACT_DETAILS.EMAIL.CREDIT_INSURANCE_SUPPORT}`,
   },
 };
diff --git a/src/ui/templates/contact-us.njk b/src/ui/templates/contact-us.njk
@@ -20,18 +20,27 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters-from-desktop">
 
-      <p data-cy="who-to-contact">{{ CONTENT_STRINGS.WHO_TO_CONTACT }}</p>
+      <p class="govuk-body" data-cy="who-to-contact">{{ CONTENT_STRINGS.WHO_TO_CONTACT }}</p>
 
       <h2 class="govuk-heading-m govuk-!-margin-top-9" data-cy="general-enquiries-heading">{{ CONTENT_STRINGS.GENERAL_ENQUIRIES.HEADING }}</h2>
 
-      <p data-cy="general-enquiries-email">{{ CONTENT_STRINGS.APPLICATION_ENQUIRES.EMAIL.PREFIX }}: {{ CONTENT_STRINGS.APPLICATION_ENQUIRES.EMAIL.VALUE }}</p>
+      <p class="govuk-body" data-cy="general-enquiries-email">
+        <span data-cy="email-prefix">{{ CONTENT_STRINGS.GENERAL_ENQUIRIES.EMAIL.PREFIX }} </span>
+
+        <a class="govuk-link" href="{{ CONTENT_STRINGS.GENERAL_ENQUIRIES.EMAIL.VALUE }}" data-cy="email-link">{{ CONTENT_STRINGS.GENERAL_ENQUIRIES.EMAIL.TEXT }}</a>
+      </p>
 
       <p data-cy="general-enquiries-quote-reference-number">{{ CONTENT_STRINGS.QUOTE_REFERENCE_NUMBER }}</p>
 
       <h2 class="govuk-heading-m govuk-!-margin-top-9" data-cy="application-enquiries-heading">{{ CONTENT_STRINGS.APPLICATION_ENQUIRES.HEADING }}</h2>
 
-      <p data-cy="application-enquiries-email">{{ CONTENT_STRINGS.APPLICATION_ENQUIRES.EMAIL.PREFIX }}: {{ CONTENT_STRINGS.APPLICATION_ENQUIRES.EMAIL.VALUE }}</p>
-      <p data-cy="application-enquiries-quote-reference-number">{{ CONTENT_STRINGS.QUOTE_REFERENCE_NUMBER }}</p>
+      <p class="govuk-body" data-cy="application-enquiries-email">
+        <span data-cy="email-prefix">{{ CONTENT_STRINGS.APPLICATION_ENQUIRES.EMAIL.PREFIX }} </span>
+
+        <a class="govuk-link" href="{{ CONTENT_STRINGS.APPLICATION_ENQUIRES.EMAIL.VALUE }}" data-cy="email-link">{{ CONTENT_STRINGS.APPLICATION_ENQUIRES.EMAIL.TEXT }}</a>
+      </p>
+
+      <p class="govuk-body" data-cy="application-enquiries-quote-reference-number">{{ CONTENT_STRINGS.QUOTE_REFERENCE_NUMBER }}</p>
     </div>
   </div>
 

diff --git a/src/ui/templates/insurance/account/manage.njk b/src/ui/templates/insurance/account/manage.njk
@@ -23,7 +23,9 @@
       <p class="govuk-body">
         <span data-cy="{{ DATA_CY.INTRO }}">{{ CONTENT_STRINGS.INTRO }}</span>
 
-        <span data-cy="email">{{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.PREFIX }} {{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.VALUE }}</span>
+        <span data-cy="email-prefix">{{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.PREFIX }} </span>
+
+        <a class="govuk-link" href="{{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.VALUE }}" data-cy="email-link">{{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.TEXT }}</a>
       </p>
 
     </div>

diff --git a/src/ui/templates/insurance/account/suspended/email-sent.njk b/src/ui/templates/insurance/account/suspended/email-sent.njk
@@ -25,7 +25,10 @@
       <p data-cy="check-your-email">{{ CONTENT_STRINGS.CHECK_YOUR_EMAIL }}</p>
 
       <p>
-        <span data-cy="email">{{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.PREFIX }} {{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.VALUE }}</span>
+        <span data-cy="email-prefix">{{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.PREFIX }} </span>
+
+        <a class="govuk-link" href="{{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.VALUE }}" data-cy="email-link">{{ CONTENT_STRINGS.CONTACT_DETAILS.EMAIL.TEXT }}</a>
+
         <span data-cy="email-outro">{{ CONTENT_STRINGS.CONTACT_DETAILS.OUTRO }}</span>
       </p>