feat(FN-3724): record correction request design iteration

e2e-tests/tfm/cypress/e2e/journeys/utilisation-reports/fee-record-correction/feature-flag-enabled/create-fee-record-correction-form.spec.js

@@ -128,6 +128,26 @@ context('When fee record correction feature flag is enabled', () => {
       });
     });
 
+    context('when user clicks cancel', () => {
+      beforeEach(() => {
+        premiumPaymentsContent.premiumPaymentsTable
+          .checkbox([feeRecordAtToDoStatus.id], feeRecordAtToDoStatus.paymentCurrency, feeRecordAtToDoStatus.status)
+          .click();
+
+        premiumPaymentsContent.createRecordCorrectionRequestButton().click();
+
+        cy.clickCancelButton();
+      });
+
+      it('should redirect to the utilisation report page with the fee record still checked', () => {
+        cy.url().should('eq', relative(`/utilisation-reports/${reportId}?selectedFeeRecordIds=${feeRecordAtToDoStatus.id}`));
+
+        premiumPaymentsContent.premiumPaymentsTable
+          .checkbox([feeRecordAtToDoStatus.id], feeRecordAtToDoStatus.paymentCurrency, feeRecordAtToDoStatus.status)
+          .should('be.checked');
+      });
+    });
+
     it('should let the user enter additional info equal to the character limit containing special characters', () => {
       premiumPaymentsContent.premiumPaymentsTable
         .checkbox([feeRecordAtToDoStatus.id], feeRecordAtToDoStatus.paymentCurrency, feeRecordAtToDoStatus.status)

trade-finance-manager-ui/component-tests/utilisation-reports/record-corrections/check-the-information.component-test.ts

@@ -184,22 +184,20 @@ describe('page', () => {
 
   it('should render cancel button', () => {
     // Arrange
+    const cancelLink = '/utilisation-reports/123/create-record-correction-request/456/cancel';
     const viewModel: RecordCorrectionRequestInformationViewModel = {
       ...aRecordCorrectionRequestInformationViewModel(),
-      reportId,
-      feeRecordId,
+      cancelLinkHref: cancelLink,
     };
 
-    const cancelLink = `/utilisation-reports/${reportId}/create-record-correction-request/${feeRecordId}/cancel`;
-
     // Act
     const wrapper = render(viewModel);
 
     // Assert
     const cancelButtonSelector = '[data-cy="cancel-button"]';
     wrapper.expectElement(cancelButtonSelector).toExist();
     wrapper.expectElement(cancelButtonSelector).toHaveAttribute('value', 'Cancel record correction request');
-    wrapper.expectElement(cancelButtonSelector).hasClass('govuk-button--secondary');
+    wrapper.expectElement(cancelButtonSelector).hasClass('govuk-button--warning');
     wrapper.expectElement(cancelButtonSelector).toHaveAttribute('formaction', cancelLink);
   });
 

trade-finance-manager-ui/component-tests/utilisation-reports/record-corrections/create-record-correction-request.component-test.ts

@@ -208,6 +208,25 @@ describe(page, () => {
     wrapper.expectText('[data-cy="continue-button"]').toRead('Continue');
   });
 
+  it('should render cancel button', () => {
+    // Arrange
+    const cancelLink = '/utilisation-reports/123/create-record-correction-request/456/cancel';
+    const viewModel: CreateRecordCorrectionRequestViewModel = {
+      ...aCreateRecordCorrectionRequestViewModel(),
+      cancelLinkHref: cancelLink,
+    };
+
+    // Act
+    const wrapper = render(viewModel);
+
+    // Assert
+    const cancelButtonSelector = '[data-cy="cancel-button"]';
+    wrapper.expectElement(cancelButtonSelector).toExist();
+    wrapper.expectElement(cancelButtonSelector).toHaveAttribute('value', 'Cancel record correction request');
+    wrapper.expectElement(cancelButtonSelector).hasClass('govuk-button--warning');
+    wrapper.expectElement(cancelButtonSelector).toHaveAttribute('formaction', cancelLink);
+  });
+
   it('should render the main reasons hint', () => {
     // Arrange
     const viewModel = aCreateRecordCorrectionRequestViewModel();

trade-finance-manager-ui/server/controllers/utilisation-reports/record-corrections/check-the-information/index.test.ts

@@ -5,6 +5,7 @@ import { aTfmSessionUser } from '../../../../../test-helpers';
 import { PRIMARY_NAVIGATION_KEYS } from '../../../../constants';
 import { getRecordCorrectionRequestInformation, postRecordCorrectionRequestInformation } from '.';
 import api from '../../../../api';
+import { getRecordCorrectionRequestCancelLinkHref } from '../helpers';
 
 jest.mock('../../../../api');
 
@@ -70,6 +71,7 @@ describe('controllers/utilisation-reports/record-corrections/check-the-informati
           reasonForRecordCorrection: expectedReasons,
           additionalInfo: correctionRequestDetails.additionalInfo,
           contactEmailAddresses: correctionRequestDetails.contactEmailAddresses,
+          cancelLinkHref: getRecordCorrectionRequestCancelLinkHref(reportId, feeRecordId),
         });
       });
     });

trade-finance-manager-ui/server/controllers/utilisation-reports/record-corrections/check-the-information/index.ts

@@ -5,6 +5,7 @@ import { asUserSession } from '../../../../helpers/express-session';
 import { PRIMARY_NAVIGATION_KEYS } from '../../../../constants';
 import api from '../../../../api';
 import { recordCorrectionRequestAlreadySubmitted, isRecordCorrectionRequestReviewResponseType } from '../../helpers';
+import { getRecordCorrectionRequestCancelLinkHref } from '../helpers';
 
 /**
  * Renders the "check the information" page for a record correction request
@@ -58,6 +59,7 @@ export const getRecordCorrectionRequestInformation = async (req: Request, res: R
       reasonForRecordCorrection: mapReasonsToDisplayValues(reasons).join(', '),
       additionalInfo,
       contactEmailAddresses,
+      cancelLinkHref: getRecordCorrectionRequestCancelLinkHref(reportId, feeRecordId),
     };
 
     return res.render('utilisation-reports/record-corrections/check-the-information.njk', checkTheInformationViewModel);

trade-finance-manager-ui/server/controllers/utilisation-reports/record-corrections/create-record-correction-request/index.test.ts

@@ -11,9 +11,10 @@ import {
 import { CreateRecordCorrectionRequestViewModel } from '../../../../types/view-models';
 import { PRIMARY_NAVIGATION_KEYS } from '../../../../constants';
 import { CreateRecordCorrectionRequestFormRequestBody } from './form-helpers';
-import { validateCreateRecordCorrectionRequestFormValues } from './validate-form-values';
+import { getCreateRecordCorrectionRequestFormErrors } from './validate-form-values';
 import api from '../../../../api';
 import { getLinkToPremiumPaymentsTab } from '../../helpers';
+import { getRecordCorrectionRequestCancelLinkHref } from '../helpers';
 
 jest.mock('../../../../api');
 
@@ -71,6 +72,7 @@ describe('controllers/utilisation-reports/record-corrections/create-record-corre
         user,
         activePrimaryNavigation: PRIMARY_NAVIGATION_KEYS.UTILISATION_REPORTS,
         reportId,
+        cancelLinkHref: getRecordCorrectionRequestCancelLinkHref(reportId, feeRecordId),
         formattedReportPeriod: 'January 2024',
         feeRecord: {
           facilityId: '0012345678',
@@ -153,14 +155,14 @@ describe('controllers/utilisation-reports/record-corrections/create-record-corre
         const body = {};
         const { req, res } = getHttpMocks(body);
 
-        const { errors } = validateCreateRecordCorrectionRequestFormValues(body);
+        const errors = getCreateRecordCorrectionRequestFormErrors(body);
 
         // Act
         await postCreateRecordCorrectionRequest(req, res);
 
         // Assert
         expect(res._getRenderView()).toEqual('utilisation-reports/record-corrections/create-record-correction-request.njk');
-        expect(res._getRenderData() as CreateRecordCorrectionRequestViewModel).toEqual({
+        expect(res._getRenderData() as CreateRecordCorrectionRequestViewModel).toEqual<CreateRecordCorrectionRequestViewModel>({
           bank: { name: 'Test Bank' },
           user,
           activePrimaryNavigation: PRIMARY_NAVIGATION_KEYS.UTILISATION_REPORTS,
@@ -173,6 +175,7 @@ describe('controllers/utilisation-reports/record-corrections/create-record-corre
           formValues: { reasons: [] },
           errors,
           backLinkHref: getLinkToPremiumPaymentsTab(reportId, [456]),
+          cancelLinkHref: getRecordCorrectionRequestCancelLinkHref(reportId, feeRecordId),
         });
       });
 

trade-finance-manager-ui/server/controllers/utilisation-reports/record-corrections/create-record-correction-request/index.ts

@@ -8,6 +8,7 @@ import { getLinkToPremiumPaymentsTab } from '../../helpers';
 import api from '../../../../api';
 import { CreateRecordCorrectionRequestFormRequestBody, extractCreateRecordCorrectionRequestFormValues } from './form-helpers';
 import { validateCreateRecordCorrectionRequestFormValues } from './validate-form-values';
+import { getRecordCorrectionRequestCancelLinkHref } from '../helpers';
 
 const createRecordCorrectionRequestTemplate = 'utilisation-reports/record-corrections/create-record-correction-request.njk';
 
@@ -37,6 +38,7 @@ export const getCreateRecordCorrectionRequest = async (req: GetCreateRecordCorre
       user,
       activePrimaryNavigation: PRIMARY_NAVIGATION_KEYS.UTILISATION_REPORTS,
       reportId,
+      cancelLinkHref: getRecordCorrectionRequestCancelLinkHref(reportId, feeRecordId),
       bank: {
         name: feeRecord.bank.name,
       },
@@ -102,6 +104,7 @@ export const postCreateRecordCorrectionRequest = async (req: PostCreateRecordCor
       formValues,
       errors,
       backLinkHref: getLinkToPremiumPaymentsTab(reportId, [Number(feeRecordId)]),
+      cancelLinkHref: getRecordCorrectionRequestCancelLinkHref(reportId, feeRecordId),
     };
 
     return res.render(createRecordCorrectionRequestTemplate, viewModel);

trade-finance-manager-ui/server/controllers/utilisation-reports/record-corrections/helpers/get-record-correction-request-cancel-link-href.test.ts

@@ -0,0 +1,18 @@
+import { getRecordCorrectionRequestCancelLinkHref } from './get-record-correction-request-cancel-link-href';
+
+describe('get-record-correction-request-cancel-link-href', () => {
+  describe('getRecordCorrectionRequestCancelLinkHref', () => {
+    it('should return the correct URL path for canceling a correction request', () => {
+      // Arrange
+      const reportId = '123';
+      const feeRecordId = '456';
+      const expectedPath = '/utilisation-reports/123/create-record-correction-request/456/cancel';
+
+      // Act
+      const result = getRecordCorrectionRequestCancelLinkHref(reportId, feeRecordId);
+
+      // Assert
+      expect(result).toEqual(expectedPath);
+    });
+  });
+});

trade-finance-manager-ui/server/controllers/utilisation-reports/record-corrections/helpers/get-record-correction-request-cancel-link-href.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates the URL for canceling a record correction request
+ * for the fee record of a utilisation report
+ * @param reportId - The ID of the report
+ * @param feeRecordId - The ID of the fee record
+ * @returns The URL path for canceling the correction request
+ */
+export const getRecordCorrectionRequestCancelLinkHref = (reportId: string, feeRecordId: string) =>
+  `/utilisation-reports/${reportId}/create-record-correction-request/${feeRecordId}/cancel`;

trade-finance-manager-ui/server/controllers/utilisation-reports/record-corrections/helpers/index.ts

@@ -0,0 +1 @@
+export * from './get-record-correction-request-cancel-link-href';

trade-finance-manager-ui/server/types/view-models/record-correction/create-record-correction-request-view-model.ts

@@ -15,6 +15,7 @@ export type CreateRecordCorrectionRequestFormValues = {
 
 export type CreateRecordCorrectionRequestViewModel = BaseViewModel & {
   reportId: string;
+  cancelLinkHref: string;
   bank: { name: string };
   formattedReportPeriod: string;
   feeRecord: {

trade-finance-manager-ui/server/types/view-models/record-correction/record-correction-request-information-view-model.ts

@@ -10,4 +10,5 @@ export type RecordCorrectionRequestInformationViewModel = BaseViewModel & {
   reasonForRecordCorrection: string;
   additionalInfo: string;
   contactEmailAddresses: string[];
+  cancelLinkHref: string;
 };

trade-finance-manager-ui/styles/fee-record-summary.scss

@@ -1,7 +1,7 @@
 .fee-record-summary {
   @extend .block-header;
 
-  .govuk-body {
+  .govuk-body-l {
     color: govuk-colour("white");
     margin-bottom: 0;
     line-height: 25px;

trade-finance-manager-ui/templates/utilisation-reports/record-corrections/_macros/fee-record-summary.njk

@@ -7,32 +7,30 @@
     <div class="govuk-grid-row govuk-!-margin-top-3">
       <div class="govuk-grid-column-one-half">
         <div class="govuk-grid-column-one-third">
-          <p class="govuk-body" data-cy="facility-id-label"><strong>Facility ID</strong></p>
+          <p class="govuk-body-l" data-cy="facility-id-label"><strong>Facility ID</strong></p>
         </div>
         <div class="govuk-grid-column-two-thirds">
-          <p class="govuk-body" data-cy="facility-id">{{ facilityId }}</p>
+          <p class="govuk-body-l" data-cy="facility-id">{{ facilityId }}</p>
         </div>
       </div>
-    </div>
 
-    <div class="govuk-grid-row govuk-!-margin-top-3">
       <div class="govuk-grid-column-one-half">
         <div class="govuk-grid-column-one-third">
-          <p class="govuk-body" data-cy="exporter-label"><strong>Exporter</strong></p>
+          <p class="govuk-body-l" data-cy="requested-by-label"><strong>Requested by</strong></p>
         </div>
         <div class="govuk-grid-column-two-thirds">
-          <p class="govuk-body" data-cy="exporter">{{ exporter }}</p>
+          <p class="govuk-body-l" data-cy="requested-by">{{ (user.firstName + " " + user.lastName) }}</p>
         </div>
       </div>
     </div>
 
-    <div class="govuk-grid-row govuk-!-margin-top-3 govuk-!-margin-bottom-3">
+    <div class="govuk-grid-row govuk-!-margin-top-4 govuk-!-margin-bottom-3">
       <div class="govuk-grid-column-one-half">
         <div class="govuk-grid-column-one-third">
-          <p class="govuk-body" data-cy="requested-by-label"><strong>Requested by</strong></p>
+          <p class="govuk-body-l" data-cy="exporter-label"><strong>Exporter</strong></p>
         </div>
         <div class="govuk-grid-column-two-thirds">
-          <p class="govuk-body" data-cy="requested-by">{{ (user.firstName + " " + user.lastName) }}</p>
+          <p class="govuk-body-l" data-cy="exporter">{{ exporter }}</p>
         </div>
       </div>
     </div>

trade-finance-manager-ui/templates/utilisation-reports/record-corrections/check-the-information.njk

@@ -106,8 +106,8 @@
     <form method="post">
       <input type="hidden" name="_csrf" value="{{ csrfToken }}"/>
       <input
-        class="govuk-button govuk-button--secondary"
-        formaction="/utilisation-reports/{{ reportId }}/create-record-correction-request/{{ feeRecordId }}/cancel"
+        class="govuk-button govuk-button--warning"
+        formaction="{{ cancelLinkHref }}"
         value="Cancel record correction request"
         data-module="govuk-button"
         type="submit"

trade-finance-manager-ui/templates/utilisation-reports/record-corrections/create-record-correction-request.njk

@@ -167,6 +167,14 @@
               "data-cy": "continue-button"
             }
           })}}
+
+          <input
+            class="govuk-button govuk-button--warning"
+            formaction="{{ cancelLinkHref}}"
+            value="Cancel record correction request"
+            data-module="govuk-button"
+            type="submit"
+            data-cy="cancel-button"/>
         </div>
       </form>
     </div>

trade-finance-manager-ui/test-helpers/test-data/view-models/record-corrections/create-record-correction-request-view-model.ts

@@ -6,6 +6,7 @@ export const aCreateRecordCorrectionRequestViewModel = (): CreateRecordCorrectio
   user: aTfmSessionUser(),
   activePrimaryNavigation: PRIMARY_NAVIGATION_KEYS.UTILISATION_REPORTS,
   reportId: '123',
+  cancelLinkHref: 'utilisation-reports/correction-request/cancel',
   bank: { name: 'Test bank ' },
   formattedReportPeriod: 'Some reporting period',
   feeRecord: {

trade-finance-manager-ui/test-helpers/test-data/view-models/record-corrections/record-correction-request-information-view-model.ts

@@ -14,4 +14,5 @@ export const aRecordCorrectionRequestInformationViewModel = (): RecordCorrection
   reasonForRecordCorrection: 'not valid',
   additionalInfo: 'this is some more information',
   contactEmailAddresses: ['one@ukexportfinance.gov.uk', 'two@ukexportfinance.gov.uk'],
+  cancelLinkHref: 'utilisation-reports/correction-request/cancel',
 });