feat(EMS-304): update tell us about your policy page - credit period …

…hint text
UK-Export-Finance · Sep 12, 2022 · 4b53c9c · 4b53c9c
1 parent a47b682
commit 4b53c9c
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 8 deletions.
diff --git a/e2e-tests/content-strings/fields.js b/e2e-tests/content-strings/fields.js
@@ -50,7 +50,18 @@ const FIELDS = {
   },
   [FIELD_IDS.CREDIT_PERIOD]: {
     LABEL: 'What credit period do you have with your buyer?',
-    HINT: 'To get a quote, you need to enter a credit period of 1 or 2 months, whichever is closest to your current credit period length.',
+    HINT: [
+      {
+        text: 'You can get an online quote for credit periods up to 2 months.  If you need a credit period of over 2 months',
+      },
+      {
+        text: 'fill in this form',
+        href: LINKS.EXTERNAL.NBI_FORM,
+      },
+      {
+        text: 'and email it to UKEF.',
+      },
+    ],
     SUMMARY: {
       TITLE: 'Credit period',
     },

diff --git a/...ress/e2e/journeys/quote/tell-us-about-your-policy/tell-us-about-your-multi-policy.spec.js b/...ress/e2e/journeys/quote/tell-us-about-your-policy/tell-us-about-your-multi-policy.spec.js
@@ -179,10 +179,19 @@ context('Tell us about your multi policy page - as an exporter, I want to provid
       });
 
       field.hint().should('exist');
+
+      const { HINT } = FIELDS[fieldId];
+
       field.hint().invoke('text').then((text) => {
-        expect(text.trim()).equal(FIELDS[fieldId].HINT);
+        const expectedHintText = `${HINT[0].text} ${HINT[1].text} ${HINT[2].text}`;
+
+        expect(text.trim()).equal(expectedHintText);
       });
 
+      const expectedHintHref = HINT[1].href;
+
+      field.hintLink().should('have.attr', 'href', expectedHintHref);
+
       field.input().should('exist');
     });
 

diff --git a/e2e-tests/cypress/e2e/pages/quote/tellUsAboutYourPolicy.js b/e2e-tests/cypress/e2e/pages/quote/tellUsAboutYourPolicy.js
@@ -35,6 +35,7 @@ const tellUsAboutYourPolicyPage = {
     label: () => cy.get(`[data-cy="${FIELD_IDS.CREDIT_PERIOD}-label"]`),
     labelText: () => cy.get(`[data-cy="${FIELD_IDS.CREDIT_PERIOD}-label"]`),
     hint: () => cy.get(`[data-cy="${FIELD_IDS.CREDIT_PERIOD}-hint"]`),
+    hintLink: () => cy.get(`[data-cy="${FIELD_IDS.CREDIT_PERIOD}-hint-link"]`),
     input: () => cy.get(`[data-cy="${FIELD_IDS.CREDIT_PERIOD}-input"]`),
     errorMessage: () => cy.get(`[data-cy="${FIELD_IDS.CREDIT_PERIOD}-error-message"]`),
   },

diff --git a/src/ui/server/content-strings/fields.ts b/src/ui/server/content-strings/fields.ts
@@ -50,7 +50,18 @@ export const FIELDS = {
   },
   [FIELD_IDS.CREDIT_PERIOD]: {
     LABEL: 'What credit period do you have with your buyer?',
-    HINT: 'To get a quote, you need to enter a credit period of 1 or 2 months, whichever is closest to your current credit period length.',
+    HINT: [
+      {
+        text: 'You can get an online quote for credit periods up to 2 months.  If you need a credit period of over 2 months',
+      },
+      {
+        text: 'fill in this form',
+        href: LINKS.EXTERNAL.NBI_FORM,
+      },
+      {
+        text: 'and email it to UKEF.',
+      },
+    ],
     SUMMARY: {
       TITLE: 'Credit period',
     },

diff --git a/src/ui/templates/quote/policy-type.njk b/src/ui/templates/quote/policy-type.njk
@@ -6,7 +6,6 @@
 {% import '../components/details-text.njk' as detailsText %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
-{% import '../components/details-text.njk' as detailsText %}
 
 {% block pageTitle %}
   {{ CONTENT_STRINGS.PAGE_TITLE }}

diff --git a/src/ui/templates/quote/tell-us-about-your-policy.njk b/src/ui/templates/quote/tell-us-about-your-policy.njk
@@ -200,14 +200,15 @@
             }
           }) }}
 
+        {% set creditPeriodHintHtml %}
+          <p data-cy="{{ FIELDS.CREDIT_PERIOD.ID }}-hint">{{ FIELDS.CREDIT_PERIOD.HINT[0].text }} <a class="govuk-link" href="{{ FIELDS.CREDIT_PERIOD.HINT[1].href }}" data-cy="{{ FIELDS.CREDIT_PERIOD.ID }}-hint-link">{{ FIELDS.CREDIT_PERIOD.HINT[1].text }}</a> {{ FIELDS.CREDIT_PERIOD.HINT[2].text }}</p>
+        {% endset %}
+
           <div class="govuk-grid-row">
             <div class="govuk-grid-column-two-thirds-from-desktop">
               {{ govukHint({
                 id: FIELDS.CREDIT_PERIOD.ID + "-hint",
-                text: FIELDS.CREDIT_PERIOD.HINT,
-                attributes: {
-                  "data-cy": FIELDS.CREDIT_PERIOD.ID + "-hint"
-                }
+                html: creditPeriodHintHtml
               }) }}
             </div>
           </div>