@hmcts/ccd-case-ui-toolkit 7.1.4-query-management → 7.1.6-query-management

package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ViewChildren, ContentChildren, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, Injector, ViewChild, HostListener, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ViewChildren, ContentChildren, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, ViewChild, HostListener, Injector, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, DOCUMENT, AsyncPipe, CurrencyPipe, formatDate } from '@angular/common';
 import * as i1 from 'rpx-xui-translation';
@@ -24,7 +24,6 @@ import { StateMachine } from '@edium/fsm';
 import * as i1$3 from '@angular/material/legacy-dialog';
 import { MAT_LEGACY_DIALOG_DATA, MatLegacyDialogModule } from '@angular/material/legacy-dialog';
 import { MatDialogConfig } from '@angular/material/dialog';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i2 from '@nicky-lenaers/ngx-scroll-to';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 import * as marked from 'marked';
@@ -36,11 +35,11 @@ import * as i6 from '@angular/material/legacy-core';
 import { MAT_LEGACY_DATE_LOCALE } from '@angular/material/legacy-core';
 import * as i3 from '@hmcts/ccpay-web-component';
 import { PaymentLibModule } from '@hmcts/ccpay-web-component';
+import { v4 } from 'uuid';
 import * as i2$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i7 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
-import moment$1 from 'moment/moment';
 import * as i4$1 from '@angular-material-components/datetime-picker';
 import { NGX_MAT_DATE_FORMATS, NgxMatDateAdapter, NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 import { NgxMatMomentAdapter, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular-material-components/moment-adapter';
@@ -52,6 +51,7 @@ import * as i15 from '@angular/material/legacy-input';
 import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import * as i14 from '@hmcts/media-viewer';
 import { MediaViewerModule } from '@hmcts/media-viewer';
+import { PortalModule } from '@angular/cdk/portal';
 import * as i2$3 from 'ngx-pagination';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
 import * as i10 from '@angular/material/legacy-tabs';
@@ -59,7 +59,7 @@ import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
 import { decompressFromUTF16, compressToUTF16 } from 'lz-string';
 
 const _c0$14 = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
-const _c1$u = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
+const _c1$v = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
 function FooterComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
     i0.ɵɵprojection(2);
@@ -135,7 +135,7 @@ class FooterComponent {
     phone;
     workhours;
     static ɵfac = function FooterComponent_Factory(t) { return new (t || FooterComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, ngContentSelectors: _c1$u, decls: 4, vars: 4, consts: [["id", "footer", "role", "footer", 1, "group", "js-footer"], [1, "footer-wrapper"], ["class", "footer-meta", 4, "ngIf"], [1, "footer-meta"], [1, "footer-meta-inner"], [1, "open-government-licence"], [1, "logo"], ["href", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", "rel", "license"], [1, "copyright"], ["href", "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"], [1, "title"], [1, "footer-text"], [1, "email"], [3, "href"], [1, "phone"], [1, "work-hours"]], template: function FooterComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, ngContentSelectors: _c1$v, decls: 4, vars: 4, consts: [["id", "footer", "role", "footer", 1, "group", "js-footer"], [1, "footer-wrapper"], ["class", "footer-meta", 4, "ngIf"], [1, "footer-meta"], [1, "footer-meta-inner"], [1, "open-government-licence"], [1, "logo"], ["href", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", "rel", "license"], [1, "copyright"], ["href", "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"], [1, "title"], [1, "footer-text"], [1, "email"], [3, "href"], [1, "phone"], [1, "work-hours"]], template: function FooterComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$14);
             i0.ɵɵelementStart(0, "footer", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, FooterComponent_div_2_Template, 20, 15, "div", 2)(3, FooterComponent_div_3_Template, 20, 16, "div", 2);
@@ -164,7 +164,7 @@ class FooterComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FooterComponent, { className: "FooterComponent", filePath: "lib/components/footer/footer.component.ts", lineNumber: 8 }); })();
 
 const _c0$13 = [[["", "headerNavigation", ""]]];
-const _c1$t = ["[headerNavigation]"];
+const _c1$u = ["[headerNavigation]"];
 function HeaderBarComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "a", 12);
     i0.ɵɵelement(2, "img", 13);
@@ -206,7 +206,7 @@ class HeaderBarComponent {
         this.signOutRequest.emit();
     }
     static ɵfac = function HeaderBarComponent_Factory(t) { return new (t || HeaderBarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, ngContentSelectors: _c1$t, decls: 17, vars: 14, consts: [["role", "banner", "id", "global-header", 1, "with-proposition"], [1, "header-wrapper"], [1, "header-global"], [4, "ngIf"], ["class", "global-header", 4, "ngIf"], [1, "header-proposition"], [1, "content"], ["href", "#proposition-links", 1, "js-header-toggle", "menu"], ["id", "proposition-menu", 4, "ngIf"], [1, "proposition-right"], ["id", "user-name"], ["id", "sign-out", "href", "javascript:void(0)", 3, "click"], ["href", "https://www.gov.uk", "title", "Go to the GOV.UK homepage", "id", "logo", 1, "content", 2, "margin-left", "0px"], ["src", "/img/gov.uk_logotype_crown_invert_trans.png?0.23.0", "width", "36", "height", "32", "alt", ""], [1, "global-header"], [1, "title"], ["id", "proposition-menu"], [1, "title-solicitor"], ["id", "proposition-name"]], template: function HeaderBarComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, ngContentSelectors: _c1$u, decls: 17, vars: 14, consts: [["role", "banner", "id", "global-header", 1, "with-proposition"], [1, "header-wrapper"], [1, "header-global"], [4, "ngIf"], ["class", "global-header", 4, "ngIf"], [1, "header-proposition"], [1, "content"], ["href", "#proposition-links", 1, "js-header-toggle", "menu"], ["id", "proposition-menu", 4, "ngIf"], [1, "proposition-right"], ["id", "user-name"], ["id", "sign-out", "href", "javascript:void(0)", 3, "click"], ["href", "https://www.gov.uk", "title", "Go to the GOV.UK homepage", "id", "logo", 1, "content", 2, "margin-left", "0px"], ["src", "/img/gov.uk_logotype_crown_invert_trans.png?0.23.0", "width", "36", "height", "32", "alt", ""], [1, "global-header"], [1, "title"], ["id", "proposition-menu"], [1, "title-solicitor"], ["id", "proposition-name"]], template: function HeaderBarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$13);
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵtemplate(3, HeaderBarComponent_div_3_Template, 5, 3, "div", 3)(4, HeaderBarComponent_div_4_Template, 5, 3, "div", 4);
@@ -258,11 +258,11 @@ class HeaderBarComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HeaderBarComponent, { className: "HeaderBarComponent", filePath: "lib/components/header/header-bar/header-bar.component.ts", lineNumber: 8 }); })();
 
 const _c0$12 = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
-const _c1$s = ["[leftNavLinks]", "[rightNavLinks]"];
+const _c1$t = ["[leftNavLinks]", "[rightNavLinks]"];
 class NavigationComponent {
     isSolicitor;
     static ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, ngContentSelectors: _c1$s, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, ngContentSelectors: _c1$t, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$12);
             i0.ɵɵelementStart(0, "div")(1, "nav", 0);
             i0.ɵɵprojection(2);
@@ -383,10 +383,10 @@ class HeadersModule {
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(HeadersModule, { declarations: [PhaseComponent, HeaderBarComponent, NavigationComponent, NavigationItemComponent], imports: [CommonModule, RouterModule, i1.RpxTranslationModule], exports: [PhaseComponent, HeaderBarComponent, NavigationComponent, NavigationItemComponent] }); })();
 
 const _c0$11 = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
-const _c1$r = ["[topBody]", "[leftBody]", "[rightBody]"];
+const _c1$s = ["[topBody]", "[leftBody]", "[rightBody]"];
 class BodyComponent {
     static ɵfac = function BodyComponent_Factory(t) { return new (t || BodyComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], ngContentSelectors: _c1$r, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], ngContentSelectors: _c1$s, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$11);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -1001,7 +1001,7 @@ class NotificationBannerComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NotificationBannerComponent, { className: "NotificationBannerComponent", filePath: "lib/components/banners/notification-banner/notification-banner.component.ts", lineNumber: 10 }); })();
 
 const _c0$_ = ["*"];
-const _c1$q = a0 => ({ "js-hidden": a0 });
+const _c1$r = a0 => ({ "js-hidden": a0 });
 class TabComponent {
     id;
     title;
@@ -1013,7 +1013,7 @@ class TabComponent {
             i0.ɵɵprojection(1);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("id", ctx.id)("ngClass", i0.ɵɵpureFunction1(3, _c1$q, !ctx.selected));
+            i0.ɵɵproperty("id", ctx.id)("ngClass", i0.ɵɵpureFunction1(3, _c1$r, !ctx.selected));
             i0.ɵɵattribute("aria-hidden", !ctx.selected);
         } }, dependencies: [i5.NgClass], styles: [".tabs-toggle[_ngcontent-%COMP%]{display:block;padding:10px 15px 3px;margin-bottom:8px}.tabs-toggle[aria-selected=true][_ngcontent-%COMP%]{color:#0b0c0c;text-decoration:none;border-bottom:none}.tabs-toggle[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#005ea5}@media (max-width: 640px){.tabs-list[_ngcontent-%COMP%]{border-bottom:1px solid #bfc1c3;margin-left:-15px;margin-right:-15px}.tabs-toggle[_ngcontent-%COMP%]{border-top:1px solid #bfc1c3}.tabs-toggle[_ngcontent-%COMP%]:focus{color:#0b0c0c;outline:none}}@media (min-width: 641px){.tabs-panel[_ngcontent-%COMP%]{border-top:1px solid #bfc1c3;clear:both;overflow:hidden}.tabs-list[_ngcontent-%COMP%]{float:left}.tabs-list-item[_ngcontent-%COMP%]{float:left;position:relative;bottom:-1px;padding-top:10px}.tabs-toggle[_ngcontent-%COMP%]{background-color:#dee0e2;border:1px solid transparent;float:left;margin:0 6px 0 0;text-decoration:none}.tabs-toggle[_ngcontent-%COMP%]:visited{color:#005ea5}.tabs-toggle-selected[_ngcontent-%COMP%], .tabs-toggle[aria-selected=true][_ngcontent-%COMP%]{background-color:#fff;border-bottom:0px;border-color:#bfc1c3;padding-bottom:11px;margin-bottom:0;color:#0b0c0c}}"] });
 }
@@ -1030,7 +1030,7 @@ class TabComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabComponent, { className: "TabComponent", filePath: "lib/components/tabs/tab.component.ts", lineNumber: 10 }); })();
 
 const _c0$Z = ["tab"];
-const _c1$p = ["*"];
+const _c1$q = ["*"];
 const _c2$4 = () => ["."];
 const _c3 = a0 => ({ "tabs-toggle-selected": a0 });
 function TabsComponent_li_2_Template(rf, ctx) { if (rf & 1) {
@@ -1080,7 +1080,7 @@ class TabsComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
-        } }, ngContentSelectors: _c1$p, decls: 5, vars: 1, consts: [["tab", ""], [1, "tabs"], ["role", "list", 1, "tabs-list"], ["class", "tabs-list-item", 4, "ngFor", "ngForOf"], [1, "tabs-content"], [1, "tabs-list-item"], ["role", "tab", "tabindex", "0", 1, "tabs-toggle", 3, "click", "routerLink", "fragment", "ngClass"]], template: function TabsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, ngContentSelectors: _c1$q, decls: 5, vars: 1, consts: [["tab", ""], [1, "tabs"], ["role", "list", 1, "tabs-list"], ["class", "tabs-list-item", 4, "ngFor", "ngForOf"], [1, "tabs-content"], [1, "tabs-list-item"], ["role", "tab", "tabindex", "0", 1, "tabs-toggle", 3, "click", "routerLink", "fragment", "ngClass"]], template: function TabsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 1)(1, "ul", 2);
             i0.ɵɵtemplate(2, TabsComponent_li_2_Template, 5, 11, "li", 3);
@@ -8712,11 +8712,11 @@ var TaskState;
     TaskState["PendingReConfiguration"] = "PENDING_RECONFIGURATION";
 })(TaskState || (TaskState = {}));
 
-var EventCompletionPortalTypes;
-(function (EventCompletionPortalTypes) {
-    EventCompletionPortalTypes[EventCompletionPortalTypes["TaskCancelled"] = 0] = "TaskCancelled";
-    EventCompletionPortalTypes[EventCompletionPortalTypes["TaskReassigned"] = 1] = "TaskReassigned";
-})(EventCompletionPortalTypes || (EventCompletionPortalTypes = {}));
+var EventCompletionTaskStates;
+(function (EventCompletionTaskStates) {
+    EventCompletionTaskStates[EventCompletionTaskStates["TaskCancelled"] = 0] = "TaskCancelled";
+    EventCompletionTaskStates[EventCompletionTaskStates["TaskReassigned"] = 1] = "TaskReassigned";
+})(EventCompletionTaskStates || (EventCompletionTaskStates = {}));
 
 const EVENT_COMPLETION_STATE_MACHINE = 'EVENT COMPLETION STATE MACHINE';
 class EventCompletionStateMachineService {
@@ -8755,7 +8755,8 @@ class EventCompletionStateMachineService {
         this.addTransitionsForStateTaskUnassigned();
     }
     entryActionForStateCheckTasksCanBeCompleted(state, context) {
-        context.workAllocationService.getTask(context?.task?.id).subscribe(taskResponse => {
+        const assignNeeded = context.sessionStorageService.getItem('assignNeeded');
+        context.workAllocationService.getTask(context.task.id).subscribe(taskResponse => {
             if (taskResponse && taskResponse.task && taskResponse.task.task_state) {
                 switch (taskResponse.task.task_state.toUpperCase()) {
                     case TaskState.Unassigned:
@@ -8774,6 +8775,11 @@ class EventCompletionStateMachineService {
                             // Task still assigned to current user, complete event and task
                             state.trigger(EventCompletionStates.CompleteEventAndTask);
                         }
+                        else if (assignNeeded === 'true - override') {
+                            // this will treat task as unassigned instead of reassigned to complete after user confirmation
+                            // assignNeeded will also be immediately overwritten to true
+                            state.trigger(EventCompletionStates.TaskUnassigned);
+                        }
                         else {
                             // Task has been reassigned to another user, display error message
                             context.reassignedTask = taskResponse.task;
@@ -8795,7 +8801,7 @@ class EventCompletionStateMachineService {
         // Trigger final state to complete processing of state machine
         state.trigger(EventCompletionStates.Final);
         // Load case event completion task cancelled component
-        context.component.showPortal(EventCompletionPortalTypes.TaskCancelled);
+        context.component.setTaskState(EventCompletionTaskStates.TaskCancelled);
     }
     entryActionForStateCompleteEventAndTask(state, context) {
         // Trigger final state to complete processing of state machine
@@ -8816,7 +8822,7 @@ class EventCompletionStateMachineService {
         // Trigger final state to complete processing of state machine
         state.trigger(EventCompletionStates.Final);
         // Load case event completion task reassigned component
-        context.component.showPortal(EventCompletionPortalTypes.TaskReassigned);
+        context.component.setTaskState(EventCompletionTaskStates.TaskReassigned);
     }
     entryActionForStateTaskUnassigned(state, context) {
         // Trigger final state to complete processing of state machine
@@ -9381,15 +9387,22 @@ class CaseEditComponent {
         const clientContextStr = this.sessionStorageService.getItem('clientContext');
         const userTask = FieldsUtils.getUserTaskFromClientContext(clientContextStr);
         const taskInSessionStorage = userTask ? userTask.task_data : null;
-        let taskEventInSessionStorage;
-        const taskStr = this.sessionStorageService.getItem('taskToComplete');
-        const taskEventStr = this.sessionStorageService.getItem('taskEvent');
-        if (taskEventStr) {
-            taskEventInSessionStorage = JSON.parse(taskEventStr);
+        let taskEventCompletionInfo;
+        let userInfo;
+        const taskEventCompletionStr = this.sessionStorageService.getItem('taskEventCompletionInfo');
+        const userInfoStr = this.sessionStorageService.getItem('userDetails');
+        const assignNeeded = this.sessionStorageService.getItem('assignNeeded');
+        if (taskEventCompletionStr) {
+            taskEventCompletionInfo = JSON.parse(taskEventCompletionStr);
+        }
+        if (userInfoStr) {
+            userInfo = JSON.parse(userInfoStr);
         }
         const eventId = this.getEventId(form);
         const caseId = this.getCaseId(caseDetails);
-        if (this.taskExistsForThisEventAndCase(taskInSessionStorage, taskEventInSessionStorage, eventId, caseId)) {
+        const userId = userInfo.id ? userInfo.id : userInfo.uid;
+        const eventDetails = { eventId, caseId, userId, assignNeeded };
+        if (this.taskExistsForThisEvent(taskInSessionStorage, taskEventCompletionInfo, eventDetails)) {
             this.abstractConfig.logMessage(`task exist for this event for caseId and eventId as ${caseId} ${eventId}`);
             // Show event completion component to perform event completion checks
             this.eventCompletionParams = ({
@@ -9397,9 +9410,16 @@ class CaseEditComponent {
                 eventId,
                 task: taskInSessionStorage
             });
-            // add taskEvent to link current event with task id
-            const taskEvent = { eventId, taskId: taskInSessionStorage.id };
-            this.sessionStorageService.setItem('taskEvent', JSON.stringify(taskEvent));
+            // add taskEventCompletionInfo again to ensure link current event with task id
+            // note: previous usage was created here so this is to ensure correct functionality continues
+            const taskEventCompletionInfo = {
+                caseId,
+                eventId,
+                userId,
+                taskId: taskInSessionStorage.id,
+                createdTimestamp: Date.now()
+            };
+            this.sessionStorageService.setItem('taskEventCompletionInfo', JSON.stringify(taskEventCompletionInfo));
             this.isEventCompletionChecksRequired = true;
         }
         else {
@@ -9564,9 +9584,9 @@ class CaseEditComponent {
             return this.postCompleteTaskIfRequired();
         }), finalize(() => {
             this.loadingService.unregister(loadingSpinnerToken);
-            // on event completion ensure the previous event taskToComplete/taskEvent removed
-            this.sessionStorageService.removeItem('taskToComplete');
-            this.sessionStorageService.removeItem('taskEvent');
+            // on event completion ensure the previous event clientContext/taskEventCompletionInfo removed
+            this.sessionStorageService.removeItem('clientContext');
+            this.sessionStorageService.removeItem('taskEventCompletionInfo');
             this.isSubmitting = false;
         }))
             .subscribe(() => {
@@ -9627,22 +9647,32 @@ class CaseEditComponent {
             return null;
         }
     }
-    // checks whether current taskToComplete relevant for the event
-    taskExistsForThisEventAndCase(taskInSessionStorage, taskEvent, eventId, caseId) {
-        if (!taskInSessionStorage || taskInSessionStorage.case_id !== caseId) {
+    // checks whether current clientContext relevant for the event
+    taskExistsForThisEvent(taskInSessionStorage, taskEventCompletionInfo, eventDetails) {
+        if (!taskInSessionStorage || taskInSessionStorage.case_id !== eventDetails.caseId) {
             return false;
         }
-        if (!taskEvent) {
+        if (!taskEventCompletionInfo) {
             // if no task event present then there is no task to complete from previous event present
             return true;
         }
         else {
-            if (taskEvent.taskId === taskInSessionStorage.id && taskEvent.eventId !== eventId) {
+            if (taskEventCompletionInfo.taskId !== taskInSessionStorage.id) {
+                return true;
+            }
+            else if ((taskEventCompletionInfo.taskId === taskInSessionStorage.id &&
+                this.eventDetailsDoNotMatch(taskEventCompletionInfo, eventDetails))
+                || this.eventMoreThanDayAgo(taskEventCompletionInfo.createdTimestamp)) {
                 // if the session storage not related to event, ignore it and remove
-                this.sessionStorageService.removeItem('taskToComplete');
-                this.sessionStorageService.removeItem('taskEvent');
+                this.sessionStorageService.removeItem('clientContext');
+                this.sessionStorageService.removeItem('taskEventCompletionInfo');
                 return false;
             }
+            if (eventDetails.assignNeeded === 'false' && eventDetails.userId !== taskInSessionStorage.assignee) {
+                // if the user does not match task assignee, assign is now needed
+                // data cannot be deleted and ignored as it matches understanding
+                this.sessionStorageService.setItem('assignNeeded', 'true');
+            }
             return true;
         }
     }
@@ -9663,6 +9693,20 @@ class CaseEditComponent {
     hasCallbackFailed(response) {
         return response['callback_response_status'] !== 'CALLBACK_COMPLETED';
     }
+    eventMoreThanDayAgo(timestamp) {
+        if ((new Date().getTime() - timestamp) > (24 * 60 * 60 * 1000)) {
+            return true;
+        }
+        return false;
+    }
+    eventDetailsDoNotMatch(taskEventCompletionInfo, eventDetails) {
+        if (taskEventCompletionInfo.eventId !== eventDetails.eventId
+            || taskEventCompletionInfo.caseId !== eventDetails.caseId
+            || taskEventCompletionInfo.userId !== eventDetails.userId) {
+            return true;
+        }
+        return false;
+    }
     static ɵfac = function CaseEditComponent_Factory(t) { return new (t || CaseEditComponent)(i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(FieldsPurger), i0.ɵɵdirectiveInject(ConditionalShowRegistrarService), i0.ɵɵdirectiveInject(WizardFactoryService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(FormValueService), i0.ɵɵdirectiveInject(FormErrorService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(ValidPageListCaseFieldsService), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(AlertService), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEditComponent, selectors: [["ccd-case-edit"]], inputs: { eventTrigger: "eventTrigger", submit: "submit", validate: "validate", saveDraft: "saveDraft", caseDetails: "caseDetails" }, outputs: { cancelled: "cancelled", submitted: "submitted" }, features: [i0.ɵɵProvidersFeature([GreyBarService])], decls: 1, vars: 0, template: function CaseEditComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelement(0, "router-outlet");
@@ -9686,7 +9730,7 @@ class CaseEditComponent {
         }], submitted: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditComponent, { className: "CaseEditComponent", filePath: "lib/shared/components/case-editor/case-edit/case-edit.component.ts", lineNumber: 34 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditComponent, { className: "CaseEditComponent", filePath: "lib/shared/components/case-editor/case-edit/case-edit.component.ts", lineNumber: 35 }); })();
 
 function CaseEditConfirmComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div");
@@ -11005,20 +11049,118 @@ class CallbackErrorsComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CallbackErrorsComponent, { className: "CallbackErrorsComponent", filePath: "lib/shared/components/error/callback-errors.component.ts", lineNumber: 10 }); })();
 
+function CaseEventCompletionComponent_app_case_event_completion_task_cancelled_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-case-event-completion-task-cancelled", 2);
+    i0.ɵɵlistener("notifyEventCompletionCancelled", function CaseEventCompletionComponent_app_case_event_completion_task_cancelled_0_Template_app_case_event_completion_task_cancelled_notifyEventCompletionCancelled_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setEventCanBeCompleted($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("context", ctx_r1.context);
+} }
+function CaseEventCompletionComponent_app_case_event_completion_task_reassigned_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-case-event-completion-task-reassigned", 3);
+    i0.ɵɵlistener("notifyEventCompletionReassigned", function CaseEventCompletionComponent_app_case_event_completion_task_reassigned_1_Template_app_case_event_completion_task_reassigned_notifyEventCompletionReassigned_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setEventCanBeCompleted($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("context", ctx_r1.context);
+} }
+const COMPONENT_PORTAL_INJECTION_TOKEN = new InjectionToken('');
+class CaseEventCompletionComponent {
+    service;
+    router;
+    route;
+    sessionStorageService;
+    workAllocationService;
+    alertService;
+    eventCompletionParams;
+    eventCanBeCompleted = new EventEmitter();
+    eventCompletionTaskStates = EventCompletionTaskStates;
+    stateMachine;
+    context;
+    taskState;
+    constructor(service, router, route, sessionStorageService, workAllocationService, alertService) {
+        this.service = service;
+        this.router = router;
+        this.route = route;
+        this.sessionStorageService = sessionStorageService;
+        this.workAllocationService = workAllocationService;
+        this.alertService = alertService;
+    }
+    ngOnChanges(changes) {
+        if (changes.eventCompletionParams?.currentValue) {
+            // Setup the context
+            this.context = {
+                task: this.eventCompletionParams.task,
+                caseId: this.eventCompletionParams.caseId,
+                eventId: this.eventCompletionParams.eventId,
+                reassignedTask: null,
+                router: this.router,
+                route: this.route,
+                sessionStorageService: this.sessionStorageService,
+                workAllocationService: this.workAllocationService,
+                alertService: this.alertService,
+                canBeCompleted: false,
+                component: this
+            };
+            // Initialise state machine
+            this.stateMachine = this.service.initialiseStateMachine(this.context);
+            // Create states
+            this.service.createStates(this.stateMachine);
+            // Add transitions for the states
+            this.service.addTransitions();
+            // Start state machine
+            this.service.startStateMachine(this.stateMachine);
+        }
+    }
+    setTaskState(taskState) {
+        this.taskState = taskState;
+    }
+    setEventCanBeCompleted(completable) {
+        // note: event not completed from here as will then skip task completion
+        if (!completable) {
+            // if event cannot be completed ensure that this is communicated
+            // otherwise this will be handled via onchanges
+            this.eventCanBeCompleted.emit(completable);
+        }
+    }
+    static ɵfac = function CaseEventCompletionComponent_Factory(t) { return new (t || CaseEventCompletionComponent)(i0.ɵɵdirectiveInject(EventCompletionStateMachineService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(AlertService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionComponent, selectors: [["ccd-case-event-completion"]], inputs: { eventCompletionParams: "eventCompletionParams" }, outputs: { eventCanBeCompleted: "eventCanBeCompleted" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [[3, "context", "notifyEventCompletionCancelled", 4, "ngIf"], [3, "context", "notifyEventCompletionReassigned", 4, "ngIf"], [3, "notifyEventCompletionCancelled", "context"], [3, "notifyEventCompletionReassigned", "context"]], template: function CaseEventCompletionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, CaseEventCompletionComponent_app_case_event_completion_task_cancelled_0_Template, 1, 1, "app-case-event-completion-task-cancelled", 0)(1, CaseEventCompletionComponent_app_case_event_completion_task_reassigned_1_Template, 1, 1, "app-case-event-completion-task-reassigned", 1);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.taskState === ctx.eventCompletionTaskStates.TaskCancelled);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.taskState === ctx.eventCompletionTaskStates.TaskReassigned);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventCompletionComponent, [{
+        type: Component,
+        args: [{ selector: 'ccd-case-event-completion', template: "<app-case-event-completion-task-cancelled\n    *ngIf=\"taskState === eventCompletionTaskStates.TaskCancelled\"\n    [context]=\"context\"\n    (notifyEventCompletionCancelled)=\"setEventCanBeCompleted($event)\">\n</app-case-event-completion-task-cancelled>\n<app-case-event-completion-task-reassigned\n    *ngIf=\"taskState === eventCompletionTaskStates.TaskReassigned\"\n    [context]=\"context\"\n    (notifyEventCompletionReassigned)=\"setEventCanBeCompleted($event)\">\n</app-case-event-completion-task-reassigned>" }]
+    }], () => [{ type: EventCompletionStateMachineService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: SessionStorageService }, { type: WorkAllocationService }, { type: AlertService }], { eventCompletionParams: [{
+            type: Input
+        }], eventCanBeCompleted: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionComponent, { className: "CaseEventCompletionComponent", filePath: "lib/shared/components/case-editor/case-event-completion/case-event-completion.component.ts", lineNumber: 20 }); })();
+
 const _c0$X = a0 => ["/", "cases", "case-details", a0, "tasks"];
 class CaseEventCompletionTaskCancelledComponent {
-    parentComponent;
+    context;
+    notifyEventCompletionCancelled = new EventEmitter();
     caseId;
-    constructor(parentComponent) {
-        this.parentComponent = parentComponent;
-        this.caseId = this.parentComponent.context.caseId;
+    ngOnInit() {
+        this.caseId = this.context.caseId;
     }
     onContinue() {
-        // Emit event can be completed event
-        this.parentComponent.eventCanBeCompleted.emit(true);
+        // Removes task to complete so event completes without task
+        this.context.sessionStorageService.removeItem('clientContext');
+        // may be able to remove this call below since it is now unneccesary
+        this.notifyEventCompletionCancelled.emit(true);
     }
-    static ɵfac = function CaseEventCompletionTaskCancelledComponent_Factory(t) { return new (t || CaseEventCompletionTaskCancelledComponent)(i0.ɵɵdirectiveInject(COMPONENT_PORTAL_INJECTION_TOKEN)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionTaskCancelledComponent, selectors: [["app-case-event-completion-task-cancelled"]], decls: 31, vars: 27, consts: [[1, "govuk-!-margin-9"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["href", "#"], [1, "govuk-form-group", "govuk-form-group--error"], [1, "govuk-heading-m"], [1, "form-group", "form-group-related"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-!-margin-right-2", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "routerLink"]], template: function CaseEventCompletionTaskCancelledComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function CaseEventCompletionTaskCancelledComponent_Factory(t) { return new (t || CaseEventCompletionTaskCancelledComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionTaskCancelledComponent, selectors: [["app-case-event-completion-task-cancelled"]], inputs: { context: "context" }, outputs: { notifyEventCompletionCancelled: "notifyEventCompletionCancelled" }, decls: 31, vars: 27, consts: [[1, "govuk-!-margin-9"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["href", "#"], [1, "govuk-form-group", "govuk-form-group--error"], [1, "govuk-heading-m"], [1, "form-group", "form-group-related"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-!-margin-right-2", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "routerLink"]], template: function CaseEventCompletionTaskCancelledComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h2", 2);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "rpxTranslate");
@@ -11076,11 +11218,12 @@ class CaseEventCompletionTaskCancelledComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventCompletionTaskCancelledComponent, [{
         type: Component,
         args: [{ selector: 'app-case-event-completion-task-cancelled', template: "<div class=\"govuk-!-margin-9\">\n  <div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"error-summary\">\n    <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n      {{'There is a problem' | rpxTranslate}}\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          <a href=\"#\">{{'Task cancelled/marked as done' | rpxTranslate}}</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"govuk-form-group govuk-form-group--error\">\n    <h2 class=\"govuk-heading-m\">{{'Task cancelled/marked as done' | rpxTranslate}}</h2>\n    <p>{{'This task has been cancelled or marked as done.' | rpxTranslate}}</p>\n    <p>{{'Click Continue to complete the event and save your progress.' | rpxTranslate}}</p>\n\n    <p>{{'Alternatively, click Cancel to return to the tasks tab without saving your progress.' | rpxTranslate}}</p>\n\n    <div class=\"form-group form-group-related\">\n      <button class=\"govuk-button govuk-!-margin-right-2\" data-module=\"govuk-button\" (click)=\"onContinue()\">\n        {{'Continue' | rpxTranslate}}\n      </button>\n      <a [routerLink]=\"['/', 'cases', 'case-details', caseId, 'tasks']\"\n              class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n        {{'Cancel' | rpxTranslate}}\n      </a>\n    </div>\n  </div>\n</div>\n" }]
-    }], () => [{ type: CaseEventCompletionComponent, decorators: [{
-                type: Inject,
-                args: [COMPONENT_PORTAL_INJECTION_TOKEN]
-            }] }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskCancelledComponent, { className: "CaseEventCompletionTaskCancelledComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-cancelled/case-event-completion-task-cancelled.component.ts", lineNumber: 8 }); })();
+    }], null, { context: [{
+            type: Input
+        }], notifyEventCompletionCancelled: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskCancelledComponent, { className: "CaseEventCompletionTaskCancelledComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-cancelled/case-event-completion-task-cancelled.component.ts", lineNumber: 9 }); })();
 
 const _c0$W = a0 => ["/", "cases", "case-details", a0, "tasks"];
 function CaseEventCompletionTaskReassignedComponent_div_0_Template(rf, ctx) { if (rf & 1) {
@@ -11140,32 +11283,26 @@ function CaseEventCompletionTaskReassignedComponent_div_0_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 24, "Cancel"), " ");
 } }
 class CaseEventCompletionTaskReassignedComponent {
-    parentComponent;
-    route;
-    workAllocationService;
     sessionStorageService;
     judicialworkerService;
     caseworkerService;
-    alertService;
+    context;
+    notifyEventCompletionReassigned = new EventEmitter();
     caseId;
     assignedUserId;
     assignedUserName;
     subscription;
     caseworkerSubscription;
     judicialworkerSubscription;
-    constructor(parentComponent, route, workAllocationService, sessionStorageService, judicialworkerService, caseworkerService, alertService) {
-        this.parentComponent = parentComponent;
-        this.route = route;
-        this.workAllocationService = workAllocationService;
+    constructor(sessionStorageService, judicialworkerService, caseworkerService) {
         this.sessionStorageService = sessionStorageService;
         this.judicialworkerService = judicialworkerService;
         this.caseworkerService = caseworkerService;
-        this.alertService = alertService;
     }
     ngOnInit() {
         // Get case id and task from the parent component
-        this.caseId = this.parentComponent.context.caseId;
-        const task = this.parentComponent.context.reassignedTask;
+        this.caseId = this.context.caseId;
+        const task = this.context.reassignedTask;
         // Current user is a caseworker?
         this.caseworkerSubscription = this.caseworkerService.getCaseworkers(task.jurisdiction).subscribe(result => {
             if (result && result[0].service === task.jurisdiction && result[0].caseworkers) {
@@ -11210,17 +11347,17 @@ class CaseEventCompletionTaskReassignedComponent {
         // not complete_task not utilised here as related to event completion
         // service wanting task associated with event to not be completed not directly relevant
         if (task) {
-            this.sessionStorageService.setItem('assignNeeded', 'true');
-            // set event can be completed to true
-            this.parentComponent.eventCanBeCompleted.emit(true);
+            // Set session to override reassignment settings so code flow does not return to this component
+            this.sessionStorageService.setItem('assignNeeded', 'true - override');
+            this.notifyEventCompletionReassigned.emit(true);
         }
         else {
             // Emit event cannot be completed event
-            this.parentComponent.eventCanBeCompleted.emit(false);
+            this.notifyEventCompletionReassigned.emit(false);
         }
     }
-    static ɵfac = function CaseEventCompletionTaskReassignedComponent_Factory(t) { return new (t || CaseEventCompletionTaskReassignedComponent)(i0.ɵɵdirectiveInject(COMPONENT_PORTAL_INJECTION_TOKEN), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(JudicialworkerService), i0.ɵɵdirectiveInject(CaseworkerService), i0.ɵɵdirectiveInject(AlertService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionTaskReassignedComponent, selectors: [["app-case-event-completion-task-reassigned"]], decls: 1, vars: 1, consts: [["class", "govuk-!-margin-9", 4, "ngIf"], [1, "govuk-!-margin-9"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["href", "#"], [1, "govuk-form-group", "govuk-form-group--error"], [1, "govuk-heading-m"], [1, "form-group", "form-group-related"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-!-margin-right-2", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "routerLink"]], template: function CaseEventCompletionTaskReassignedComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function CaseEventCompletionTaskReassignedComponent_Factory(t) { return new (t || CaseEventCompletionTaskReassignedComponent)(i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(JudicialworkerService), i0.ɵɵdirectiveInject(CaseworkerService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionTaskReassignedComponent, selectors: [["app-case-event-completion-task-reassigned"]], inputs: { context: "context" }, outputs: { notifyEventCompletionReassigned: "notifyEventCompletionReassigned" }, decls: 1, vars: 1, consts: [["class", "govuk-!-margin-9", 4, "ngIf"], [1, "govuk-!-margin-9"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["href", "#"], [1, "govuk-form-group", "govuk-form-group--error"], [1, "govuk-heading-m"], [1, "form-group", "form-group-related"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-!-margin-right-2", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "routerLink"]], template: function CaseEventCompletionTaskReassignedComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CaseEventCompletionTaskReassignedComponent_div_0_Template, 31, 28, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.assignedUserName);
@@ -11229,92 +11366,12 @@ class CaseEventCompletionTaskReassignedComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventCompletionTaskReassignedComponent, [{
         type: Component,
         args: [{ selector: 'app-case-event-completion-task-reassigned', template: "<div class=\"govuk-!-margin-9\" *ngIf=\"assignedUserName\">\n  <div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\"\n    data-module=\"error-summary\">\n    <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n      {{'There is a problem' | rpxTranslate}}\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          <a href=\"#\">{{'Task reassigned' | rpxTranslate}}</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"govuk-form-group govuk-form-group--error\">\n    <h2 class=\"govuk-heading-m\">{{'Task reassigned' | rpxTranslate}}</h2>\n    <p>{{'This task has been reassigned to' | rpxTranslate}} {{assignedUserName}}.</p>\n    <p>{{'Click Continue to reassign the task to you and save your progress.' | rpxTranslate}}</p>\n    <p>{{'Alternatively, click Cancel to return to the tasks tab without saving your progress.' | rpxTranslate}}</p>\n    <div class=\"form-group form-group-related\">\n      <button class=\"govuk-button govuk-!-margin-right-2\" data-module=\"govuk-button\" (click)=\"onContinue()\">\n        {{'Continue' | rpxTranslate}}\n      </button>\n      <a [routerLink]=\"['/', 'cases', 'case-details', caseId, 'tasks']\"\n              class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n        {{'Cancel' | rpxTranslate}}\n      </a>\n    </div>\n  </div>\n</div>\n" }]
-    }], () => [{ type: CaseEventCompletionComponent, decorators: [{
-                type: Inject,
-                args: [COMPONENT_PORTAL_INJECTION_TOKEN]
-            }] }, { type: i1$1.ActivatedRoute }, { type: WorkAllocationService }, { type: SessionStorageService }, { type: JudicialworkerService }, { type: CaseworkerService }, { type: AlertService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskReassignedComponent, { className: "CaseEventCompletionTaskReassignedComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-reassigned/case-event-completion-task-reassigned.component.ts", lineNumber: 19 }); })();
-
-function CaseEventCompletionComponent_ng_template_0_Template(rf, ctx) { }
-const COMPONENT_PORTAL_INJECTION_TOKEN = new InjectionToken('');
-class CaseEventCompletionComponent {
-    service;
-    router;
-    route;
-    sessionStorageService;
-    workAllocationService;
-    alertService;
-    eventCompletionParams;
-    eventCanBeCompleted = new EventEmitter();
-    stateMachine;
-    context;
-    selectedComponentPortal;
-    constructor(service, router, route, sessionStorageService, workAllocationService, alertService) {
-        this.service = service;
-        this.router = router;
-        this.route = route;
-        this.sessionStorageService = sessionStorageService;
-        this.workAllocationService = workAllocationService;
-        this.alertService = alertService;
-    }
-    ngOnChanges(changes) {
-        if (changes.eventCompletionParams && changes.eventCompletionParams.currentValue) {
-            // Setup the context
-            this.context = {
-                task: this.eventCompletionParams.task,
-                caseId: this.eventCompletionParams.caseId,
-                eventId: this.eventCompletionParams.eventId,
-                reassignedTask: null,
-                router: this.router,
-                route: this.route,
-                sessionStorageService: this.sessionStorageService,
-                workAllocationService: this.workAllocationService,
-                alertService: this.alertService,
-                canBeCompleted: false,
-                component: this
-            };
-            // Initialise state machine
-            this.stateMachine = this.service.initialiseStateMachine(this.context);
-            // Create states
-            this.service.createStates(this.stateMachine);
-            // Add transitions for the states
-            this.service.addTransitions();
-            // Start state machine
-            this.service.startStateMachine(this.stateMachine);
-        }
-    }
-    showPortal(portalType) {
-        const injector = Injector.create({
-            providers: [
-                { provide: COMPONENT_PORTAL_INJECTION_TOKEN, useValue: this }
-            ]
-        });
-        // tslint:disable-next-line:switch-default
-        switch (portalType) {
-            case EventCompletionPortalTypes.TaskCancelled:
-                this.selectedComponentPortal = new ComponentPortal(CaseEventCompletionTaskCancelledComponent, null, injector);
-                break;
-            case EventCompletionPortalTypes.TaskReassigned:
-                this.selectedComponentPortal = new ComponentPortal(CaseEventCompletionTaskReassignedComponent, null, injector);
-                break;
-        }
-    }
-    static ɵfac = function CaseEventCompletionComponent_Factory(t) { return new (t || CaseEventCompletionComponent)(i0.ɵɵdirectiveInject(EventCompletionStateMachineService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(AlertService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionComponent, selectors: [["ccd-case-event-completion"]], inputs: { eventCompletionParams: "eventCompletionParams" }, outputs: { eventCanBeCompleted: "eventCanBeCompleted" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "cdkPortalOutlet"]], template: function CaseEventCompletionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseEventCompletionComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
-        } if (rf & 2) {
-            i0.ɵɵproperty("cdkPortalOutlet", ctx.selectedComponentPortal);
-        } }, encapsulation: 2 });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventCompletionComponent, [{
-        type: Component,
-        args: [{ selector: 'ccd-case-event-completion', template: "<ng-template [cdkPortalOutlet]=\"selectedComponentPortal\"></ng-template>\n" }]
-    }], () => [{ type: EventCompletionStateMachineService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: SessionStorageService }, { type: WorkAllocationService }, { type: AlertService }], { eventCompletionParams: [{
+    }], () => [{ type: SessionStorageService }, { type: JudicialworkerService }, { type: CaseworkerService }], { context: [{
             type: Input
-        }], eventCanBeCompleted: [{
+        }], notifyEventCompletionReassigned: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionComponent, { className: "CaseEventCompletionComponent", filePath: "lib/shared/components/case-editor/case-event-completion/case-event-completion.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskReassignedComponent, { className: "CaseEventCompletionTaskReassignedComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-reassigned/case-event-completion-task-reassigned.component.ts", lineNumber: 15 }); })();
 
 class AddressOption {
     description;
@@ -11612,7 +11669,7 @@ class WriteComplexFieldComponent extends AbstractFieldWriteComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteComplexFieldComponent, { className: "WriteComplexFieldComponent", filePath: "lib/shared/components/palette/complex/write-complex-field.component.ts", lineNumber: 21 }); })();
 
 const _c0$V = ["writeComplexFieldComponent"];
-const _c1$o = a0 => ({ "form-group-error": a0 });
+const _c1$p = a0 => ({ "form-group-error": a0 });
 const _c2$3 = a0 => ({ "govuk-input--error": a0 });
 function WriteAddressFieldComponent_div_1_div_4_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 14);
@@ -11639,7 +11696,7 @@ function WriteAddressFieldComponent_div_1_div_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("id", ctx_r1.createElementId("postcodeLookup"))("ngClass", i0.ɵɵpureFunction1(13, _c1$o, ctx_r1.missingPostcode));
+    i0.ɵɵproperty("id", ctx_r1.createElementId("postcodeLookup"))("ngClass", i0.ɵɵpureFunction1(13, _c1$p, ctx_r1.missingPostcode));
     i0.ɵɵadvance();
     i0.ɵɵproperty("for", ctx_r1.createElementId("postcodeInput"));
     i0.ɵɵadvance(2);
@@ -11685,7 +11742,7 @@ function WriteAddressFieldComponent_div_1_div_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$o, ctx_r1.noAddressSelected));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$p, ctx_r1.noAddressSelected));
     i0.ɵɵadvance();
     i0.ɵɵproperty("for", ctx_r1.createElementId("addressList"));
     i0.ɵɵadvance(2);
@@ -13118,7 +13175,7 @@ class ReadCaseLinkFieldComponent extends AbstractFieldReadComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadCaseLinkFieldComponent, { className: "ReadCaseLinkFieldComponent", filePath: "lib/shared/components/palette/case-link/read-case-link-field.component.ts", lineNumber: 8 }); })();
 
 const _c0$U = ["writeComplexFieldComponent"];
-const _c1$n = a0 => ({ "form-group-error": a0 });
+const _c1$o = a0 => ({ "form-group-error": a0 });
 function WriteCaseLinkFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
@@ -13210,7 +13267,7 @@ class WriteCaseLinkFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$n, !ctx.caseReferenceControl.valid && (ctx.caseReferenceControl.dirty || ctx.caseReferenceControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$o, !ctx.caseReferenceControl.valid && (ctx.caseReferenceControl.dirty || ctx.caseReferenceControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -13233,7 +13290,7 @@ class WriteCaseLinkFieldComponent extends AbstractFieldWriteComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteCaseLinkFieldComponent, { className: "WriteCaseLinkFieldComponent", filePath: "lib/shared/components/palette/case-link/write-case-link-field.component.ts", lineNumber: 11 }); })();
 
 const _c0$T = (a0, a1, a2, a3, a4, a5) => ({ id: a0, label: a1, field_type: a2, display_context_parameter: a3, value: a4, hidden: a5 });
-const _c1$m = (a0, a1, a2, a3, a4) => ({ id: a0, label: a1, field_type: a2, value: a3, hidden: a4 });
+const _c1$n = (a0, a1, a2, a3, a4) => ({ id: a0, label: a1, field_type: a2, value: a3, hidden: a4 });
 function ReadCollectionFieldComponent_table_0_tbody_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tbody")(1, "tr");
     i0.ɵɵelement(2, "th", 4);
@@ -13254,7 +13311,7 @@ function ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template(rf, ctx) { i
     const i_r3 = ctx.index;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction5(4, _c1$m, i_r3, ctx_r0.caseField.label + " " + (i_r3 + 1), ctx_r0.caseField.field_type.collection_field_type, item_r2.value, ctx_r0.caseField.hidden))("context", ctx_r0.context)("topLevelFormGroup", ctx_r0.topLevelFormGroup)("idPrefix", ctx_r0.buildIdPrefix(i_r3));
+    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction5(4, _c1$n, i_r3, ctx_r0.caseField.label + " " + (i_r3 + 1), ctx_r0.caseField.field_type.collection_field_type, item_r2.value, ctx_r0.caseField.hidden))("context", ctx_r0.context)("topLevelFormGroup", ctx_r0.topLevelFormGroup)("idPrefix", ctx_r0.buildIdPrefix(i_r3));
 } }
 function ReadCollectionFieldComponent_table_0_tbody_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tbody");
@@ -14060,7 +14117,7 @@ class FileUploadStateService {
     }], null, null); })();
 
 const _c0$R = ["fileInput"];
-const _c1$l = a0 => ({ "form-group-error bottom-30": a0 });
+const _c1$m = a0 => ({ "form-group-error bottom-30": a0 });
 function WriteDocumentFieldComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 12);
     i0.ɵɵtext(1);
@@ -14437,7 +14494,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵpipe(17, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c1$l, !ctx.valid));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c1$m, !ctx.valid));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -14965,7 +15022,7 @@ class ReadDynamicRadioListFieldComponent extends AbstractFieldReadComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadDynamicRadioListFieldComponent, { className: "ReadDynamicRadioListFieldComponent", filePath: "lib/shared/components/palette/dynamic-radio-list/read-dynamic-radio-list-field.component.ts", lineNumber: 8 }); })();
 
 const _c0$O = a0 => ({ "form-group-error": a0 });
-const _c1$k = a0 => ({ selected: a0 });
+const _c1$l = a0 => ({ selected: a0 });
 function WriteDynamicRadioListFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
@@ -15015,7 +15072,7 @@ function WriteDynamicRadioListFieldComponent_div_9_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const radioButton_r2 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$k, ctx_r0.dynamicRadioListControl.value === radioButton_r2.code));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$l, ctx_r0.dynamicRadioListControl.value === radioButton_r2.code));
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", ctx_r0.createElementId(radioButton_r2.code))("name", ctx_r0.id())("formControl", ctx_r0.dynamicRadioListControl)("value", radioButton_r2.code);
     i0.ɵɵadvance();
@@ -15111,7 +15168,7 @@ class ReadEmailFieldComponent extends AbstractFieldReadComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadEmailFieldComponent, { className: "ReadEmailFieldComponent", filePath: "lib/shared/components/palette/email/read-email-field.component.ts", lineNumber: 10 }); })();
 
 const _c0$N = a0 => ({ "form-group-error": a0 });
-const _c1$j = a0 => ({ "govuk-input--error": a0 });
+const _c1$k = a0 => ({ "govuk-input--error": a0 });
 function WriteEmailFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
@@ -15166,7 +15223,7 @@ class WriteEmailFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.emailControl.errors && (ctx.emailControl.dirty || ctx.emailControl.touched));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$j, ctx.emailControl.errors && (ctx.emailControl.dirty || ctx.emailControl.touched)))("id", ctx.id())("formControl", ctx.emailControl);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$k, ctx.emailControl.errors && (ctx.emailControl.dirty || ctx.emailControl.touched)))("id", ctx.id())("formControl", ctx.emailControl);
         } }, dependencies: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.FormControlDirective, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteEmailFieldComponent, [{
@@ -15334,7 +15391,7 @@ class ReadFixedRadioListFieldComponent extends AbstractFieldReadComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadFixedRadioListFieldComponent, { className: "ReadFixedRadioListFieldComponent", filePath: "lib/shared/components/palette/fixed-radio-list/read-fixed-radio-list-field.component.ts", lineNumber: 8 }); })();
 
 const _c0$L = a0 => ({ "form-group-error": a0 });
-const _c1$i = a0 => ({ selected: a0 });
+const _c1$j = a0 => ({ selected: a0 });
 function WriteFixedRadioListFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
@@ -15375,7 +15432,7 @@ function WriteFixedRadioListFieldComponent_div_8_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const radioButton_r2 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$i, ctx_r0.fixedRadioListControl.value === radioButton_r2.code));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$j, ctx_r0.fixedRadioListControl.value === radioButton_r2.code));
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", ctx_r0.id() + "-" + radioButton_r2.code)("name", ctx_r0.id())("formControl", ctx_r0.fixedRadioListControl)("value", radioButton_r2.code);
     i0.ɵɵadvance();
@@ -15478,7 +15535,7 @@ class ReadJudicialUserFieldComponent extends AbstractFieldReadComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadJudicialUserFieldComponent, { className: "ReadJudicialUserFieldComponent", filePath: "lib/shared/components/palette/judicial-user/read-judicial-user-field.component.ts", lineNumber: 11 }); })();
 
 const _c0$K = a0 => ({ "form-group-error": a0 });
-const _c1$h = a0 => ({ "hide-autocomplete": a0 });
+const _c1$i = a0 => ({ "hide-autocomplete": a0 });
 function WriteJudicialUserFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 10);
     i0.ɵɵtext(1);
@@ -15517,7 +15574,7 @@ function WriteJudicialUserFieldComponent_mat_option_8_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const judicialUser_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$h, !ctx_r1.showAutocomplete))("value", judicialUser_r4);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$i, !ctx_r1.showAutocomplete))("value", judicialUser_r4);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", (judicialUser_r4 == null ? null : judicialUser_r4.fullName) ? judicialUser_r4.fullName : "", "", (judicialUser_r4 == null ? null : judicialUser_r4.emailId) ? " (" + judicialUser_r4.emailId + ")" : "", " ");
 } }
@@ -16243,7 +16300,7 @@ class ValidatorsUtils {
     }], null, null); })();
 
 const _c0$J = a0 => ({ "govuk-form-group--error": a0 });
-const _c1$g = a0 => ({ "table-group-error": a0 });
+const _c1$h = a0 => ({ "table-group-error": a0 });
 function LinkCasesComponent_div_8_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 30)(1, "span", 31);
     i0.ɵɵtext(2, "Error:");
@@ -16420,7 +16477,7 @@ function LinkCasesComponent_tr_31_Template(rf, ctx) { if (rf & 1) {
     const case_r9 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$g, ctx_r1.caseSelectionError && case_r9.caseReference === ctx_r1.linkCaseForm.value.caseNumber));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$h, ctx_r1.caseSelectionError && case_r9.caseReference === ctx_r1.linkCaseForm.value.caseNumber));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", case_r9.caseName, " ");
     i0.ɵɵadvance(2);
@@ -18429,7 +18486,7 @@ class ReadNumberFieldComponent extends AbstractFieldReadComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadNumberFieldComponent, { className: "ReadNumberFieldComponent", filePath: "lib/shared/components/palette/number/read-number-field.component.ts", lineNumber: 8 }); })();
 
 const _c0$F = a0 => ({ "form-group-error": a0 });
-const _c1$f = a0 => ({ "govuk-input--error": a0 });
+const _c1$g = a0 => ({ "govuk-input--error": a0 });
 function WriteNumberFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
@@ -18484,7 +18541,7 @@ class WriteNumberFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.numberControl.errors && ctx.numberControl.dirty);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$f, ctx.numberControl.errors && ctx.numberControl.dirty))("id", ctx.id())("formControl", ctx.numberControl);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$g, ctx.numberControl.errors && ctx.numberControl.dirty))("id", ctx.id())("formControl", ctx.numberControl);
         } }, dependencies: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NumberValueAccessor, i4.NgControlStatus, i4.FormControlDirective, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteNumberFieldComponent, [{
@@ -19112,7 +19169,7 @@ class ReadPhoneUKFieldComponent extends AbstractFieldReadComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadPhoneUKFieldComponent, { className: "ReadPhoneUKFieldComponent", filePath: "lib/shared/components/palette/phone-uk/read-phone-uk-field.component.ts", lineNumber: 8 }); })();
 
 const _c0$D = a0 => ({ "form-group-error": a0 });
-const _c1$e = a0 => ({ "govuk-input--error": a0 });
+const _c1$f = a0 => ({ "govuk-input--error": a0 });
 function WritePhoneUKFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
@@ -19167,7 +19224,7 @@ class WritePhoneUKFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.phoneUkControl.errors && (ctx.phoneUkControl.dirty || ctx.phoneUkControl.touched));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$e, ctx.phoneUkControl.errors && ctx.phoneUkControl.dirty))("id", ctx.id())("formControl", ctx.phoneUkControl);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$f, ctx.phoneUkControl.errors && ctx.phoneUkControl.dirty))("id", ctx.id())("formControl", ctx.phoneUkControl);
         } }, dependencies: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.FormControlDirective, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WritePhoneUKFieldComponent, [{
@@ -19596,7 +19653,7 @@ class QueryManagementUtils {
     static caseLevelCaseFieldId = 'CaseQueriesCollection';
     static FIELD_TYPE_COLLECTION = 'Collection';
     static FIELD_TYPE_COMPLEX = 'Complex';
-    static extractCaseQueriesFromCaseField(caseField, caseFieldId) {
+    static extractCaseQueriesFromCaseField(caseField) {
         const { field_type, value } = caseField;
         // Handle Complex type fields
         if (field_type.type === QueryManagementUtils.FIELD_TYPE_COMPLEX) {
@@ -19605,10 +19662,6 @@ class QueryManagementUtils {
             }
             return null;
         }
-        // Handle Collection type fields
-        // if (field_type.type === QueryManagementUtils.FIELD_TYPE_COLLECTION) {
-        //   return [];
-        // }
     }
     static documentToCollectionFormDocument(document) {
         return {
@@ -19631,7 +19684,7 @@ class QueryManagementUtils {
             : null;
         const attachments = formGroup.get('attachments').value;
         return {
-            id: null,
+            id: v4(),
             subject,
             name: currentUserName,
             body,
@@ -19649,7 +19702,7 @@ class QueryManagementUtils {
         const attachments = formGroup.get('attachments').value;
         queryItem.isHearingRelated = queryItem.isHearingRelated ? 'Yes' : 'No';
         return {
-            id: null,
+            id: v4(),
             subject: queryItem.subject,
             name: currentUserName,
             body,
@@ -19866,9 +19919,36 @@ class QueryListData {
     }
 }
 
-function QueryCheckYourAnswersComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function QueryCheckYourAnswersComponent_div_2_li_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li")(1, "a", 26);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const errorMessage_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("id", "error-" + errorMessage_r2.fieldId);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, errorMessage_r2.description));
+} }
+function QueryCheckYourAnswersComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "h2", 22);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 23)(5, "ul", 24);
+    i0.ɵɵtemplate(6, QueryCheckYourAnswersComponent_div_2_li_6_Template, 4, 4, "li", 25);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "There is a problem"), " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r2.errorMessages);
+} }
+function QueryCheckYourAnswersComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 20);
+    i0.ɵɵelementStart(1, "div", 27);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -19877,7 +19957,7 @@ function QueryCheckYourAnswersComponent_ng_container_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "Raise a query"));
 } }
-function QueryCheckYourAnswersComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+function QueryCheckYourAnswersComponent_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
@@ -19886,16 +19966,16 @@ function QueryCheckYourAnswersComponent_ng_container_4_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "Review query response details"), " ");
 } }
-function QueryCheckYourAnswersComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+function QueryCheckYourAnswersComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
     i0.ɵɵpipe(1, "rpxTranslate");
 } if (rf & 2) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(1, 1, "Review query details"), " ");
 } }
-function QueryCheckYourAnswersComponent_dl_9_a_8_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 14);
-    i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_dl_9_a_8_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.goBack()); });
+function QueryCheckYourAnswersComponent_dl_10_a_8_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 15);
+    i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_dl_10_a_8_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.goBack()); });
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -19903,16 +19983,16 @@ function QueryCheckYourAnswersComponent_dl_9_a_8_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "Change"), " ");
 } }
-function QueryCheckYourAnswersComponent_dl_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "dl", 9)(1, "div", 10)(2, "dt", 11);
+function QueryCheckYourAnswersComponent_dl_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "dl", 10)(1, "div", 11)(2, "dt", 12);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "dd", 12);
+    i0.ɵɵelementStart(5, "dd", 13);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "dd", 13);
-    i0.ɵɵtemplate(8, QueryCheckYourAnswersComponent_dl_9_a_8_Template, 3, 3, "a", 21);
+    i0.ɵɵelementStart(7, "dd", 14);
+    i0.ɵɵtemplate(8, QueryCheckYourAnswersComponent_dl_10_a_8_Template, 3, 3, "a", 28);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_3_0;
@@ -19924,7 +20004,7 @@ function QueryCheckYourAnswersComponent_dl_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r2.queryCreateContext === ctx_r2.queryCreateContextEnum.NEW_QUERY);
 } }
-function QueryCheckYourAnswersComponent_dl_21_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+function QueryCheckYourAnswersComponent_dl_22_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
@@ -19933,24 +20013,24 @@ function QueryCheckYourAnswersComponent_dl_21_ng_container_6_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(2, 1, "Is the query hearing related?", null, "Yes"), " ");
 } }
-function QueryCheckYourAnswersComponent_dl_21_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+function QueryCheckYourAnswersComponent_dl_22_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
     i0.ɵɵpipe(1, "rpxTranslate");
 } if (rf & 2) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(1, 1, "Is the query hearing related?", null, "No"), " ");
 } }
-function QueryCheckYourAnswersComponent_dl_21_div_13_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10)(1, "dt", 11);
+function QueryCheckYourAnswersComponent_dl_22_div_13_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "dt", 12);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "dd", 12);
+    i0.ɵɵelementStart(4, "dd", 13);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "dd", 13)(8, "a", 14);
-    i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_dl_21_div_13_Template_a_click_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.goBack()); });
+    i0.ɵɵelementStart(7, "dd", 14)(8, "a", 15);
+    i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_dl_22_div_13_Template_a_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.goBack()); });
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "rpxTranslate");
     i0.ɵɵelementEnd()()();
@@ -19964,38 +20044,38 @@ function QueryCheckYourAnswersComponent_dl_21_div_13_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 8, "Change"), " ");
 } }
-function QueryCheckYourAnswersComponent_dl_21_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "dl", 9)(1, "div", 10)(2, "dt", 11);
+function QueryCheckYourAnswersComponent_dl_22_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dl", 10)(1, "div", 11)(2, "dt", 12);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "dd", 12);
-    i0.ɵɵtemplate(6, QueryCheckYourAnswersComponent_dl_21_ng_container_6_Template, 3, 5, "ng-container", 6)(7, QueryCheckYourAnswersComponent_dl_21_ng_template_7_Template, 2, 5, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementStart(5, "dd", 13);
+    i0.ɵɵtemplate(6, QueryCheckYourAnswersComponent_dl_22_ng_container_6_Template, 3, 5, "ng-container", 7)(7, QueryCheckYourAnswersComponent_dl_22_ng_template_7_Template, 2, 5, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "dd", 13)(10, "a", 14);
-    i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_dl_21_Template_a_click_10_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.goBack()); });
+    i0.ɵɵelementStart(9, "dd", 14)(10, "a", 15);
+    i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_dl_22_Template_a_click_10_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.goBack()); });
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "rpxTranslate");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(13, QueryCheckYourAnswersComponent_dl_21_div_13_Template, 11, 10, "div", 22);
+    i0.ɵɵtemplate(13, QueryCheckYourAnswersComponent_dl_22_div_13_Template, 11, 10, "div", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_4_0;
     let tmp_7_0;
-    const isHearingRelatedFalse_r6 = i0.ɵɵreference(8);
+    const isHearingRelatedFalse_r7 = i0.ɵɵreference(8);
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 5, "Is the query hearing related?"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ((tmp_4_0 = ctx_r2.formGroup.get("isHearingRelated")) == null ? null : tmp_4_0.value) === true)("ngIfElse", isHearingRelatedFalse_r6);
+    i0.ɵɵproperty("ngIf", ((tmp_4_0 = ctx_r2.formGroup.get("isHearingRelated")) == null ? null : tmp_4_0.value) === true)("ngIfElse", isHearingRelatedFalse_r7);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 7, "Change"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", (tmp_7_0 = ctx_r2.formGroup.get("isHearingRelated")) == null ? null : tmp_7_0.value);
 } }
-function QueryCheckYourAnswersComponent_ccd_query_attachments_read_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ccd-query-attachments-read", 23);
+function QueryCheckYourAnswersComponent_ccd_query_attachments_read_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ccd-query-attachments-read", 30);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("attachments", ctx_r2.formGroup.get("attachments").value);
@@ -20007,6 +20087,7 @@ class QueryCheckYourAnswersComponent {
     caseNotifier;
     workAllocationService;
     sessionStorageService;
+    eventTriggerService;
     RAISE_A_QUERY_EVENT_TRIGGER_ID = 'queryManagementRaiseQuery';
     RESPOND_TO_QUERY_EVENT_TRIGGER_ID = 'queryManagementRespondQuery';
     CASE_QUERIES_COLLECTION_ID = 'CaseQueriesCollection';
@@ -20014,75 +20095,72 @@ class QueryCheckYourAnswersComponent {
     formGroup;
     queryItem;
     queryCreateContext;
+    eventData = null;
     backClicked = new EventEmitter();
     querySubmitted = new EventEmitter();
     caseViewTrigger;
     caseDetails;
     queryId;
-    getEventTrigger$;
     createEventSubscription;
-    searchTasksSubsciption;
+    searchTasksSubscription;
     queryCreateContextEnum = QueryCreateContext;
     eventCompletionParams;
-    caseId;
     caseQueriesCollections;
     fieldId;
-    constructor(route, router, casesService, caseNotifier, workAllocationService, sessionStorageService) {
+    errorMessages = [];
+    constructor(route, router, casesService, caseNotifier, workAllocationService, sessionStorageService, eventTriggerService) {
         this.route = route;
         this.router = router;
         this.casesService = casesService;
         this.caseNotifier = caseNotifier;
         this.workAllocationService = workAllocationService;
         this.sessionStorageService = sessionStorageService;
+        this.eventTriggerService = eventTriggerService;
     }
     ngOnInit() {
         this.queryId = this.route.snapshot.params.qid;
         this.caseNotifier.caseView.pipe(take(1)).subscribe((caseDetails) => {
             this.caseDetails = caseDetails;
-            if (this.queryCreateContext !== QueryCreateContext.RESPOND) {
-                // Find raise a query event trigger from the list, will be used when submitting the query
-                this.caseViewTrigger = this.caseDetails.triggers.find((trigger) => trigger.id === this.RAISE_A_QUERY_EVENT_TRIGGER_ID);
-                // Initialise getEventTrigger observable, will be used when submitting the query
-                this.getEventTrigger$ = this.casesService.getEventTrigger(undefined, this.RAISE_A_QUERY_EVENT_TRIGGER_ID, this.caseDetails.case_id);
-            }
-            else {
-                // Raise a query and Follow-up query uses the same event trigger id
-                // Find raise a query event trigger from the list, will be used when submitting the query
-                this.caseViewTrigger = this.caseDetails.triggers.find((trigger) => trigger.id === this.RESPOND_TO_QUERY_EVENT_TRIGGER_ID);
-                // Initialise getEventTrigger observable, will be used when submitting the query
-                this.getEventTrigger$ = this.casesService.getEventTrigger(undefined, this.RESPOND_TO_QUERY_EVENT_TRIGGER_ID, this.caseDetails.case_id);
-            }
+            // Find the appropriate event trigger based on the queryCreateContext
+            this.caseViewTrigger = this.caseDetails.triggers.find((trigger) => this.queryCreateContext !== QueryCreateContext.RESPOND
+                // If the context is not 'RESPOND', find the trigger with the ID for raising a query
+                ? trigger.id === this.RAISE_A_QUERY_EVENT_TRIGGER_ID
+                // If the context is 'RESPOND', find the trigger with the ID for responding to a query
+                : trigger.id === this.RESPOND_TO_QUERY_EVENT_TRIGGER_ID);
         });
-        this.isCaseQueriesClollectionDataPresent();
+        this.setCaseQueriesCollectionData();
     }
     ngOnDestroy() {
         this.createEventSubscription?.unsubscribe();
-        this.searchTasksSubsciption?.unsubscribe();
+        this.searchTasksSubscription?.unsubscribe();
     }
     goBack() {
         this.backClicked.emit(true);
     }
     submit() {
-        // Generate case queries collection data for submission
+        // Check if fieldId is null or undefined
+        if (!this.fieldId) {
+            console.error('Error: Field ID is missing. Cannot proceed with submission.');
+            this.errorMessages = [
+                {
+                    title: 'Error',
+                    description: 'Something unexpected happened. please try again later.',
+                    fieldId: 'field-id'
+                }
+            ];
+            return;
+        }
         const data = this.generateCaseQueriesCollectionData();
-        // Actual submission of query
-        this.createEventSubscription = this.getEventTrigger$.pipe(switchMap((caseEventTrigger) => {
-            // Setup CaseEventData
-            const caseEventData = {
-                data,
-                event: {
-                    id: this.caseViewTrigger.id,
-                    summary: '',
-                    description: this.caseViewTrigger.description
-                },
-                event_token: caseEventTrigger.event_token,
-                ignore_warning: false
-            };
-            // Complete event
-            return this.casesService.createEvent(this.caseDetails, caseEventData);
-        })).subscribe(
-        // Successful response
-        () => {
+        this.createEventSubscription = this.casesService.createEvent(this.caseDetails, {
+            data,
+            event: {
+                id: this.caseViewTrigger?.id,
+                summary: '',
+                description: this.caseViewTrigger?.description
+            },
+            event_token: this.eventData?.event_token,
+            ignore_warning: false
+        }).subscribe(() => {
             // Search and complete task
             this.searchAndCompleteTask();
             // Emit query submitted event
@@ -20094,22 +20172,19 @@ class QueryCheckYourAnswersComponent {
     searchAndCompleteTask() {
         // Search Task
         const searchParameter = { ccdId: this.caseDetails.case_id };
-        this.searchTasksSubsciption = this.workAllocationService.searchTasks(searchParameter)
+        this.searchTasksSubscription = this.workAllocationService.searchTasks(searchParameter)
             .subscribe((response) => {
             // Filter task by query id
-            const filteredtask = response.tasks?.find((task) => {
-                return Object.values(task.additional_properties).some((value) => {
-                    if (value === this.queryId) {
-                        return task;
-                    }
-                });
-            });
+            const filteredTask = response.tasks?.find((task) => Object.values(task.additional_properties).some((value) => value === this.queryId));
             // Trigger event completion
             this.eventCompletionParams = {
                 caseId: this.caseDetails.case_id,
                 eventId: this.RESPOND_TO_QUERY_EVENT_TRIGGER_ID,
-                task: filteredtask
+                task: filteredTask
             };
+        }, (error) => {
+            console.error('Error in searchTasksSubscription:', error);
+            // Handle error appropriately
         });
     }
     generateCaseQueriesCollectionData() {
@@ -20117,16 +20192,52 @@ class QueryCheckYourAnswersComponent {
         const caseMessage = this.queryCreateContext === QueryCreateContext.NEW_QUERY
             ? QueryManagementUtils.getNewQueryData(this.formGroup, currentUserDetails)
             : QueryManagementUtils.getRespondOrFollowupQueryData(this.formGroup, this.queryItem, currentUserDetails);
+        const messageId = this.route.snapshot.params.dataid; // Get the message ID from route params (if present)
+        const isNewQuery = this.queryCreateContext === QueryCreateContext.NEW_QUERY; // Check if this is a new query
         // Check if the field ID has been set dynamically
         if (!this.fieldId) {
             console.error('Error: Field ID for CaseQueriesCollection not found. Cannot proceed with data generation.');
             this.router.navigate(['/', 'service-down']);
         }
-        // Dynamically determine the field ID
-        const dynamicFieldId = this.fieldId;
-        // Base data structure for the query with dynamic property name
-        const newQueryData = {
-            [dynamicFieldId]: {
+        // Initialize new query data structure
+        const newQueryData = {};
+        if (this.caseQueriesCollections?.length) {
+            let matchedCollection;
+            // If it's not a new query, try to find the existing collection with the message ID
+            if (!isNewQuery && messageId) {
+                matchedCollection = this.caseQueriesCollections.find((collection) => collection.caseMessages.some((message) => message.value.id === messageId));
+            }
+            if (matchedCollection) {
+                // Append the new case message to the matched collection's caseMessages
+                matchedCollection.caseMessages.push({
+                    id: null,
+                    value: caseMessage
+                });
+                // Add the matched collection to newQueryData
+                newQueryData[this.fieldId] = {
+                    ...matchedCollection, // Keep existing data intact
+                    caseMessages: [...matchedCollection.caseMessages] // Append the updated messages array
+                };
+            }
+            else {
+                // If no collection matches, or it's a new query
+                newQueryData[this.fieldId] = {
+                    partyName: '', // Not returned by CCD
+                    roleOnCase: '', // Not returned by CCD
+                    caseMessages: [
+                        {
+                            id: null,
+                            value: caseMessage
+                        }
+                    ]
+                };
+                // If caseQueriesCollections is not empty, append its data
+                newQueryData[this.fieldId].caseMessages.push(...this.caseQueriesCollections.flatMap((collection) => collection.caseMessages));
+            }
+        }
+        else {
+            // If there are no existing collections, create a new one (e.g., for new queries)
+            newQueryData[this.fieldId] = {
                 partyName: '', // Not returned by CCD
                 roleOnCase: '', // Not returned by CCD
                 caseMessages: [
@@ -20135,21 +20246,16 @@ class QueryCheckYourAnswersComponent {
                         value: caseMessage
                     }
                 ]
-            }
-        };
-        // If caseQueriesCollections is not empty, append its data
-        if (this.caseQueriesCollections && this.caseQueriesCollections.length > 0) {
-            newQueryData[dynamicFieldId].caseMessages.push(...this.caseQueriesCollections.map((collection) => collection.caseMessages).flat());
+            };
         }
         return newQueryData;
     }
-    isCaseQueriesClollectionDataPresent() {
-        if (this.route.snapshot?.data?.case?.tabs) {
-            this.caseQueriesCollections = this.route.snapshot.data.case.tabs
-                .filter((tab) => tab?.fields?.some((caseField) => caseField.field_type.id === this.CASE_QUERIES_COLLECTION_ID && caseField.field_type.type === this.FIELD_TYPE_COMPLEX))[0]?.fields?.reduce((acc, caseField) => {
+    setCaseQueriesCollectionData() {
+        if (this.eventData?.case_fields?.length) {
+            this.caseQueriesCollections = this.eventData.case_fields.reduce((acc, caseField) => {
                 // Extract the ID based on conditions, updating this.fieldId dynamically
-                this.extractIdBasedOnConditions(caseField);
-                const extractedCaseQueriesFromCaseField = QueryManagementUtils.extractCaseQueriesFromCaseField(caseField, caseField.id);
+                this.extractCaseQueryId(caseField);
+                const extractedCaseQueriesFromCaseField = QueryManagementUtils.extractCaseQueriesFromCaseField(caseField);
                 if (extractedCaseQueriesFromCaseField && typeof extractedCaseQueriesFromCaseField === 'object') {
                     acc.push(extractedCaseQueriesFromCaseField);
                 }
@@ -20157,112 +20263,128 @@ class QueryCheckYourAnswersComponent {
             }, []);
         }
     }
-    extractIdBasedOnConditions(data) {
-        // Check if field_type.id is 'CaseQueriesCollection' and field_type.type is 'Complex'
-        if (data.field_type.id === this.CASE_QUERIES_COLLECTION_ID &&
-            data.field_type.type === this.FIELD_TYPE_COMPLEX) {
-            // Set the field ID dynamically based on the extracted data
-            this.fieldId = data.id; // Store the ID for use in generating newQueryData
+    extractCaseQueryId(data) {
+        const { id, value } = data;
+        const messageId = this.route.snapshot.params.dataid;
+        // Check if the field_type matches CaseQueriesCollection and type is Complex
+        if (data.field_type.id === this.CASE_QUERIES_COLLECTION_ID && data.field_type.type === this.FIELD_TYPE_COMPLEX) {
+            if (this.queryCreateContext !== QueryCreateContext.RESPOND) {
+                // Set the field ID dynamically based on the extracted data
+                this.fieldId = id; // Store the ID for use in generating newQueryData
+            }
+            // If messageId is present, find the corresponding case message
+            if (messageId && value?.caseMessages) {
+                // Check for a message that has the specified messageId
+                const matchedMessage = value.caseMessages.find((message) => message.value.id === messageId);
+                // If a matching message is found, set the fieldId to the corresponding id
+                if (matchedMessage) {
+                    this.fieldId = id; // This assumes you still want to use the same id
+                }
+            }
         }
     }
-    static ɵfac = function QueryCheckYourAnswersComponent_Factory(t) { return new (t || QueryCheckYourAnswersComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(SessionStorageService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryCheckYourAnswersComponent, selectors: [["ccd-query-check-your-answers"]], inputs: { formGroup: "formGroup", queryItem: "queryItem", queryCreateContext: "queryCreateContext" }, outputs: { backClicked: "backClicked", querySubmitted: "querySubmitted" }, decls: 42, vars: 26, consts: [["defaultCheckYourAnswersTitle", ""], ["isHearingRelatedFalse", ""], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds-from-desktop"], [4, "ngIf"], [1, "govuk-heading-l"], [4, "ngIf", "ngIfElse"], [1, "govuk-!-margin-bottom-4"], ["class", "govuk-summary-list govuk-!-margin-bottom-0", 4, "ngIf"], [1, "govuk-summary-list", "govuk-!-margin-bottom-0"], [1, "govuk-summary-list__row"], [1, "govuk-summary-list__key"], [1, "govuk-summary-list__value"], [1, "govuk-summary-list__actions"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [1, "govuk-summary-list__value", "govuk-summary-list__value--documentAttached"], [3, "attachments", 4, "ngIf"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-right-3", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", 3, "click"], [3, "eventCompletionParams"], [1, "govuk-caption-l"], ["href", "javascript:void(0)", "class", "govuk-link", 3, "click", 4, "ngIf"], ["class", "govuk-summary-list__row", 4, "ngIf"], [3, "attachments"]], template: function QueryCheckYourAnswersComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function QueryCheckYourAnswersComponent_Factory(t) { return new (t || QueryCheckYourAnswersComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(EventTriggerService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryCheckYourAnswersComponent, selectors: [["ccd-query-check-your-answers"]], inputs: { formGroup: "formGroup", queryItem: "queryItem", queryCreateContext: "queryCreateContext", eventData: "eventData" }, outputs: { backClicked: "backClicked", querySubmitted: "querySubmitted" }, decls: 43, vars: 27, consts: [["defaultCheckYourAnswersTitle", ""], ["isHearingRelatedFalse", ""], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds-from-desktop"], ["class", "govuk-error-summary", "aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 4, "ngIf"], [4, "ngIf"], [1, "govuk-heading-l"], [4, "ngIf", "ngIfElse"], [1, "govuk-!-margin-bottom-4"], ["class", "govuk-summary-list govuk-!-margin-bottom-0", 4, "ngIf"], [1, "govuk-summary-list", "govuk-!-margin-bottom-0"], [1, "govuk-summary-list__row"], [1, "govuk-summary-list__key"], [1, "govuk-summary-list__value"], [1, "govuk-summary-list__actions"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [1, "govuk-summary-list__value", "govuk-summary-list__value--documentAttached"], [3, "attachments", 4, "ngIf"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-right-3", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", 3, "click"], [3, "eventCompletionParams"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [4, "ngFor", "ngForOf"], ["href", "javascript:void(0)", 1, "validation-error", 3, "id"], [1, "govuk-caption-l"], ["href", "javascript:void(0)", "class", "govuk-link", 3, "click", 4, "ngIf"], ["class", "govuk-summary-list__row", 4, "ngIf"], [3, "attachments"]], template: function QueryCheckYourAnswersComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3);
-            i0.ɵɵtemplate(2, QueryCheckYourAnswersComponent_ng_container_2_Template, 4, 3, "ng-container", 4);
-            i0.ɵɵelementStart(3, "h1", 5);
-            i0.ɵɵtemplate(4, QueryCheckYourAnswersComponent_ng_container_4_Template, 3, 3, "ng-container", 6)(5, QueryCheckYourAnswersComponent_ng_template_5_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(2, QueryCheckYourAnswersComponent_div_2_Template, 7, 4, "div", 4)(3, QueryCheckYourAnswersComponent_ng_container_3_Template, 4, 3, "ng-container", 5);
+            i0.ɵɵelementStart(4, "h1", 6);
+            i0.ɵɵtemplate(5, QueryCheckYourAnswersComponent_ng_container_5_Template, 3, 3, "ng-container", 7)(6, QueryCheckYourAnswersComponent_ng_template_6_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "div", 7);
-            i0.ɵɵelement(8, "ccd-query-case-details-header");
+            i0.ɵɵelementStart(8, "div", 8);
+            i0.ɵɵelement(9, "ccd-query-case-details-header");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(9, QueryCheckYourAnswersComponent_dl_9_Template, 9, 5, "dl", 8);
-            i0.ɵɵelementStart(10, "dl", 9)(11, "div", 10)(12, "dt", 11);
-            i0.ɵɵtext(13);
-            i0.ɵɵpipe(14, "rpxTranslate");
+            i0.ɵɵtemplate(10, QueryCheckYourAnswersComponent_dl_10_Template, 9, 5, "dl", 9);
+            i0.ɵɵelementStart(11, "dl", 10)(12, "div", 11)(13, "dt", 12);
+            i0.ɵɵtext(14);
+            i0.ɵɵpipe(15, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "dd", 12);
-            i0.ɵɵtext(16);
+            i0.ɵɵelementStart(16, "dd", 13);
+            i0.ɵɵtext(17);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "dd", 13)(18, "a", 14);
-            i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_Template_a_click_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.goBack()); });
-            i0.ɵɵtext(19);
-            i0.ɵɵpipe(20, "rpxTranslate");
+            i0.ɵɵelementStart(18, "dd", 14)(19, "a", 15);
+            i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_Template_a_click_19_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.goBack()); });
+            i0.ɵɵtext(20);
+            i0.ɵɵpipe(21, "rpxTranslate");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵtemplate(21, QueryCheckYourAnswersComponent_dl_21_Template, 14, 9, "dl", 8);
-            i0.ɵɵelementStart(22, "dl", 9)(23, "div", 10)(24, "dt", 11);
-            i0.ɵɵtext(25);
-            i0.ɵɵpipe(26, "rpxTranslate");
+            i0.ɵɵtemplate(22, QueryCheckYourAnswersComponent_dl_22_Template, 14, 9, "dl", 9);
+            i0.ɵɵelementStart(23, "dl", 10)(24, "div", 11)(25, "dt", 12);
+            i0.ɵɵtext(26);
+            i0.ɵɵpipe(27, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "dd", 15);
-            i0.ɵɵtemplate(28, QueryCheckYourAnswersComponent_ccd_query_attachments_read_28_Template, 1, 1, "ccd-query-attachments-read", 16);
+            i0.ɵɵelementStart(28, "dd", 16);
+            i0.ɵɵtemplate(29, QueryCheckYourAnswersComponent_ccd_query_attachments_read_29_Template, 1, 1, "ccd-query-attachments-read", 17);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "dd", 13)(30, "a", 14);
-            i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_Template_a_click_30_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.goBack()); });
-            i0.ɵɵtext(31);
-            i0.ɵɵpipe(32, "rpxTranslate");
+            i0.ɵɵelementStart(30, "dd", 14)(31, "a", 15);
+            i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_Template_a_click_31_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.goBack()); });
+            i0.ɵɵtext(32);
+            i0.ɵɵpipe(33, "rpxTranslate");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelement(33, "br");
-            i0.ɵɵelementStart(34, "div")(35, "button", 17);
-            i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.goBack()); });
-            i0.ɵɵtext(36);
-            i0.ɵɵpipe(37, "rpxTranslate");
+            i0.ɵɵelement(34, "br");
+            i0.ɵɵelementStart(35, "div")(36, "button", 18);
+            i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.goBack()); });
+            i0.ɵɵtext(37);
+            i0.ɵɵpipe(38, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "button", 18);
-            i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.submit()); });
-            i0.ɵɵtext(39);
-            i0.ɵɵpipe(40, "rpxTranslate");
+            i0.ɵɵelementStart(39, "button", 19);
+            i0.ɵɵlistener("click", function QueryCheckYourAnswersComponent_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.submit()); });
+            i0.ɵɵtext(40);
+            i0.ɵɵpipe(41, "rpxTranslate");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(41, "ccd-query-event-completion", 19);
+            i0.ɵɵelement(42, "ccd-query-event-completion", 20);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            let tmp_6_0;
-            const defaultCheckYourAnswersTitle_r7 = i0.ɵɵreference(6);
+            let tmp_7_0;
+            const defaultCheckYourAnswersTitle_r8 = i0.ɵɵreference(7);
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.errorMessages.length > 0);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.queryCreateContext === ctx.queryCreateContextEnum.NEW_QUERY);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.queryCreateContext === ctx.queryCreateContextEnum.RESPOND)("ngIfElse", defaultCheckYourAnswersTitle_r7);
+            i0.ɵɵproperty("ngIf", ctx.queryCreateContext === ctx.queryCreateContextEnum.RESPOND)("ngIfElse", defaultCheckYourAnswersTitle_r8);
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngIf", ctx.queryCreateContext !== ctx.queryCreateContextEnum.FOLLOWUP);
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", ctx.queryCreateContext === ctx.queryCreateContextEnum.RESPOND ? "Response detail" : i0.ɵɵpipeBind1(14, 14, "Query detail"), " ");
+            i0.ɵɵtextInterpolate1(" ", ctx.queryCreateContext === ctx.queryCreateContextEnum.RESPOND ? "Response detail" : i0.ɵɵpipeBind1(15, 15, "Query detail"), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", (tmp_6_0 = ctx.formGroup.get("body")) == null ? null : tmp_6_0.value, " ");
+            i0.ɵɵtextInterpolate1(" ", (tmp_7_0 = ctx.formGroup.get("body")) == null ? null : tmp_7_0.value, " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 16, "Change"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 17, "Change"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.queryCreateContext === ctx.queryCreateContextEnum.NEW_QUERY);
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", ctx.queryCreateContext === ctx.queryCreateContextEnum.NEW_QUERY ? "Upload a file to the query" : i0.ɵɵpipeBind1(26, 18, "Document attached"), " ");
+            i0.ɵɵtextInterpolate1(" ", ctx.queryCreateContext === ctx.queryCreateContextEnum.NEW_QUERY ? "Upload a file to the query" : i0.ɵɵpipeBind1(27, 19, "Document attached"), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.formGroup.get("attachments").value);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(32, 20, "Change"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 21, "Change"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(37, 22, "Previous"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(38, 23, "Previous"), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(40, 24, "Submit"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(41, 25, "Submit"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("eventCompletionParams", ctx.eventCompletionParams);
         } }, styles: [".govuk-summary-list__value--documentAttached[_ngcontent-%COMP%]{vertical-align:middle}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryCheckYourAnswersComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-query-check-your-answers', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-two-thirds-from-desktop\">\n    <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\">\n      <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    </ng-container>\n\n    <h1 class=\"govuk-heading-l\">\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.RESPOND; else defaultCheckYourAnswersTitle\">\n        {{ 'Review query response details' | rpxTranslate }}\n      </ng-container>\n\n      <ng-template #defaultCheckYourAnswersTitle>\n        {{ 'Review query details' | rpxTranslate }}\n      </ng-template>\n    </h1>\n    <div class=\"govuk-!-margin-bottom-4\">\n      <ccd-query-case-details-header></ccd-query-case-details-header>\n    </div>\n\n    <dl *ngIf=\"queryCreateContext !== queryCreateContextEnum.FOLLOWUP\" class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Submitted query' : 'Query subject' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? queryItem.subject : formGroup.get('subject')?.value }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a  *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\" \n            href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Response detail' : 'Query detail' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ formGroup.get('body')?.value }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\" class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ 'Is the query hearing related?' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          <ng-container *ngIf=\"formGroup.get('isHearingRelated')?.value === true; else isHearingRelatedFalse\">\n            {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n          </ng-container>\n          <ng-template #isHearingRelatedFalse>\n            {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n          </ng-template>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n\n      <div *ngIf=\"formGroup.get('isHearingRelated')?.value\" class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.NEW_QUERY\n            ? 'What is the date of the hearing?'\n            : 'What is the date of the hearing your query is related to?' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ formGroup.get('hearingDate')?.value | date: 'dd MMM yyyy' }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.NEW_QUERY ? 'Upload a file to the query' : 'Document attached' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value govuk-summary-list__value--documentAttached\">\n          <ccd-query-attachments-read\n            *ngIf=\"this.formGroup.get('attachments').value\"\n            [attachments]=\"this.formGroup.get('attachments').value\"\n          >\n          </ccd-query-attachments-read>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <br>\n\n    <div>\n      <button class=\"govuk-button govuk-button--secondary govuk-!-margin-right-3\" data-module=\"govuk-button\"\n        (click)=\"goBack()\">\n        {{ 'Previous' | rpxTranslate }}\n      </button>\n      <button class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"submit()\">\n        {{ 'Submit' | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n\n  <ccd-query-event-completion [eventCompletionParams]=\"eventCompletionParams\">    \n  </ccd-query-event-completion>\n</div>\n", styles: [".govuk-summary-list__value--documentAttached{vertical-align:middle}\n"] }]
-    }], () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: CasesService }, { type: CaseNotifier }, { type: WorkAllocationService }, { type: SessionStorageService }], { formGroup: [{
+        args: [{ selector: 'ccd-query-check-your-answers', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-two-thirds-from-desktop\">\n    <!-- Error message summary -->\n    <div *ngIf=\"errorMessages.length > 0\" class=\"govuk-error-summary\"\n      aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\"\n      data-module=\"govuk-error-summary\">\n     <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n       {{ 'There is a problem' | rpxTranslate }}\n     </h2>\n     <div class=\"govuk-error-summary__body\">\n       <ul class=\"govuk-list govuk-error-summary__list\">\n         <li *ngFor=\"let errorMessage of errorMessages\">\n           <a [id]=\"'error-' + errorMessage.fieldId\" href=\"javascript:void(0)\"\n             class=\"validation-error\">{{ errorMessage.description | rpxTranslate }}</a>\n         </li>\n       </ul>\n     </div>\n   </div>\n\n    <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\">\n      <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    </ng-container>\n\n    <h1 class=\"govuk-heading-l\">\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.RESPOND; else defaultCheckYourAnswersTitle\">\n        {{ 'Review query response details' | rpxTranslate }}\n      </ng-container>\n\n      <ng-template #defaultCheckYourAnswersTitle>\n        {{ 'Review query details' | rpxTranslate }}\n      </ng-template>\n    </h1>\n    <div class=\"govuk-!-margin-bottom-4\">\n      <ccd-query-case-details-header></ccd-query-case-details-header>\n    </div>\n\n    <dl *ngIf=\"queryCreateContext !== queryCreateContextEnum.FOLLOWUP\" class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Submitted query' : 'Query subject' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? queryItem.subject : formGroup.get('subject')?.value }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a  *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\" \n            href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Response detail' : 'Query detail' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ formGroup.get('body')?.value }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\" class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ 'Is the query hearing related?' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          <ng-container *ngIf=\"formGroup.get('isHearingRelated')?.value === true; else isHearingRelatedFalse\">\n            {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n          </ng-container>\n          <ng-template #isHearingRelatedFalse>\n            {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n          </ng-template>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n\n      <div *ngIf=\"formGroup.get('isHearingRelated')?.value\" class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.NEW_QUERY\n            ? 'What is the date of the hearing?'\n            : 'What is the date of the hearing your query is related to?' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ formGroup.get('hearingDate')?.value | date: 'dd MMM yyyy' }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.NEW_QUERY ? 'Upload a file to the query' : 'Document attached' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value govuk-summary-list__value--documentAttached\">\n          <ccd-query-attachments-read\n            *ngIf=\"this.formGroup.get('attachments').value\"\n            [attachments]=\"this.formGroup.get('attachments').value\"\n          >\n          </ccd-query-attachments-read>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <br>\n\n    <div>\n      <button class=\"govuk-button govuk-button--secondary govuk-!-margin-right-3\" data-module=\"govuk-button\"\n        (click)=\"goBack()\">\n        {{ 'Previous' | rpxTranslate }}\n      </button>\n      <button class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"submit()\">\n        {{ 'Submit' | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n\n  <ccd-query-event-completion [eventCompletionParams]=\"eventCompletionParams\">    \n  </ccd-query-event-completion>\n</div>\n", styles: [".govuk-summary-list__value--documentAttached{vertical-align:middle}\n"] }]
+    }], () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: CasesService }, { type: CaseNotifier }, { type: WorkAllocationService }, { type: SessionStorageService }, { type: EventTriggerService }], { formGroup: [{
             type: Input
         }], queryItem: [{
             type: Input
         }], queryCreateContext: [{
             type: Input
+        }], eventData: [{
+            type: Input
         }], backClicked: [{
             type: Output
         }], querySubmitted: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryCheckYourAnswersComponent, { className: "QueryCheckYourAnswersComponent", filePath: "lib/shared/components/palette/query-management/components/query-check-your-answers/query-check-your-answers.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryCheckYourAnswersComponent, { className: "QueryCheckYourAnswersComponent", filePath: "lib/shared/components/palette/query-management/components/query-check-your-answers/query-check-your-answers.component.ts", lineNumber: 23 }); })();
 
-function QueryDetailsComponent_ng_container_0_tr_45_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_tr_46_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr", 11)(1, "th", 7);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
@@ -20278,13 +20400,13 @@ function QueryDetailsComponent_ng_container_0_tr_45_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(6, 4, ctx_r1.query.hearingDate, "dd MMM yyyy"));
 } }
-function QueryDetailsComponent_ng_container_0_ccd_query_attachments_read_51_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_ccd_query_attachments_read_52_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-query-attachments-read", 12);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("attachments", ctx_r1.query.attachments);
 } }
-function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_container_1_tr_15_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_container_1_tr_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr", 6)(1, "th", 7);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
@@ -20299,13 +20421,13 @@ function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(child_r3.name);
 } }
-function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_container_1_ccd_query_attachments_read_27_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_container_1_ccd_query_attachments_read_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-query-attachments-read", 12);
 } if (rf & 2) {
     const child_r3 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵproperty("attachments", child_r3.attachments);
 } }
-function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "table", 3);
     i0.ɵɵpipe(2, "rpxTranslate");
@@ -20321,7 +20443,7 @@ function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_
     i0.ɵɵtext(13);
     i0.ɵɵpipe(14, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(15, QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_container_1_tr_15_Template, 6, 4, "tr", 15);
+    i0.ɵɵtemplate(15, QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_container_1_tr_15_Template, 6, 4, "tr", 15);
     i0.ɵɵelementStart(16, "tr", 6)(17, "th", 7);
     i0.ɵɵtext(18);
     i0.ɵɵpipe(19, "rpxTranslate");
@@ -20334,7 +20456,7 @@ function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_
     i0.ɵɵpipe(25, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(26, "td", 8);
-    i0.ɵɵtemplate(27, QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_container_1_ccd_query_attachments_read_27_Template, 1, 1, "ccd-query-attachments-read", 10);
+    i0.ɵɵtemplate(27, QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_container_1_ccd_query_attachments_read_27_Template, 1, 1, "ccd-query-attachments-read", 10);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -20359,13 +20481,13 @@ function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", child_r3.attachments);
 } }
-function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_template_2_ccd_query_attachments_read_34_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_template_2_ccd_query_attachments_read_34_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-query-attachments-read", 12);
 } if (rf & 2) {
     const child_r3 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵproperty("attachments", child_r3.attachments);
 } }
-function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
@@ -20403,7 +20525,7 @@ function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_
     i0.ɵɵpipe(32, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(33, "td", 8);
-    i0.ɵɵtemplate(34, QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_template_2_ccd_query_attachments_read_34_Template, 1, 1, "ccd-query-attachments-read", 10);
+    i0.ɵɵtemplate(34, QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_template_2_ccd_query_attachments_read_34_Template, 1, 1, "ccd-query-attachments-read", 10);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const child_r3 = i0.ɵɵnextContext().$implicit;
@@ -20430,9 +20552,9 @@ function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", child_r3.attachments);
 } }
-function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_container_1_Template, 28, 22, "ng-container", 14)(2, QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_ng_template_2_Template, 35, 28, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(1, QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_container_1_Template, 28, 22, "ng-container", 14)(2, QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_ng_template_2_Template, 35, 28, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const i_r4 = ctx.index;
@@ -20440,9 +20562,9 @@ function QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_Tem
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", i_r4 % 2 === 0)("ngIfElse", followUpMessage_r5);
 } }
-function QueryDetailsComponent_ng_container_0_ng_container_52_Template(rf, ctx) { if (rf & 1) {
+function QueryDetailsComponent_ng_container_0_ng_container_53_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, QueryDetailsComponent_ng_container_0_ng_container_52_ng_container_1_Template, 4, 2, "ng-container", 13);
+    i0.ɵɵtemplate(1, QueryDetailsComponent_ng_container_0_ng_container_53_ng_container_1_Template, 4, 2, "ng-container", 13);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -20452,100 +20574,101 @@ function QueryDetailsComponent_ng_container_0_ng_container_52_Template(rf, ctx)
 function QueryDetailsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "p")(2, "a", 2);
-    i0.ɵɵlistener("click", function QueryDetailsComponent_ng_container_0_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBack()); });
-    i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "rpxTranslate");
+    i0.ɵɵelement(1, "br");
+    i0.ɵɵelementStart(2, "p")(3, "a", 2);
+    i0.ɵɵlistener("click", function QueryDetailsComponent_ng_container_0_Template_a_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBack()); });
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div")(6, "table", 3);
-    i0.ɵɵpipe(7, "rpxTranslate");
-    i0.ɵɵelementStart(8, "caption", 4)(9, "div");
-    i0.ɵɵtext(10);
-    i0.ɵɵpipe(11, "rpxTranslate");
+    i0.ɵɵelementStart(6, "div")(7, "table", 3);
+    i0.ɵɵpipe(8, "rpxTranslate");
+    i0.ɵɵelementStart(9, "caption", 4)(10, "div");
+    i0.ɵɵtext(11);
+    i0.ɵɵpipe(12, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "tbody", 5)(13, "tr", 6)(14, "th", 7);
-    i0.ɵɵtext(15);
-    i0.ɵɵpipe(16, "rpxTranslate");
+    i0.ɵɵelementStart(13, "tbody", 5)(14, "tr", 6)(15, "th", 7);
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "td", 8);
-    i0.ɵɵtext(18);
+    i0.ɵɵelementStart(18, "td", 8);
+    i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "tr", 6)(20, "th", 7);
-    i0.ɵɵtext(21);
-    i0.ɵɵpipe(22, "rpxTranslate");
+    i0.ɵɵelementStart(20, "tr", 6)(21, "th", 7);
+    i0.ɵɵtext(22);
+    i0.ɵɵpipe(23, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "td", 8);
-    i0.ɵɵtext(24);
-    i0.ɵɵpipe(25, "date");
+    i0.ɵɵelementStart(24, "td", 8);
+    i0.ɵɵtext(25);
+    i0.ɵɵpipe(26, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(26, "tr", 6)(27, "th", 7);
-    i0.ɵɵtext(28);
-    i0.ɵɵpipe(29, "rpxTranslate");
+    i0.ɵɵelementStart(27, "tr", 6)(28, "th", 7);
+    i0.ɵɵtext(29);
+    i0.ɵɵpipe(30, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "td", 8);
-    i0.ɵɵtext(31);
+    i0.ɵɵelementStart(31, "td", 8);
+    i0.ɵɵtext(32);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "tr", 6)(33, "th", 7);
-    i0.ɵɵtext(34);
-    i0.ɵɵpipe(35, "rpxTranslate");
+    i0.ɵɵelementStart(33, "tr", 6)(34, "th", 7);
+    i0.ɵɵtext(35);
+    i0.ɵɵpipe(36, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "td", 8);
-    i0.ɵɵtext(37);
+    i0.ɵɵelementStart(37, "td", 8);
+    i0.ɵɵtext(38);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(38, "tr", 6)(39, "th", 7);
-    i0.ɵɵtext(40);
-    i0.ɵɵpipe(41, "rpxTranslate");
+    i0.ɵɵelementStart(39, "tr", 6)(40, "th", 7);
+    i0.ɵɵtext(41);
+    i0.ɵɵpipe(42, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "td", 8);
-    i0.ɵɵtext(43);
-    i0.ɵɵpipe(44, "rpxTranslate");
+    i0.ɵɵelementStart(43, "td", 8);
+    i0.ɵɵtext(44);
+    i0.ɵɵpipe(45, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(45, QueryDetailsComponent_ng_container_0_tr_45_Template, 7, 7, "tr", 9);
-    i0.ɵɵelementStart(46, "tr", 6)(47, "th", 7);
-    i0.ɵɵtext(48);
-    i0.ɵɵpipe(49, "rpxTranslate");
+    i0.ɵɵtemplate(46, QueryDetailsComponent_ng_container_0_tr_46_Template, 7, 7, "tr", 9);
+    i0.ɵɵelementStart(47, "tr", 6)(48, "th", 7);
+    i0.ɵɵtext(49);
+    i0.ɵɵpipe(50, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(50, "td", 8);
-    i0.ɵɵtemplate(51, QueryDetailsComponent_ng_container_0_ccd_query_attachments_read_51_Template, 1, 1, "ccd-query-attachments-read", 10);
+    i0.ɵɵelementStart(51, "td", 8);
+    i0.ɵɵtemplate(52, QueryDetailsComponent_ng_container_0_ccd_query_attachments_read_52_Template, 1, 1, "ccd-query-attachments-read", 10);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵtemplate(52, QueryDetailsComponent_ng_container_0_ng_container_52_Template, 2, 1, "ng-container", 1);
+    i0.ɵɵtemplate(53, QueryDetailsComponent_ng_container_0_ng_container_53_Template, 2, 1, "ng-container", 1);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 21, "Back to query list"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 21, "Back to query list"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵattribute("aria-describedby", i0.ɵɵpipeBind1(7, 23, "Details of the query"));
+    i0.ɵɵattribute("aria-describedby", i0.ɵɵpipeBind1(8, 23, "Details of the query"));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 25, "Query details"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 25, "Query details"));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 27, "Last submitted by"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 27, "Last submitted by"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.query.lastSubmittedBy);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 29, "Submission date"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(23, 29, "Submission date"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(25, 31, ctx_r1.query.createdOn, "dd MMM yyyy"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(26, 31, ctx_r1.query.createdOn, "dd MMM yyyy"));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(29, 34, "Query subject"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 34, "Query subject"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.query.subject);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(35, 36, "Query body"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 36, "Query body"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.query.body);
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("govuk-table__header--no-border", ctx_r1.query.isHearingRelated);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(41, 38, "Is the query hearing related?"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(42, 38, "Is the query hearing related?"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("govuk-table__cell--no-border", ctx_r1.query.isHearingRelated);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(44, 40, "Is the query hearing related?", null, ctx_r1.query.isHearingRelated ? "Yes" : "No"), "");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(45, 40, "Is the query hearing related?", null, ctx_r1.query.isHearingRelated ? "Yes" : "No"), "");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.query.isHearingRelated);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(49, 44, "Attachments"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(50, 44, "Attachments"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.query.attachments);
     i0.ɵɵadvance();
@@ -20570,14 +20693,14 @@ class QueryDetailsComponent {
     }
     static ɵfac = function QueryDetailsComponent_Factory(t) { return new (t || QueryDetailsComponent)(i0.ɵɵdirectiveInject(SessionStorageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryDetailsComponent, selectors: [["ccd-query-details"]], inputs: { query: "query", caseId: "caseId" }, outputs: { backClicked: "backClicked" }, decls: 1, vars: 1, consts: [["followUpMessage", ""], [4, "ngIf"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [1, "govuk-table", "query-details-table"], [1, "govuk-table__caption", "govuk-table__caption--l"], [1, "govuk-table__body"], [1, "govuk-table__row"], ["scope", "row", 1, "govuk-table__header"], [1, "govuk-table__cell"], ["class", "govuk-table__row govuk-table__row--isHearingRelated", 4, "ngIf"], [3, "attachments", 4, "ngIf"], [1, "govuk-table__row", "govuk-table__row--isHearingRelated"], [3, "attachments"], [4, "ngFor", "ngForOf"], [4, "ngIf", "ngIfElse"], ["class", "govuk-table__row", 4, "ngIf"], [1, "query_details_caption"]], template: function QueryDetailsComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, QueryDetailsComponent_ng_container_0_Template, 53, 46, "ng-container", 1);
+            i0.ɵɵtemplate(0, QueryDetailsComponent_ng_container_0_Template, 54, 46, "ng-container", 1);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.query);
         } }, styles: [".query-details-table[_ngcontent-%COMP%]   .govuk-table__header[_ngcontent-%COMP%]{width:330px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryDetailsComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-query-details', template: "<ng-container *ngIf=\"query\">\n  <p>\n    <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"onBack()\">{{ 'Back to query list' | rpxTranslate }}</a>\n  </p>\n  <div>\n    <table class=\"govuk-table query-details-table\" [attr.aria-describedby]=\"'Details of the query' | rpxTranslate\">\n      <caption class=\"govuk-table__caption govuk-table__caption--l\">\n        <div>{{ 'Query details' | rpxTranslate }}</div>\n      </caption>\n      <tbody class=\"govuk-table__body\">\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Last submitted by' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.lastSubmittedBy }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Submission date' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.createdOn | date: 'dd MMM yyyy' }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Query subject' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.subject }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Query body' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.body }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\" [class.govuk-table__header--no-border]=\"query.isHearingRelated\">\n          {{ 'Is the query hearing related?' | rpxTranslate }}\n        </th>\n        <td class=\"govuk-table__cell\" [class.govuk-table__cell--no-border]=\"query.isHearingRelated\">\n          {{ 'Is the query hearing related?' | rpxTranslate: null : (query.isHearingRelated ? 'Yes' : 'No') }}</td>\n      </tr>\n      <tr class=\"govuk-table__row govuk-table__row--isHearingRelated\" *ngIf=\"query.isHearingRelated\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'What is the date of the hearing?' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.hearingDate | date: 'dd MMM yyyy' }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Attachments' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">\n          <ccd-query-attachments-read\n            *ngIf=\"query.attachments\"\n            [attachments]=\"query.attachments\"\n          >\n          </ccd-query-attachments-read>\n        </td>\n      </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <ng-container *ngIf=\"query.children?.length > 0\">\n    <ng-container *ngFor=\"let child of query.children; let i = index;\">\n      <ng-container *ngIf=\"i % 2 === 0; else followUpMessage\">\n        <table class=\"govuk-table query-details-table\" [attr.aria-describedby]=\"'Response of the query' | rpxTranslate\">\n          <caption class=\"govuk-table__caption govuk-table__caption--l\">\n            <div>{{ 'Response' | rpxTranslate }}</div>\n          </caption>\n          <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\">\n            <th scope=\"row\" class=\"govuk-table__header\">{{ 'Last response date' | rpxTranslate }}</th>\n            <td class=\"govuk-table__cell\">{{ child.createdOn | date: 'dd MMM yyyy' }}</td>\n          </tr>\n\n            <tr *ngIf=\"isCaseworker()\" class=\"govuk-table__row\">\n              <th scope=\"row\" class=\"govuk-table__header\">{{ 'Caseworker name' | rpxTranslate }}</th>\n              <td class=\"govuk-table__cell\">{{ child.name }}</td>\n            </tr>\n\n            <tr class=\"govuk-table__row\">\n              <th scope=\"row\" class=\"govuk-table__header\">{{ 'Response detail' | rpxTranslate }}</th>\n              <td class=\"govuk-table__cell\">{{ child.body }}</td>\n            </tr>\n\n          <tr class=\"govuk-table__row\">\n            <th scope=\"row\" class=\"govuk-table__header\">{{ 'Attachments' | rpxTranslate }}</th>\n            <td class=\"govuk-table__cell\">\n              <ccd-query-attachments-read\n                *ngIf=\"child.attachments\"\n                [attachments]=\"child.attachments\"\n              >\n              </ccd-query-attachments-read>\n            </td>\n          </tr>\n          </tbody>\n        </table>\n      </ng-container>\n\n      <ng-template #followUpMessage>\n        <div class=\"query_details_caption\">{{ 'Follow-up' | rpxTranslate }}</div>\n        <table class=\"govuk-table query-details-table\"\n               [attr.aria-describedby]=\"'Follow-up of the response' | rpxTranslate\">\n          <caption class=\"govuk-table__caption govuk-table__caption--l\">\n            <div>{{ 'Follow up query' | rpxTranslate }}</div>\n          </caption>\n          <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\">\n            <th scope=\"row\" class=\"govuk-table__header\">{{ 'Last submission date' | rpxTranslate }}</th>\n            <td class=\"govuk-table__cell\">{{ child.createdOn | date: 'dd MMM yyyy' }}</td>\n          </tr>\n\n          <tr class=\"govuk-table__row\">\n            <th scope=\"row\" class=\"govuk-table__header\">{{ 'Last submitted by' | rpxTranslate }}</th>\n            <td class=\"govuk-table__cell\">{{ child.name }}</td>\n          </tr>\n\n            <tr class=\"govuk-table__row\">\n              <th scope=\"row\" class=\"govuk-table__header\">{{ 'Query detail' | rpxTranslate }}</th>\n              <td class=\"govuk-table__cell\">{{ child.body }}</td>\n            </tr>\n\n            <tr class=\"govuk-table__row\">\n              <th scope=\"row\" class=\"govuk-table__header\">{{ 'Attachments' | rpxTranslate }}</th>\n              <td class=\"govuk-table__cell\">\n                <ccd-query-attachments-read\n                  *ngIf=\"child.attachments\"\n                  [attachments]=\"child.attachments\"\n                >\n                </ccd-query-attachments-read>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [".query-details-table .govuk-table__header{width:330px}\n"] }]
+        args: [{ selector: 'ccd-query-details', template: "<ng-container *ngIf=\"query\">\n  <br/>\n  <p>\n    <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"onBack()\">{{ 'Back to query list' | rpxTranslate }}</a>\n  </p>\n  <div>\n    <table class=\"govuk-table query-details-table\" [attr.aria-describedby]=\"'Details of the query' | rpxTranslate\">\n      <caption class=\"govuk-table__caption govuk-table__caption--l\">\n        <div>{{ 'Query details' | rpxTranslate }}</div>\n      </caption>\n      <tbody class=\"govuk-table__body\">\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Last submitted by' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.lastSubmittedBy }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Submission date' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.createdOn | date: 'dd MMM yyyy' }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Query subject' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.subject }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Query body' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.body }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\" [class.govuk-table__header--no-border]=\"query.isHearingRelated\">\n          {{ 'Is the query hearing related?' | rpxTranslate }}\n        </th>\n        <td class=\"govuk-table__cell\" [class.govuk-table__cell--no-border]=\"query.isHearingRelated\">\n          {{ 'Is the query hearing related?' | rpxTranslate: null : (query.isHearingRelated ? 'Yes' : 'No') }}</td>\n      </tr>\n      <tr class=\"govuk-table__row govuk-table__row--isHearingRelated\" *ngIf=\"query.isHearingRelated\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'What is the date of the hearing?' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">{{ query.hearingDate | date: 'dd MMM yyyy' }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <th scope=\"row\" class=\"govuk-table__header\">{{ 'Attachments' | rpxTranslate }}</th>\n        <td class=\"govuk-table__cell\">\n          <ccd-query-attachments-read\n            *ngIf=\"query.attachments\"\n            [attachments]=\"query.attachments\"\n          >\n          </ccd-query-attachments-read>\n        </td>\n      </tr>\n      </tbody>\n    </table>\n  </div>\n  <ng-container *ngIf=\"query.children?.length > 0\">\n    <ng-container *ngFor=\"let child of query.children; let i = index;\">\n      <ng-container *ngIf=\"i % 2 === 0; else followUpMessage\">\n        <table class=\"govuk-table query-details-table\" [attr.aria-describedby]=\"'Response of the query' | rpxTranslate\">\n          <caption class=\"govuk-table__caption govuk-table__caption--l\">\n            <div>{{ 'Response' | rpxTranslate }}</div>\n          </caption>\n          <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\">\n            <th scope=\"row\" class=\"govuk-table__header\">{{ 'Last response date' | rpxTranslate }}</th>\n            <td class=\"govuk-table__cell\">{{ child.createdOn | date: 'dd MMM yyyy' }}</td>\n          </tr>\n\n            <tr *ngIf=\"isCaseworker()\" class=\"govuk-table__row\">\n              <th scope=\"row\" class=\"govuk-table__header\">{{ 'Caseworker name' | rpxTranslate }}</th>\n              <td class=\"govuk-table__cell\">{{ child.name }}</td>\n            </tr>\n\n            <tr class=\"govuk-table__row\">\n              <th scope=\"row\" class=\"govuk-table__header\">{{ 'Response detail' | rpxTranslate }}</th>\n              <td class=\"govuk-table__cell\">{{ child.body }}</td>\n            </tr>\n\n          <tr class=\"govuk-table__row\">\n            <th scope=\"row\" class=\"govuk-table__header\">{{ 'Attachments' | rpxTranslate }}</th>\n            <td class=\"govuk-table__cell\">\n              <ccd-query-attachments-read\n                *ngIf=\"child.attachments\"\n                [attachments]=\"child.attachments\"\n              >\n              </ccd-query-attachments-read>\n            </td>\n          </tr>\n          </tbody>\n        </table>\n      </ng-container>\n\n      <ng-template #followUpMessage>\n        <div class=\"query_details_caption\">{{ 'Follow-up' | rpxTranslate }}</div>\n        <table class=\"govuk-table query-details-table\"\n               [attr.aria-describedby]=\"'Follow-up of the response' | rpxTranslate\">\n          <caption class=\"govuk-table__caption govuk-table__caption--l\">\n            <div>{{ 'Follow up query' | rpxTranslate }}</div>\n          </caption>\n          <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\">\n            <th scope=\"row\" class=\"govuk-table__header\">{{ 'Last submission date' | rpxTranslate }}</th>\n            <td class=\"govuk-table__cell\">{{ child.createdOn | date: 'dd MMM yyyy' }}</td>\n          </tr>\n\n          <tr class=\"govuk-table__row\">\n            <th scope=\"row\" class=\"govuk-table__header\">{{ 'Last submitted by' | rpxTranslate }}</th>\n            <td class=\"govuk-table__cell\">{{ child.name }}</td>\n          </tr>\n\n            <tr class=\"govuk-table__row\">\n              <th scope=\"row\" class=\"govuk-table__header\">{{ 'Query detail' | rpxTranslate }}</th>\n              <td class=\"govuk-table__cell\">{{ child.body }}</td>\n            </tr>\n\n            <tr class=\"govuk-table__row\">\n              <th scope=\"row\" class=\"govuk-table__header\">{{ 'Attachments' | rpxTranslate }}</th>\n              <td class=\"govuk-table__cell\">\n                <ccd-query-attachments-read\n                  *ngIf=\"child.attachments\"\n                  [attachments]=\"child.attachments\"\n                >\n                </ccd-query-attachments-read>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [".query-details-table .govuk-table__header{width:330px}\n"] }]
     }], () => [{ type: SessionStorageService }], { query: [{
             type: Input
         }], backClicked: [{
@@ -20896,7 +21019,7 @@ class QueryWriteDateInputComponent {
                     useExisting: forwardRef(() => QueryWriteDateInputComponent),
                     multi: true
                 }
-            ])], decls: 19, vars: 24, consts: [[1, "govuk-date-input", 3, "id"], [1, "govuk-date-input__item"], [1, "govuk-form-group"], [1, "govuk-label", "govuk-date-input__label", 3, "for"], ["type", "text", "inputmode", "numeric", 1, "govuk-input", "govuk-date-input__input", "govuk-input--width-2", 3, "ngModelChange", "input", "id", "name", "ngModel", "disabled"], ["id", "formControlName + '-year'", "type", "text", "inputmode", "numeric", 1, "govuk-input", "govuk-date-input__input", "govuk-input--width-4", 3, "ngModelChange", "input", "name", "ngModel", "disabled"]], template: function QueryWriteDateInputComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], decls: 19, vars: 24, consts: [[1, "govuk-date-input", 3, "id"], [1, "govuk-date-input__item"], [1, "govuk-form-group"], [1, "govuk-label", "govuk-date-input__label", 3, "for"], ["type", "text", "inputmode", "numeric", "maxlength", "2", 1, "govuk-input", "govuk-date-input__input", "govuk-input--width-2", 3, "ngModelChange", "input", "id", "name", "ngModel", "disabled"], ["id", "formControlName + '-year'", "type", "text", "inputmode", "numeric", "maxlength", "4", 1, "govuk-input", "govuk-date-input__input", "govuk-input--width-4", 3, "ngModelChange", "input", "name", "ngModel", "disabled"]], template: function QueryWriteDateInputComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "label", 3);
             i0.ɵɵtext(4);
             i0.ɵɵpipe(5, "rpxTranslate");
@@ -20947,7 +21070,7 @@ class QueryWriteDateInputComponent {
             i0.ɵɵproperty("name", ctx.formControlName + "-year");
             i0.ɵɵtwoWayProperty("ngModel", ctx.year);
             i0.ɵɵproperty("disabled", ctx.disabled);
-        } }, dependencies: [i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i1.RpxTranslatePipe], encapsulation: 2 });
+        } }, dependencies: [i4.DefaultValueAccessor, i4.NgControlStatus, i4.MaxLengthValidator, i4.NgModel, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryWriteDateInputComponent, [{
         type: Component,
@@ -20957,7 +21080,7 @@ class QueryWriteDateInputComponent {
                         useExisting: forwardRef(() => QueryWriteDateInputComponent),
                         multi: true
                     }
-                ], template: "<div class=\"govuk-date-input\" [id]=\"formControlName\">\n  <div class=\"govuk-date-input__item\">\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label govuk-date-input__label\" [for]=\"formControlName + '-day'\">\n        {{ 'Day' | rpxTranslate }}\n      </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" [id]=\"formControlName + '-day'\"\n             [name]=\"formControlName + '-day'\" type=\"text\" inputmode=\"numeric\"\n             [(ngModel)]=\"day\" (input)=\"updateDate()\" [disabled]=\"disabled\">\n    </div>\n  </div>\n  <div class=\"govuk-date-input__item\">\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label govuk-date-input__label\" [for]=\"formControlName + '-month'\">\n        {{ 'Month' | rpxTranslate }}\n      </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" [id]=\"formControlName + '-month'\"\n             [name]=\"formControlName + '-month'\" type=\"text\" inputmode=\"numeric\"\n             [(ngModel)]=\"month\" (input)=\"updateDate()\" [disabled]=\"disabled\">\n    </div>\n  </div>\n  <div class=\"govuk-date-input__item\">\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label govuk-date-input__label\" [for]=\"formControlName + '-year'\">\n        {{ 'Year' | rpxTranslate }}\n      </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"formControlName + '-year'\"\n             [name]=\"formControlName + '-year'\" type=\"text\" inputmode=\"numeric\"\n             [(ngModel)]=\"year\" (input)=\"updateDate()\" [disabled]=\"disabled\">\n    </div>\n  </div>\n</div>\n" }]
+                ], template: "<div class=\"govuk-date-input\" [id]=\"formControlName\">\n  <div class=\"govuk-date-input__item\">\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label govuk-date-input__label\" [for]=\"formControlName + '-day'\">\n        {{ 'Day' | rpxTranslate }}\n      </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" [id]=\"formControlName + '-day'\"\n             [name]=\"formControlName + '-day'\" type=\"text\" inputmode=\"numeric\" maxlength=\"2\"\n             [(ngModel)]=\"day\" (input)=\"updateDate()\" [disabled]=\"disabled\">\n    </div>\n  </div>\n  <div class=\"govuk-date-input__item\">\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label govuk-date-input__label\" [for]=\"formControlName + '-month'\">\n        {{ 'Month' | rpxTranslate }}\n      </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" [id]=\"formControlName + '-month'\"\n             [name]=\"formControlName + '-month'\" type=\"text\" inputmode=\"numeric\" maxlength=\"2\"\n             [(ngModel)]=\"month\" (input)=\"updateDate()\" [disabled]=\"disabled\">\n    </div>\n  </div>\n  <div class=\"govuk-date-input__item\">\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label govuk-date-input__label\" [for]=\"formControlName + '-year'\">\n        {{ 'Year' | rpxTranslate }}\n      </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"formControlName + '-year'\"\n             [name]=\"formControlName + '-year'\" type=\"text\" inputmode=\"numeric\" maxlength=\"4\"\n             [(ngModel)]=\"year\" (input)=\"updateDate()\" [disabled]=\"disabled\">\n    </div>\n  </div>\n</div>\n" }]
     }], null, { formControlName: [{
             type: Input
         }] }); })();
@@ -21159,7 +21282,7 @@ class QueryWriteRaiseQueryComponent {
         }], submitted: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteRaiseQueryComponent, { className: "QueryWriteRaiseQueryComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-raise-query/query-write-raise-query.component.ts", lineNumber: 9 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteRaiseQueryComponent, { className: "QueryWriteRaiseQueryComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-raise-query/query-write-raise-query.component.ts", lineNumber: 8 }); })();
 
 function QueryWriteRespondToQueryComponent_p_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 13)(1, "span", 14);
@@ -21386,7 +21509,8 @@ class QueryConfirmationComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryConfirmationComponent, { className: "QueryConfirmationComponent", filePath: "lib/shared/components/palette/query-management/components/query-confirmation/query-confirmation.component.ts", lineNumber: 9 }); })();
 
-const _c0$B = a0 => ["/query-management", "query", a0, "4"];
+const _c0$B = (a0, a1) => ["/query-management", "query", a0, "4", a1];
+const _c1$e = (a0, a1) => ["/query-management", "query", a0, "3", a1];
 function ReadQueryManagementFieldComponent_ng_container_0_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 5)(1, "ccd-query-list", 6);
@@ -21415,7 +21539,7 @@ function ReadQueryManagementFieldComponent_ng_container_0_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r1.caseQueriesCollections);
 } }
-function ReadQueryManagementFieldComponent_ng_template_1_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+function ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "button", 9);
     i0.ɵɵtext(2);
@@ -21423,13 +21547,13 @@ function ReadQueryManagementFieldComponent_ng_template_1_ng_container_6_Template
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction1(4, _c0$B, ctx_r1.caseId));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$B, ctx_r1.caseId, ctx_r1.query.id));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Ask a follow-up question"), " ");
 } }
-function ReadQueryManagementFieldComponent_ng_template_1_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+function ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 10);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
@@ -21444,37 +21568,55 @@ function ReadQueryManagementFieldComponent_ng_template_1_ng_template_7_Template(
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 4, "Our team will read your query and will respond. Do not submit the same query more than once."));
 } }
+function ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_ng_container_1_Template, 4, 7, "ng-container", 2)(2, ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_ng_template_2_Template, 7, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const queryIsInReview_r5 = i0.ɵɵreference(3);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (ctx_r1.query == null ? null : ctx_r1.query.children == null ? null : ctx_r1.query.children.length) > 0 && (ctx_r1.query == null ? null : ctx_r1.query.children == null ? null : ctx_r1.query.children.length) % 2 === 1)("ngIfElse", queryIsInReview_r5);
+} }
+function ReadQueryManagementFieldComponent_ng_template_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "button", 9);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c1$e, ctx_r1.caseId, ctx_r1.query.id));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Response to a query"), " ");
+} }
 function ReadQueryManagementFieldComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "br");
-    i0.ɵɵelementStart(1, "p")(2, "a", 7);
-    i0.ɵɵlistener("click", function ReadQueryManagementFieldComponent_ng_template_1_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.backToQueryListPage()); });
-    i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "rpxTranslate");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "ccd-query-details", 8);
-    i0.ɵɵlistener("backClicked", function ReadQueryManagementFieldComponent_ng_template_1_Template_ccd_query_details_backClicked_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showQueryList = true); });
+    i0.ɵɵelementStart(0, "ccd-query-details", 7);
+    i0.ɵɵlistener("backClicked", function ReadQueryManagementFieldComponent_ng_template_1_Template_ccd_query_details_backClicked_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showQueryList = true); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, ReadQueryManagementFieldComponent_ng_template_1_ng_container_6_Template, 4, 6, "ng-container", 2)(7, ReadQueryManagementFieldComponent_ng_template_1_ng_template_7_Template, 7, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(1, ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_Template, 4, 2, "ng-container", 8)(2, ReadQueryManagementFieldComponent_ng_template_1_ng_container_2_Template, 4, 7, "ng-container", 8);
 } if (rf & 2) {
-    const queryIsInReview_r5 = i0.ɵɵreference(8);
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 5, "Back to queries"));
-    i0.ɵɵadvance(2);
     i0.ɵɵproperty("query", ctx_r1.query)("caseId", ctx_r1.caseId);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.query == null ? null : ctx_r1.query.children == null ? null : ctx_r1.query.children.length) > 0)("ngIfElse", queryIsInReview_r5);
+    i0.ɵɵproperty("ngIf", !ctx_r1.isCaseworker());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (ctx_r1.query == null ? null : ctx_r1.query.children == null ? null : ctx_r1.query.children.length) >= 0 && ctx_r1.isCaseworker() && (ctx_r1.query == null ? null : ctx_r1.query.children == null ? null : ctx_r1.query.children.length) % 2 === 0);
 } }
 class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
     route;
+    sessionStorageService;
     caseQueriesCollections;
     query;
     showQueryList = true;
     caseId;
-    constructor(route) {
+    constructor(route, sessionStorageService) {
         super();
         this.route = route;
+        this.sessionStorageService = sessionStorageService;
     }
     ngOnInit() {
         this.caseId = this.route.snapshot.params.cid;
@@ -21487,7 +21629,7 @@ class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
             if (this.route.snapshot.data.case?.tabs) {
                 this.caseQueriesCollections = this.route.snapshot.data.case.tabs
                     .filter((tab) => tab.fields?.some((caseField) => caseField.field_type.type === 'ComponentLauncher' && caseField.id === this.caseField.id))[0].fields?.reduce((acc, caseField) => {
-                    const extractedCaseQueriesFromCaseField = QueryManagementUtils.extractCaseQueriesFromCaseField(caseField, caseField.id);
+                    const extractedCaseQueriesFromCaseField = QueryManagementUtils.extractCaseQueriesFromCaseField(caseField);
                     if (extractedCaseQueriesFromCaseField && typeof extractedCaseQueriesFromCaseField === 'object') {
                         acc.push(extractedCaseQueriesFromCaseField);
                     }
@@ -21506,9 +21648,15 @@ class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
         this.showQueryList = true;
         this.query = null;
     }
-    static ɵfac = function ReadQueryManagementFieldComponent_Factory(t) { return new (t || ReadQueryManagementFieldComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadQueryManagementFieldComponent, selectors: [["ccd-read-query-management-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [["singleQueryDetails", ""], ["queryIsInReview", ""], [4, "ngIf", "ngIfElse"], [4, "ngFor", "ngForOf"], ["class", "govuk-!-margin-top-8 govuk-!-margin-bottom-8", 4, "ngIf"], [1, "govuk-!-margin-top-8", "govuk-!-margin-bottom-8"], [3, "selectedQuery", "caseQueriesCollection"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [3, "backClicked", "query", "caseId"], ["id", "ask-follow-up-question", "data-module", "govuk-button", 1, "govuk-button", 3, "routerLink"], [1, "govuk-!-font-weight-bold"]], template: function ReadQueryManagementFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, ReadQueryManagementFieldComponent_ng_container_0_Template, 2, 1, "ng-container", 2)(1, ReadQueryManagementFieldComponent_ng_template_1_Template, 9, 7, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    isCaseworker() {
+        const userDetails = JSON.parse(this.sessionStorageService?.getItem('userDetails'));
+        return userDetails && userDetails.roles
+            && !(userDetails.roles.includes('pui-case-manager')
+                || userDetails.roles.some((role) => role.toLowerCase().includes('judge')));
+    }
+    static ɵfac = function ReadQueryManagementFieldComponent_Factory(t) { return new (t || ReadQueryManagementFieldComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(SessionStorageService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadQueryManagementFieldComponent, selectors: [["ccd-read-query-management-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [["singleQueryDetails", ""], ["queryIsInReview", ""], [4, "ngIf", "ngIfElse"], [4, "ngFor", "ngForOf"], ["class", "govuk-!-margin-top-8 govuk-!-margin-bottom-8", 4, "ngIf"], [1, "govuk-!-margin-top-8", "govuk-!-margin-bottom-8"], [3, "selectedQuery", "caseQueriesCollection"], [3, "backClicked", "query", "caseId"], [4, "ngIf"], ["id", "ask-follow-up-question", "data-module", "govuk-button", 1, "govuk-button", 3, "routerLink"], [1, "govuk-!-font-weight-bold"]], template: function ReadQueryManagementFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ReadQueryManagementFieldComponent_ng_container_0_Template, 2, 1, "ng-container", 2)(1, ReadQueryManagementFieldComponent_ng_template_1_Template, 3, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             const singleQueryDetails_r6 = i0.ɵɵreference(2);
             i0.ɵɵproperty("ngIf", ctx.showQueryList)("ngIfElse", singleQueryDetails_r6);
@@ -21516,9 +21664,9 @@ class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadQueryManagementFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-query-management-field', template: "<ng-container *ngIf=\"showQueryList; else singleQueryDetails\">\n  <ng-container *ngFor=\"let caseQueriesCollection of caseQueriesCollections\">\n    <div *ngIf=\"showQueryList\" class=\"govuk-!-margin-top-8 govuk-!-margin-bottom-8\">\n      <ccd-query-list (selectedQuery)=\"setQuery($event)\" [caseQueriesCollection]=\"caseQueriesCollection\"></ccd-query-list>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #singleQueryDetails>\n  <br>\n  <p>\n    <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"backToQueryListPage()\">{{ 'Back to queries' | rpxTranslate }}</a>\n  </p>\n\n  <ccd-query-details\n    [query]=\"query\"\n    (backClicked)=\"showQueryList = true\"\n    [caseId]=\"caseId\"\n  ></ccd-query-details>\n\n  <ng-container *ngIf=\"query?.children?.length > 0; else queryIsInReview\">\n    <button id=\"ask-follow-up-question\" class=\"govuk-button\" data-module=\"govuk-button\"\n            [routerLink]=\"['/query-management', 'query', caseId, '4']\"\n    >\n      {{ 'Ask a follow-up question' | rpxTranslate }}\n    </button>\n  </ng-container>\n\n  <ng-template #queryIsInReview>\n    <div>\n      <p class=\"govuk-!-font-weight-bold\">{{ 'Your query is under review' | rpxTranslate }}</p>\n      <p>{{ 'Our team will read your query and will respond. Do not submit the same query more than once.' | rpxTranslate }}</p>\n    </div>\n  </ng-template>\n</ng-template>\n" }]
-    }], () => [{ type: i1$1.ActivatedRoute }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadQueryManagementFieldComponent, { className: "ReadQueryManagementFieldComponent", filePath: "lib/shared/components/palette/query-management/read-query-management-field.component.ts", lineNumber: 12 }); })();
+        args: [{ selector: 'ccd-read-query-management-field', template: "<ng-container *ngIf=\"showQueryList; else singleQueryDetails\">\n  <ng-container *ngFor=\"let caseQueriesCollection of caseQueriesCollections\">\n    <div *ngIf=\"showQueryList\" class=\"govuk-!-margin-top-8 govuk-!-margin-bottom-8\">\n      <ccd-query-list (selectedQuery)=\"setQuery($event)\" [caseQueriesCollection]=\"caseQueriesCollection\"></ccd-query-list>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #singleQueryDetails>\n  <ccd-query-details\n    [query]=\"query\"\n    (backClicked)=\"showQueryList = true\"\n    [caseId]=\"caseId\"\n  ></ccd-query-details>\n\n  <ng-container *ngIf=\"!isCaseworker()\">\n    <ng-container *ngIf=\"query?.children?.length > 0 && query?.children?.length % 2 === 1; else queryIsInReview\">\n      <button id=\"ask-follow-up-question\" class=\"govuk-button\" data-module=\"govuk-button\"\n              [routerLink]=\"['/query-management', 'query', caseId, '4', query.id]\">\n        {{ 'Ask a follow-up question' | rpxTranslate }}\n      </button>\n    </ng-container>\n\n    <ng-template #queryIsInReview>\n      <div>\n        <p class=\"govuk-!-font-weight-bold\">{{ 'Your query is under review' | rpxTranslate }}</p>\n        <p>{{ 'Our team will read your query and will respond. Do not submit the same query more than once.' | rpxTranslate }}</p>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"query?.children?.length >= 0 && isCaseworker() && query?.children?.length % 2 === 0\">\n    <button id=\"ask-follow-up-question\" class=\"govuk-button\" data-module=\"govuk-button\"\n    [routerLink]=\"['/query-management', 'query', caseId, '3', query.id]\"\n    >\n    {{ 'Response to a query' | rpxTranslate }}\n    </button>\n  </ng-container>\n</ng-template>\n" }]
+    }], () => [{ type: i1$1.ActivatedRoute }, { type: SessionStorageService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadQueryManagementFieldComponent, { className: "ReadQueryManagementFieldComponent", filePath: "lib/shared/components/palette/query-management/read-query-management-field.component.ts", lineNumber: 13 }); })();
 
 class ReadTextAreaFieldComponent extends AbstractFieldReadComponent {
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadTextAreaFieldComponent_BaseFactory; return function ReadTextAreaFieldComponent_Factory(t) { return (ɵReadTextAreaFieldComponent_BaseFactory || (ɵReadTextAreaFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadTextAreaFieldComponent)))(t || ReadTextAreaFieldComponent); }; })();
@@ -22760,10 +22908,11 @@ function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, c
     i0.ɵɵelement(6, "br");
     i0.ɵɵelementStart(7, "span", 17);
     i0.ɵɵtext(8);
-    i0.ɵɵpipe(9, "date");
+    i0.ɵɵpipe(9, "ccdDate");
+    i0.ɵɵpipe(10, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 18)(11, "ccd-case-file-view-folder-document-actions", 19);
-    i0.ɵɵlistener("changeFolderAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_changeFolderAction_11_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("changeFolder", node_r2)); })("openInANewTabAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_openInANewTabAction_11_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("openInANewTab", node_r2)); })("downloadAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_downloadAction_11_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("download", node_r2)); })("printAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_printAction_11_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("print", node_r2)); });
+    i0.ɵɵelementStart(11, "div", 18)(12, "ccd-case-file-view-folder-document-actions", 19);
+    i0.ɵɵlistener("changeFolderAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_changeFolderAction_12_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("changeFolder", node_r2)); })("openInANewTabAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_openInANewTabAction_12_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("openInANewTab", node_r2)); })("downloadAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_downloadAction_12_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("download", node_r2)); })("printAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_printAction_12_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("print", node_r2)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const node_r2 = ctx.$implicit;
@@ -22773,8 +22922,8 @@ function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, c
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", node_r2.name, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 5, node_r2.upload_timestamp, "dd MMM YYYY HH:mm"));
-    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(10, 8, i0.ɵɵpipeBind2(9, 5, node_r2.upload_timestamp, "local"), "dd MMM YYYY HH:mm"));
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("allowMoving", ctx_r2.allowMoving);
 } }
 function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_5_Template(rf, ctx) { if (rf & 1) {
@@ -22807,7 +22956,7 @@ function CaseFileViewFolderComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
     i0.ɵɵtemplate(1, CaseFileViewFolderComponent_div_8_div_1_Template, 2, 0, "div", 8);
     i0.ɵɵelementStart(2, "div")(3, "cdk-tree", 9);
-    i0.ɵɵtemplate(4, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template, 12, 8, "cdk-nested-tree-node", 10)(5, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_5_Template, 10, 6, "cdk-nested-tree-node", 11);
+    i0.ɵɵtemplate(4, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template, 13, 11, "cdk-nested-tree-node", 10)(5, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_5_Template, 10, 6, "cdk-nested-tree-node", 11);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -22914,7 +23063,7 @@ class CaseFileViewFolderComponent {
             documentTreeNode.document_binary_url = document.document_binary_url;
             documentTreeNode.attribute_path = document.attribute_path;
             documentTreeNode.upload_timestamp = this.appConfig.getEnableCaseFileViewVersion1_1()
-                && document.upload_timestamp ? moment$1(document.upload_timestamp).format('DD MMM YYYY HH:mm:ss') : '';
+                && document.upload_timestamp ? document.upload_timestamp.toString() : '';
             documentsToReturn.push(documentTreeNode);
         });
         return documentsToReturn;
@@ -22929,7 +23078,7 @@ class CaseFileViewFolderComponent {
             documentTreeNode.document_binary_url = document.document_binary_url;
             documentTreeNode.attribute_path = document.attribute_path;
             documentTreeNode.upload_timestamp = this.appConfig.getEnableCaseFileViewVersion1_1()
-                && document.upload_timestamp ? moment$1(document.upload_timestamp).format('DD MMM YYYY HH:mm:ss') : '';
+                && document.upload_timestamp ? document.upload_timestamp.toString() : '';
             documents.push(documentTreeNode);
         });
         const uncategorisedNode = new DocumentTreeNode();
@@ -23063,11 +23212,11 @@ class CaseFileViewFolderComponent {
             i0.ɵɵtextInterpolate1("Documents (", ctx.documentCount, ")");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.documentTreeData);
-        } }, dependencies: [i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i7.CdkNestedTreeNode, i7.CdkTreeNodeDef, i7.CdkTreeNodeToggle, i7.CdkTree, i7.CdkTreeNodeOutlet, CaseFileViewFolderSortComponent, CaseFileViewFolderDocumentActionsComponent, i5.DatePipe], styles: ["[_nghost-%COMP%]{display:flex;height:100%;flex-direction:column}[_nghost-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{flex:1 0}.document-filter-container[_ngcontent-%COMP%]{border-bottom:2px solid #C9C9C9}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]{padding:10px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]   .document-search[_ngcontent-%COMP%]{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container[_ngcontent-%COMP%]   .documents-title[_ngcontent-%COMP%]{height:30%;margin-left:8px;font-weight:700}.document-tree-container[_ngcontent-%COMP%]{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node[_ngcontent-%COMP%]{display:block}.document-tree-container__node[_ngcontent-%COMP%]   .document-tree-container__node[_ngcontent-%COMP%]{padding-left:40px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:7px}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-button{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title[_ngcontent-%COMP%]{font-weight:700}.node[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected[_ngcontent-%COMP%]{background:#fff2cc}.node__icon[_ngcontent-%COMP%]{position:relative;display:inline-block}.node__count[_ngcontent-%COMP%]{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg[_ngcontent-%COMP%]{display:block;height:30px;width:30px}.node__name[_ngcontent-%COMP%]{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options[_ngcontent-%COMP%]{margin-left:auto;margin-right:0}.node__document-upload-timestamp[_ngcontent-%COMP%]{font-size:.8rem;float:left;padding-left:10px}"] });
+        } }, dependencies: [i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i7.CdkNestedTreeNode, i7.CdkTreeNodeDef, i7.CdkTreeNodeToggle, i7.CdkTree, i7.CdkTreeNodeOutlet, CaseFileViewFolderSortComponent, CaseFileViewFolderDocumentActionsComponent, i5.DatePipe, DatePipe], styles: ["[_nghost-%COMP%]{display:flex;height:100%;flex-direction:column}[_nghost-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{flex:1 0}.document-filter-container[_ngcontent-%COMP%]{border-bottom:2px solid #C9C9C9}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]{padding:10px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]   .document-search[_ngcontent-%COMP%]{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container[_ngcontent-%COMP%]   .documents-title[_ngcontent-%COMP%]{height:30%;margin-left:8px;font-weight:700}.document-tree-container[_ngcontent-%COMP%]{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node[_ngcontent-%COMP%]{display:block}.document-tree-container__node[_ngcontent-%COMP%]   .document-tree-container__node[_ngcontent-%COMP%]{padding-left:40px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:7px}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-button{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title[_ngcontent-%COMP%]{font-weight:700}.node[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected[_ngcontent-%COMP%]{background:#fff2cc}.node__icon[_ngcontent-%COMP%]{position:relative;display:inline-block}.node__count[_ngcontent-%COMP%]{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg[_ngcontent-%COMP%]{display:block;height:30px;width:30px}.node__name[_ngcontent-%COMP%]{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options[_ngcontent-%COMP%]{margin-left:auto;margin-right:0}.node__document-upload-timestamp[_ngcontent-%COMP%]{font-size:.8rem;float:left;padding-left:10px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | date:\"dd MMM YYYY HH:mm\"}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | ccdDate : 'local' | date:\"dd MMM YYYY HH:mm\"}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
     }], () => [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: AbstractAppConfig }], { categoriesAndDocuments: [{
             type: Input
         }], allowMoving: [{
@@ -23077,7 +23226,7 @@ class CaseFileViewFolderComponent {
         }], moveDocument: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFolderComponent, { className: "CaseFileViewFolderComponent", filePath: "lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFolderComponent, { className: "CaseFileViewFolderComponent", filePath: "lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts", lineNumber: 27 }); })();
 
 const _c0$s = a0 => ({ "form-group-error": a0 });
 function AddCommentsComponent_span_7_Template(rf, ctx) { if (rf & 1) {
@@ -28872,7 +29021,7 @@ i0.ɵɵsetComponentScope(QueryWriteRespondToQueryComponent, function () { return
     QueryCaseDetailsHeaderComponent]; }, function () { return [i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(QueryWriteRaiseQueryComponent, function () { return [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, QueryCaseDetailsHeaderComponent,
     QueryWriteDateInputComponent]; }, function () { return [i1.RpxTranslatePipe]; });
-i0.ɵɵsetComponentScope(QueryCheckYourAnswersComponent, function () { return [i5.NgIf, QueryCaseDetailsHeaderComponent,
+i0.ɵɵsetComponentScope(QueryCheckYourAnswersComponent, function () { return [i5.NgForOf, i5.NgIf, QueryCaseDetailsHeaderComponent,
     QueryAttachmentsReadComponent,
     QueryEventCompletionComponent]; }, function () { return [i5.DatePipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(QueryWriteAddDocumentsComponent, function () { return [i4.NgControlStatusGroup, i4.FormGroupDirective, WriteCollectionFieldComponent]; }, []);
@@ -28880,6 +29029,10 @@ i0.ɵɵsetComponentScope(QueryAttachmentsReadComponent, function () { return [i5
 i0.ɵɵsetComponentScope(QueryEventCompletionComponent, function () { return [
     // Case event completion
     CaseEventCompletionComponent]; }, []);
+i0.ɵɵsetComponentScope(
+// Case event completion
+CaseEventCompletionComponent, function () { return [i5.NgIf, CaseEventCompletionTaskCancelledComponent,
+    CaseEventCompletionTaskReassignedComponent]; }, []);
 
 var CaseEditSubmitTitles;
 (function (CaseEditSubmitTitles) {
@@ -33942,24 +34095,38 @@ class EventStartGuard {
     workAllocationService;
     router;
     sessionStorageService;
+    abstractConfig;
     static CLIENT_CONTEXT = 'clientContext';
-    constructor(workAllocationService, router, sessionStorageService) {
+    constructor(workAllocationService, router, sessionStorageService, abstractConfig) {
         this.workAllocationService = workAllocationService;
         this.router = router;
         this.sessionStorageService = sessionStorageService;
+        this.abstractConfig = abstractConfig;
     }
     canActivate(route) {
         const caseId = route.params['cid'];
         const eventId = route.params['eid'];
         const taskId = route.queryParams['tid'];
+        let userId;
+        const userInfoStr = this.sessionStorageService.getItem('userDetails');
+        if (userInfoStr) {
+            const userInfo = JSON.parse(userInfoStr);
+            userId = userInfo.id ? userInfo.id : userInfo.uid;
+        }
         const caseInfoStr = this.sessionStorageService.getItem('caseInfo');
         if (caseInfoStr) {
             const caseInfo = JSON.parse(caseInfoStr);
             if (caseInfo && caseInfo.cid === caseId) {
                 return this.workAllocationService.getTasksByCaseIdAndEventId(eventId, caseId, caseInfo.caseType, caseInfo.jurisdiction)
-                    .pipe(switchMap((payload) => this.checkForTasks(payload, caseId, eventId, taskId)));
+                    .pipe(switchMap((payload) => this.checkForTasks(payload, caseId, eventId, taskId, userId)));
+            }
+            else {
+                this.abstractConfig.logMessage(`EventStartGuard: caseId ${caseInfo.cid} in caseInfo not matched with the route parameter caseId ${caseId}`);
             }
         }
+        else {
+            this.abstractConfig.logMessage(`EventStartGuard: caseInfo details not available in session storage for ${caseId}`);
+        }
         return of(false);
     }
     checkTaskInEventNotRequired(payload, caseId, taskId) {
@@ -34008,11 +34175,28 @@ class EventStartGuard {
     removeTaskFromSessionStorage() {
         this.sessionStorageService.removeItem(EventStartGuard.CLIENT_CONTEXT);
     }
-    checkForTasks(payload, caseId, eventId, taskId) {
+    checkForTasks(payload, caseId, eventId, taskId, userId) {
         if (taskId && payload?.tasks?.length > 0) {
             const task = payload.tasks.find((t) => t.id == taskId);
             if (task) {
-                this.sessionStorageService.setItem(EventStartGuard.CLIENT_CONTEXT, JSON.stringify(task));
+                // Store task to session
+                const taskEventCompletionInfo = {
+                    caseId: caseId,
+                    eventId: eventId,
+                    userId: userId,
+                    taskId: task.id,
+                    createdTimestamp: Date.now()
+                };
+                const storeClientContext = {
+                    client_context: {
+                        user_task: {
+                            task_data: task,
+                            complete_task: true
+                        }
+                    }
+                };
+                this.sessionStorageService.setItem('taskEventCompletionInfo', JSON.stringify(taskEventCompletionInfo));
+                this.sessionStorageService.setItem(EventStartGuard.CLIENT_CONTEXT, JSON.stringify(storeClientContext));
             }
             else {
                 this.removeTaskFromSessionStorage();
@@ -34033,12 +34217,12 @@ class EventStartGuard {
             return of(this.checkTaskInEventNotRequired(payload, caseId, taskId));
         }
     }
-    static ɵfac = function EventStartGuard_Factory(t) { return new (t || EventStartGuard)(i0.ɵɵinject(WorkAllocationService), i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(SessionStorageService)); };
+    static ɵfac = function EventStartGuard_Factory(t) { return new (t || EventStartGuard)(i0.ɵɵinject(WorkAllocationService), i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(SessionStorageService), i0.ɵɵinject(AbstractAppConfig)); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EventStartGuard, factory: EventStartGuard.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventStartGuard, [{
         type: Injectable
-    }], () => [{ type: WorkAllocationService }, { type: i1$1.Router }, { type: SessionStorageService }], null); })();
+    }], () => [{ type: WorkAllocationService }, { type: i1$1.Router }, { type: SessionStorageService }, { type: AbstractAppConfig }], null); })();
 
 var EventStartStates;
 (function (EventStartStates) {
@@ -34191,6 +34375,20 @@ class EventStartStateMachineService {
             }
         };
         context.sessionStorageService.setItem('clientContext', JSON.stringify(clientContext));
+        let userInfo;
+        const userInfoStr = context.sessionStorageService.getItem('userDetails');
+        if (userInfoStr) {
+            userInfo = JSON.parse(userInfoStr);
+        }
+        // Store task to session
+        const taskEventCompletionInfo = {
+            caseId: context.caseId,
+            eventId: context.eventId,
+            userId: userInfo.id ? userInfo.id : userInfo.uid,
+            taskId: task.id,
+            createdTimestamp: Date.now()
+        };
+        context.sessionStorageService.setItem('taskEventCompletionInfo', JSON.stringify(taskEventCompletionInfo));
         // Allow user to perform the event
         context.router.navigate([`/cases/case-details/${context.caseId}/trigger/${context.eventId}`], { relativeTo: context.route });
     }
@@ -34290,9 +34488,11 @@ class EventStartComponent {
 class EventTasksResolverService {
     service;
     sessionStorageService;
-    constructor(service, sessionStorageService) {
+    abstractConfig;
+    constructor(service, sessionStorageService, abstractConfig) {
         this.service = service;
         this.sessionStorageService = sessionStorageService;
+        this.abstractConfig = abstractConfig;
     }
     resolve(route) {
         const eventId = route.queryParamMap.get('eventId');
@@ -34303,13 +34503,16 @@ class EventTasksResolverService {
             return this.service.getTasksByCaseIdAndEventId(eventId, caseId, caseInfo.caseType, caseInfo.jurisdiction)
                 .pipe(map((payload) => payload.tasks));
         }
+        else {
+            this.abstractConfig.logMessage(`EventTasksResolverService: caseInfo details not available in session storage for ${caseId}`);
+        }
     }
-    static ɵfac = function EventTasksResolverService_Factory(t) { return new (t || EventTasksResolverService)(i0.ɵɵinject(WorkAllocationService), i0.ɵɵinject(SessionStorageService)); };
+    static ɵfac = function EventTasksResolverService_Factory(t) { return new (t || EventTasksResolverService)(i0.ɵɵinject(WorkAllocationService), i0.ɵɵinject(SessionStorageService), i0.ɵɵinject(AbstractAppConfig)); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EventTasksResolverService, factory: EventTasksResolverService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventTasksResolverService, [{
         type: Injectable
-    }], () => [{ type: WorkAllocationService }, { type: SessionStorageService }], null); })();
+    }], () => [{ type: WorkAllocationService }, { type: SessionStorageService }, { type: AbstractAppConfig }], null); })();
 
 class EventStartModule {
     static ɵfac = function EventStartModule_Factory(t) { return new (t || EventStartModule)(); };