fix(EMS-3945): policy - total contract value - credit limit hint

UK-Export-Finance · Oct 17, 2024 · 9d438be · 9d438be
1 parent d78ae51
commit 9d438be
Show file tree

Hide file tree

Showing 13 changed files with 37 additions and 34 deletions.
diff --git a/e2e-tests/content-strings/fields/insurance/policy/index.js b/e2e-tests/content-strings/fields/insurance/policy/index.js
@@ -104,7 +104,10 @@ export const POLICY_FIELDS = {
       },
       [CONTRACT_POLICY.SINGLE.REQUESTED_CREDIT_LIMIT]: {
         LABEL: 'What credit limit do you require?',
-        HINT: 'For example, your total contract maybe £250,000 but the amount you want to insure is £100,000.',
+        HINT: {
+          INTRO: 'For example, your total contract maybe £250,000 but the amount you want to insure is £100,000.',
+          OUTRO: 'Enter a whole number. Do not enter decimals.',
+        },
         SUMMARY: {
           TITLE: 'Credit limit',
           FORM_TITLE: POLICY_FORM_TITLES.CONTRACT_POLICY,

diff --git a/...ress/e2e/journeys/export-contract/about-goods-or-services/about-goods-or-services.spec.js b/...ress/e2e/journeys/export-contract/about-goods-or-services/about-goods-or-services.spec.js
@@ -1,4 +1,4 @@
-import { headingCaption, yesRadio, noRadio, autoCompleteField } from '../../../../../../pages/shared';
+import { autoCompleteField, field as fieldSelector, headingCaption, yesRadio, noRadio } from '../../../../../../pages/shared';
 import { aboutGoodsOrServicesPage } from '../../../../../../pages/insurance/export-contract';
 import { PAGES } from '../../../../../../content-strings';
 import { EXPORT_CONTRACT_FIELDS as FIELDS } from '../../../../../../content-strings/fields/insurance/export-contract';
@@ -72,20 +72,20 @@ context(
         const fieldId = DESCRIPTION;
         const field = aboutGoodsOrServicesPage[fieldId];
 
-        const fieldStrings = FIELDS.ABOUT_GOODS_OR_SERVICES[fieldId];
+        const { HINT, LABEL, MAXIMUM } = FIELDS.ABOUT_GOODS_OR_SERVICES[fieldId];
 
-        cy.checkText(field.hint.intro(), fieldStrings.HINT.INTRO);
+        cy.checkText(fieldSelector(fieldId).hintIntro(), HINT.INTRO);
 
-        cy.checkText(field.hint.list.item1(), fieldStrings.HINT.LIST[0]);
-        cy.checkText(field.hint.list.item2(), fieldStrings.HINT.LIST[1]);
-        cy.checkText(field.hint.list.item3(), fieldStrings.HINT.LIST[2]);
+        cy.checkText(field.hint.list.item1(), HINT.LIST[0]);
+        cy.checkText(field.hint.list.item2(), HINT.LIST[1]);
+        cy.checkText(field.hint.list.item3(), HINT.LIST[2]);
 
-        cy.checkText(field.hint.outro(), fieldStrings.HINT.OUTRO);
+        cy.checkText(fieldSelector(fieldId).hintOutro(), HINT.OUTRO);
 
         cy.assertTextareaRendering({
           fieldId,
-          expectedLabel: fieldStrings.LABEL,
-          maximumCharacters: fieldStrings.MAXIMUM,
+          expectedLabel: LABEL,
+          maximumCharacters: MAXIMUM,
         });
       });
 

diff --git a/.../cypress/e2e/journeys/export-contract/how-will-you-get-paid/how-will-you-get-paid.spec.js b/.../cypress/e2e/journeys/export-contract/how-will-you-get-paid/how-will-you-get-paid.spec.js
@@ -1,4 +1,4 @@
-import { headingCaption } from '../../../../../../pages/shared';
+import { field as fieldSelector, headingCaption } from '../../../../../../pages/shared';
 import { howWillYouGetPaidPage } from '../../../../../../pages/insurance/export-contract';
 import { EXPECTED_MULTI_LINE_STRING, MAXIMUM_CHARACTERS } from '../../../../../../constants';
 import { ERROR_MESSAGES, PAGES } from '../../../../../../content-strings';
@@ -73,13 +73,13 @@ context(
       it(`renders ${FIELD_ID} hint and textarea`, () => {
         const { HINT } = FIELD_STRINGS.HOW_WILL_YOU_GET_PAID[FIELD_ID];
 
-        cy.checkText(field.hint.intro(), HINT.INTRO);
+        cy.checkText(fieldSelector(FIELD_ID).hintIntro(), HINT.INTRO);
 
         cy.checkText(field.hint.list.item1(), HINT.LIST[0]);
         cy.checkText(field.hint.list.item2(), HINT.LIST[1]);
         cy.checkText(field.hint.list.item3(), HINT.LIST[2]);
 
-        cy.checkText(field.hint.outro(), HINT.OUTRO);
+        cy.checkText(fieldSelector(FIELD_ID).hintOutro(), HINT.OUTRO);
 
         cy.assertTextareaRendering({
           fieldId: FIELD_ID,

diff --git a/e2e-tests/insurance/cypress/e2e/journeys/policy/loss-payee/loss-payee.spec.js b/e2e-tests/insurance/cypress/e2e/journeys/policy/loss-payee/loss-payee.spec.js
@@ -1,6 +1,5 @@
 import partials from '../../../../../../partials';
 import { field as fieldSelector, noRadio, noRadioInput, yesRadio } from '../../../../../../pages/shared';
-import { lossPayeePage } from '../../../../../../pages/insurance/policy';
 import { ERROR_MESSAGES, PAGES } from '../../../../../../content-strings';
 import { FIELD_VALUES } from '../../../../../../constants';
 import { INSURANCE_ROUTES } from '../../../../../../constants/routes/insurance';
@@ -79,8 +78,8 @@ context(
           },
         } = FIELD_STRINGS;
 
-        cy.checkText(lossPayeePage.radioHint(FIELD_ID).intro(), INTRO);
-        cy.checkText(lossPayeePage.radioHint(FIELD_ID).outro(), OUTRO);
+        cy.checkText(fieldSelector(FIELD_ID).hintIntro(), INTRO);
+        cy.checkText(fieldSelector(FIELD_ID).hintOutro(), OUTRO);
       });
 
       it('renders a `no` radio button', () => {

diff --git a/...-contract-policy/total-contract-value/single-contract-policy-total-contract-value.spec.js b/...-contract-policy/total-contract-value/single-contract-policy-total-contract-value.spec.js
@@ -80,7 +80,8 @@ context(
         const fieldId = REQUESTED_CREDIT_LIMIT;
         const field = fieldSelector(fieldId);
 
-        cy.checkText(field.hint(), FIELDS.CONTRACT_POLICY.SINGLE[fieldId].HINT);
+        cy.checkText(field.hintIntro(), FIELDS.CONTRACT_POLICY.SINGLE[fieldId].HINT.INTRO);
+        cy.checkText(field.hintOutro(), FIELDS.CONTRACT_POLICY.SINGLE[fieldId].HINT.OUTRO);
 
         cy.checkText(field.prefix(), SYMBOLS.GBP);
 

diff --git a/e2e-tests/pages/insurance/export-contract/aboutGoodsOrServices.js b/e2e-tests/pages/insurance/export-contract/aboutGoodsOrServices.js
@@ -11,13 +11,11 @@ const aboutGoodsOrServices = {
   [DESCRIPTION]: {
     ...field(DESCRIPTION),
     hint: {
-      intro: () => cy.get(`[data-cy="${DESCRIPTION}-hint-intro"]`),
       list: {
         item1: () => cy.get(`[data-cy="${DESCRIPTION}-hint-list-item-1"]`),
         item2: () => cy.get(`[data-cy="${DESCRIPTION}-hint-list-item-2"]`),
         item3: () => cy.get(`[data-cy="${DESCRIPTION}-hint-list-item-3"]`),
       },
-      outro: () => cy.get(`[data-cy="${DESCRIPTION}-hint-outro"]`),
     },
   },
 };

diff --git a/e2e-tests/pages/insurance/export-contract/howWillYouGetPaid.js b/e2e-tests/pages/insurance/export-contract/howWillYouGetPaid.js
@@ -14,13 +14,11 @@ const howWillYouGetPaid = {
     ...field,
     input: field.textarea,
     hint: {
-      intro: () => cy.get(`[data-cy="${PAYMENT_TERMS_DESCRIPTION}-hint-intro"]`),
       list: {
         item1: () => cy.get(`[data-cy="${PAYMENT_TERMS_DESCRIPTION}-hint-list-item-1"]`),
         item2: () => cy.get(`[data-cy="${PAYMENT_TERMS_DESCRIPTION}-hint-list-item-2"]`),
         item3: () => cy.get(`[data-cy="${PAYMENT_TERMS_DESCRIPTION}-hint-list-item-3"]`),
       },
-      outro: () => cy.get(`[data-cy="${PAYMENT_TERMS_DESCRIPTION}-hint-outro"]`),
     },
   },
 };

diff --git a/e2e-tests/pages/insurance/policy/index.js b/e2e-tests/pages/insurance/policy/index.js
@@ -1,7 +1,6 @@
 import brokerPage from './broker';
 import brokerConfirmAddressPage from './brokerConfirmAddress';
-import lossPayeePage from './lossPayee';
 import multipleContractPolicyExportValuePage from './multipleContractPolicyExportValue';
 import typeOfPolicyPage from './typeOfPolicy';
 
-export { brokerPage, brokerConfirmAddressPage, lossPayeePage, multipleContractPolicyExportValuePage, typeOfPolicyPage };
+export { brokerPage, brokerConfirmAddressPage, multipleContractPolicyExportValuePage, typeOfPolicyPage };
diff --git a/e2e-tests/pages/insurance/policy/lossPayee.js b/e2e-tests/pages/insurance/policy/lossPayee.js
diff --git a/e2e-tests/pages/shared/field.js b/e2e-tests/pages/shared/field.js
@@ -3,6 +3,8 @@ const field = (id) => ({
   legend: () => cy.get(`[data-cy="${id}-legend`),
   heading: () => cy.get(`[data-cy="${id}-heading"]`),
   hint: () => cy.get(`[data-cy="${id}-hint"]`),
+  hintIntro: () => cy.get(`[data-cy="${id}-hint-intro"]`),
+  hintOutro: () => cy.get(`[data-cy="${id}-hint-outro"]`),
   input: () => cy.get(`[data-cy="${id}-input"]`),
   textarea: () => cy.get(`[data-cy="${id}"]`),
   inputOption: () => cy.get(`[data-cy="${id}-input"]`).find('option'),

diff --git a/src/api/content-strings/fields/insurance/policy/index.ts b/src/api/content-strings/fields/insurance/policy/index.ts
@@ -104,7 +104,10 @@ export const POLICY_FIELDS = {
       },
       [CONTRACT_POLICY.SINGLE.REQUESTED_CREDIT_LIMIT]: {
         LABEL: 'What credit limit do you require?',
-        HINT: 'For example, your total contract maybe £250,000 but the amount you want to insure is £100,000.',
+        HINT: {
+          INTRO: 'For example, your total contract maybe £250,000 but the amount you want to insure is £100,000.',
+          OUTRO: 'Enter a whole number. Do not enter decimals.',
+        },
         SUMMARY: {
           TITLE: 'Credit limit',
           FORM_TITLE: POLICY_FORM_TITLES.CONTRACT_POLICY,

diff --git a/src/ui/server/content-strings/fields/insurance/policy/index.ts b/src/ui/server/content-strings/fields/insurance/policy/index.ts
@@ -104,7 +104,10 @@ export const POLICY_FIELDS = {
       },
       [CONTRACT_POLICY.SINGLE.REQUESTED_CREDIT_LIMIT]: {
         LABEL: 'What credit limit do you require?',
-        HINT: 'For example, your total contract maybe £250,000 but the amount you want to insure is £100,000.',
+        HINT: {
+          INTRO: 'For example, your total contract maybe £250,000 but the amount you want to insure is £100,000.',
+          OUTRO: 'Enter a whole number. Do not enter decimals.',
+        },
         SUMMARY: {
           TITLE: 'Credit limit',
           FORM_TITLE: POLICY_FORM_TITLES.CONTRACT_POLICY,

diff --git a/src/ui/templates/insurance/policy/single-contract-policy-total-contract-value.njk b/src/ui/templates/insurance/policy/single-contract-policy-total-contract-value.njk
@@ -51,10 +51,15 @@
           validationError: validationErrors.errorList[FIELDS.TOTAL_CONTRACT_VALUE.ID]
         }) }}
 
+        {% set hintHtml %}
+          <p class="govuk-hint" data-cy="{{ FIELDS.REQUESTED_CREDIT_LIMIT.ID }}-hint-intro">{{ FIELDS.REQUESTED_CREDIT_LIMIT.HINT.INTRO }}</p>
+          <p class="govuk-hint" data-cy="{{ FIELDS.REQUESTED_CREDIT_LIMIT.ID }}-hint-outro">{{ FIELDS.REQUESTED_CREDIT_LIMIT.HINT.OUTRO }}</p>  
+        {% endset %}
+
         {{ monetaryValueInput.render({
           fieldId: FIELDS.REQUESTED_CREDIT_LIMIT.ID,
           label: FIELDS.REQUESTED_CREDIT_LIMIT.LABEL,
-          hintText: FIELDS.REQUESTED_CREDIT_LIMIT.HINT,
+          hintHtml: hintHtml,
           currencyPrefixSymbol: CURRENCY_PREFIX_SYMBOL,
           submittedValue: submittedValues[FIELDS.REQUESTED_CREDIT_LIMIT.ID] or application.policy[FIELDS.REQUESTED_CREDIT_LIMIT.ID],
           validationError: validationErrors.errorList[FIELDS.REQUESTED_CREDIT_LIMIT.ID]