@hmcts/ccd-case-ui-toolkit 7.1.75-qm-1 → 7.1.76-callback-success-message

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

@@ -21142,6 +21142,7 @@ class QueryCheckYourAnswersComponent {
     eventData = null;
     backClicked = new EventEmitter();
     querySubmitted = new EventEmitter();
+    callbackConfirmationMessage = new EventEmitter();
     caseViewTrigger;
     caseDetails;
     queryId;
@@ -21223,7 +21224,12 @@ class QueryCheckYourAnswersComponent {
         const createEvent$ = this.createEvent(data);
         if (this.queryCreateContext === QueryCreateContext.RESPOND) {
             if (this.filteredTasks?.length > 0) {
-                this.createEventSubscription = createEvent$.pipe(switchMap((createEventResponse) => this.workAllocationService.completeTask(this.filteredTasks[0].id, this.caseViewTrigger.name))).subscribe({
+                this.createEventSubscription = createEvent$.pipe(switchMap((createEventResponse) => {
+                    const confirmationBody = createEventResponse?.after_submit_callback_response?.confirmation_body;
+                    const confirmationHeader = createEventResponse?.after_submit_callback_response?.confirmation_header;
+                    this.callbackConfirmationMessage.emit({ body: confirmationBody, header: confirmationHeader });
+                    return this.workAllocationService.completeTask(this.filteredTasks[0].id, this.caseViewTrigger.name);
+                })).subscribe({
                     next: () => this.finaliseSubmission(),
                     error: (error) => this.handleError(error)
                 });
@@ -21241,7 +21247,12 @@ class QueryCheckYourAnswersComponent {
         }
         else {
             this.createEventSubscription = createEvent$.subscribe({
-                next: () => this.finaliseSubmission(),
+                next: (callbackResponse) => {
+                    this.finaliseSubmission();
+                    const confirmationBody = callbackResponse?.after_submit_callback_response?.confirmation_body;
+                    const confirmationHeader = callbackResponse?.after_submit_callback_response?.confirmation_header;
+                    this.callbackConfirmationMessage.emit({ body: confirmationBody, header: confirmationHeader });
+                },
                 error: (error) => this.handleError(error)
             });
         }
@@ -21402,11 +21413,13 @@ class QueryCheckYourAnswersComponent {
         const candidateFields = this.eventData?.case_fields?.filter((field) => field.field_type.id === this.CASE_QUERIES_COLLECTION_ID &&
             field.field_type.type === this.FIELD_TYPE_COMPLEX &&
             field.display_context !== this.DISPLAY_CONTEXT_READONLY);
-        if (!candidateFields?.length)
+        if (!candidateFields?.length) {
             return undefined;
+        }
         const firstPageFields = this.eventData?.wizard_pages?.[0]?.wizard_page_fields;
-        if (!firstPageFields)
+        if (!firstPageFields) {
             return undefined;
+        }
         return candidateFields
             .map((field) => {
             const wizardField = firstPageFields.find(f => f.case_field_id === field.id);
@@ -21425,7 +21438,7 @@ class QueryCheckYourAnswersComponent {
         }
     }
     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(QualifyingQuestionService)); };
-    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: 33, vars: 22, 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"], [3, "caseDetails"], ["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"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-right-3", 3, "click"], ["data-module", "govuk-button", "type", "submit", 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"], [1, "govuk-summary-list__value", "govuk-summary-list__value--documentAttached"], [3, "attachments", 4, "ngIf"], [3, "attachments"]], template: function QueryCheckYourAnswersComponent_Template(rf, ctx) { if (rf & 1) {
+    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", callbackConfirmationMessage: "callbackConfirmationMessage" }, decls: 33, vars: 22, 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"], [3, "caseDetails"], ["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"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-right-3", 3, "click"], ["data-module", "govuk-button", "type", "submit", 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"], [1, "govuk-summary-list__value", "govuk-summary-list__value--documentAttached"], [3, "attachments", 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_div_2_Template, 7, 4, "div", 4)(3, QueryCheckYourAnswersComponent_ng_container_3_Template, 4, 3, "ng-container", 5);
@@ -21508,6 +21521,8 @@ class QueryCheckYourAnswersComponent {
             type: Output
         }], querySubmitted: [{
             type: Output
+        }], callbackConfirmationMessage: [{
+            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: 28 }); })();
 
@@ -21849,6 +21864,7 @@ class QueryDetailsComponent {
     showItem = true;
     message;
     static QUERY_ITEM_RESPOND = '3';
+    static QUERY_ITEM_FOLLOW_UP = '4';
     queryItemId;
     constructor(sessionStorageService, route, router) {
         this.sessionStorageService = sessionStorageService;
@@ -21867,18 +21883,25 @@ class QueryDetailsComponent {
     }
     toggleLinkVisibility() {
         this.queryItemId = this.route.snapshot.params.qid;
-        this.showItem = this.queryItemId !== QueryDetailsComponent.QUERY_ITEM_RESPOND;
+        if (this.queryItemId === QueryDetailsComponent.QUERY_ITEM_RESPOND || this.queryItemId === QueryDetailsComponent.QUERY_ITEM_FOLLOW_UP) {
+            this.showItem = false;
+        }
     }
     hasRespondedToQuery() {
-        if (this.queryResponseStatus === undefined || this.queryResponseStatus === QueryItemResponseStatus.AWAITING) {
-            this.hasResponded.emit(false);
-            return false;
-        }
-        if (this.isInternalUser() && this.queryResponseStatus !== QueryItemResponseStatus.AWAITING) {
+        const isAwaiting = this.queryResponseStatus === undefined || this.queryResponseStatus === QueryItemResponseStatus.AWAITING;
+        if (this.isInternalUser()) {
+            if (isAwaiting) {
+                this.hasResponded.emit(false);
+                return false;
+            }
             this.message = Constants.TASK_COMPLETION_ERROR;
             this.hasResponded.emit(true);
             return true;
         }
+        if (isAwaiting) {
+            this.hasResponded.emit(true);
+            return false; // Don't show message
+        }
         this.hasResponded.emit(false);
         return false;
     }
@@ -22617,8 +22640,7 @@ class QueryWriteRespondToQueryComponent {
         });
     }
     ngOnChanges() {
-        if (this.queryItemId === QueryWriteRespondToQueryComponent.QUERY_ITEM_RESPOND
-            && this.caseQueriesCollections?.length > 0) {
+        if (this.caseQueriesCollections?.length > 0) {
             if (!this.caseQueriesCollections[0]) {
                 console.error('caseQueriesCollections[0] is undefined!', this.caseQueriesCollections);
                 return;
@@ -22635,13 +22657,19 @@ class QueryWriteRespondToQueryComponent {
                 .filter((message) => message?.value?.id === messageId); // Safe access
             if (filteredMessages.length > 0) {
                 const matchingMessage = filteredMessages[0]?.value;
-                const filteredQuery = queryWithChildren?.queries.filter((message) => filteredMessages[0]?.value?.parentId === message?.id);
-                this.queryResponseStatus = filteredQuery[0]?.responseStatus;
-                if (matchingMessage) {
-                    this.queryItemDisplay = new QueryListItem();
-                    Object.assign(this.queryItemDisplay, matchingMessage);
-                    this.queryItem = this.queryItemDisplay;
+                let filteredQuery = [];
+                if (this.queryItemId === QueryWriteRespondToQueryComponent.QUERY_ITEM_RESPOND) {
+                    filteredQuery = queryWithChildren?.queries.filter((message) => filteredMessages[0]?.value?.parentId === message?.id);
+                    if (matchingMessage) {
+                        this.queryItemDisplay = new QueryListItem();
+                        Object.assign(this.queryItemDisplay, matchingMessage);
+                        this.queryItem = this.queryItemDisplay;
+                    }
+                }
+                else {
+                    filteredQuery = queryWithChildren?.queries.filter((message) => filteredMessages[0]?.value?.id === message?.id);
                 }
+                this.queryResponseStatus = filteredQuery[0]?.responseStatus;
             }
         }
     }
@@ -22706,27 +22734,25 @@ function QueryConfirmationComponent_main_0_ng_container_3_Template(rf, ctx) { if
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "div", 7);
-    i0.ɵɵtext(6);
+    i0.ɵɵelement(6, "ccd-markdown", 8);
     i0.ɵɵpipe(7, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 8)(9, "h3", 9);
+    i0.ɵɵelementStart(8, "div", 9)(9, "h3", 10);
     i0.ɵɵtext(10);
     i0.ɵɵpipe(11, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "p");
-    i0.ɵɵtext(13);
-    i0.ɵɵpipe(14, "rpxTranslate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "p");
-    i0.ɵɵtext(16);
-    i0.ɵɵpipe(17, "rpxTranslate");
+    i0.ɵɵelement(12, "ccd-markdown", 8);
+    i0.ɵɵpipe(13, "rpxTranslate");
+    i0.ɵɵelementStart(14, "p");
+    i0.ɵɵtext(15);
+    i0.ɵɵpipe(16, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "p");
-    i0.ɵɵtext(19);
-    i0.ɵɵpipe(20, "rpxTranslate");
-    i0.ɵɵelementStart(21, "a", 10);
-    i0.ɵɵtext(22);
-    i0.ɵɵpipe(23, "rpxTranslate");
+    i0.ɵɵelementStart(17, "p");
+    i0.ɵɵtext(18);
+    i0.ɵɵpipe(19, "rpxTranslate");
+    i0.ɵɵelementStart(20, "a", 11);
+    i0.ɵɵtext(21);
+    i0.ɵɵpipe(22, "rpxTranslate");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -22734,19 +22760,19 @@ function QueryConfirmationComponent_main_0_ng_container_3_Template(rf, ctx) { if
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 9, "Query submitted"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 11, "Your query has been sent to HMCTS"));
+    i0.ɵɵproperty("content", i0.ɵɵpipeBind1(7, 11, ctx_r0.callbackConfirmationMessageText == null ? null : ctx_r0.callbackConfirmationMessageText.header));
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 13, "What happens next"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("content", i0.ɵɵpipeBind1(13, 15, ctx_r0.callbackConfirmationMessageText == null ? null : ctx_r0.callbackConfirmationMessageText.body));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(14, 15, "Our team will read your query and will respond"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 17, "When the response is available it will be added to the 'Queries' section."));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 17, "When the response is available it will be added to the 'Queries' section."));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 19, "You can"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(19, 19, "You can"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵpropertyInterpolate1("routerLink", "/cases/case-details/", ctx_r0.caseId, "");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(23, 21, "Go back to the case"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 21, "Go back to the case"));
 } }
 function QueryConfirmationComponent_main_0_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -22754,19 +22780,19 @@ function QueryConfirmationComponent_main_0_ng_container_4_Template(rf, ctx) { if
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 7);
+    i0.ɵɵelementStart(5, "div", 12);
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 8);
+    i0.ɵɵelementStart(8, "div", 9);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "rpxTranslate");
-    i0.ɵɵelementStart(11, "a", 11);
+    i0.ɵɵelementStart(11, "a", 13);
     i0.ɵɵtext(12);
     i0.ɵɵpipe(13, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(14, " or ");
-    i0.ɵɵelementStart(15, "a", 12);
+    i0.ɵɵelementStart(15, "a", 14);
     i0.ɵɵtext(16);
     i0.ɵɵpipe(17, "rpxTranslate");
     i0.ɵɵelementEnd()();
@@ -22790,7 +22816,7 @@ function QueryConfirmationComponent_main_0_ng_container_4_Template(rf, ctx) { if
 } }
 function QueryConfirmationComponent_main_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "main", 1)(1, "div", 2)(2, "div", 3);
-    i0.ɵɵtemplate(3, QueryConfirmationComponent_main_0_ng_container_3_Template, 24, 23, "ng-container", 4)(4, QueryConfirmationComponent_main_0_ng_container_4_Template, 18, 19, "ng-container", 4);
+    i0.ɵɵtemplate(3, QueryConfirmationComponent_main_0_ng_container_3_Template, 23, 23, "ng-container", 4)(4, QueryConfirmationComponent_main_0_ng_container_4_Template, 18, 19, "ng-container", 4);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -22802,6 +22828,7 @@ function QueryConfirmationComponent_main_0_Template(rf, ctx) { if (rf & 1) {
 class QueryConfirmationComponent {
     route;
     queryCreateContext;
+    callbackConfirmationMessageText = {};
     caseId = '';
     queryCreateContextEnum = QueryCreateContext;
     constructor(route) {
@@ -22811,17 +22838,19 @@ class QueryConfirmationComponent {
         this.caseId = this.route.snapshot.params.cid;
     }
     static ɵfac = function QueryConfirmationComponent_Factory(t) { return new (t || QueryConfirmationComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryConfirmationComponent, selectors: [["ccd-query-confirmation"]], inputs: { queryCreateContext: "queryCreateContext" }, decls: 1, vars: 1, consts: [["class", "govuk-main-wrapper", 4, "ngIf"], [1, "govuk-main-wrapper"], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds"], [4, "ngIf"], [1, "govuk-panel", "govuk-panel--confirmation"], [1, "govuk-panel__title"], [1, "govuk-panel__body"], [1, "govuk-body"], [1, "govuk-heading-s"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"], ["id", "tasks-link", "href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"], ["id", "case-link", "href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"]], template: function QueryConfirmationComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryConfirmationComponent, selectors: [["ccd-query-confirmation"]], inputs: { queryCreateContext: "queryCreateContext", callbackConfirmationMessageText: "callbackConfirmationMessageText" }, decls: 1, vars: 1, consts: [["class", "govuk-main-wrapper", 4, "ngIf"], [1, "govuk-main-wrapper"], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds"], [4, "ngIf"], [1, "govuk-panel", "govuk-panel--confirmation"], [1, "govuk-panel__title"], [1, "qm-confirmation", "govuk-panel__body"], [3, "content"], [1, "govuk-body"], [1, "govuk-heading-s"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"], [1, "govuk-panel__body"], ["id", "tasks-link", "href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"], ["id", "case-link", "href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"]], template: function QueryConfirmationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, QueryConfirmationComponent_main_0_Template, 5, 2, "main", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.queryCreateContext);
-        } }, dependencies: [i5.NgIf, i1$1.RouterLink, i1.RpxTranslatePipe], encapsulation: 2 });
+        } }, dependencies: [i5.NgIf, i1$1.RouterLink, MarkdownComponent, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryConfirmationComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-query-confirmation', template: "<main class=\"govuk-main-wrapper\" *ngIf=\"queryCreateContext\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY || queryCreateContext === queryCreateContextEnum.FOLLOWUP\">\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">{{'Query submitted' | rpxTranslate}}</h1>\n          <div class=\"govuk-panel__body\">{{'Your query has been sent to HMCTS' | rpxTranslate}}</div>\n        </div>\n        <div class=\"govuk-body\">\n          <h3 class=\"govuk-heading-s\">{{'What happens next' | rpxTranslate}}</h3>\n          <p>{{'Our team will read your query and will respond' | rpxTranslate}}</p>\n          <p>{{'When the response is available it will be added to the \\'Queries\\' section.' | rpxTranslate}}</p>\n          <p>\n            {{'You can' | rpxTranslate}}\n            <a class=\"govuk-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}\">{{'Go back to the case' | rpxTranslate}}</a>\n          </p>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.RESPOND\">\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">{{'Query response submitted' | rpxTranslate}}</h1>\n          <div class=\"govuk-panel__body\">{{'This query response has been added to the case' | rpxTranslate}}</div>\n        </div>\n        <div class=\"govuk-body\">\n          {{'You can' | rpxTranslate}}\n          <a class=\"govuk-link\" id=\"tasks-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}/tasks\">{{'return to tasks' | rpxTranslate}}</a> or\n          <a class=\"govuk-link\" id=\"case-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}\">{{'Go back to the case' | rpxTranslate}}</a>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</main>\n" }]
+        args: [{ selector: 'ccd-query-confirmation', template: "<main class=\"govuk-main-wrapper\" *ngIf=\"queryCreateContext\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY || queryCreateContext === queryCreateContextEnum.FOLLOWUP\">\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">{{'Query submitted' | rpxTranslate}}</h1>\n          <div class=\"qm-confirmation govuk-panel__body\">\n            <ccd-markdown [content]=\"callbackConfirmationMessageText?.header | rpxTranslate\"></ccd-markdown>\n          </div>\n        </div>\n        <div class=\"govuk-body\">\n          <h3 class=\"govuk-heading-s\">{{'What happens next' | rpxTranslate}}</h3>\n          <ccd-markdown [content]=\"callbackConfirmationMessageText?.body | rpxTranslate\"></ccd-markdown>\n          <p>{{'When the response is available it will be added to the \\'Queries\\' section.' | rpxTranslate}}</p>\n          <p>\n            {{'You can' | rpxTranslate}}\n            <a class=\"govuk-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}\">{{'Go back to the case' | rpxTranslate}}</a>\n          </p>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.RESPOND\">\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">{{'Query response submitted' | rpxTranslate}}</h1>\n          <div class=\"govuk-panel__body\">{{'This query response has been added to the case' | rpxTranslate}}</div>\n        </div>\n        <div class=\"govuk-body\">\n          {{'You can' | rpxTranslate}}\n          <a class=\"govuk-link\" id=\"tasks-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}/tasks\">{{'return to tasks' | rpxTranslate}}</a> or\n          <a class=\"govuk-link\" id=\"case-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}\">{{'Go back to the case' | rpxTranslate}}</a>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</main>\n" }]
     }], () => [{ type: i1$1.ActivatedRoute }], { queryCreateContext: [{
             type: Input
+        }], callbackConfirmationMessageText: [{
+            type: Input
         }] }); })();
 (() => { (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 }); })();
 
@@ -22881,7 +22910,7 @@ function ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_ng_templ
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Your query is under review"));
     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."));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 4, "Our team will read your query and 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);
@@ -22967,7 +22996,7 @@ 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=\"!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" }]
+        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 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: 15 }); })();