fix(EMS-2236): Application - update credit period hint text (#1313)

* fix(EMS-2236): application - update credit period hint text * fix(EMS-2236): application - update credit period with buyer hint text to be a list * fix(EMS-2236): application - update credit period with buyer hint text to be a list
UK-Export-Finance · Nov 10, 2023 · d8c1577 · d8c1577
1 parent 801f44b
commit d8c1577
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 28 deletions.
diff --git a/e2e-tests/commands/insurance/check-credit-period-with-buyer-input.js b/e2e-tests/commands/insurance/check-credit-period-with-buyer-input.js
@@ -0,0 +1,26 @@
+import insurancePartials from '../../partials/insurance';
+import { POLICY_FIELDS as FIELDS } from '../../content-strings/fields/insurance/policy';
+import { SHARED_CONTRACT_POLICY } from '../../constants/field-ids/insurance/policy';
+
+const { CREDIT_PERIOD_WITH_BUYER } = SHARED_CONTRACT_POLICY;
+
+/**
+ * checkCreditPeriodWithBuyerInput
+ * Check "credit period with buyer" label, hint and input.
+ */
+const checkCreditPeriodWithBuyerInput = () => {
+  const fieldId = CREDIT_PERIOD_WITH_BUYER;
+  const field = insurancePartials.creditPeriodWithBuyerFormField;
+
+  cy.checkText(field.label(), FIELDS.CONTRACT_POLICY[fieldId].LABEL);
+
+  cy.checkText(field.hint.intro(), FIELDS.CONTRACT_POLICY[fieldId].HINT.INTRO);
+  cy.checkText(field.hint.listItem(1), FIELDS.CONTRACT_POLICY[fieldId].HINT.LIST[0]);
+  cy.checkText(field.hint.listItem(2), FIELDS.CONTRACT_POLICY[fieldId].HINT.LIST[1]);
+  cy.checkText(field.hint.listItem(3), FIELDS.CONTRACT_POLICY[fieldId].HINT.LIST[2]);
+  cy.checkText(field.hint.listItem(4), FIELDS.CONTRACT_POLICY[fieldId].HINT.LIST[3]);
+
+  field.input().should('exist');
+};
+
+export default checkCreditPeriodWithBuyerInput;
diff --git a/e2e-tests/commands/insurance/check-policy-currency-code-input.js b/e2e-tests/commands/insurance/check-policy-currency-code-input.js
@@ -6,6 +6,10 @@ import { SHARED_CONTRACT_POLICY } from '../../constants/field-ids/insurance/poli
 
 const { POLICY_CURRENCY_CODE } = SHARED_CONTRACT_POLICY;
 
+/**
+ * checkPolicyCurrencyCodeInput
+ * Check "policy currency code" label, hint and input.
+ */
 const checkPolicyCurrencyCodeInput = () => {
   const fieldId = POLICY_CURRENCY_CODE;
   const field = insurancePartials.policyCurrencyCodeFormField;

diff --git a/e2e-tests/content-strings/fields/insurance/policy/index.js b/e2e-tests/content-strings/fields/insurance/policy/index.js
@@ -57,7 +57,15 @@ export const POLICY_FIELDS = {
     },
     [CONTRACT_POLICY.CREDIT_PERIOD_WITH_BUYER]: {
       LABEL: 'What credit period do you have with your buyer?',
-      HINT: 'For example, 60 days after dispatching goods from your premises or 90 days after invoicing.',
+      HINT: {
+        INTRO: 'For example:',
+        LIST: [
+          '90 days after invoicing your buyer',
+          '60 days after dispatching goods from your premises',
+          '15 days after goods arrive at the destination port',
+          'some other terms of payment.',
+        ],
+      },
       MAXIMUM: 1000,
       SUMMARY: {
         TITLE: 'Credit period',

diff --git a/...nce/cypress/e2e/journeys/policy/multiple-contract-policy/multiple-contract-policy.spec.js b/...nce/cypress/e2e/journeys/policy/multiple-contract-policy/multiple-contract-policy.spec.js
@@ -18,6 +18,7 @@ import { INSURANCE_FIELD_IDS } from '../../../../../../constants/field-ids/insur
 import { INSURANCE_ROUTES } from '../../../../../../constants/routes/insurance';
 import application from '../../../../../../fixtures/application';
 import checkPolicyCurrencyCodeInput from '../../../../../../commands/insurance/check-policy-currency-code-input';
+import checkCreditPeriodWithBuyerInput from '../../../../../../commands/insurance/check-credit-period-with-buyer-input';
 
 const { taskList, policyCurrencyCodeFormField } = partials.insurancePartials;
 
@@ -167,15 +168,8 @@ context('Insurance - Policy - Multiple contract policy page - As an exporter, I
       field.input().should('exist');
     });
 
-    it('renders `buyer credit period` label, hint and input', () => {
-      const fieldId = CREDIT_PERIOD_WITH_BUYER;
-      const field = fieldSelector(fieldId);
-
-      cy.checkText(field.label(), CONTRACT_POLICY[fieldId].LABEL);
-
-      cy.checkText(field.hint(), CONTRACT_POLICY[fieldId].HINT);
-
-      field.input().should('exist');
+    it('renders `credit period with buyer` label, hint and input', () => {
+      checkCreditPeriodWithBuyerInput();
     });
 
     it('renders `currency` label, hint and input with supported currencies ordered alphabetically', () => {

diff --git a/...surance/cypress/e2e/journeys/policy/single-contract-policy/single-contract-policy.spec.js b/...surance/cypress/e2e/journeys/policy/single-contract-policy/single-contract-policy.spec.js
@@ -20,6 +20,7 @@ import {
 } from '../../../../../../constants';
 import application from '../../../../../../fixtures/application';
 import checkPolicyCurrencyCodeInput from '../../../../../../commands/insurance/check-policy-currency-code-input';
+import checkCreditPeriodWithBuyerInput from '../../../../../../commands/insurance/check-credit-period-with-buyer-input';
 
 const { taskList, policyCurrencyCodeFormField } = partials.insurancePartials;
 
@@ -153,15 +154,8 @@ context('Insurance - Policy - Single contract policy page - As an exporter, I wa
       field.input().should('exist');
     });
 
-    it('renders `buyer credit period` label, hint and input', () => {
-      const fieldId = CREDIT_PERIOD_WITH_BUYER;
-      const field = fieldSelector(fieldId);
-
-      cy.checkText(field.label(), FIELDS.CONTRACT_POLICY[fieldId].LABEL);
-
-      cy.checkText(field.hint(), FIELDS.CONTRACT_POLICY[fieldId].HINT);
-
-      field.input().should('exist');
+    it('renders `credit period with buyer` label, hint and input', () => {
+      checkCreditPeriodWithBuyerInput();
     });
 
     describe('currency', () => {

diff --git a/e2e-tests/partials/insurance/creditPeriodWithBuyerFormField.js b/e2e-tests/partials/insurance/creditPeriodWithBuyerFormField.js
@@ -0,0 +1,14 @@
+import { field } from '../../pages/shared';
+import { SHARED_CONTRACT_POLICY } from '../../constants/field-ids/insurance/policy';
+
+const { CREDIT_PERIOD_WITH_BUYER: FIELD_ID } = SHARED_CONTRACT_POLICY;
+
+const creditPeriodWithBuyerFormField = {
+  ...field(FIELD_ID),
+  hint: {
+    intro: () => cy.get(`[data-cy="${FIELD_ID}-hint-intro"]`),
+    listItem: (index) => cy.get(`[data-cy="${FIELD_ID}-hint-list-item-${index}"]`),
+  },
+};
+
+export default creditPeriodWithBuyerFormField;
diff --git a/e2e-tests/partials/insurance/index.js b/e2e-tests/partials/insurance/index.js
@@ -1,10 +1,12 @@
 import passwordField from './passwordField';
 import taskList from './taskList';
+import creditPeriodWithBuyerFormField from './creditPeriodWithBuyerFormField';
 import policyCurrencyCodeFormField from './policyCurrencyCodeFormField';
 
 const partials = {
   passwordField,
   taskList,
+  creditPeriodWithBuyerFormField,
   policyCurrencyCodeFormField,
 };
 

diff --git a/src/ui/server/content-strings/fields/insurance/policy/index.ts b/src/ui/server/content-strings/fields/insurance/policy/index.ts
@@ -50,7 +50,15 @@ export const POLICY_FIELDS = {
     },
     [CONTRACT_POLICY.CREDIT_PERIOD_WITH_BUYER]: {
       LABEL: 'What credit period do you have with your buyer?',
-      HINT: 'For example, 60 days after dispatching goods from your premises or 90 days after invoicing.',
+      HINT: {
+        INTRO: 'For example:',
+        LIST: [
+          '90 days after invoicing your buyer',
+          '60 days after dispatching goods from your premises',
+          '15 days after goods arrive at the destination port',
+          'some other terms of payment.',
+        ],
+      },
       MAXIMUM: 1000,
       SUMMARY: {
         TITLE: 'Credit period',

diff --git a/src/ui/templates/components/credit-period-with-buyer-hint.njk b/src/ui/templates/components/credit-period-with-buyer-hint.njk
@@ -0,0 +1,14 @@
+{% macro render(params) %}
+
+  {% set ID = params.id %}
+  {% set HINT = params.hint %}
+
+  <p data-cy="{{ ID }}-hint-intro">{{ HINT.INTRO }}</p>
+
+  <ul class="govuk-list govuk-list--bullet">
+    {% for ITEM in HINT.LIST %}
+      <li class="govuk-hint" data-cy="{{ ID }}-hint-list-item-{{ loop.index }}">{{ ITEM }}</li>
+    {% endfor %}
+  </ul>
+
+{% endmacro %}
diff --git a/src/ui/templates/insurance/policy/multiple-contract-policy.njk b/src/ui/templates/insurance/policy/multiple-contract-policy.njk
@@ -8,6 +8,7 @@
 {% from 'govuk/components/button/macro.njk' import govukButton %}
 {% import '../../components/date-input.njk' as dateInput %}
 {% import '../../components/policy-currency-code-hint.njk' as policyCurrencyCodeHint %}
+{% import '../../components/credit-period-with-buyer-hint.njk' as creditPeriodWithBuyerHint %}
 {% import '../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
@@ -173,6 +174,13 @@
           }
         }) }}
 
+        {% set creditPeriodWithBuyerHintHtml %}
+          {{ creditPeriodWithBuyerHint.render({
+            id: FIELDS.CREDIT_PERIOD_WITH_BUYER.ID,
+            hint: FIELDS.CREDIT_PERIOD_WITH_BUYER.HINT
+          }) }}
+        {% endset %}
+
         {{ govukCharacterCount({
           name: FIELDS.CREDIT_PERIOD_WITH_BUYER.ID,
           id: FIELDS.CREDIT_PERIOD_WITH_BUYER.ID,
@@ -185,10 +193,7 @@
             }
           },
           hint: {
-            text: FIELDS.CREDIT_PERIOD_WITH_BUYER.HINT,
-            attributes: {
-              'data-cy': FIELDS.CREDIT_PERIOD_WITH_BUYER.ID + '-hint'
-            }
+            html: creditPeriodWithBuyerHintHtml
           },
           attributes: {
             'data-cy': FIELDS.CREDIT_PERIOD_WITH_BUYER.ID + '-input'

diff --git a/src/ui/templates/insurance/policy/single-contract-policy.njk b/src/ui/templates/insurance/policy/single-contract-policy.njk
@@ -8,6 +8,7 @@
 {% from 'govuk/components/button/macro.njk' import govukButton %}
 {% import '../../components/date-input.njk' as dateInput %}
 {% import '../../components/policy-currency-code-hint.njk' as policyCurrencyCodeHint %}
+{% import '../../components/credit-period-with-buyer-hint.njk' as creditPeriodWithBuyerHint %}
 {% import '../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
@@ -114,6 +115,13 @@
             }
           }
         }) }}
+
+        {% set creditPeriodWithBuyerHintHtml %}
+          {{ creditPeriodWithBuyerHint.render({
+            id: FIELDS.CREDIT_PERIOD_WITH_BUYER.ID,
+            hint: FIELDS.CREDIT_PERIOD_WITH_BUYER.HINT
+          }) }}
+        {% endset %}
 
         {{ govukCharacterCount({
           name: FIELDS.CREDIT_PERIOD_WITH_BUYER.ID,
@@ -126,10 +134,7 @@
             }
           },
           hint: {
-            text: FIELDS.CREDIT_PERIOD_WITH_BUYER.HINT,
-            attributes: {
-              'data-cy': FIELDS.CREDIT_PERIOD_WITH_BUYER.ID + '-hint'
-            }
+            html: creditPeriodWithBuyerHintHtml
           },
           attributes: {
             'data-cy': FIELDS.CREDIT_PERIOD_WITH_BUYER.ID + '-input'