@hmcts/ccd-case-ui-toolkit 7.1.67-document-help-text → 7.1.68-exui-2835-rc1

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

@@ -1644,6 +1644,16 @@ class SessionStorageService {
         type: Injectable
     }], null, null); })();
 
+const USER_DETAILS = 'userDetails';
+const PUI_CASE_MANAGER = 'pui-case-manager';
+const JUDGE = 'judge';
+function isInternalUser(sessionStorageService) {
+    const userDetails = JSON.parse(sessionStorageService?.getItem(USER_DETAILS));
+    return userDetails && userDetails.roles
+        && !(userDetails.roles.includes(PUI_CASE_MANAGER)
+            || userDetails.roles.some((role) => role.toLowerCase().includes(JUDGE)));
+}
+
 // @dynamic
 class ActivityService {
     http;
@@ -1669,7 +1679,7 @@ class ActivityService {
         return error;
     }
     getOptions() {
-        const userDetails = JSON.parse(this.sessionStorageService.getItem('userDetails'));
+        const userDetails = JSON.parse(this.sessionStorageService.getItem(USER_DETAILS));
         const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization', userDetails.token);
         return {
             headers,
@@ -1703,7 +1713,7 @@ class ActivityService {
         }
     }
     verifyUserIsAuthorized() {
-        if (this.sessionStorageService.getItem('userDetails') && this.activityUrl() && this.userAuthorised === undefined) {
+        if (this.sessionStorageService.getItem(USER_DETAILS) && this.activityUrl() && this.userAuthorised === undefined) {
             this.getActivities(ActivityService.DUMMY_CASE_REFERENCE).subscribe(() => this.userAuthorised = true, error => {
                 this.userAuthorised = [401, 403].indexOf(error.status) <= -1;
             });
@@ -8896,10 +8906,7 @@ class WorkAllocationService {
             .post(url, { actionByEvent: true, eventName: eventName })
             .pipe(catchError(error => {
             this.errorService.setError(error);
-            // this will subscribe to get the user details and decide whether to display an error message
-            this.http.get(this.appConfig.getUserInfoApiUrl()).pipe(map(response => response)).subscribe((response) => {
-                this.handleTaskCompletionError(response);
-            });
+            this.handleTaskCompletionError();
             return throwError(error);
         }));
     }
@@ -8925,10 +8932,7 @@ class WorkAllocationService {
         })
             .pipe(catchError(error => {
             this.errorService.setError(error);
-            // this will subscribe to get the user details and decide whether to display an error message
-            this.http.get(this.appConfig.getUserInfoApiUrl()).pipe(map(response => response)).subscribe((response) => {
-                this.handleTaskCompletionError(response);
-            });
+            this.handleTaskCompletionError();
             return throwError(error);
         }));
     }
@@ -8936,24 +8940,13 @@ class WorkAllocationService {
      * Handles the response from the observable to get the user details when task is completed.
      * @param response is the response given from the observable which contains the user detaild.
      */
-    handleTaskCompletionError(response) {
-        const userDetails = response;
-        if (this.userIsCaseworker(userDetails.userInfo.roles)) {
+    handleTaskCompletionError() {
+        if (isInternalUser(this.sessionStorageService)) {
             // when submitting the completion of task if not yet rendered cases/case confirm then preserve the alert for re-rendering
             this.alertService.setPreserveAlerts(true, ['cases/case', 'submit']);
             this.alertService.warning({ phrase: 'A task could not be completed successfully. Please complete the task associated with the case manually.' });
         }
     }
-    /**
-     * Returns true if the user's role is equivalent to a caseworker.
-     * @param roles is the list of roles found from the current user.
-     */
-    userIsCaseworker(roles) {
-        const lowerCaseRoles = roles.map(role => role.toLowerCase());
-        // When/if lib & target permanently change to es2016, replace indexOf with includes
-        return (lowerCaseRoles.indexOf(WorkAllocationService.iACCaseOfficer) !== -1)
-            || (lowerCaseRoles.indexOf(WorkAllocationService.iACAdmOfficer) !== -1);
-    }
     /**
      * Look for open tasks for a case and event combination. There are 5 possible scenarios:
      *   1. No tasks found                              => Success.
@@ -14326,14 +14319,14 @@ class RemoveDialogComponent {
 
 const _c0$S = ["collectionItem"];
 function WriteCollectionFieldComponent_h2_8_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 10)(1, "markdown");
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "rpxTranslate");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "rpxTranslate");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, ctx_r0.caseField.hint_text));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField.hint_text));
 } }
 function WriteCollectionFieldComponent_h2_8_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 11);
@@ -14347,7 +14340,7 @@ function WriteCollectionFieldComponent_h2_8_span_2_Template(rf, ctx) { if (rf &
 } }
 function WriteCollectionFieldComponent_h2_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h2", 3);
-    i0.ɵɵtemplate(1, WriteCollectionFieldComponent_h2_8_span_1_Template, 4, 3, "span", 8)(2, WriteCollectionFieldComponent_h2_8_span_2_Template, 3, 4, "span", 9);
+    i0.ɵɵtemplate(1, WriteCollectionFieldComponent_h2_8_span_1_Template, 3, 3, "span", 8)(2, WriteCollectionFieldComponent_h2_8_span_2_Template, 3, 4, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -14745,7 +14738,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteCollectionFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel)}}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">\n      <markdown>{{caseField.hint_text | rpxTranslate }}</markdown>\n      </span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n           [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n        <div class=\"collection-title\">\n          <div class=\"float-left\">\n            <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n          </div>\n          <div class=\"float-right\">\n            <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                    [disabled]=\"isNotAuthorisedToDelete(i)\"\n                    attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n          </div>\n        </div>\n        <ccd-field-write [caseField]=\"item.caseField\"\n                         [caseFields]=\"caseFields\"\n                         [formGroup]=\"formGroup\"\n                         [parent]=\"item.container\"\n                         [idPrefix]=\"item.prefix\"\n                         [hidden]=\"item.caseField.hidden\"\n                         [isExpanded]=\"isExpanded\"\n                         [isInSearchBlock]=\"isInSearchBlock\">\n        </ccd-field-write>\n      </div>\n\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
+        args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel)}}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text | rpxTranslate }}</span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n           [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n        <div class=\"collection-title\">\n          <div class=\"float-left\">\n            <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n          </div>\n          <div class=\"float-right\">\n            <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                    [disabled]=\"isNotAuthorisedToDelete(i)\"\n                    attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n          </div>\n        </div>\n        <ccd-field-write [caseField]=\"item.caseField\"\n                         [caseFields]=\"caseFields\"\n                         [formGroup]=\"formGroup\"\n                         [parent]=\"item.container\"\n                         [idPrefix]=\"item.prefix\"\n                         [hidden]=\"item.caseField.hidden\"\n                         [isExpanded]=\"isExpanded\"\n                         [isInSearchBlock]=\"isInSearchBlock\">\n        </ccd-field-write>\n      </div>\n\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
     }], () => [{ type: i1$3.MatLegacyDialog }, { type: i2.ScrollToService }, { type: ProfileNotifier }, { type: i0.ChangeDetectorRef }], { caseFields: [{
             type: Input
         }], items: [{
@@ -15175,6 +15168,8 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     invalidFileFormat() {
         this.updateDocumentForm(null, null, null);
         this.displayFileUploadMessages(WriteDocumentFieldComponent.UPLOAD_ERROR_INVALID_FORMAT);
+        // fix active form group so that additional attachments in invalid format are not accepted
+        this.formGroup.setErrors({ invalidFileFormat: true });
     }
     getUploadedFileName() {
         if (this.uploadedDocument) {
@@ -15626,10 +15621,15 @@ class MarkdownComponent {
             const target = event.target;
             if (target.tagName.toLowerCase() === 'a') {
                 const href = target.getAttribute('href');
+                const targetAttr = target.getAttribute('target'); // Check the target attribute
                 if (href && href.startsWith('/') && !href.startsWith('//')) {
+                    if (targetAttr === '_blank') {
+                        // Allow the default behavior for links opening in a new tab
+                        return;
+                    }
                     const currentUrl = window.location.href;
                     if (currentUrl.includes('trigger')) {
-                        // if we are already in an event and there is a markdown we should reload the page as without the components will not reinitialise
+                        // If we are already in an event and there is a markdown, reload the page
                         this.ngZone.run(() => {
                             this.router.navigateByUrl(href);
                         });
@@ -21271,7 +21271,7 @@ class QueryCheckYourAnswersComponent {
         this.router.navigate(['/', 'service-down']);
     }
     generateCaseQueriesCollectionData() {
-        const currentUserDetails = JSON.parse(this.sessionStorageService.getItem('userDetails'));
+        const currentUserDetails = JSON.parse(this.sessionStorageService.getItem(USER_DETAILS));
         const caseMessage = this.queryCreateContext === QueryCreateContext.NEW_QUERY
             ? QueryManagementUtils.getNewQueryData(this.formGroup, currentUserDetails)
             : QueryManagementUtils.getRespondOrFollowupQueryData(this.formGroup, this.queryItem, currentUserDetails);
@@ -21511,7 +21511,7 @@ class QueryCheckYourAnswersComponent {
         }], 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: 26 }); })();
+(() => { (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: 28 }); })();
 
 function QueryDetailsComponent_ng_container_0_cut_alert_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "cut-alert", 11);
@@ -21647,7 +21647,7 @@ function QueryDetailsComponent_ng_container_0_ng_container_46_ng_container_1_ng_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(14, 14, child_r3.createdOn, "dd MMM yyyy"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.isCaseworker());
+    i0.ɵɵproperty("ngIf", ctx_r0.isInternalUser());
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(19, 17, "Response detail"));
     i0.ɵɵadvance(3);
@@ -21860,11 +21860,8 @@ class QueryDetailsComponent {
     onBack() {
         this.backClicked.emit(true);
     }
-    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')));
+    isInternalUser() {
+        return isInternalUser(this.sessionStorageService);
     }
     ngOnChanges() {
         this.toggleLinkVisibility();
@@ -21879,7 +21876,7 @@ class QueryDetailsComponent {
             this.hasResponded.emit(false);
             return false;
         }
-        if (this.isCaseworker() && this.queryResponseStatus !== QueryItemResponseStatus.AWAITING) {
+        if (this.isInternalUser() && this.queryResponseStatus !== QueryItemResponseStatus.AWAITING) {
             this.message = Constants.TASK_COMPLETION_ERROR;
             this.hasResponded.emit(true);
             return true;
@@ -21896,7 +21893,7 @@ class QueryDetailsComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryDetailsComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-query-details', template: "<ng-container *ngIf=\"query\">\n  <cut-alert type=\"error\" *ngIf=\"hasRespondedToQuery() && !showItem\">\n    <ng-container>{{message}}</ng-container>\n  </cut-alert>\n\n  <br/>\n  <p *ngIf=\"showItem\">\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) }}</td>\n      </tr>\n      <tr class=\"govuk-table__row govuk-table__row--isHearingRelated\" *ngIf=\"query.isHearingRelated === 'Yes'\">\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\" *ngIf=\"query.attachments.length > 0\">\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\" *ngIf=\"child.attachments.length > 0\">\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\" *ngIf=\"child.attachments.length > 0\">\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  <cut-alert type=\"error\" *ngIf=\"hasRespondedToQuery() && !showItem\">\n    <ng-container>{{message}}</ng-container>\n  </cut-alert>\n\n  <br/>\n  <p *ngIf=\"showItem\">\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) }}</td>\n      </tr>\n      <tr class=\"govuk-table__row govuk-table__row--isHearingRelated\" *ngIf=\"query.isHearingRelated === 'Yes'\">\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\" *ngIf=\"query.attachments.length > 0\">\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=\"isInternalUser()\" 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\" *ngIf=\"child.attachments.length > 0\">\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\" *ngIf=\"child.attachments.length > 0\">\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 }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }], { query: [{
             type: Input
         }], caseId: [{
@@ -21908,7 +21905,7 @@ class QueryDetailsComponent {
         }], hasResponded: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryDetailsComponent, { className: "QueryDetailsComponent", filePath: "lib/shared/components/palette/query-management/components/query-details/query-details.component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryDetailsComponent, { className: "QueryDetailsComponent", filePath: "lib/shared/components/palette/query-management/components/query-details/query-details.component.ts", lineNumber: 15 }); })();
 
 class QueryEventCompletionComponent {
     eventCompletionParams;
@@ -22287,8 +22284,8 @@ class QueryWriteDateInputComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteDateInputComponent, { className: "QueryWriteDateInputComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-date-input/query-write-date-input.component.ts", lineNumber: 15 }); })();
 
 const _c0$C = a0 => ({ "govuk-form-group--error": a0 });
-function QueryWriteRaiseQueryComponent_div_11_p_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 27)(1, "span", 28);
+function QueryWriteRaiseQueryComponent_div_11_p_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 32)(1, "span", 10);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22302,8 +22299,8 @@ function QueryWriteRaiseQueryComponent_div_11_p_11_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.getSubjectErrorMessage()), " ");
 } }
-function QueryWriteRaiseQueryComponent_div_11_p_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 29)(1, "span", 28);
+function QueryWriteRaiseQueryComponent_div_11_p_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 33)(1, "span", 10);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22317,8 +22314,8 @@ function QueryWriteRaiseQueryComponent_div_11_p_21_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r1.raiseQueryErrorMessage.QUERY_BODY), " ");
 } }
-function QueryWriteRaiseQueryComponent_div_11_p_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 30)(1, "span", 28);
+function QueryWriteRaiseQueryComponent_div_11_p_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 34)(1, "span", 10);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22332,8 +22329,8 @@ function QueryWriteRaiseQueryComponent_div_11_p_30_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r1.raiseQueryErrorMessage.QUERY_HEARING_RELATED), " ");
 } }
-function QueryWriteRaiseQueryComponent_div_11_ng_container_42_p_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 36)(1, "span", 28);
+function QueryWriteRaiseQueryComponent_div_11_ng_container_50_p_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 40)(1, "span", 10);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22347,14 +22344,14 @@ function QueryWriteRaiseQueryComponent_div_11_ng_container_42_p_7_Template(rf, c
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r1.raiseQueryErrorMessage.QUERY_HEARING_DATE), " ");
 } }
-function QueryWriteRaiseQueryComponent_div_11_ng_container_42_Template(rf, ctx) { if (rf & 1) {
+function QueryWriteRaiseQueryComponent_div_11_ng_container_50_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 31)(2, "fieldset", 32)(3, "legend")(4, "label", 33);
+    i0.ɵɵelementStart(1, "div", 35)(2, "fieldset", 36)(3, "legend")(4, "label", 37);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, QueryWriteRaiseQueryComponent_div_11_ng_container_42_p_7_Template, 6, 6, "p", 34);
-    i0.ɵɵelement(8, "ccd-query-write-date-input", 35);
+    i0.ɵɵtemplate(7, QueryWriteRaiseQueryComponent_div_11_ng_container_50_p_7_Template, 6, 6, "p", 38);
+    i0.ɵɵelement(8, "ccd-query-write-date-input", 39);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -22368,86 +22365,97 @@ function QueryWriteRaiseQueryComponent_div_11_ng_container_42_Template(rf, ctx)
 } }
 function QueryWriteRaiseQueryComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div")(3, "div", 7)(4, "div", 8)(5, "label", 9);
-    i0.ɵɵtext(6);
-    i0.ɵɵpipe(7, "rpxTranslate");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 10);
-    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div")(3, "div", 7)(4, "span", 8);
+    i0.ɵɵtext(5, "!");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "strong", 9)(7, "span", 10);
+    i0.ɵɵtext(8, "Warning");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(9, "ccd-markdown", 11);
     i0.ɵɵpipe(10, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 12)(12, "div", 13)(13, "label", 14);
+    i0.ɵɵtext(14);
+    i0.ɵɵpipe(15, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 15);
+    i0.ɵɵtext(17);
+    i0.ɵɵpipe(18, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, QueryWriteRaiseQueryComponent_div_11_p_11_Template, 6, 6, "p", 11);
-    i0.ɵɵelementStart(12, "input", 12);
-    i0.ɵɵlistener("input", function QueryWriteRaiseQueryComponent_div_11_Template_input_input_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubjectInput()); });
+    i0.ɵɵtemplate(19, QueryWriteRaiseQueryComponent_div_11_p_19_Template, 6, 6, "p", 16);
+    i0.ɵɵelementStart(20, "input", 17);
+    i0.ɵɵlistener("input", function QueryWriteRaiseQueryComponent_div_11_Template_input_input_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubjectInput()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 7)(14, "div", 8)(15, "label", 13);
-    i0.ɵɵtext(16);
-    i0.ɵɵpipe(17, "rpxTranslate");
+    i0.ɵɵelementStart(21, "div", 12)(22, "div", 13)(23, "label", 18);
+    i0.ɵɵtext(24);
+    i0.ɵɵpipe(25, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 14);
-    i0.ɵɵtext(19);
-    i0.ɵɵpipe(20, "rpxTranslate");
+    i0.ɵɵelementStart(26, "div", 19);
+    i0.ɵɵtext(27);
+    i0.ɵɵpipe(28, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(21, QueryWriteRaiseQueryComponent_div_11_p_21_Template, 6, 6, "p", 15);
-    i0.ɵɵelementStart(22, "textarea", 16);
-    i0.ɵɵtext(23, "          ");
+    i0.ɵɵtemplate(29, QueryWriteRaiseQueryComponent_div_11_p_29_Template, 6, 6, "p", 20);
+    i0.ɵɵelementStart(30, "textarea", 21);
+    i0.ɵɵtext(31, "          ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(24, "div", 7)(25, "fieldset", 17)(26, "legend")(27, "label", 18);
-    i0.ɵɵtext(28);
-    i0.ɵɵpipe(29, "rpxTranslate");
+    i0.ɵɵelementStart(32, "div", 12)(33, "fieldset", 22)(34, "legend")(35, "label", 23);
+    i0.ɵɵtext(36);
+    i0.ɵɵpipe(37, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(30, QueryWriteRaiseQueryComponent_div_11_p_30_Template, 6, 6, "p", 19);
-    i0.ɵɵelementStart(31, "div", 20)(32, "div", 21);
-    i0.ɵɵelement(33, "input", 22);
-    i0.ɵɵelementStart(34, "label", 23);
-    i0.ɵɵtext(35);
-    i0.ɵɵpipe(36, "rpxTranslate");
+    i0.ɵɵtemplate(38, QueryWriteRaiseQueryComponent_div_11_p_38_Template, 6, 6, "p", 24);
+    i0.ɵɵelementStart(39, "div", 25)(40, "div", 26);
+    i0.ɵɵelement(41, "input", 27);
+    i0.ɵɵelementStart(42, "label", 28);
+    i0.ɵɵtext(43);
+    i0.ɵɵpipe(44, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(37, "div", 21);
-    i0.ɵɵelement(38, "input", 24);
-    i0.ɵɵelementStart(39, "label", 25);
-    i0.ɵɵtext(40);
-    i0.ɵɵpipe(41, "rpxTranslate");
+    i0.ɵɵelementStart(45, "div", 26);
+    i0.ɵɵelement(46, "input", 29);
+    i0.ɵɵelementStart(47, "label", 30);
+    i0.ɵɵtext(48);
+    i0.ɵɵpipe(49, "rpxTranslate");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵtemplate(42, QueryWriteRaiseQueryComponent_div_11_ng_container_42_Template, 9, 7, "ng-container", 26);
+    i0.ɵɵtemplate(50, QueryWriteRaiseQueryComponent_div_11_ng_container_50_Template, 9, 7, "ng-container", 31);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("formGroup", ctx_r1.formGroup);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("content", i0.ɵɵpipeBind1(10, 23, ctx_r1.serviceMessage));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(40, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("subject").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("subject").hasError("required")));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 22, "Query subject"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 25, "Query subject"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 24, "The subject should be a summary of your query"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 27, "The subject should be a summary of your query"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.submitted && (ctx_r1.formGroup.get("subject").hasError("required") || ctx_r1.formGroup.get("subject").hasError("maxlength")));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(42, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("body").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(45, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("body").hasError("required")));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 26, "Query detail"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25, 29, "Query detail"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 28, "Include as many details as possible so case workers can respond to your query"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(28, 31, "Include as many details as possible so case workers can respond to your query"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.submitted && ctx_r1.formGroup.get("body").hasError("required"));
     i0.ɵɵadvance();
     i0.ɵɵclassProp("govuk-textarea--error", ctx_r1.submitted && ctx_r1.formGroup.get("body").hasError("required"));
     i0.ɵɵproperty("formControlName", "body");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(44, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("isHearingRelated").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(47, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("isHearingRelated").hasError("required")));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(29, 30, "Is the query hearing related?"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(37, 33, "Is the query hearing related?"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.submitted && ctx_r1.formGroup.get("isHearingRelated").hasError("required"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("checked", ctx_r1.formGroup.get("isHearingRelated").value === true)("value", true);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(36, 32, "Is the query hearing related?", null, "Yes"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(44, 35, "Is the query hearing related?", null, "Yes"), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("checked", ctx_r1.formGroup.get("isHearingRelated").value === false)("value", false);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(41, 36, "Is the query hearing related?", null, "No"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(49, 39, "Is the query hearing related?", null, "No"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.formGroup.get("isHearingRelated").value);
 } }
@@ -22456,6 +22464,7 @@ class QueryWriteRaiseQueryComponent {
     submitted;
     caseDetails;
     showForm;
+    serviceMessage;
     raiseQueryErrorMessage = RaiseQueryErrorMessage;
     onSubjectInput() {
         const control = this.formGroup.get('subject');
@@ -22475,7 +22484,7 @@ class QueryWriteRaiseQueryComponent {
         return '';
     }
     static ɵfac = function QueryWriteRaiseQueryComponent_Factory(t) { return new (t || QueryWriteRaiseQueryComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryWriteRaiseQueryComponent, selectors: [["ccd-query-write-raise-query"]], inputs: { formGroup: "formGroup", submitted: "submitted", caseDetails: "caseDetails", showForm: "showForm" }, decls: 12, vars: 8, consts: [[1, "govuk-!-margin-bottom-6"], [1, "govuk-caption-l"], [1, "govuk-heading-l", "govuk-!-margin-bottom-4"], [3, "caseDetails"], ["class", "govuk-!-margin-bottom-4", 4, "ngIf"], [1, "govuk-!-margin-bottom-4"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], ["for", "subject", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "subject-hint", 1, "govuk-hint"], ["id", "subject-error", "class", "govuk-error-message", 4, "ngIf"], ["type", "text", "id", "subject", "formControlName", "subject", "maxlength", "200", "aria-describedby", "subject-error", 1, "govuk-input", 3, "input"], ["for", "body", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "body-hint", 1, "govuk-hint"], ["id", "body-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "body", "name", "body", "rows", "5", "aria-describedby", "body-hint body-error", 1, "govuk-textarea", 3, "formControlName"], [1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "isHearingRelated-error", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--inline"], [1, "govuk-radios__item"], ["id", "isHearingRelated-yes", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-yes", 1, "govuk-label", "govuk-radios__label"], ["id", "isHearingRelated-no", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-no", 1, "govuk-label", "govuk-radios__label"], [4, "ngIf"], ["id", "subject-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "body-error", 1, "govuk-error-message"], ["id", "isHearingRelated-error", 1, "govuk-error-message"], [1, "govuk-radios__conditional", "govuk-!-margin-top-1", 3, "ngClass"], ["role", "group", 1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--s"], ["id", "hearingDate-error", "class", "govuk-error-message", 4, "ngIf"], ["formControlName", "hearingDate"], ["id", "hearingDate-error", 1, "govuk-error-message"]], template: function QueryWriteRaiseQueryComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryWriteRaiseQueryComponent, selectors: [["ccd-query-write-raise-query"]], inputs: { formGroup: "formGroup", submitted: "submitted", caseDetails: "caseDetails", showForm: "showForm", serviceMessage: "serviceMessage" }, decls: 12, vars: 8, consts: [[1, "govuk-!-margin-bottom-6"], [1, "govuk-caption-l"], [1, "govuk-heading-l", "govuk-!-margin-bottom-4"], [3, "caseDetails"], ["class", "govuk-!-margin-bottom-4", 4, "ngIf"], [1, "govuk-!-margin-bottom-4"], [3, "formGroup"], [1, "govuk-warning-text"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-visually-hidden"], [3, "content"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], ["for", "subject", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "subject-hint", 1, "govuk-hint"], ["id", "subject-error", "class", "govuk-error-message", 4, "ngIf"], ["type", "text", "id", "subject", "formControlName", "subject", "maxlength", "200", "aria-describedby", "subject-error", 1, "govuk-input", 3, "input"], ["for", "body", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "body-hint", 1, "govuk-hint"], ["id", "body-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "body", "name", "body", "rows", "5", "aria-describedby", "body-hint body-error", 1, "govuk-textarea", 3, "formControlName"], [1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "isHearingRelated-error", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--inline"], [1, "govuk-radios__item"], ["id", "isHearingRelated-yes", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-yes", 1, "govuk-label", "govuk-radios__label"], ["id", "isHearingRelated-no", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-no", 1, "govuk-label", "govuk-radios__label"], [4, "ngIf"], ["id", "subject-error", 1, "govuk-error-message"], ["id", "body-error", 1, "govuk-error-message"], ["id", "isHearingRelated-error", 1, "govuk-error-message"], [1, "govuk-radios__conditional", "govuk-!-margin-top-1", 3, "ngClass"], ["role", "group", 1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--s"], ["id", "hearingDate-error", "class", "govuk-error-message", 4, "ngIf"], ["formControlName", "hearingDate"], ["id", "hearingDate-error", 1, "govuk-error-message"]], template: function QueryWriteRaiseQueryComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "div", 1);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "rpxTranslate");
@@ -22488,7 +22497,7 @@ class QueryWriteRaiseQueryComponent {
             i0.ɵɵelement(9, "ccd-query-case-details-header", 3);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(10, "hr");
-            i0.ɵɵtemplate(11, QueryWriteRaiseQueryComponent_div_11_Template, 43, 46, "div", 4);
+            i0.ɵɵtemplate(11, QueryWriteRaiseQueryComponent_div_11_Template, 51, 49, "div", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -22503,7 +22512,7 @@ class QueryWriteRaiseQueryComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryWriteRaiseQueryComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-query-write-raise-query', template: "<div>\n  <div class=\"govuk-!-margin-bottom-6\">\n    <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    <h1 class=\"govuk-heading-l govuk-!-margin-bottom-4\">{{ 'Enter query details' | rpxTranslate }}</h1>\n  </div>\n\n  <div>\n    <ccd-query-case-details-header [caseDetails]=\"caseDetails\"></ccd-query-case-details-header>\n  </div>\n\n  <hr>\n\n  <div class=\"govuk-!-margin-bottom-4\" *ngIf=\"showForm\">\n    <div [formGroup]=\"formGroup\">\n      <div>\n        <div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('subject').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"subject\">\n              {{ 'Query subject' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"subject-hint\" class=\"govuk-hint\">\n            {{ 'The subject should be a summary of your query' | rpxTranslate }}\n          </div>\n          <p id=\"subject-error\" class=\"govuk-error-message\"\n            *ngIf=\"submitted && (formGroup.get('subject').hasError('required') || formGroup.get('subject').hasError('maxlength'))\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }}</span>\n            {{ getSubjectErrorMessage() | rpxTranslate }}\n          </p>\n\n          <input type=\"text\"\n            id=\"subject\"\n            class=\"govuk-input\"\n            formControlName=\"subject\"\n            maxlength=\"200\"\n            (input)=\"onSubjectInput()\"\n            aria-describedby=\"subject-error\" />\n      </div>\n\n        <div class=\"govuk-form-group\"\n             [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('body').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"body\">\n              {{ 'Query detail' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"body-hint\" class=\"govuk-hint\">\n            {{ 'Include as many details as possible so case workers can respond to your query' | rpxTranslate }}\n          </div>\n          <p id=\"body-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('body').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_BODY | rpxTranslate }}\n          </p>\n          <textarea [formControlName]=\"'body'\"\n                    id=\"body\" name=\"body\" rows=\"5\"\n                    aria-describedby=\"body-hint body-error\"\n                    class=\"govuk-textarea\"\n                    [class.govuk-textarea--error]=\"submitted && formGroup.get('body').hasError('required')\"\n          >\n          </textarea>\n      </div>\n\n      <div class=\"govuk-form-group\"\n           [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('isHearingRelated').hasError('required')}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend>\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\">\n              {{ 'Is the query hearing related?' | rpxTranslate }}\n            </label>\n          </legend>\n          <p id=\"isHearingRelated-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('isHearingRelated').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_RELATED | rpxTranslate }}\n          </p>\n          <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-yes\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === true\" [value]=\"true\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-yes\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n              </label>\n            </div>\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-no\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === false\" [value]=\"false\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-no\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n\n        <ng-container *ngIf=\"formGroup.get('isHearingRelated').value\">\n          <div class=\"govuk-radios__conditional govuk-!-margin-top-1\"\n               [ngClass]=\"{'govuk-form-group--error': submitted &&\n               formGroup.get('isHearingRelated').value === true &&\n               formGroup.get('hearingDate').value === null}\">\n            <fieldset class=\"govuk-fieldset\" role=\"group\">\n              <legend>\n                <label class=\"govuk-label govuk-label--s\">\n                  {{ 'What is the date of the hearing?' | rpxTranslate }}\n                </label>\n              </legend>\n              <p id=\"hearingDate-error\" class=\"govuk-error-message\"\n                  *ngIf=\"submitted && formGroup.get('isHearingRelated').value === true && formGroup.get('hearingDate').value === null\">\n                <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_DATE | rpxTranslate }}\n              </p>\n              <ccd-query-write-date-input formControlName=\"hearingDate\"></ccd-query-write-date-input>\n            </fieldset>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'ccd-query-write-raise-query', template: "<div>\n  <div class=\"govuk-!-margin-bottom-6\">\n    <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    <h1 class=\"govuk-heading-l govuk-!-margin-bottom-4\">{{ 'Enter query details' | rpxTranslate }}</h1>\n  </div>\n\n  <div>\n    <ccd-query-case-details-header [caseDetails]=\"caseDetails\"></ccd-query-case-details-header>\n  </div>\n\n  <hr>\n\n  <div class=\"govuk-!-margin-bottom-4\" *ngIf=\"showForm\">\n    <div [formGroup]=\"formGroup\">\n      <div>\n        <div class=\"govuk-warning-text\">\n          <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n          <strong class=\"govuk-warning-text__text\">\n            <span class=\"govuk-visually-hidden\">Warning</span>\n            <ccd-markdown\n              [content]=\"serviceMessage | rpxTranslate\">\n            </ccd-markdown>\n          </strong>\n        </div>\n        <div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('subject').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"subject\">\n              {{ 'Query subject' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"subject-hint\" class=\"govuk-hint\">\n            {{ 'The subject should be a summary of your query' | rpxTranslate }}\n          </div>\n          <p id=\"subject-error\" class=\"govuk-error-message\"\n            *ngIf=\"submitted && (formGroup.get('subject').hasError('required') || formGroup.get('subject').hasError('maxlength'))\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }}</span>\n            {{ getSubjectErrorMessage() | rpxTranslate }}\n          </p>\n\n          <input type=\"text\"\n            id=\"subject\"\n            class=\"govuk-input\"\n            formControlName=\"subject\"\n            maxlength=\"200\"\n            (input)=\"onSubjectInput()\"\n            aria-describedby=\"subject-error\" />\n      </div>\n\n        <div class=\"govuk-form-group\"\n             [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('body').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"body\">\n              {{ 'Query detail' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"body-hint\" class=\"govuk-hint\">\n            {{ 'Include as many details as possible so case workers can respond to your query' | rpxTranslate }}\n          </div>\n          <p id=\"body-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('body').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_BODY | rpxTranslate }}\n          </p>\n          <textarea [formControlName]=\"'body'\"\n                    id=\"body\" name=\"body\" rows=\"5\"\n                    aria-describedby=\"body-hint body-error\"\n                    class=\"govuk-textarea\"\n                    [class.govuk-textarea--error]=\"submitted && formGroup.get('body').hasError('required')\"\n          >\n          </textarea>\n      </div>\n\n      <div class=\"govuk-form-group\"\n           [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('isHearingRelated').hasError('required')}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend>\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\">\n              {{ 'Is the query hearing related?' | rpxTranslate }}\n            </label>\n          </legend>\n          <p id=\"isHearingRelated-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('isHearingRelated').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_RELATED | rpxTranslate }}\n          </p>\n          <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-yes\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === true\" [value]=\"true\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-yes\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n              </label>\n            </div>\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-no\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === false\" [value]=\"false\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-no\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n\n        <ng-container *ngIf=\"formGroup.get('isHearingRelated').value\">\n          <div class=\"govuk-radios__conditional govuk-!-margin-top-1\"\n               [ngClass]=\"{'govuk-form-group--error': submitted &&\n               formGroup.get('isHearingRelated').value === true &&\n               formGroup.get('hearingDate').value === null}\">\n            <fieldset class=\"govuk-fieldset\" role=\"group\">\n              <legend>\n                <label class=\"govuk-label govuk-label--s\">\n                  {{ 'What is the date of the hearing?' | rpxTranslate }}\n                </label>\n              </legend>\n              <p id=\"hearingDate-error\" class=\"govuk-error-message\"\n                  *ngIf=\"submitted && formGroup.get('isHearingRelated').value === true && formGroup.get('hearingDate').value === null\">\n                <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_DATE | rpxTranslate }}\n              </p>\n              <ccd-query-write-date-input formControlName=\"hearingDate\"></ccd-query-write-date-input>\n            </fieldset>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
     }], null, { formGroup: [{
             type: Input
         }], submitted: [{
@@ -22512,6 +22521,8 @@ class QueryWriteRaiseQueryComponent {
             type: Input
         }], showForm: [{
             type: Input
+        }], serviceMessage: [{
+            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: 8 }); })();
 
@@ -22894,7 +22905,7 @@ function ReadQueryManagementFieldComponent_ng_template_1_Template(rf, ctx) { if
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("query", ctx_r1.query)("caseId", ctx_r1.caseId);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.isCaseworker());
+    i0.ɵɵproperty("ngIf", !ctx_r1.isInternalUser());
 } }
 class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
     route;
@@ -22945,11 +22956,8 @@ class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
         this.showQueryList = true;
         this.query = null;
     }
-    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')));
+    isInternalUser() {
+        return isInternalUser(this.sessionStorageService);
     }
     static ɵfac = function ReadQueryManagementFieldComponent_Factory(t) { return new (t || ReadQueryManagementFieldComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(CaseNotifier)); };
     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) {
@@ -22961,9 +22969,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  <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</ng-template>\n" }]
+        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=\"!isInternalUser()\">\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</ng-template>\n" }]
     }], () => [{ type: i1$1.ActivatedRoute }, { type: SessionStorageService }, { type: CaseNotifier }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadQueryManagementFieldComponent, { className: "ReadQueryManagementFieldComponent", filePath: "lib/shared/components/palette/query-management/read-query-management-field.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadQueryManagementFieldComponent, { className: "ReadQueryManagementFieldComponent", filePath: "lib/shared/components/palette/query-management/read-query-management-field.component.ts", lineNumber: 15 }); })();
 
 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); }; })();
@@ -30594,7 +30602,7 @@ i0.ɵɵsetComponentScope(WriteOrganisationFieldComponent, function () { return [
 i0.ɵɵsetComponentScope(WriteOrderSummaryFieldComponent, function () { return [ReadOrderSummaryFieldComponent]; }, []);
 i0.ɵɵsetComponentScope(WriteDateContainerFieldComponent, function () { return [i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective, DatetimePickerComponent,
     WriteDateFieldComponent]; }, []);
-i0.ɵɵsetComponentScope(WriteCollectionFieldComponent, function () { return [i5.NgForOf, i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective, i2$1.MarkdownComponent, FieldWriteComponent]; }, function () { return [FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(WriteCollectionFieldComponent, function () { return [i5.NgForOf, i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective, FieldWriteComponent]; }, function () { return [FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(
 // ComponentLauncher web components
 CaseFileViewFieldComponent, function () { return [i5.NgForOf, i5.NgIf, i14.MediaViewerComponent, CaseFileViewFolderComponent]; }, []);
@@ -30619,7 +30627,7 @@ ReadQueryManagementFieldComponent, function () { return [i5.NgForOf, i5.NgIf, i1
 i0.ɵɵsetComponentScope(QueryDetailsComponent, function () { return [i5.NgForOf, i5.NgIf, AlertComponent, QueryAttachmentsReadComponent]; }, function () { return [i5.DatePipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(QueryWriteRespondToQueryComponent, function () { return [i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, QueryDetailsComponent,
     QueryCaseDetailsHeaderComponent]; }, function () { return [i1.RpxTranslatePipe]; });
-i0.ɵɵsetComponentScope(QueryWriteRaiseQueryComponent, function () { return [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.MaxLengthValidator, i4.FormGroupDirective, i4.FormControlName, QueryCaseDetailsHeaderComponent,
+i0.ɵɵsetComponentScope(QueryWriteRaiseQueryComponent, function () { return [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.MaxLengthValidator, i4.FormGroupDirective, i4.FormControlName, MarkdownComponent, QueryCaseDetailsHeaderComponent,
     QueryWriteDateInputComponent]; }, function () { return [i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(QueryCheckYourAnswersComponent, function () { return [i5.NgForOf, i5.NgIf, QueryCaseDetailsHeaderComponent,
     QueryAttachmentsReadComponent,
@@ -33691,9 +33699,9 @@ class CaseResolver {
     // as discussed for EUI-5456, need functionality to go to default page
     goToDefaultPage() {
         console.info('Going to default page!');
-        const userDetails = JSON.parse(this.sessionStorage.getItem('userDetails'));
+        const userDetails = JSON.parse(this.sessionStorage.getItem(USER_DETAILS));
         userDetails && userDetails.roles
-            && !userDetails.roles.includes('pui-case-manager')
+            && !userDetails.roles.includes(PUI_CASE_MANAGER)
             &&
                 (userDetails.roles.includes('caseworker-ia-iacjudge')
                     || userDetails.roles.includes('caseworker-ia-caseofficer')
@@ -37833,7 +37841,7 @@ class CreateCaseFiltersComponent {
         return events.filter(event => event.pre_states.length === 0);
     }
     retainEventsWithCreateRights(events) {
-        const userProfile = JSON.parse(this.sessionStorageService.getItem('userDetails'));
+        const userProfile = JSON.parse(this.sessionStorageService.getItem(USER_DETAILS));
         return events.filter(event => userProfile && userProfile.roles &&
             !!userProfile.roles.find(role => this.hasCreateAccess(event, role)));
     }