@hmcts/ccpay-web-component 6.2.7 → 6.2.8-beta1

package/fesm2022/hmcts-ccpay-web-component.mjs

@@ -3825,6 +3825,7 @@ class AddRemissionComponent {
             }
             //}
         }
+        this.paymentLibComponent.addPaymentGroup(this.paymentGroup);
     }
     gotoAmountRetroRemission() {
         this.isFromCheckAnsPage = false;
@@ -3851,8 +3852,10 @@ class AddRemissionComponent {
         this.isRefundRemission = true;
         this.errorMessage = '';
         this.isConfirmationBtnDisabled = false;
+        this.paymentLibComponent.addPaymentGroup(this.paymentGroup);
     }
     confirmRetroRemission() {
+        this.paymentLibComponent.addPaymentGroup(this.paymentGroup);
         this.isConfirmationBtnDisabled = true;
         this.retroRemission = true;
         this.remissionamt = this.remissionForm.controls.amount.value;
@@ -3863,6 +3866,7 @@ class AddRemissionComponent {
                 this.viewCompStatus = '';
                 this.viewStatus = 'retroremissionconfirmationpage';
                 this.remissionReference = JSON.parse(response).remission_reference;
+                this.paymentLibComponent.addRemission(requestBody);
             }
         }, (error) => {
             this.errorMessage = error;
@@ -4215,6 +4219,7 @@ class AddRemissionComponent {
         else if (type == 'addrefundcheckandanswer') {
             this.getTemplateInstructionType(this.paymentReference, this.paymentObj);
         }
+        this.paymentLibComponent.addPaymentGroup(this.paymentGroup);
         this.viewStatus = type;
     }
     gotoPartialFeeRefundScreen() {
@@ -4416,8 +4421,18 @@ class AddRemissionComponent {
         }
         return "undefined";
     }
+    getRefundAmountToBeDisplayedForContinueJourney() {
+        return Math.abs(((this.paymentLibComponent.getTotalFees() - this.paymentLibComponent.getTotalRemission())
+            - this.paymentLibComponent.getTotalPayments())).toString();
+    }
+    getRemissionAmountToBeDisplayed(remission) {
+        if (remission !== null && remission !== undefined) {
+            return remission.hwf_amount.toString();
+        }
+        return "undefined";
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AddRemissionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$2.Router }, { token: PaymentViewService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: RefundsService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AddRemissionComponent, isStandalone: true, selector: "ccpay-add-remission", inputs: { fee: "fee", fees: "fees", payment: "payment", remission: "remission", ccdCaseNumber: "ccdCaseNumber", caseType: "caseType", viewCompStatus: "viewCompStatus", paymentGroupRef: "paymentGroupRef", isTurnOff: "isTurnOff", isRefundRemission: "isRefundRemission", isStrategicFixEnable: "isStrategicFixEnable", paidAmount: "paidAmount", isFromRefundListPage: "isFromRefundListPage", isFromPaymentDetailPage: "isFromPaymentDetailPage", isFromServiceRequestPage: "isFromServiceRequestPage", isFullyRefund: "isFullyRefund", feeamount: "feeamount", refundPaymentReference: "refundPaymentReference", isFromRefundStatusPage: "isFromRefundStatusPage", changeRefundReason: "changeRefundReason", isServiceRequest: "isServiceRequest", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", takePayment: ["takepayment", "takePayment"], orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal" }, outputs: { cancelRemission: "cancelRemission", refundListReason: "refundListReason", refundListAmount: "refundListAmount", refundFees: "refundFees" }, providers: [{ provide: 'ADD_REMISSION', useExisting: AddRemissionComponent }], ngImport: i0, template: "<div class=\"add-remission pagesize\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n       {{ \"Error in processing the request\" | rpxTranslate }}\n      </h2>\n      <div  class=\"govuk-error-summary__body\">\n        {{ errorMessage | rpxTranslate }}\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMsg.length > 0\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        {{ \"Error in processing the request\" | rpxTranslate }}\n      </h2>\n      <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n       \n        <li>{{ err | rpxTranslate }}</li>\n      </div>\n    </div>\n  </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n    <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </h1>\n    <form novalidate>\n      <div class=\"govuk-form-group\">\n        <form [formGroup]=\"remissionForm\" novalidate>\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                {{ \"Add remission to\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n              <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n            </label>\n            <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n            <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n              <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n              <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n            </p>\n          </div>\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n              {{ \"How much does the applicant need to pay\" | rpxTranslate }}?\n            </label>\n\n            <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n              <div class=\"hmcts-currency-input\">\n              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n              <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n              <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n                <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n                <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n              </p>\n            </div>\n          </div>\n        </form>\n        <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n            {{ \"Submit\" | rpxTranslate }}\n          </button>\n      </div>\n    </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \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-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n        {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\n      </strong>\n    </div>\n    <table class=\"govuk-table\">\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission code\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee description\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n      </tr>\n    </table>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmRemission()\">\n      {{ \"Confirm\" | rpxTranslate }}\n    </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n    <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</h1>\n    <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                <span class=\"form-hint\">{{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n              </label>\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n                <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n              </p>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n           \n            </div>\n          \n          </form>\n          <div class=\"govuk-button-group\">\n              <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n              <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n          </div>\n          <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a></p>\n        </div>\n    </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n    <div class=\"govuk-form-group\">\n        <form novalidate>\n            <div class=\"govuk-form-group\">\n                <form [formGroup]=\"remissionForm\" novalidate>\n                    <fieldset class=\"govuk-fieldset\">\n                      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                          <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                              {{ \"Enter the amount to be refunded\" | rpxTranslate }}\n                          </h1> \n                          <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                              {{ \"Enter the remission amount\" | rpxTranslate }}\n                          </h1> \n                          <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                              {{ \"Enter the  amount\" | rpxTranslate }}\n                          </h1> \n                        </legend>\n                     <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n                     <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                      <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n                      <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n                      <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</span>\n                    </p>\n                        <div class=\"hmcts-currency-input\">\n                         \n                            <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                            <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                            \n            \n                      </div>\n                    </fieldset>\n                </form>\n          \n                <div class=\"govuk-button-group\">\n                    <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n                    <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n                \n                </div>\n                <p>\n                  <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n              </p>\n            </div>\n  \n        </form>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n    <div class=\"govuk-warning-text\">\n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n      </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n             <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n            </td>\n        </tr>\n    </table>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> {{ \"Add remission\" | rpxTranslate }} </button>\n    <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n  <div class=\"govuk-grid-row\">\n    <div >\n      <div class=\"govuk-panel govuk-panel-border--confirmation\">\n        <h1 class=\"govuk-panel__title\">\n          {{ \"Remission added\" | rpxTranslate }}\n        </h1>\n        <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n            <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n           \n          </div>\n        </div>\n        <div *ngIf=\"remessionPayment.status === 'Success'\" >\n            <button type=\"submit\" [disabled]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n          </div>\n          <p class=\"govuk-body\">\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n            {{ \"Return to case\" | rpxTranslate }}\n        </a>\n          </p>\n    </div>\n  </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n    <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n  (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n    <div class=\"govuk-warning-text\">\n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"remessionPayment\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR036'\"\n    [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n    <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel_remission_title\">\n            {{ \"Refund submitted\" | rpxTranslate }}\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n        <p class=\"govuk-body\">\n          {{ \"A refund request for\" | rpxTranslate }} {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n        </p>\n      </div>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        {{ \"Return to case\" | rpxTranslate }}\n    </a>\n      </p>\n      </div>\n    </div>\n  \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n  <div class=\"govuk-form-group\">\n    <form [formGroup]=\"remissionForm\" novalidate>\n    <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n    <!--TABLE-->\n    <div>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header  col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n          <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n            <td class=\"govuk-table__cell\">\n              <div  [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                <div class=\"govuk-checkboxes__item\">\n\n                  <input\n                  class=\"govuk-checkboxes__input\" \n                  (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" \n                  id=\"{{fee.controls['id'].value}}\" \n                  name=\"organisation\" \n                  type=\"checkbox\" \n                  value=\"{{fee.controls['id'].value}}\" \n                  formControlName=\"selected\" >\n                  <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n                    <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n                  </label>\n                </div>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit\">{{fee.controls['description'].value}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n              {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value >1\">\n              <div [formGroupName]=\"i\">\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\"  name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n            </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value ===1\">\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\"   value=\"{{fee.controls['volume'].value}}\">\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n            \n                <div  [formGroupName]=\"i\"  class=\"hmcts-currency-input\">\n                  <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \"  pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n                  <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n                  <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n                  <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n               </div> \n \n            </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n            <td class=\"govuk-table__cell\">\n              <div  class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                <div class=\"govuk-checkboxes__item\">\n                  <input   \n                  class=\"govuk-checkboxes__input\" \n                \n                  id=\"{{fee.id}}\" \n                  name=\"organisation\" \n                  type=\"checkbox\" \n                  value=\"{{fee.id}}\"\n                  disabled=\"disabled\"\n                  [checked]=\"true\" >\n                  <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n                    <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n                  </label>\n                </div>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n              {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\">\n              <div >\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.id}}\"  value=\"{{fee.volume}}\"  name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n            </div>\n            </td>\n        \n            <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n            \n                <div class=\"hmcts-currency-input\">\n                  \n                  <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \"  value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n                </div> \n        \n            </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-button-group\">\n\n  \n  <a  (click)=\"gotoServiceRequestPage($event)\"  *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    {{ \"Previous\" | rpxTranslate }}\n  </a>\n  <a  (click)=\"goToPaymentViewComponent()\"  *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    {{ \"Previous\" | rpxTranslate }}\n  </a>\n    \n  <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n    {{ \"Continue\" | rpxTranslate }}\n  </button>\n  \n    </div>\n    <p>\n      <a  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n    </p>\n  </form>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n    </span>\n    <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\n      </h1>\n     \n\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                <form [formGroup]=\"remissionForm\" novalidate>\n                  <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n                     \n                        <div\n                          [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n                          data-module=\"govuk-radios\" >\n                          <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n                            <span *ngIf=\"refundHasError\">{{ \"Select a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                          </p>\n\n                         \n\n                          <div class = \"container-fluid\">\n                            <div class=\"row\">\n                            <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n                              <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n                                <input   class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n                                formControlName=\"refundReason\" value={{refund.code}}\n                                  (change)=\"selectRadioButton(refund.code, refund.name)\">\n                                <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                  {{refund.name}}\n                                </label>\n\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                    <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                        {{ \"Enter reason\" | rpxTranslate }}\n                                    </label>\n                                    <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                    <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                                      </p>\n                                     \n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                </div>\n                                </div>\n                              <!-- </div> -->\n                            </div>\n                            </div>\n                          </div>\n                          <br/>\n                          <div>\n                              <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                  <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                </select>\n                            \n                          </div>\n                              <br/>\n                              <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                  <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                      {{ \"Enter reason\" | rpxTranslate }}\n                                  </label>\n                                  <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                      <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                                    </p>\n                                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                </div>\n                              </div>\n\n                        \n                        </div>\n                  </fieldset>\n                </form>\n             </div>\n             </form>\n      </div>\n      <div class=\"govuk-button-group\">\n          <button  (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n          <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n      </div>\n      <p>\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n    \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'>      \n    <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n  (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        \n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr>\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim()  }} \n         <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n        <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"payment\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"selectedRefundReasonCode\"\n    [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n    <div class=\"govuk-button-group\">\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund(isFullyRefund)\">\n      {{ \"Submit refund\" | rpxTranslate }}\n    </button>\n    </div>\n    <p>\n        <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n  <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n  <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        {{ \"Cancel\" | rpxTranslate }}\n    </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [contactDetails]=\"contactDetailsObj\"\n    [paymentReference]=\"paymentReference\"\n    [payment]=\"paymentObj\"\n    [refundReason]=\"'RR036'\"\n    [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n    <div class=\"govuk-button-group\">\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"processRefund()\">\n      {{ \"Submit refund\" | rpxTranslate }}\n    </button>\n    </div>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n  <div class=\"govuk-grid-row\">\n    <div >\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_remission_title\">\n          {{ \"Refund submitted\" | rpxTranslate }}\n        </h1>\n        \n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n        </div>\n  \n      </div>\n      <div *ngIf=\"isPaymentSuccess\">\n      <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n      <p class=\"govuk-body\">\n        {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n      </p>\n    </div>\n    <p class=\"govuk-body\">\n    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n      {{ \"Return to case\" | rpxTranslate }}\n  </a>\n    </p>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [isServiceRequest]=\"isServiceRequest\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"takePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n  <ccpay-payment-view \n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [isTurnOff] = \"isTurnOff\" \n  [isTakePayment] = \"takePayment\"  \n  [caseType] = \"caseType\"\n  [isServiceRequest]=\"isServiceRequest\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => PaymentViewComponent), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgSelectOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgSelectMultipleOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NumberValueAccessor), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.CheckboxControlValueAccessor), selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.SelectControlValueAccessor), selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.RadioControlValueAccessor), selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.MaxLengthValidator), selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.PatternValidator), selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupName), selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AddRemissionComponent, isStandalone: true, selector: "ccpay-add-remission", inputs: { fee: "fee", fees: "fees", payment: "payment", remission: "remission", ccdCaseNumber: "ccdCaseNumber", caseType: "caseType", viewCompStatus: "viewCompStatus", paymentGroupRef: "paymentGroupRef", isTurnOff: "isTurnOff", isRefundRemission: "isRefundRemission", isStrategicFixEnable: "isStrategicFixEnable", paidAmount: "paidAmount", isFromRefundListPage: "isFromRefundListPage", isFromPaymentDetailPage: "isFromPaymentDetailPage", isFromServiceRequestPage: "isFromServiceRequestPage", isFullyRefund: "isFullyRefund", feeamount: "feeamount", refundPaymentReference: "refundPaymentReference", isFromRefundStatusPage: "isFromRefundStatusPage", changeRefundReason: "changeRefundReason", isServiceRequest: "isServiceRequest", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", takePayment: ["takepayment", "takePayment"], orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal" }, outputs: { cancelRemission: "cancelRemission", refundListReason: "refundListReason", refundListAmount: "refundListAmount", refundFees: "refundFees" }, providers: [{ provide: 'ADD_REMISSION', useExisting: AddRemissionComponent }], ngImport: i0, template: "<div class=\"add-remission pagesize\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n       {{ \"Error in processing the request\" | rpxTranslate }}\n      </h2>\n      <div  class=\"govuk-error-summary__body\">\n        {{ errorMessage | rpxTranslate }}\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMsg.length > 0\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        {{ \"Error in processing the request\" | rpxTranslate }}\n      </h2>\n      <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n       \n        <li>{{ err | rpxTranslate }}</li>\n      </div>\n    </div>\n  </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n    <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </h1>\n    <form novalidate>\n      <div class=\"govuk-form-group\">\n        <form [formGroup]=\"remissionForm\" novalidate>\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                {{ \"Add remission to\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n              <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n            </label>\n            <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n            <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n              <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n              <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n            </p>\n          </div>\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n              {{ \"How much does the applicant need to pay\" | rpxTranslate }}?\n            </label>\n\n            <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n              <div class=\"hmcts-currency-input\">\n              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n              <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n              <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n                <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n                <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n              </p>\n            </div>\n          </div>\n        </form>\n        <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n            {{ \"Submit\" | rpxTranslate }}\n          </button>\n      </div>\n    </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \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-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n        {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\n      </strong>\n    </div>\n    <table class=\"govuk-table\">\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission code\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee description\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n      </tr>\n    </table>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmRemission()\">\n      {{ \"Confirm\" | rpxTranslate }}\n    </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n    <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</h1>\n    <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                <span class=\"form-hint\">{{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n              </label>\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n                <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n              </p>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n           \n            </div>\n          \n          </form>\n          <div class=\"govuk-button-group\">\n              <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n              <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n          </div>\n          <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a></p>\n        </div>\n    </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n    <div class=\"govuk-form-group\">\n        <form novalidate>\n            <div class=\"govuk-form-group\">\n                <form [formGroup]=\"remissionForm\" novalidate>\n                    <fieldset class=\"govuk-fieldset\">\n                      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                          <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                              {{ \"Enter the HWF or remission amount\" | rpxTranslate }}\n                          </h1> \n                          <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                              {{ \"Enter the remission amount\" | rpxTranslate }}\n                          </h1> \n                          <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                              {{ \"Enter the  amount\" | rpxTranslate }}\n                          </h1> \n                        </legend>\n                     <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n                     <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                      <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n                      <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n                      <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</span>\n                    </p>\n                        <div class=\"hmcts-currency-input\">\n                         \n                            <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                            <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                            \n            \n                      </div>\n                    </fieldset>\n                </form>\n          \n                <div class=\"govuk-button-group\">\n                    <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n                    <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n                \n                </div>\n                <p>\n                  <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n              </p>\n            </div>\n  \n        </form>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n    <div class=\"govuk-warning-text\">\n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n      </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n             <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n            </td>\n        </tr>\n    </table>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> {{ \"Add remission\" | rpxTranslate }} </button>\n    <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n  <div class=\"govuk-grid-row\">\n    <div >\n      <div class=\"govuk-panel govuk-panel-border--confirmation\">\n        <h1 class=\"govuk-panel__title\">\n          {{ \"Remission added\" | rpxTranslate }}\n        </h1>\n        <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n            <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n           \n          </div>\n        </div>\n        <div *ngIf=\"remessionPayment.status === 'Success'\" >\n            <button type=\"submit\" [disabled]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n          </div>\n          <p class=\"govuk-body\">\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n            {{ \"Return to case\" | rpxTranslate }}\n        </a>\n          </p>\n    </div>\n  </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n    <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n  (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n    <div class=\"govuk-warning-text\">\n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n      </tr>\n\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n            </td>\n        </tr>\n\n        <tr class=\"govuk-table__row\">\n          <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n          </td>\n        </tr>\n\n        <tr class=\"govuk-table__row\">\n            <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ getRefundAmountToBeDisplayedForContinueJourney()| currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"remessionPayment\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR036'\"\n    [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n    <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel_remission_title\">\n            {{ \"Refund submitted\" | rpxTranslate }}\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n        <p class=\"govuk-body\">\n          {{ \"A refund request for\" | rpxTranslate }} {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n        </p>\n      </div>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        {{ \"Return to case\" | rpxTranslate }}\n    </a>\n      </p>\n      </div>\n    </div>\n  \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n  <div class=\"govuk-form-group\">\n    <form [formGroup]=\"remissionForm\" novalidate>\n    <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n    <!--TABLE-->\n    <div>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header  col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n          <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n            <td class=\"govuk-table__cell\">\n              <div  [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                <div class=\"govuk-checkboxes__item\">\n\n                  <input\n                  class=\"govuk-checkboxes__input\" \n                  (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" \n                  id=\"{{fee.controls['id'].value}}\" \n                  name=\"organisation\" \n                  type=\"checkbox\" \n                  value=\"{{fee.controls['id'].value}}\" \n                  formControlName=\"selected\" >\n                  <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n                    <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n                  </label>\n                </div>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit\">{{fee.controls['description'].value}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n              {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value >1\">\n              <div [formGroupName]=\"i\">\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\"  name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n            </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value ===1\">\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\"   value=\"{{fee.controls['volume'].value}}\">\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n            \n                <div  [formGroupName]=\"i\"  class=\"hmcts-currency-input\">\n                  <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \"  pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n                  <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n                  <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n                  <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n               </div> \n \n            </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n            <td class=\"govuk-table__cell\">\n              <div  class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                <div class=\"govuk-checkboxes__item\">\n                  <input   \n                  class=\"govuk-checkboxes__input\" \n                \n                  id=\"{{fee.id}}\" \n                  name=\"organisation\" \n                  type=\"checkbox\" \n                  value=\"{{fee.id}}\"\n                  disabled=\"disabled\"\n                  [checked]=\"true\" >\n                  <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n                    <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n                  </label>\n                </div>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n              {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\">\n              <div >\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.id}}\"  value=\"{{fee.volume}}\"  name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n            </div>\n            </td>\n        \n            <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n            \n                <div class=\"hmcts-currency-input\">\n                  \n                  <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \"  value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n                </div> \n        \n            </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-button-group\">\n\n  \n  <a  (click)=\"gotoServiceRequestPage($event)\"  *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    {{ \"Previous\" | rpxTranslate }}\n  </a>\n  <a  (click)=\"goToPaymentViewComponent()\"  *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    {{ \"Previous\" | rpxTranslate }}\n  </a>\n    \n  <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n    {{ \"Continue\" | rpxTranslate }}\n  </button>\n  \n    </div>\n    <p>\n      <a  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n    </p>\n  </form>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n    </span>\n    <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\n      </h1>\n     \n\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                <form [formGroup]=\"remissionForm\" novalidate>\n                  <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n                     \n                        <div\n                          [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n                          data-module=\"govuk-radios\" >\n                          <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n                            <span *ngIf=\"refundHasError\">{{ \"Select a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                          </p>\n\n                         \n\n                          <div class = \"container-fluid\">\n                            <div class=\"row\">\n                            <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n                              <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n                                <input   class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n                                formControlName=\"refundReason\" value={{refund.code}}\n                                  (change)=\"selectRadioButton(refund.code, refund.name)\">\n                                <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                  {{refund.name}}\n                                </label>\n\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                    <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                        {{ \"Enter reason\" | rpxTranslate }}\n                                    </label>\n                                    <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                    <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                                      </p>\n                                     \n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                </div>\n                                </div>\n                              <!-- </div> -->\n                            </div>\n                            </div>\n                          </div>\n                          <br/>\n                          <div>\n                              <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                  <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                </select>\n                            \n                          </div>\n                              <br/>\n                              <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                  <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                      {{ \"Enter reason\" | rpxTranslate }}\n                                  </label>\n                                  <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                      <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                                    </p>\n                                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                </div>\n                              </div>\n\n                        \n                        </div>\n                  </fieldset>\n                </form>\n             </div>\n             </form>\n      </div>\n      <div class=\"govuk-button-group\">\n          <button  (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n          <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n      </div>\n      <p>\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n    \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'>      \n    <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n  (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        \n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr>\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim()  }} \n         <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n        <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"payment\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"selectedRefundReasonCode\"\n    [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n    <div class=\"govuk-button-group\">\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund(isFullyRefund)\">\n      {{ \"Submit refund\" | rpxTranslate }}\n    </button>\n    </div>\n    <p>\n        <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n  <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n  <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        {{ \"Cancel\" | rpxTranslate }}\n    </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n\n        <tr class=\"govuk-table__row\">\n          <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{getRemissionAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2' }}\n          </td>\n        </tr>\n\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [contactDetails]=\"contactDetailsObj\"\n    [paymentReference]=\"paymentReference\"\n    [payment]=\"paymentObj\"\n    [refundReason]=\"'RR036'\"\n    [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n    <div class=\"govuk-button-group\">\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"processRefund()\">\n      {{ \"Submit refund\" | rpxTranslate }}\n    </button>\n    </div>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n  <div class=\"govuk-grid-row\">\n    <div >\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_remission_title\">\n          {{ \"Refund submitted\" | rpxTranslate }}\n        </h1>\n        \n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n        </div>\n  \n      </div>\n      <div *ngIf=\"isPaymentSuccess\">\n      <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n      <p class=\"govuk-body\">\n        {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n      </p>\n    </div>\n    <p class=\"govuk-body\">\n    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n      {{ \"Return to case\" | rpxTranslate }}\n  </a>\n    </p>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [isServiceRequest]=\"isServiceRequest\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"takePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n  <ccpay-payment-view \n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [isTurnOff] = \"isTurnOff\" \n  [isTakePayment] = \"takePayment\"  \n  [caseType] = \"caseType\"\n  [isServiceRequest]=\"isServiceRequest\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => PaymentViewComponent), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgSelectOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgSelectMultipleOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NumberValueAccessor), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.CheckboxControlValueAccessor), selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.SelectControlValueAccessor), selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.RadioControlValueAccessor), selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.MaxLengthValidator), selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.PatternValidator), selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupName), selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AddRemissionComponent, decorators: [{
             type: Component,
@@ -4432,7 +4447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         RpxTranslationModule
-                    ], standalone: true, template: "<div class=\"add-remission pagesize\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n       {{ \"Error in processing the request\" | rpxTranslate }}\n      </h2>\n      <div  class=\"govuk-error-summary__body\">\n        {{ errorMessage | rpxTranslate }}\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMsg.length > 0\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        {{ \"Error in processing the request\" | rpxTranslate }}\n      </h2>\n      <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n       \n        <li>{{ err | rpxTranslate }}</li>\n      </div>\n    </div>\n  </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n    <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </h1>\n    <form novalidate>\n      <div class=\"govuk-form-group\">\n        <form [formGroup]=\"remissionForm\" novalidate>\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                {{ \"Add remission to\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n              <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n            </label>\n            <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n            <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n              <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n              <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n            </p>\n          </div>\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n              {{ \"How much does the applicant need to pay\" | rpxTranslate }}?\n            </label>\n\n            <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n              <div class=\"hmcts-currency-input\">\n              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n              <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n              <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n                <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n                <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n              </p>\n            </div>\n          </div>\n        </form>\n        <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n            {{ \"Submit\" | rpxTranslate }}\n          </button>\n      </div>\n    </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \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-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n        {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\n      </strong>\n    </div>\n    <table class=\"govuk-table\">\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission code\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee description\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n      </tr>\n    </table>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmRemission()\">\n      {{ \"Confirm\" | rpxTranslate }}\n    </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n    <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</h1>\n    <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                <span class=\"form-hint\">{{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n              </label>\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n                <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n              </p>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n           \n            </div>\n          \n          </form>\n          <div class=\"govuk-button-group\">\n              <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n              <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n          </div>\n          <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a></p>\n        </div>\n    </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n    <div class=\"govuk-form-group\">\n        <form novalidate>\n            <div class=\"govuk-form-group\">\n                <form [formGroup]=\"remissionForm\" novalidate>\n                    <fieldset class=\"govuk-fieldset\">\n                      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                          <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                              {{ \"Enter the amount to be refunded\" | rpxTranslate }}\n                          </h1> \n                          <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                              {{ \"Enter the remission amount\" | rpxTranslate }}\n                          </h1> \n                          <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                              {{ \"Enter the  amount\" | rpxTranslate }}\n                          </h1> \n                        </legend>\n                     <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n                     <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                      <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n                      <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n                      <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</span>\n                    </p>\n                        <div class=\"hmcts-currency-input\">\n                         \n                            <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                            <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                            \n            \n                      </div>\n                    </fieldset>\n                </form>\n          \n                <div class=\"govuk-button-group\">\n                    <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n                    <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n                \n                </div>\n                <p>\n                  <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n              </p>\n            </div>\n  \n        </form>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n    <div class=\"govuk-warning-text\">\n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n      </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n             <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n            </td>\n        </tr>\n    </table>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> {{ \"Add remission\" | rpxTranslate }} </button>\n    <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n  <div class=\"govuk-grid-row\">\n    <div >\n      <div class=\"govuk-panel govuk-panel-border--confirmation\">\n        <h1 class=\"govuk-panel__title\">\n          {{ \"Remission added\" | rpxTranslate }}\n        </h1>\n        <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n            <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n           \n          </div>\n        </div>\n        <div *ngIf=\"remessionPayment.status === 'Success'\" >\n            <button type=\"submit\" [disabled]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n          </div>\n          <p class=\"govuk-body\">\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n            {{ \"Return to case\" | rpxTranslate }}\n        </a>\n          </p>\n    </div>\n  </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n    <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n  (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n    <div class=\"govuk-warning-text\">\n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"remessionPayment\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR036'\"\n    [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n    <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel_remission_title\">\n            {{ \"Refund submitted\" | rpxTranslate }}\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n        <p class=\"govuk-body\">\n          {{ \"A refund request for\" | rpxTranslate }} {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n        </p>\n      </div>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        {{ \"Return to case\" | rpxTranslate }}\n    </a>\n      </p>\n      </div>\n    </div>\n  \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n  <div class=\"govuk-form-group\">\n    <form [formGroup]=\"remissionForm\" novalidate>\n    <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n    <!--TABLE-->\n    <div>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header  col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n          <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n            <td class=\"govuk-table__cell\">\n              <div  [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                <div class=\"govuk-checkboxes__item\">\n\n                  <input\n                  class=\"govuk-checkboxes__input\" \n                  (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" \n                  id=\"{{fee.controls['id'].value}}\" \n                  name=\"organisation\" \n                  type=\"checkbox\" \n                  value=\"{{fee.controls['id'].value}}\" \n                  formControlName=\"selected\" >\n                  <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n                    <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n                  </label>\n                </div>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit\">{{fee.controls['description'].value}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n              {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value >1\">\n              <div [formGroupName]=\"i\">\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\"  name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n            </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value ===1\">\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\"   value=\"{{fee.controls['volume'].value}}\">\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n            \n                <div  [formGroupName]=\"i\"  class=\"hmcts-currency-input\">\n                  <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \"  pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n                  <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n                  <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n                  <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n               </div> \n \n            </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n            <td class=\"govuk-table__cell\">\n              <div  class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                <div class=\"govuk-checkboxes__item\">\n                  <input   \n                  class=\"govuk-checkboxes__input\" \n                \n                  id=\"{{fee.id}}\" \n                  name=\"organisation\" \n                  type=\"checkbox\" \n                  value=\"{{fee.id}}\"\n                  disabled=\"disabled\"\n                  [checked]=\"true\" >\n                  <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n                    <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n                  </label>\n                </div>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n              {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\">\n              <div >\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.id}}\"  value=\"{{fee.volume}}\"  name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n            </div>\n            </td>\n        \n            <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n            \n                <div class=\"hmcts-currency-input\">\n                  \n                  <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \"  value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n                </div> \n        \n            </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-button-group\">\n\n  \n  <a  (click)=\"gotoServiceRequestPage($event)\"  *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    {{ \"Previous\" | rpxTranslate }}\n  </a>\n  <a  (click)=\"goToPaymentViewComponent()\"  *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    {{ \"Previous\" | rpxTranslate }}\n  </a>\n    \n  <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n    {{ \"Continue\" | rpxTranslate }}\n  </button>\n  \n    </div>\n    <p>\n      <a  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n    </p>\n  </form>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n    </span>\n    <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\n      </h1>\n     \n\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                <form [formGroup]=\"remissionForm\" novalidate>\n                  <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n                     \n                        <div\n                          [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n                          data-module=\"govuk-radios\" >\n                          <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n                            <span *ngIf=\"refundHasError\">{{ \"Select a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                          </p>\n\n                         \n\n                          <div class = \"container-fluid\">\n                            <div class=\"row\">\n                            <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n                              <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n                                <input   class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n                                formControlName=\"refundReason\" value={{refund.code}}\n                                  (change)=\"selectRadioButton(refund.code, refund.name)\">\n                                <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                  {{refund.name}}\n                                </label>\n\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                    <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                        {{ \"Enter reason\" | rpxTranslate }}\n                                    </label>\n                                    <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                    <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                                      </p>\n                                     \n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                </div>\n                                </div>\n                              <!-- </div> -->\n                            </div>\n                            </div>\n                          </div>\n                          <br/>\n                          <div>\n                              <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                  <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                </select>\n                            \n                          </div>\n                              <br/>\n                              <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                  <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                      {{ \"Enter reason\" | rpxTranslate }}\n                                  </label>\n                                  <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                      <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                                    </p>\n                                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                </div>\n                              </div>\n\n                        \n                        </div>\n                  </fieldset>\n                </form>\n             </div>\n             </form>\n      </div>\n      <div class=\"govuk-button-group\">\n          <button  (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n          <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n      </div>\n      <p>\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n    \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'>      \n    <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n  (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        \n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr>\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim()  }} \n         <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n        <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"payment\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"selectedRefundReasonCode\"\n    [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n    <div class=\"govuk-button-group\">\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund(isFullyRefund)\">\n      {{ \"Submit refund\" | rpxTranslate }}\n    </button>\n    </div>\n    <p>\n        <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n  <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n  <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        {{ \"Cancel\" | rpxTranslate }}\n    </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [contactDetails]=\"contactDetailsObj\"\n    [paymentReference]=\"paymentReference\"\n    [payment]=\"paymentObj\"\n    [refundReason]=\"'RR036'\"\n    [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n    <div class=\"govuk-button-group\">\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"processRefund()\">\n      {{ \"Submit refund\" | rpxTranslate }}\n    </button>\n    </div>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n  <div class=\"govuk-grid-row\">\n    <div >\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_remission_title\">\n          {{ \"Refund submitted\" | rpxTranslate }}\n        </h1>\n        \n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n        </div>\n  \n      </div>\n      <div *ngIf=\"isPaymentSuccess\">\n      <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n      <p class=\"govuk-body\">\n        {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n      </p>\n    </div>\n    <p class=\"govuk-body\">\n    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n      {{ \"Return to case\" | rpxTranslate }}\n  </a>\n    </p>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [isServiceRequest]=\"isServiceRequest\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"takePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n  <ccpay-payment-view \n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [isTurnOff] = \"isTurnOff\" \n  [isTakePayment] = \"takePayment\"  \n  [caseType] = \"caseType\"\n  [isServiceRequest]=\"isServiceRequest\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
+                    ], standalone: true, template: "<div class=\"add-remission pagesize\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n       {{ \"Error in processing the request\" | rpxTranslate }}\n      </h2>\n      <div  class=\"govuk-error-summary__body\">\n        {{ errorMessage | rpxTranslate }}\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMsg.length > 0\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        {{ \"Error in processing the request\" | rpxTranslate }}\n      </h2>\n      <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n       \n        <li>{{ err | rpxTranslate }}</li>\n      </div>\n    </div>\n  </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n    <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </h1>\n    <form novalidate>\n      <div class=\"govuk-form-group\">\n        <form [formGroup]=\"remissionForm\" novalidate>\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                {{ \"Add remission to\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n              <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n            </label>\n            <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n            <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n              <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n              <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n            </p>\n          </div>\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n              {{ \"How much does the applicant need to pay\" | rpxTranslate }}?\n            </label>\n\n            <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n              <div class=\"hmcts-currency-input\">\n              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n              <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n              <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n                <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n                <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n              </p>\n            </div>\n          </div>\n        </form>\n        <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n            {{ \"Submit\" | rpxTranslate }}\n          </button>\n      </div>\n    </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \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-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n        {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\n      </strong>\n    </div>\n    <table class=\"govuk-table\">\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission code\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee description\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</td>\n          <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n      </tr>\n    </table>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmRemission()\">\n      {{ \"Confirm\" | rpxTranslate }}\n    </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n    <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</h1>\n    <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                <span class=\"form-hint\">{{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n              </label>\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n                <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n              </p>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n           \n            </div>\n          \n          </form>\n          <div class=\"govuk-button-group\">\n              <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n              <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n          </div>\n          <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a></p>\n        </div>\n    </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n    <div class=\"govuk-form-group\">\n        <form novalidate>\n            <div class=\"govuk-form-group\">\n                <form [formGroup]=\"remissionForm\" novalidate>\n                    <fieldset class=\"govuk-fieldset\">\n                      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                          <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                              {{ \"Enter the HWF or remission amount\" | rpxTranslate }}\n                          </h1> \n                          <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                              {{ \"Enter the remission amount\" | rpxTranslate }}\n                          </h1> \n                          <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                              {{ \"Enter the  amount\" | rpxTranslate }}\n                          </h1> \n                        </legend>\n                     <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n                     <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                      <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n                      <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n                      <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</span>\n                    </p>\n                        <div class=\"hmcts-currency-input\">\n                         \n                            <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                            <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                            \n            \n                      </div>\n                    </fieldset>\n                </form>\n          \n                <div class=\"govuk-button-group\">\n                    <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n                    <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n                \n                </div>\n                <p>\n                  <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n              </p>\n            </div>\n  \n        </form>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n    <div class=\"govuk-warning-text\">\n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n      </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n             <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n            </td>\n        </tr>\n    </table>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> {{ \"Add remission\" | rpxTranslate }} </button>\n    <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n  <div class=\"govuk-grid-row\">\n    <div >\n      <div class=\"govuk-panel govuk-panel-border--confirmation\">\n        <h1 class=\"govuk-panel__title\">\n          {{ \"Remission added\" | rpxTranslate }}\n        </h1>\n        <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n            <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n           \n          </div>\n        </div>\n        <div *ngIf=\"remessionPayment.status === 'Success'\" >\n            <button type=\"submit\" [disabled]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n          </div>\n          <p class=\"govuk-body\">\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n            {{ \"Return to case\" | rpxTranslate }}\n        </a>\n          </p>\n    </div>\n  </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n    <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n  (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n    <div class=\"govuk-warning-text\">\n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n      </tr>\n\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n            </td>\n        </tr>\n\n        <tr class=\"govuk-table__row\">\n          <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n          </td>\n        </tr>\n\n        <tr class=\"govuk-table__row\">\n            <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ getRefundAmountToBeDisplayedForContinueJourney()| currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"remessionPayment\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR036'\"\n    [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n    <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel_remission_title\">\n            {{ \"Refund submitted\" | rpxTranslate }}\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n        <p class=\"govuk-body\">\n          {{ \"A refund request for\" | rpxTranslate }} {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n        </p>\n      </div>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        {{ \"Return to case\" | rpxTranslate }}\n    </a>\n      </p>\n      </div>\n    </div>\n  \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n  <div class=\"govuk-form-group\">\n    <form [formGroup]=\"remissionForm\" novalidate>\n    <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n    <!--TABLE-->\n    <div>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header  col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n          <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n            <td class=\"govuk-table__cell\">\n              <div  [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                <div class=\"govuk-checkboxes__item\">\n\n                  <input\n                  class=\"govuk-checkboxes__input\" \n                  (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" \n                  id=\"{{fee.controls['id'].value}}\" \n                  name=\"organisation\" \n                  type=\"checkbox\" \n                  value=\"{{fee.controls['id'].value}}\" \n                  formControlName=\"selected\" >\n                  <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n                    <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n                  </label>\n                </div>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit\">{{fee.controls['description'].value}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n              {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value >1\">\n              <div [formGroupName]=\"i\">\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\"  name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n            </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value ===1\">\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\"   value=\"{{fee.controls['volume'].value}}\">\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n            \n                <div  [formGroupName]=\"i\"  class=\"hmcts-currency-input\">\n                  <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \"  pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n                  <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n                  <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n                  <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n               </div> \n \n            </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n            <td class=\"govuk-table__cell\">\n              <div  class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                <div class=\"govuk-checkboxes__item\">\n                  <input   \n                  class=\"govuk-checkboxes__input\" \n                \n                  id=\"{{fee.id}}\" \n                  name=\"organisation\" \n                  type=\"checkbox\" \n                  value=\"{{fee.id}}\"\n                  disabled=\"disabled\"\n                  [checked]=\"true\" >\n                  <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n                    <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n                  </label>\n                </div>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n              {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n            </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell  whitespace-inherit left\">\n              <div >\n              <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.id}}\"  value=\"{{fee.volume}}\"  name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n            </div>\n            </td>\n        \n            <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n            \n                <div class=\"hmcts-currency-input\">\n                  \n                  <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \"  value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n                </div> \n        \n            </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-button-group\">\n\n  \n  <a  (click)=\"gotoServiceRequestPage($event)\"  *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    {{ \"Previous\" | rpxTranslate }}\n  </a>\n  <a  (click)=\"goToPaymentViewComponent()\"  *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    {{ \"Previous\" | rpxTranslate }}\n  </a>\n    \n  <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n    {{ \"Continue\" | rpxTranslate }}\n  </button>\n  \n    </div>\n    <p>\n      <a  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n    </p>\n  </form>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n    <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n    </span>\n    <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\n      </h1>\n     \n\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                <form [formGroup]=\"remissionForm\" novalidate>\n                  <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n                     \n                        <div\n                          [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n                          data-module=\"govuk-radios\" >\n                          <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n                            <span *ngIf=\"refundHasError\">{{ \"Select a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                          </p>\n\n                         \n\n                          <div class = \"container-fluid\">\n                            <div class=\"row\">\n                            <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n                              <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n                                <input   class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n                                formControlName=\"refundReason\" value={{refund.code}}\n                                  (change)=\"selectRadioButton(refund.code, refund.name)\">\n                                <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                  {{refund.name}}\n                                </label>\n\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                    <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                        {{ \"Enter reason\" | rpxTranslate }}\n                                    </label>\n                                    <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                    <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                                      </p>\n                                     \n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                </div>\n                                </div>\n                              <!-- </div> -->\n                            </div>\n                            </div>\n                          </div>\n                          <br/>\n                          <div>\n                              <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                  <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                </select>\n                            \n                          </div>\n                              <br/>\n                              <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                  <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                      {{ \"Enter reason\" | rpxTranslate }}\n                                  </label>\n                                  <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                      <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n                                    </p>\n                                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                </div>\n                              </div>\n\n                        \n                        </div>\n                  </fieldset>\n                </form>\n             </div>\n             </form>\n      </div>\n      <div class=\"govuk-button-group\">\n          <button  (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n          <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n      </div>\n      <p>\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n    \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'>      \n    <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n  (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        \n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr>\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim()  }} \n         <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n        <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"payment\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"selectedRefundReasonCode\"\n    [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n    <div class=\"govuk-button-group\">\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund(isFullyRefund)\">\n      {{ \"Submit refund\" | rpxTranslate }}\n    </button>\n    </div>\n    <p>\n        <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n  <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n  <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        {{ \"Cancel\" | rpxTranslate }}\n    </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n\n        <tr class=\"govuk-table__row\">\n          <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{getRemissionAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2' }}\n          </td>\n        </tr>\n\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>{{ \"Email\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>{{ \"Post\" | rpxTranslate }}</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              {{ \"Preview\" | rpxTranslate }}\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              {{ \"Hide Preview\" | rpxTranslate }}\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [contactDetails]=\"contactDetailsObj\"\n    [paymentReference]=\"paymentReference\"\n    [payment]=\"paymentObj\"\n    [refundReason]=\"'RR036'\"\n    [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n    <div class=\"govuk-button-group\">\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"processRefund()\">\n      {{ \"Submit refund\" | rpxTranslate }}\n    </button>\n    </div>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            {{ \"Cancel\" | rpxTranslate }}\n        </a>\n    </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n  <div class=\"govuk-grid-row\">\n    <div >\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_remission_title\">\n          {{ \"Refund submitted\" | rpxTranslate }}\n        </h1>\n        \n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n        </div>\n  \n      </div>\n      <div *ngIf=\"isPaymentSuccess\">\n      <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n      <p class=\"govuk-body\">\n        {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n      </p>\n    </div>\n    <p class=\"govuk-body\">\n    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n      {{ \"Return to case\" | rpxTranslate }}\n  </a>\n    </p>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [isServiceRequest]=\"isServiceRequest\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"takePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n  <ccpay-payment-view \n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [isTurnOff] = \"isTurnOff\" \n  [isTakePayment] = \"takePayment\"  \n  [caseType] = \"caseType\"\n  [isServiceRequest]=\"isServiceRequest\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i1$2.Router }, { type: PaymentViewService }, { type: NotificationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -4677,6 +4692,7 @@ class PaymentViewComponent {
             this.paymentGroup.payments = this.paymentGroup.payments.filter(paymentGroupObj => paymentGroupObj['reference'].includes(this.paymentLibComponent.paymentReference));
             const paymentAllocation = this.paymentGroup.payments[0].payment_allocation;
             this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
+            this.paymentLibComponent.addPaymentGroup(this.paymentGroup);
         }, (error) => this.errorMessage = error);
         this.paymentViewService.getPaymentFailure(this.paymentLibComponent.paymentReference).subscribe({
             next: (res) => {
@@ -4900,6 +4916,7 @@ class PaymentViewComponent {
         return false;
     }
     chkIsAddRemissionBtnEnable(fee) {
+        this.paymentLibComponent.addPaymentGroup(this.paymentGroup);
         if (fee !== null && fee !== undefined) {
             if (this.paymentLibComponent.overPaymentAmount > 0) {
                 return fee.add_remission && fee.remission_enable && this.paymentLibComponent.isTheCurrentRefundInProcessForThisFee(fee);
@@ -7693,6 +7710,92 @@ class PaymentLibComponent {
             this.isFromPayBubble = true;
         }
     }
+    /**
+     * Adds a remission to the payment group using data from the provided form group.
+     *
+     * This method checks if the `paymentGroup` is not null before attempting to add the remission.
+     * If the `paymentGroup` exists, a new remission is created using the values from the provided
+     * form group (`currentRemissionFormGroup`), and it is pushed into the `remissions` array of the payment group.
+     *
+     * @param {AddRetroRemissionRequest} currentRemissionFormGroup - The form group containing remission data
+     *                                                               (e.g., `hwf_amount`, `hwf_reference`).
+     */
+    addRemission(currentRemissionFormGroup) {
+        if (this.paymentGroup != null) {
+            const remission = {
+                remission_reference: null,
+                hwf_reference: currentRemissionFormGroup.hwf_reference,
+                hwf_amount: currentRemissionFormGroup.hwf_amount,
+                beneficiary_name: null,
+                ccd_case_number: null,
+                fee_code: null,
+                date_created: null,
+                fee_id: null,
+                issue_refund_add_refund_add_remission: false,
+                add_refund: false,
+                overall_balance: currentRemissionFormGroup.hwf_amount,
+                acollection_of_fess: true
+            };
+            this.paymentGroup.remissions.push(remission);
+        }
+    }
+    /**
+     * This method is used to set the paymentGroup for the add remission journey.
+     * @param updatedPaymentGroup this is an updated paymentGroup version.
+     */
+    addPaymentGroup(updatedPaymentGroup) {
+        if (this.paymentGroup == null) {
+            this.paymentGroup = updatedPaymentGroup;
+        }
+    }
+    /**
+     * Calculates the total remission amount for the current payment group.
+     *
+     * This method checks if the payment group contains any remissions and, if so,
+     * sums up the `hwf_amount` of all remissions using the `reduce()` method.
+     * If no remissions are found, it returns a default value of 0.
+     *
+     * @returns {number} The total remission amount, or 0 if no remissions are present.
+     */
+    getTotalRemission() {
+        let remissionTotal = 0;
+        if (this.paymentGroup.remissions) {
+            remissionTotal = this.paymentGroup.remissions.reduce((totalRemission, remission) => totalRemission + remission.hwf_amount, 0);
+        }
+        return remissionTotal;
+    }
+    /**
+     * Calculates the total fee amount for the current payment group.
+     *
+     * This method checks if the payment group contains any fees and, if so,
+     * sums up the `calculated_amount` of all fees using the `reduce()` method.
+     * If no fees are found, it returns a default value of 0.
+     *
+     * @returns {number} The total fee amount, or 0 if no fees are present.
+     */
+    getTotalFees() {
+        let feesTotal = 0;
+        if (this.paymentGroup.fees) {
+            feesTotal = this.paymentGroup.fees.reduce((totalFees, fee) => totalFees + fee.calculated_amount, 0);
+        }
+        return feesTotal;
+    }
+    /**
+     * Calculates the total payment amount for the current payment group.
+     *
+     * This method checks if the payment group contains any payments and, if so,
+     * sums up the `amount` of all payments using the `reduce()` method.
+     * If no payments are found, it returns a default value of 0.
+     *
+     * @returns {number} The total payment amount, or 0 if no payments are present.
+     */
+    getTotalPayments() {
+        let paymentsTotal = 0;
+        if (this.paymentGroup.payments) {
+            paymentsTotal = this.paymentGroup.payments.reduce((totalFees, payment) => totalFees + payment.amount, 0);
+        }
+        return paymentsTotal;
+    }
     // Refunds libs section.
     /**
      * This function is used to find out if the current refunds list are in progress for the fee passed as parameter