@hmcts/ccpay-web-component 6.5.28-v1 → 6.5.28

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

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Output, Input, Inject, Component, Pipe, forwardRef, ViewChild, NgModule } from '@angular/core';
-import { initAll } from 'govuk-frontend';
 import { BehaviorSubject, throwError, forkJoin } from 'rxjs';
 import * as i3 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
@@ -1042,7 +1041,7 @@ class ContactDetailsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContactDetailsComponent, deps: [{ token: i1$1.FormBuilder }, { token: NotificationService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ContactDetailsComponent, isStandalone: true, selector: "ccpay-contact-details", inputs: { isEditOperation: "isEditOperation", isEditOperationInRefundList: "isEditOperationInRefundList", addressObj: "addressObj" }, outputs: { assignContactDetails: "assignContactDetails", assignContactDetailsInFefundsList: "assignContactDetailsInFefundsList", redirectToIssueRefund: "redirectToIssueRefund" }, ngImport: i0, template: "<fieldset class=\"govuk-fieldset contact-details--size\">\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n  <div class=\"govuk-form-group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-size-19\">\n      {{ isEditOperation ? 'Edit contact information' : 'Contact information' }}\n    </legend>\n    <div id=\"contact-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n      Notifications will be sent via email or post when this refund is issued or rejected. You can only choose one option.\n    </div>\n    <div class=\"govuk-form-group\">\n      <fieldset class=\"govuk-fieldset\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact\" name=\"contact\" (click)=\"selectContactOption('Email', 'false')\" type=\"radio\" value=\"email\" [checked]=\"isEmailSAddressClicked\"  aria-controls=\"conditional-contact\" aria-expanded=\"true\">\n            <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"contact\">\n              Email\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-email\" *ngIf=\"isEmailSAddressClicked\">\n            <form [formGroup]=\"emailAddressForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label \" for=\"email\">\n                <span class=\"govuk-hint govuk-!-font-size-19\">Information about this refund will be sent to this email address.</span>\n              </label>\n\n              <div id=\"email-hint\" class=\"govuk-hint\">\n              </div>\n              <input class=\"govuk-input govuk-!-font-size-19\" id=\"email\" name=\"\" type=\"email\" [ngClass]=\"{ 'inline-error-class': isEmailEmpty || emailHasError }\" value=\"{{addressObj?.contact_details?.email}}\" formControlName=\"email\" aria-describedby=\"email-hint\">\n              <p class=\"inline-error-message\" *ngIf=\"isEmailEmpty || emailHasError\">\n                <span *ngIf=\"isEmailEmpty\">Enter a email address.</span>\n                <span *ngIf=\"emailHasError\">Enter a valid email address.</span>\n              </p>\n            </div>\n            </form>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact-2\" name=\"contact\" (click)=\"selectContactOption('Postcode', 'false')\" type=\"radio\" [checked]=\"isPostcodeClicked\" value=\"post\" aria-controls=\"conditional-contact-2\" aria-expanded=\"false\">\n            <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"contact-2\">\n              Post\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-postcode\" *ngIf=\"isPostcodeClicked && !isManualAddressClicked\">\n            <form [formGroup]=\"postCodeForm\" novalidate>\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-postcode\">\n                <span class=\"govuk-hint govuk-!-font-size-19\">Information about this refund will be sent to this address.</span>Postcode\n              </label>\n              <div class=\"postcode-align-css\">\n              <div class=\"govuk-form-group govuk-margin-right-10px\">\n              <input class=\"govuk-input govuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isPostcodeEmpty || postcodeHasError }\" formControlName=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isPostcodeEmpty || postcodeHasError\">\n                <span *ngIf=\"isPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"postcodeHasError\">Enter a valid postcode.</span>\n              </p>\n            </div>\n            <div class=\"govuk-button-group\">\n              <button class=\"govuk-button govuk-button--secondary govuk-!-font-size-19\" (click)=\"postcodeValidation('FA')\" data-module=\"govuk-button\">\n                Find address\n              </button>\n            </div>\n          </div>\n            </form>\n            <div class=\"govuk-form-group govuk-margin-btm-20px\" *ngIf=\"isShowPickAddress\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"country\">\n                Pick an address\n              </label>\n              <select class=\"govuk-select govuk-!-font-size-19\" [(ngModel)]=\"postcodeAddress\" id=\"postcodeAddress\" [ngClass]=\"{ 'inline-error-class': isAddressBoxEmpty }\" name=\"postcodeAddress\">\n                <option *ngFor=\"let address of addressPostcodeList;\" [ngValue]=\"address.DPA\" > {{address.DPA.ADDRESS}}</option>\n              </select> \n              <p class=\"inline-error-message\" *ngIf=\"isAddressBoxEmpty\">\n                <span *ngIf=\"isAddressBoxEmpty\">Please select an address.</span>\n              </p>\n            </div>\n            <details class=\"govuk-details\" data-module=\"govuk-details\">\n              <summary class=\"govuk-details__summary\">\n                <span class=\"govuk-details__summary-text govuk-!-font-size-19\">\n                  <a href=\"Javascript:void(0);\" (click)=\"selectContactOption('Postcode', 'true')\">  Enter address manually</a>\n                </span>\n              </summary>\n            </details>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-manual\" *ngIf=\"isPostcodeClicked && isManualAddressClicked\">\n            <form [formGroup]=\"manualAddressForm\" novalidate>\n\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-line-1\">\n                <span class=\"govuk-hint govuk-!-font-size-19\">Information about this refund will be sent to this address.</span>Building and street <span class=\"govuk-visually-hidden\">line 1 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-!-font-size-19\" id=\"address-line-1\" name=\"address-line-1\" [ngClass]=\"{ 'inline-error-class': isaddressLine1Empty || addressLine1HasError }\" value=\"{{addressObj?.contact_details?.address_line}}\" formControlName=\"addressl1\" type=\"text\" autocomplete=\"address-line1\">\n              <p class=\"inline-error-message\" *ngIf=\"isaddressLine1Empty || addressLine1HasError\">\n                <span *ngIf=\"isaddressLine1Empty\">Enter a Building and street.</span>\n                <span *ngIf=\"addressLine1HasError\">Enter a valid Building and street.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label\" for=\"address-line-2\">\n                <span class=\"govuk-visually-hidden govuk-!-font-size-19\">Building and street line 2 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-!-font-size-19\" id=\"address-line-2\" name=\"address-line-2\" [ngClass]=\"{ 'inline-error-class': addressLine2HasError}\" formControlName=\"addressl2\" type=\"text\" autocomplete=\"address-line2\">\n              <p class=\"inline-error-message\" *ngIf=\"addressLine2HasError\">\n                <span *ngIf=\"addressLine2HasError\">Enter a valid Building and street line 2 of 2.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-town\">\n                Town or city\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-!-font-size-19\" id=\"address-town\" name=\"address-town\" [ngClass]=\"{ 'inline-error-class': isTownOrCityEmpty || townOrCityHasError}\" value=\"{{addressObj?.contact_details?.city}}\" formControlName=\"townorcity\" type=\"text\" autocomplete=\"address-level2\">\n              <p class=\"inline-error-message\" *ngIf=\"isTownOrCityEmpty || townOrCityHasError\">\n                <span *ngIf=\"isTownOrCityEmpty\">Enter a town or city.</span>\n                <span *ngIf=\"townOrCityHasError\">Enter a town or city.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-county\">\n                County\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-!-font-size-19\" id=\"address-county\" [ngClass]=\"{ 'inline-error-class': isCountyEmpty || countyHasError}\" value=\"{{addressObj?.contact_details?.county}}\" formControlName=\"county\" name=\"address-county\" type=\"text\">\n              <p class=\"inline-error-message\" *ngIf=\"isCountyEmpty || countyHasError\">\n                <span *ngIf=\"isCountyEmpty\">Enter a County.</span>\n                <span *ngIf=\"countyHasError\">Enter a valid County.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-postcode\">\n                Postcode\n              </label>\n              <input class=\"govuk-input govuk-input--width-10 govuk-!-font-size-19\" id=\"address-postcode\" formControlName=\"mpostcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isMPostcodeEmpty || mpostcodeHasError}\" value=\"{{addressObj?.contact_details?.postal_code}}\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isMPostcodeEmpty || mpostcodeHasError\">\n                <span *ngIf=\"isMPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"mpostcodeHasError\">Enter a valid postcode.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"country\">\n                Country\n              </label>\n              <select class=\"govuk-select govuk-!-font-size-19\" id=\"country\" name=\"country\" [ngClass]=\"{'inline-error-class': isCountryEmpty}\" formControlName=\"country\">\n                <option value=\"\" selected=\"selected\">Please select</option>\n                <option value=\"United Kingdom\" selected=\"{{ addressObj?.contact_details?.country ? 'selected' : '' }}\">United Kingdom</option>\n              </select>\n              <p class=\"inline-error-message\" *ngIf=\"isCountryEmpty\">\n                <span *ngIf=\"isCountryEmpty\">Select a Country.</span>\n              </p>  \n            </div>\n            </form>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n    <!---FORM--->\n  </div>\n\n<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n</fieldset>\n<div class=\"govuk-button-group\">\n<button type=\"submit\" class=\"govuk-button govuk-button--secondary govuk-!-font-size-19\" (click)=\"redirection($event)\"> Previous </button>\n&nbsp;\n<button type=\"submit\" class=\"govuk-button govuk-!-font-size-19\" (click)=\"finalFormSubmit()\">\n  Continue\n</button>\n</div>", styles: [".inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.contact-details--size{width:50%}.postcode-align-css{display:flex;flex-direction:row}.govuk-margin-right-10px{margin-right:10px}.govuk-margin-btm-20px{margin-bottom:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: 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: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ContactDetailsComponent, isStandalone: true, selector: "ccpay-contact-details", inputs: { isEditOperation: "isEditOperation", isEditOperationInRefundList: "isEditOperationInRefundList", addressObj: "addressObj" }, outputs: { assignContactDetails: "assignContactDetails", assignContactDetailsInFefundsList: "assignContactDetailsInFefundsList", redirectToIssueRefund: "redirectToIssueRefund" }, ngImport: i0, template: "<fieldset class=\"govuk-fieldset contact-details--size\">\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n  <div class=\"govuk-form-group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s govuk-font19px\">\n      {{ isEditOperation ? 'Edit contact information' : 'Contact information' }}\n    </legend>\n    <div id=\"contact-hint\" class=\"govuk-hint govuk-font19px\">\n      Notifications will be sent via email or post when this refund is issued or rejected. You can only choose one option.\n    </div>\n    <div class=\"govuk-form-group\">\n      <fieldset class=\"govuk-fieldset\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact\" name=\"contact\" (click)=\"selectContactOption('Email', 'false')\" type=\"radio\" value=\"email\" [checked]=\"isEmailSAddressClicked\"  aria-controls=\"conditional-contact\" aria-expanded=\"true\">\n            <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact\">\n              Email\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-email\" *ngIf=\"isEmailSAddressClicked\">\n            <form [formGroup]=\"emailAddressForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label \" for=\"email\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this email address.</span>\n              </label>\n\n              <div id=\"email-hint\" class=\"govuk-hint\">\n              </div>\n              <input class=\"govuk-input govuk-font19px\" id=\"email\" name=\"\" type=\"email\" [ngClass]=\"{ 'inline-error-class': isEmailEmpty || emailHasError }\" value=\"{{addressObj?.contact_details?.email}}\" formControlName=\"email\" aria-describedby=\"email-hint\">\n              <p class=\"inline-error-message\" *ngIf=\"isEmailEmpty || emailHasError\">\n                <span *ngIf=\"isEmailEmpty\">Enter a email address.</span>\n                <span *ngIf=\"emailHasError\">Enter a valid email address.</span>\n              </p>\n            </div>\n            </form>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact-2\" name=\"contact\" (click)=\"selectContactOption('Postcode', 'false')\" type=\"radio\" [checked]=\"isPostcodeClicked\" value=\"post\" aria-controls=\"conditional-contact-2\" aria-expanded=\"false\">\n            <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact-2\">\n              Post\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-postcode\" *ngIf=\"isPostcodeClicked && !isManualAddressClicked\">\n            <form [formGroup]=\"postCodeForm\" novalidate>\n              <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Postcode\n              </label>\n              <div class=\"postcode-align-css\">\n              <div class=\"govuk-form-group govuk-margin-right-10px\">\n              <input class=\"govuk-input govuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isPostcodeEmpty || postcodeHasError }\" formControlName=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isPostcodeEmpty || postcodeHasError\">\n                <span *ngIf=\"isPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"postcodeHasError\">Enter a valid postcode.</span>\n              </p>\n            </div>\n            <div class=\"govuk-button-group\">\n              <button class=\"govuk-button govuk-button--secondary govuk-font19px\" (click)=\"postcodeValidation('FA')\" data-module=\"govuk-button\">\n                Find address\n              </button>\n            </div>\n          </div>\n            </form>\n            <div class=\"govuk-form-group govuk-margin-btm-20px\" *ngIf=\"isShowPickAddress\">\n              <label class=\"govuk-label govuk-font19px\" for=\"country\">\n                Pick an address\n              </label>\n              <select class=\"govuk-select govuk-font19px\" [(ngModel)]=\"postcodeAddress\" id=\"postcodeAddress\" [ngClass]=\"{ 'inline-error-class': isAddressBoxEmpty }\" name=\"postcodeAddress\">\n                <option *ngFor=\"let address of addressPostcodeList;\" [ngValue]=\"address.DPA\" > {{address.DPA.ADDRESS}}</option>\n              </select> \n              <p class=\"inline-error-message\" *ngIf=\"isAddressBoxEmpty\">\n                <span *ngIf=\"isAddressBoxEmpty\">Please select an address.</span>\n              </p>\n            </div>\n            <details class=\"govuk-details\" data-module=\"govuk-details\">\n              <summary class=\"govuk-details__summary\">\n                <span class=\"govuk-details__summary-text govuk-font19px\">\n                  <a href=\"Javascript:void(0);\" (click)=\"selectContactOption('Postcode', 'true')\">  Enter address manually</a>\n                </span>\n              </summary>\n            </details>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-manual\" *ngIf=\"isPostcodeClicked && isManualAddressClicked\">\n            <form [formGroup]=\"manualAddressForm\" novalidate>\n\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-line-1\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Building and street <span class=\"govuk-visually-hidden\">line 1 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-font19px\" id=\"address-line-1\" name=\"address-line-1\" [ngClass]=\"{ 'inline-error-class': isaddressLine1Empty || addressLine1HasError }\" value=\"{{addressObj?.contact_details?.address_line}}\" formControlName=\"addressl1\" type=\"text\" autocomplete=\"address-line1\">\n              <p class=\"inline-error-message\" *ngIf=\"isaddressLine1Empty || addressLine1HasError\">\n                <span *ngIf=\"isaddressLine1Empty\">Enter a Building and street.</span>\n                <span *ngIf=\"addressLine1HasError\">Enter a valid Building and street.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label\" for=\"address-line-2\">\n                <span class=\"govuk-visually-hidden govuk-font19px\">Building and street line 2 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-font19px\" id=\"address-line-2\" name=\"address-line-2\" [ngClass]=\"{ 'inline-error-class': addressLine2HasError}\" formControlName=\"addressl2\" type=\"text\" autocomplete=\"address-line2\">\n              <p class=\"inline-error-message\" *ngIf=\"addressLine2HasError\">\n                <span *ngIf=\"addressLine2HasError\">Enter a valid Building and street line 2 of 2.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-town\">\n                Town or city\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-town\" name=\"address-town\" [ngClass]=\"{ 'inline-error-class': isTownOrCityEmpty || townOrCityHasError}\" value=\"{{addressObj?.contact_details?.city}}\" formControlName=\"townorcity\" type=\"text\" autocomplete=\"address-level2\">\n              <p class=\"inline-error-message\" *ngIf=\"isTownOrCityEmpty || townOrCityHasError\">\n                <span *ngIf=\"isTownOrCityEmpty\">Enter a town or city.</span>\n                <span *ngIf=\"townOrCityHasError\">Enter a town or city.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-county\">\n                County\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-county\" [ngClass]=\"{ 'inline-error-class': isCountyEmpty || countyHasError}\" value=\"{{addressObj?.contact_details?.county}}\" formControlName=\"county\" name=\"address-county\" type=\"text\">\n              <p class=\"inline-error-message\" *ngIf=\"isCountyEmpty || countyHasError\">\n                <span *ngIf=\"isCountyEmpty\">Enter a County.</span>\n                <span *ngIf=\"countyHasError\">Enter a valid County.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n                Postcode\n              </label>\n              <input class=\"govuk-input govuk-input--width-10 govuk-font19px\" id=\"address-postcode\" formControlName=\"mpostcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isMPostcodeEmpty || mpostcodeHasError}\" value=\"{{addressObj?.contact_details?.postal_code}}\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isMPostcodeEmpty || mpostcodeHasError\">\n                <span *ngIf=\"isMPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"mpostcodeHasError\">Enter a valid postcode.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"country\">\n                Country\n              </label>\n              <select class=\"govuk-select govuk-font19px\" id=\"country\" name=\"country\" [ngClass]=\"{'inline-error-class': isCountryEmpty}\" formControlName=\"country\">\n                <option value=\"\" selected=\"selected\">Please select</option>\n                <option value=\"United Kingdom\" selected=\"{{ addressObj?.contact_details?.country ? 'selected' : '' }}\">United Kingdom</option>\n              </select>\n              <p class=\"inline-error-message\" *ngIf=\"isCountryEmpty\">\n                <span *ngIf=\"isCountryEmpty\">Select a Country.</span>\n              </p>  \n            </div>\n            </form>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n    <!---FORM--->\n  </div>\n\n<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n</fieldset>\n<div class=\"govuk-button-group\">\n<button type=\"submit\" class=\"button govuk-button--secondary govuk-font19px\" (click)=\"redirection($event)\"> Previous </button>\n&nbsp;\n<button type=\"submit\" class=\"button govuk-button govuk-font19px\" (click)=\"finalFormSubmit()\">\n  Continue\n</button>\n</div>", styles: [".govuk-font19px{font-size:19px}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.contact-details--size{width:50%}.postcode-align-css{display:flex;flex-direction:row}.govuk-margin-right-10px{margin-right:10px}.govuk-margin-btm-20px{margin-bottom:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: 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: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContactDetailsComponent, decorators: [{
             type: Component,
@@ -1050,7 +1049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         CommonModule
-                    ], standalone: true, template: "<fieldset class=\"govuk-fieldset contact-details--size\">\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n  <div class=\"govuk-form-group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-size-19\">\n      {{ isEditOperation ? 'Edit contact information' : 'Contact information' }}\n    </legend>\n    <div id=\"contact-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n      Notifications will be sent via email or post when this refund is issued or rejected. You can only choose one option.\n    </div>\n    <div class=\"govuk-form-group\">\n      <fieldset class=\"govuk-fieldset\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact\" name=\"contact\" (click)=\"selectContactOption('Email', 'false')\" type=\"radio\" value=\"email\" [checked]=\"isEmailSAddressClicked\"  aria-controls=\"conditional-contact\" aria-expanded=\"true\">\n            <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"contact\">\n              Email\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-email\" *ngIf=\"isEmailSAddressClicked\">\n            <form [formGroup]=\"emailAddressForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label \" for=\"email\">\n                <span class=\"govuk-hint govuk-!-font-size-19\">Information about this refund will be sent to this email address.</span>\n              </label>\n\n              <div id=\"email-hint\" class=\"govuk-hint\">\n              </div>\n              <input class=\"govuk-input govuk-!-font-size-19\" id=\"email\" name=\"\" type=\"email\" [ngClass]=\"{ 'inline-error-class': isEmailEmpty || emailHasError }\" value=\"{{addressObj?.contact_details?.email}}\" formControlName=\"email\" aria-describedby=\"email-hint\">\n              <p class=\"inline-error-message\" *ngIf=\"isEmailEmpty || emailHasError\">\n                <span *ngIf=\"isEmailEmpty\">Enter a email address.</span>\n                <span *ngIf=\"emailHasError\">Enter a valid email address.</span>\n              </p>\n            </div>\n            </form>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact-2\" name=\"contact\" (click)=\"selectContactOption('Postcode', 'false')\" type=\"radio\" [checked]=\"isPostcodeClicked\" value=\"post\" aria-controls=\"conditional-contact-2\" aria-expanded=\"false\">\n            <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"contact-2\">\n              Post\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-postcode\" *ngIf=\"isPostcodeClicked && !isManualAddressClicked\">\n            <form [formGroup]=\"postCodeForm\" novalidate>\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-postcode\">\n                <span class=\"govuk-hint govuk-!-font-size-19\">Information about this refund will be sent to this address.</span>Postcode\n              </label>\n              <div class=\"postcode-align-css\">\n              <div class=\"govuk-form-group govuk-margin-right-10px\">\n              <input class=\"govuk-input govuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isPostcodeEmpty || postcodeHasError }\" formControlName=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isPostcodeEmpty || postcodeHasError\">\n                <span *ngIf=\"isPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"postcodeHasError\">Enter a valid postcode.</span>\n              </p>\n            </div>\n            <div class=\"govuk-button-group\">\n              <button class=\"govuk-button govuk-button--secondary govuk-!-font-size-19\" (click)=\"postcodeValidation('FA')\" data-module=\"govuk-button\">\n                Find address\n              </button>\n            </div>\n          </div>\n            </form>\n            <div class=\"govuk-form-group govuk-margin-btm-20px\" *ngIf=\"isShowPickAddress\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"country\">\n                Pick an address\n              </label>\n              <select class=\"govuk-select govuk-!-font-size-19\" [(ngModel)]=\"postcodeAddress\" id=\"postcodeAddress\" [ngClass]=\"{ 'inline-error-class': isAddressBoxEmpty }\" name=\"postcodeAddress\">\n                <option *ngFor=\"let address of addressPostcodeList;\" [ngValue]=\"address.DPA\" > {{address.DPA.ADDRESS}}</option>\n              </select> \n              <p class=\"inline-error-message\" *ngIf=\"isAddressBoxEmpty\">\n                <span *ngIf=\"isAddressBoxEmpty\">Please select an address.</span>\n              </p>\n            </div>\n            <details class=\"govuk-details\" data-module=\"govuk-details\">\n              <summary class=\"govuk-details__summary\">\n                <span class=\"govuk-details__summary-text govuk-!-font-size-19\">\n                  <a href=\"Javascript:void(0);\" (click)=\"selectContactOption('Postcode', 'true')\">  Enter address manually</a>\n                </span>\n              </summary>\n            </details>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-manual\" *ngIf=\"isPostcodeClicked && isManualAddressClicked\">\n            <form [formGroup]=\"manualAddressForm\" novalidate>\n\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-line-1\">\n                <span class=\"govuk-hint govuk-!-font-size-19\">Information about this refund will be sent to this address.</span>Building and street <span class=\"govuk-visually-hidden\">line 1 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-!-font-size-19\" id=\"address-line-1\" name=\"address-line-1\" [ngClass]=\"{ 'inline-error-class': isaddressLine1Empty || addressLine1HasError }\" value=\"{{addressObj?.contact_details?.address_line}}\" formControlName=\"addressl1\" type=\"text\" autocomplete=\"address-line1\">\n              <p class=\"inline-error-message\" *ngIf=\"isaddressLine1Empty || addressLine1HasError\">\n                <span *ngIf=\"isaddressLine1Empty\">Enter a Building and street.</span>\n                <span *ngIf=\"addressLine1HasError\">Enter a valid Building and street.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label\" for=\"address-line-2\">\n                <span class=\"govuk-visually-hidden govuk-!-font-size-19\">Building and street line 2 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-!-font-size-19\" id=\"address-line-2\" name=\"address-line-2\" [ngClass]=\"{ 'inline-error-class': addressLine2HasError}\" formControlName=\"addressl2\" type=\"text\" autocomplete=\"address-line2\">\n              <p class=\"inline-error-message\" *ngIf=\"addressLine2HasError\">\n                <span *ngIf=\"addressLine2HasError\">Enter a valid Building and street line 2 of 2.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-town\">\n                Town or city\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-!-font-size-19\" id=\"address-town\" name=\"address-town\" [ngClass]=\"{ 'inline-error-class': isTownOrCityEmpty || townOrCityHasError}\" value=\"{{addressObj?.contact_details?.city}}\" formControlName=\"townorcity\" type=\"text\" autocomplete=\"address-level2\">\n              <p class=\"inline-error-message\" *ngIf=\"isTownOrCityEmpty || townOrCityHasError\">\n                <span *ngIf=\"isTownOrCityEmpty\">Enter a town or city.</span>\n                <span *ngIf=\"townOrCityHasError\">Enter a town or city.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-county\">\n                County\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-!-font-size-19\" id=\"address-county\" [ngClass]=\"{ 'inline-error-class': isCountyEmpty || countyHasError}\" value=\"{{addressObj?.contact_details?.county}}\" formControlName=\"county\" name=\"address-county\" type=\"text\">\n              <p class=\"inline-error-message\" *ngIf=\"isCountyEmpty || countyHasError\">\n                <span *ngIf=\"isCountyEmpty\">Enter a County.</span>\n                <span *ngIf=\"countyHasError\">Enter a valid County.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"address-postcode\">\n                Postcode\n              </label>\n              <input class=\"govuk-input govuk-input--width-10 govuk-!-font-size-19\" id=\"address-postcode\" formControlName=\"mpostcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isMPostcodeEmpty || mpostcodeHasError}\" value=\"{{addressObj?.contact_details?.postal_code}}\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isMPostcodeEmpty || mpostcodeHasError\">\n                <span *ngIf=\"isMPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"mpostcodeHasError\">Enter a valid postcode.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-!-font-size-19\" for=\"country\">\n                Country\n              </label>\n              <select class=\"govuk-select govuk-!-font-size-19\" id=\"country\" name=\"country\" [ngClass]=\"{'inline-error-class': isCountryEmpty}\" formControlName=\"country\">\n                <option value=\"\" selected=\"selected\">Please select</option>\n                <option value=\"United Kingdom\" selected=\"{{ addressObj?.contact_details?.country ? 'selected' : '' }}\">United Kingdom</option>\n              </select>\n              <p class=\"inline-error-message\" *ngIf=\"isCountryEmpty\">\n                <span *ngIf=\"isCountryEmpty\">Select a Country.</span>\n              </p>  \n            </div>\n            </form>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n    <!---FORM--->\n  </div>\n\n<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n</fieldset>\n<div class=\"govuk-button-group\">\n<button type=\"submit\" class=\"govuk-button govuk-button--secondary govuk-!-font-size-19\" (click)=\"redirection($event)\"> Previous </button>\n&nbsp;\n<button type=\"submit\" class=\"govuk-button govuk-!-font-size-19\" (click)=\"finalFormSubmit()\">\n  Continue\n</button>\n</div>", styles: [".inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.contact-details--size{width:50%}.postcode-align-css{display:flex;flex-direction:row}.govuk-margin-right-10px{margin-right:10px}.govuk-margin-btm-20px{margin-bottom:20px!important}\n"] }]
+                    ], standalone: true, template: "<fieldset class=\"govuk-fieldset contact-details--size\">\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n  <div class=\"govuk-form-group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s govuk-font19px\">\n      {{ isEditOperation ? 'Edit contact information' : 'Contact information' }}\n    </legend>\n    <div id=\"contact-hint\" class=\"govuk-hint govuk-font19px\">\n      Notifications will be sent via email or post when this refund is issued or rejected. You can only choose one option.\n    </div>\n    <div class=\"govuk-form-group\">\n      <fieldset class=\"govuk-fieldset\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact\" name=\"contact\" (click)=\"selectContactOption('Email', 'false')\" type=\"radio\" value=\"email\" [checked]=\"isEmailSAddressClicked\"  aria-controls=\"conditional-contact\" aria-expanded=\"true\">\n            <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact\">\n              Email\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-email\" *ngIf=\"isEmailSAddressClicked\">\n            <form [formGroup]=\"emailAddressForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label \" for=\"email\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this email address.</span>\n              </label>\n\n              <div id=\"email-hint\" class=\"govuk-hint\">\n              </div>\n              <input class=\"govuk-input govuk-font19px\" id=\"email\" name=\"\" type=\"email\" [ngClass]=\"{ 'inline-error-class': isEmailEmpty || emailHasError }\" value=\"{{addressObj?.contact_details?.email}}\" formControlName=\"email\" aria-describedby=\"email-hint\">\n              <p class=\"inline-error-message\" *ngIf=\"isEmailEmpty || emailHasError\">\n                <span *ngIf=\"isEmailEmpty\">Enter a email address.</span>\n                <span *ngIf=\"emailHasError\">Enter a valid email address.</span>\n              </p>\n            </div>\n            </form>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact-2\" name=\"contact\" (click)=\"selectContactOption('Postcode', 'false')\" type=\"radio\" [checked]=\"isPostcodeClicked\" value=\"post\" aria-controls=\"conditional-contact-2\" aria-expanded=\"false\">\n            <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact-2\">\n              Post\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-postcode\" *ngIf=\"isPostcodeClicked && !isManualAddressClicked\">\n            <form [formGroup]=\"postCodeForm\" novalidate>\n              <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Postcode\n              </label>\n              <div class=\"postcode-align-css\">\n              <div class=\"govuk-form-group govuk-margin-right-10px\">\n              <input class=\"govuk-input govuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isPostcodeEmpty || postcodeHasError }\" formControlName=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isPostcodeEmpty || postcodeHasError\">\n                <span *ngIf=\"isPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"postcodeHasError\">Enter a valid postcode.</span>\n              </p>\n            </div>\n            <div class=\"govuk-button-group\">\n              <button class=\"govuk-button govuk-button--secondary govuk-font19px\" (click)=\"postcodeValidation('FA')\" data-module=\"govuk-button\">\n                Find address\n              </button>\n            </div>\n          </div>\n            </form>\n            <div class=\"govuk-form-group govuk-margin-btm-20px\" *ngIf=\"isShowPickAddress\">\n              <label class=\"govuk-label govuk-font19px\" for=\"country\">\n                Pick an address\n              </label>\n              <select class=\"govuk-select govuk-font19px\" [(ngModel)]=\"postcodeAddress\" id=\"postcodeAddress\" [ngClass]=\"{ 'inline-error-class': isAddressBoxEmpty }\" name=\"postcodeAddress\">\n                <option *ngFor=\"let address of addressPostcodeList;\" [ngValue]=\"address.DPA\" > {{address.DPA.ADDRESS}}</option>\n              </select> \n              <p class=\"inline-error-message\" *ngIf=\"isAddressBoxEmpty\">\n                <span *ngIf=\"isAddressBoxEmpty\">Please select an address.</span>\n              </p>\n            </div>\n            <details class=\"govuk-details\" data-module=\"govuk-details\">\n              <summary class=\"govuk-details__summary\">\n                <span class=\"govuk-details__summary-text govuk-font19px\">\n                  <a href=\"Javascript:void(0);\" (click)=\"selectContactOption('Postcode', 'true')\">  Enter address manually</a>\n                </span>\n              </summary>\n            </details>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-manual\" *ngIf=\"isPostcodeClicked && isManualAddressClicked\">\n            <form [formGroup]=\"manualAddressForm\" novalidate>\n\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-line-1\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Building and street <span class=\"govuk-visually-hidden\">line 1 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-font19px\" id=\"address-line-1\" name=\"address-line-1\" [ngClass]=\"{ 'inline-error-class': isaddressLine1Empty || addressLine1HasError }\" value=\"{{addressObj?.contact_details?.address_line}}\" formControlName=\"addressl1\" type=\"text\" autocomplete=\"address-line1\">\n              <p class=\"inline-error-message\" *ngIf=\"isaddressLine1Empty || addressLine1HasError\">\n                <span *ngIf=\"isaddressLine1Empty\">Enter a Building and street.</span>\n                <span *ngIf=\"addressLine1HasError\">Enter a valid Building and street.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label\" for=\"address-line-2\">\n                <span class=\"govuk-visually-hidden govuk-font19px\">Building and street line 2 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-font19px\" id=\"address-line-2\" name=\"address-line-2\" [ngClass]=\"{ 'inline-error-class': addressLine2HasError}\" formControlName=\"addressl2\" type=\"text\" autocomplete=\"address-line2\">\n              <p class=\"inline-error-message\" *ngIf=\"addressLine2HasError\">\n                <span *ngIf=\"addressLine2HasError\">Enter a valid Building and street line 2 of 2.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-town\">\n                Town or city\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-town\" name=\"address-town\" [ngClass]=\"{ 'inline-error-class': isTownOrCityEmpty || townOrCityHasError}\" value=\"{{addressObj?.contact_details?.city}}\" formControlName=\"townorcity\" type=\"text\" autocomplete=\"address-level2\">\n              <p class=\"inline-error-message\" *ngIf=\"isTownOrCityEmpty || townOrCityHasError\">\n                <span *ngIf=\"isTownOrCityEmpty\">Enter a town or city.</span>\n                <span *ngIf=\"townOrCityHasError\">Enter a town or city.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-county\">\n                County\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-county\" [ngClass]=\"{ 'inline-error-class': isCountyEmpty || countyHasError}\" value=\"{{addressObj?.contact_details?.county}}\" formControlName=\"county\" name=\"address-county\" type=\"text\">\n              <p class=\"inline-error-message\" *ngIf=\"isCountyEmpty || countyHasError\">\n                <span *ngIf=\"isCountyEmpty\">Enter a County.</span>\n                <span *ngIf=\"countyHasError\">Enter a valid County.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n                Postcode\n              </label>\n              <input class=\"govuk-input govuk-input--width-10 govuk-font19px\" id=\"address-postcode\" formControlName=\"mpostcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isMPostcodeEmpty || mpostcodeHasError}\" value=\"{{addressObj?.contact_details?.postal_code}}\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isMPostcodeEmpty || mpostcodeHasError\">\n                <span *ngIf=\"isMPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"mpostcodeHasError\">Enter a valid postcode.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"country\">\n                Country\n              </label>\n              <select class=\"govuk-select govuk-font19px\" id=\"country\" name=\"country\" [ngClass]=\"{'inline-error-class': isCountryEmpty}\" formControlName=\"country\">\n                <option value=\"\" selected=\"selected\">Please select</option>\n                <option value=\"United Kingdom\" selected=\"{{ addressObj?.contact_details?.country ? 'selected' : '' }}\">United Kingdom</option>\n              </select>\n              <p class=\"inline-error-message\" *ngIf=\"isCountryEmpty\">\n                <span *ngIf=\"isCountryEmpty\">Select a Country.</span>\n              </p>  \n            </div>\n            </form>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n    <!---FORM--->\n  </div>\n\n<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n</fieldset>\n<div class=\"govuk-button-group\">\n<button type=\"submit\" class=\"button govuk-button--secondary govuk-font19px\" (click)=\"redirection($event)\"> Previous </button>\n&nbsp;\n<button type=\"submit\" class=\"button govuk-button govuk-font19px\" (click)=\"finalFormSubmit()\">\n  Continue\n</button>\n</div>", styles: [".govuk-font19px{font-size:19px}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.contact-details--size{width:50%}.postcode-align-css{display:flex;flex-direction:row}.govuk-margin-right-10px{margin-right:10px}.govuk-margin-btm-20px{margin-bottom:20px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: NotificationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -1483,11 +1482,11 @@ class UnprocessedPaymentsComponent {
         this.unassignedRecordSelectedList = obj;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UnprocessedPaymentsComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: PaymentViewService }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: UnprocessedPaymentsComponent, isStandalone: true, selector: "ccpay-app-unprocessed-payments", inputs: { FEE_RECORDS_EXISTS: "FEE_RECORDS_EXISTS", PAYMENTREF: "PAYMENTREF", ISTURNOFF: "ISTURNOFF", IS_BUTTON_ENABLE: "IS_BUTTON_ENABLE", IS_OS_AMT_AVAILABLE: "IS_OS_AMT_AVAILABLE", ISSFENABLE: "ISSFENABLE", PAYMENTSLENGTH: "PAYMENTSLENGTH", LEVEL: "LEVEL", CCD_CASE_NUMBER: "CCD_CASE_NUMBER", SELECTED_OPTION: "SELECTED_OPTION", DCN_NUMBER: "DCN_NUMBER", ISBSENABLE: "ISBSENABLE", CASETYPE: "CASETYPE" }, outputs: { selectedUnprocessedFeeEvent: "selectedUnprocessedFeeEvent", getUnprocessedFeeCount: "getUnprocessedFeeCount", setBspaymentdcn: "setBspaymentdcn", setViewName: "setViewName", setUnProcessedPaymentServiceId: "setUnProcessedPaymentServiceId", setPaymentGroupReference: "setPaymentGroupReference" }, ngImport: i0, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n    <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n        <h3 class=\"govuk-heading-m\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n        <h3 class=\"govuk-heading-m\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated payments</h3>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></th>\n      \n                  <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n                  <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n                  <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n                  <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n                 </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n              <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n                  <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n                    <div class=\"govuk-radios__item unprocessed-payments--radio-button\">\n                      <input id=\"'unpaiedFee'+i+''\"\n                      aria-label=\"unassignedRecord\"\n                      name=\"unassignedRecord\"\n                      type=\"radio\"\n                      [(ngModel)]=\"recordId\"\n                      (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n                      value=\"{{unassignedRecord.dcn_reference}}\" />\n                      <label for=\"radio-inline-1\"></label>\n                    </div>\n                  </td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">\n                    {{unassignedRecord.dcn_reference}}\n                  </td>\n                  <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n                </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n              <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n            </tbody>\n          </table>\n         <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n            <button type=\"button\"\n            [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n            [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'govuk-button govuk-button--secondary govuk-!-margin-right-1' : 'govuk-button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n              Allocate to a new fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n            [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n              Allocate to an existing fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n            [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n              Mark as unidentified\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isUnprocessedRecordSelected\"\n            [ngClass]='!isUnprocessedRecordSelected ?  \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n              Mark as transferred\n            </button>  \n         </div>\n      \n         <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n            <button type=\"button\"\n            [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n            [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'govuk-button govuk-!-margin-right-1' : 'govuk-button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n              Allocate to a new fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n            [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n              Allocate to an existing fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n            [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n              Mark as unidentified\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isUnprocessedRecordSelected\"\n            [ngClass]='!isUnprocessedRecordSelected ?  \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n              Mark as transferred\n            </button> \n         </div>\n      </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n    <table class=\"govuk-table\">\n       \n        <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\n            <!-- <tr class=\"govuk-table__row\">\n                <th class=\"govuk-table__header col-14\" scope=\"col\">Status</th>\n                <th class=\"govuk-table__header col-10\" scope=\"col\">Amount</th>\n                <th class=\"govuk-table__header col-14\" scope=\"col\">Date</th>\n                <th class=\"govuk-table__header col-20\" scope=\"col\">Request reference</th>\n                <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n                <th class=\"govuk-table__header\" scope=\"col\"></th>\n              </tr> -->\n          </thead>\n          <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n                    <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n                    Unallocated \n                    </td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n          </tr>\n          </tbody>\n       \n    </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n    <div class=\"unprocessed-payments\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n          <table class=\"table\">\n             \n              <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                      <th class=\"govuk-table__header col-13\" scope=\"col\">Status</th>\n                      <th class=\"govuk-table__header col-9\" scope=\"col\">Amount</th>\n                      <th class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</th>\n                      <th class=\"govuk-table__header col-24\" colspan=\"3\" scope=\"col\">Request reference</th>\n                      <th class=\"govuk-table__header col-13\" scope=\"col\"></th>\n                      <th class=\"govuk-table__header\" scope=\"col\"></th>\n                    </tr>\n                </thead>\n              <tbody>\n            <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n             <tr>\n                <td  class=\"govuk-table__cell whitespace-inherit col-13\" >\n                  Unallocated \n               </td>\n                <td class=\"govuk-table__cell whitespace-inherit col-10\">\n                    {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n                </td>\n                <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n                    <div  *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n                        <button type=\"button\"\n                        [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n                        [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'govuk-button govuk-button--secondary' : 'govuk-button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n                          Allocate to new service request\n                        </button><br/>\n                        <button type=\"button\" \n                        [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n                        [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"govuk-button govuk-button--secondary\" : \"govuk-button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n                          Allocate to existing service request \n                        </button>\n                </div>\n            \n                </td>\n             </tr>\n           \n              <!-- <ng-container> -->\n             <tr>\n                  <td class=\"unassigned noborders\" colspan=\"10\">\n                      <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n                          <span class=\"govuk-details__summary-text\">\n                              More details and actions\n                          </span>\n                      </summary>\n                      <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n                          <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n                              <div class=\"govuk-summary-list__row\">\n                                  <dt class=\"govuk-summary-list__key\">\n                                      Method\n                                  </dt>\n                                  <dd class=\"govuk-summary-list__value\">\n                                      {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n                                  </dd>\n                              </div>\n                              <div class=\"govuk-summary-list__row\">\n                                  <dt class=\"govuk-summary-list__key\">\n                                      Payment assest number (DCN) \n                                  </dt>\n                                  <dd class=\"govuk-summary-list__value\">\n                                      {{unassignedRecord.dcn_reference}}\n                                  </dd>\n                              </div>\n                          </dl>\n                          <div class=\" govuk-!-margin-bottom-5\">\n                              <button type=\"button\" \n                              [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n                              [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"govuk-button govuk-button--secondary\" : \"govuk-button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n                                Mark as unidentified\n                              </button>\n                          </div>\n                          <div>\n                              <button type=\"button\" \n                          [disabled]=\"!isUnprocessedRecordSelected\"\n                          [ngClass]='!isUnprocessedRecordSelected ?  \"govuk-button govuk-button--secondary\" : \"govuk-button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n                            Mark as transferred\n                          </button>  \n                          </div>\n\n                      </div>\n                  </td> \n                </tr> \n              <!-- </ng-container> -->\n             </ng-container>\n              </tbody>\n              </table>\n      \n        </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n  <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: UnprocessedPaymentsComponent, isStandalone: true, selector: "ccpay-app-unprocessed-payments", inputs: { FEE_RECORDS_EXISTS: "FEE_RECORDS_EXISTS", PAYMENTREF: "PAYMENTREF", ISTURNOFF: "ISTURNOFF", IS_BUTTON_ENABLE: "IS_BUTTON_ENABLE", IS_OS_AMT_AVAILABLE: "IS_OS_AMT_AVAILABLE", ISSFENABLE: "ISSFENABLE", PAYMENTSLENGTH: "PAYMENTSLENGTH", LEVEL: "LEVEL", CCD_CASE_NUMBER: "CCD_CASE_NUMBER", SELECTED_OPTION: "SELECTED_OPTION", DCN_NUMBER: "DCN_NUMBER", ISBSENABLE: "ISBSENABLE", CASETYPE: "CASETYPE" }, outputs: { selectedUnprocessedFeeEvent: "selectedUnprocessedFeeEvent", getUnprocessedFeeCount: "getUnprocessedFeeCount", setBspaymentdcn: "setBspaymentdcn", setViewName: "setViewName", setUnProcessedPaymentServiceId: "setUnProcessedPaymentServiceId", setPaymentGroupReference: "setPaymentGroupReference" }, ngImport: i0, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n    <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n        <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n        <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated payments</h3>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</td>\n                  <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></td>\n      \n                  <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n                  <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n                  <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n                  <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                 </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n              <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n                  <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n                    <div class=\"multiple-choice unprocessed-payments--radio-button\">\n                      <input id=\"'unpaiedFee'+i+''\"\n                      aria-label=\"unassignedRecord\"\n                      name=\"unassignedRecord\"\n                      type=\"radio\"\n                      [(ngModel)]=\"recordId\"\n                      (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n                      value=\"{{unassignedRecord.dcn_reference}}\" />\n                      <label for=\"radio-inline-1\"></label>\n                    </div>\n                  </td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">\n                    {{unassignedRecord.dcn_reference}}\n                  </td>\n                  <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n                </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n              <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n            </tbody>\n          </table>\n         <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n            <button type=\"button\"\n            [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n            [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n              Allocate to a new fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n            [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n              Allocate to an existing fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n            [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n              Mark as unidentified\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isUnprocessedRecordSelected\"\n            [ngClass]='!isUnprocessedRecordSelected ?  \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n              Mark as transferred\n            </button>  \n         </div>\n      \n         <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n            <button type=\"button\"\n            [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n            [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n              Allocate to a new fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n            [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n              Allocate to an existing fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n            [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n              Mark as unidentified\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isUnprocessedRecordSelected\"\n            [ngClass]='!isUnprocessedRecordSelected ?  \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n              Mark as transferred\n            </button> \n         </div>\n      </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n    <table class=\"govuk-table\">\n       \n        <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\n            <!-- <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                <td class=\"govuk-table__header col-14\" scope=\"col\">Date</td>\n                <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n                <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr> -->\n          </thead>\n          <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n                    <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n                    Unallocated \n                    </td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n          </tr>\n          </tbody>\n       \n    </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n    <div class=\"unprocessed-payments\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n          <table class=\"table\">\n             \n              <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n                      <td class=\"govuk-table__header col-9\" scope=\"col\">Amount</td>\n                      <td class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</td>\n                      <td class=\"govuk-table__header col-24\" colspan=\"3\" scope=\"col\">Request reference</td>\n                      <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n                      <td class=\"govuk-table__header\" scope=\"col\"></td>\n                    </tr>\n                </thead>\n              <tbody>\n            <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n             <tr>\n                <td  class=\"govuk-table__cell whitespace-inherit col-13\" >\n                  Unallocated \n               </td>\n                <td class=\"govuk-table__cell whitespace-inherit col-10\">\n                    {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n                </td>\n                <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n                    <div  *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n                        <button type=\"button\"\n                        [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n                        [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n                          Allocate to new service request\n                        </button><br/>\n                        <button type=\"button\" \n                        [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n                        [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n                          Allocate to existing service request \n                        </button>\n                </div>\n            \n                </td>\n             </tr>\n           \n              <!-- <ng-container> -->\n             <tr>\n                  <td class=\"unassigned noborders\" colspan=\"10\">\n                      <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n                          <span class=\"govuk-details__summary-text\">\n                              More details and actions\n                          </span>\n                      </summary>\n                      <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text  govuk-!-margin-bottom-5 paddingright\">\n                          <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n                              <div class=\"govuk-summary-list__row\">\n                                  <dt class=\"govuk-summary-list__key\">\n                                      Method\n                                  </dt>\n                                  <dd class=\"govuk-summary-list__value\">\n                                      {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n                                  </dd>\n                              </div>\n                              <div class=\"govuk-summary-list__row\">\n                                  <dt class=\"govuk-summary-list__key\">\n                                      Payment assest number (DCN) \n                                  </dt>\n                                  <dd class=\"govuk-summary-list__value\">\n                                      {{unassignedRecord.dcn_reference}}\n                                  </dd>\n                              </div>\n                          </dl>\n                          <div class=\" govuk-!-margin-bottom-5\">\n                              <button type=\"button\" \n                              [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n                              [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n                                Mark as unidentified\n                              </button>\n                          </div>\n                          <div>\n                              <button type=\"button\" \n                          [disabled]=\"!isUnprocessedRecordSelected\"\n                          [ngClass]='!isUnprocessedRecordSelected ?  \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n                            Mark as transferred\n                          </button>  \n                          </div>\n\n                      </div>\n                  </td> \n                </tr> \n              <!-- </ng-container> -->\n             </ng-container>\n              </tbody>\n              </table>\n      \n        </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n  <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;-webkit-box-shadow:0 2px 0 #003618;-moz-box-shadow:0 2px 0 #003618;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UnprocessedPaymentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-app-unprocessed-payments', imports: [CommonModule], standalone: true, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n    <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n        <h3 class=\"govuk-heading-m\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n        <h3 class=\"govuk-heading-m\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated payments</h3>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></th>\n      \n                  <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n                  <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n                  <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n                  <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n                 </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n              <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n                  <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n                    <div class=\"govuk-radios__item unprocessed-payments--radio-button\">\n                      <input id=\"'unpaiedFee'+i+''\"\n                      aria-label=\"unassignedRecord\"\n                      name=\"unassignedRecord\"\n                      type=\"radio\"\n                      [(ngModel)]=\"recordId\"\n                      (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n                      value=\"{{unassignedRecord.dcn_reference}}\" />\n                      <label for=\"radio-inline-1\"></label>\n                    </div>\n                  </td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">\n                    {{unassignedRecord.dcn_reference}}\n                  </td>\n                  <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n                </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n              <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n            </tbody>\n          </table>\n         <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n            <button type=\"button\"\n            [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n            [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'govuk-button govuk-button--secondary govuk-!-margin-right-1' : 'govuk-button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n              Allocate to a new fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n            [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n              Allocate to an existing fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n            [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n              Mark as unidentified\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isUnprocessedRecordSelected\"\n            [ngClass]='!isUnprocessedRecordSelected ?  \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n              Mark as transferred\n            </button>  \n         </div>\n      \n         <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n            <button type=\"button\"\n            [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n            [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'govuk-button govuk-!-margin-right-1' : 'govuk-button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n              Allocate to a new fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n            [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n              Allocate to an existing fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n            [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n              Mark as unidentified\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isUnprocessedRecordSelected\"\n            [ngClass]='!isUnprocessedRecordSelected ?  \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n              Mark as transferred\n            </button> \n         </div>\n      </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n    <table class=\"govuk-table\">\n       \n        <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\n            <!-- <tr class=\"govuk-table__row\">\n                <th class=\"govuk-table__header col-14\" scope=\"col\">Status</th>\n                <th class=\"govuk-table__header col-10\" scope=\"col\">Amount</th>\n                <th class=\"govuk-table__header col-14\" scope=\"col\">Date</th>\n                <th class=\"govuk-table__header col-20\" scope=\"col\">Request reference</th>\n                <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n                <th class=\"govuk-table__header\" scope=\"col\"></th>\n              </tr> -->\n          </thead>\n          <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n                    <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n                    Unallocated \n                    </td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n          </tr>\n          </tbody>\n       \n    </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n    <div class=\"unprocessed-payments\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n          <table class=\"table\">\n             \n              <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                      <th class=\"govuk-table__header col-13\" scope=\"col\">Status</th>\n                      <th class=\"govuk-table__header col-9\" scope=\"col\">Amount</th>\n                      <th class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</th>\n                      <th class=\"govuk-table__header col-24\" colspan=\"3\" scope=\"col\">Request reference</th>\n                      <th class=\"govuk-table__header col-13\" scope=\"col\"></th>\n                      <th class=\"govuk-table__header\" scope=\"col\"></th>\n                    </tr>\n                </thead>\n              <tbody>\n            <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n             <tr>\n                <td  class=\"govuk-table__cell whitespace-inherit col-13\" >\n                  Unallocated \n               </td>\n                <td class=\"govuk-table__cell whitespace-inherit col-10\">\n                    {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n                </td>\n                <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n                    <div  *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n                        <button type=\"button\"\n                        [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n                        [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'govuk-button govuk-button--secondary' : 'govuk-button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n                          Allocate to new service request\n                        </button><br/>\n                        <button type=\"button\" \n                        [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n                        [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"govuk-button govuk-button--secondary\" : \"govuk-button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n                          Allocate to existing service request \n                        </button>\n                </div>\n            \n                </td>\n             </tr>\n           \n              <!-- <ng-container> -->\n             <tr>\n                  <td class=\"unassigned noborders\" colspan=\"10\">\n                      <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n                          <span class=\"govuk-details__summary-text\">\n                              More details and actions\n                          </span>\n                      </summary>\n                      <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n                          <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n                              <div class=\"govuk-summary-list__row\">\n                                  <dt class=\"govuk-summary-list__key\">\n                                      Method\n                                  </dt>\n                                  <dd class=\"govuk-summary-list__value\">\n                                      {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n                                  </dd>\n                              </div>\n                              <div class=\"govuk-summary-list__row\">\n                                  <dt class=\"govuk-summary-list__key\">\n                                      Payment assest number (DCN) \n                                  </dt>\n                                  <dd class=\"govuk-summary-list__value\">\n                                      {{unassignedRecord.dcn_reference}}\n                                  </dd>\n                              </div>\n                          </dl>\n                          <div class=\" govuk-!-margin-bottom-5\">\n                              <button type=\"button\" \n                              [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n                              [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"govuk-button govuk-button--secondary\" : \"govuk-button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n                                Mark as unidentified\n                              </button>\n                          </div>\n                          <div>\n                              <button type=\"button\" \n                          [disabled]=\"!isUnprocessedRecordSelected\"\n                          [ngClass]='!isUnprocessedRecordSelected ?  \"govuk-button govuk-button--secondary\" : \"govuk-button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n                            Mark as transferred\n                          </button>  \n                          </div>\n\n                      </div>\n                  </td> \n                </tr> \n              <!-- </ng-container> -->\n             </ng-container>\n              </tbody>\n              </table>\n      \n        </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n  <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"] }]
+            args: [{ selector: 'ccpay-app-unprocessed-payments', imports: [CommonModule], standalone: true, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n    <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n        <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n        <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated payments</h3>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</td>\n                  <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></td>\n      \n                  <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n                  <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n                  <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n                  <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                 </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n              <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n                  <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n                    <div class=\"multiple-choice unprocessed-payments--radio-button\">\n                      <input id=\"'unpaiedFee'+i+''\"\n                      aria-label=\"unassignedRecord\"\n                      name=\"unassignedRecord\"\n                      type=\"radio\"\n                      [(ngModel)]=\"recordId\"\n                      (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n                      value=\"{{unassignedRecord.dcn_reference}}\" />\n                      <label for=\"radio-inline-1\"></label>\n                    </div>\n                  </td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">\n                    {{unassignedRecord.dcn_reference}}\n                  </td>\n                  <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n                </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n              <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n            </tbody>\n          </table>\n         <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n            <button type=\"button\"\n            [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n            [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n              Allocate to a new fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n            [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n              Allocate to an existing fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n            [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n              Mark as unidentified\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isUnprocessedRecordSelected\"\n            [ngClass]='!isUnprocessedRecordSelected ?  \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n              Mark as transferred\n            </button>  \n         </div>\n      \n         <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n            <button type=\"button\"\n            [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n            [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n              Allocate to a new fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n            [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n              Allocate to an existing fee\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n            [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n              Mark as unidentified\n            </button>\n            <button type=\"button\" \n            [disabled]=\"!isUnprocessedRecordSelected\"\n            [ngClass]='!isUnprocessedRecordSelected ?  \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n              Mark as transferred\n            </button> \n         </div>\n      </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n    <table class=\"govuk-table\">\n       \n        <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\n            <!-- <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                <td class=\"govuk-table__header col-14\" scope=\"col\">Date</td>\n                <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n                <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr> -->\n          </thead>\n          <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n                    <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n                    Unallocated \n                    </td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n          </tr>\n          </tbody>\n       \n    </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n    <div class=\"unprocessed-payments\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n          <table class=\"table\">\n             \n              <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n                      <td class=\"govuk-table__header col-9\" scope=\"col\">Amount</td>\n                      <td class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</td>\n                      <td class=\"govuk-table__header col-24\" colspan=\"3\" scope=\"col\">Request reference</td>\n                      <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n                      <td class=\"govuk-table__header\" scope=\"col\"></td>\n                    </tr>\n                </thead>\n              <tbody>\n            <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n             <tr>\n                <td  class=\"govuk-table__cell whitespace-inherit col-13\" >\n                  Unallocated \n               </td>\n                <td class=\"govuk-table__cell whitespace-inherit col-10\">\n                    {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n                </td>\n                <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n                    <div  *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n                        <button type=\"button\"\n                        [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n                        [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n                          Allocate to new service request\n                        </button><br/>\n                        <button type=\"button\" \n                        [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n                        [ngClass]='!isAllocateToExistingFeebtnEnabled ?  \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n                          Allocate to existing service request \n                        </button>\n                </div>\n            \n                </td>\n             </tr>\n           \n              <!-- <ng-container> -->\n             <tr>\n                  <td class=\"unassigned noborders\" colspan=\"10\">\n                      <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n                          <span class=\"govuk-details__summary-text\">\n                              More details and actions\n                          </span>\n                      </summary>\n                      <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text  govuk-!-margin-bottom-5 paddingright\">\n                          <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n                              <div class=\"govuk-summary-list__row\">\n                                  <dt class=\"govuk-summary-list__key\">\n                                      Method\n                                  </dt>\n                                  <dd class=\"govuk-summary-list__value\">\n                                      {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n                                  </dd>\n                              </div>\n                              <div class=\"govuk-summary-list__row\">\n                                  <dt class=\"govuk-summary-list__key\">\n                                      Payment assest number (DCN) \n                                  </dt>\n                                  <dd class=\"govuk-summary-list__value\">\n                                      {{unassignedRecord.dcn_reference}}\n                                  </dd>\n                              </div>\n                          </dl>\n                          <div class=\" govuk-!-margin-bottom-5\">\n                              <button type=\"button\" \n                              [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n                              [ngClass]='!isMarkAsUnidentifiedbtnEnabled ?  \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n                                Mark as unidentified\n                              </button>\n                          </div>\n                          <div>\n                              <button type=\"button\" \n                          [disabled]=\"!isUnprocessedRecordSelected\"\n                          [ngClass]='!isUnprocessedRecordSelected ?  \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n                            Mark as transferred\n                          </button>  \n                          </div>\n\n                      </div>\n                  </td> \n                </tr> \n              <!-- </ng-container> -->\n             </ng-container>\n              </tbody>\n              </table>\n      \n        </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n  <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;-webkit-box-shadow:0 2px 0 #003618;-moz-box-shadow:0 2px 0 #003618;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: PaymentViewService }, { type: OrderslistService }], propDecorators: { FEE_RECORDS_EXISTS: [{
                 type: Input,
                 args: ['FEE_RECORDS_EXISTS']
@@ -2037,7 +2036,7 @@ class RefundStatusComponent {
         return !!status && status !== 'Closed' && status !== 'Expired';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RefundStatusComponent, deps: [{ token: i1$1.FormBuilder }, { token: RefundsService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: RefundStatusComponent, isStandalone: true, selector: "ccpay-refund-status", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", API_ROOT: "API_ROOT", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", orderParty: "orderParty" }, ngImport: i0, template: "\n<div *ngIf=\"errorMessage\">\n  <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n    <div role=\"alert\">\n      <h2 class=\"govuk-error-summary__title\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- payments -->\n\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header col-16\" scope=\"col\">Status</th>\n        <th class=\"govuk-table__header col-11\" scope=\"col\">Amount</th>\n        <th class=\"govuk-table__header col-18\" scope=\"col\">Date</th>\n        <th class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</th>\n        <th class=\"govuk-table__header col-24 \" scope=\"col\">Reason</th>\n        <th class=\"govuk-table__header\" scope=\"col\"></th>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a  href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n\n    <tbody>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n\n    <!-- Notification sent details -->\n    <div>\n      <br />\n      <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</th>\n            <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</th>\n            <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</th>\n            <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</th>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n          <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n              <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n              <td class=\"govuk-table__cell whitespace-inherit col-40\">\n                <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n                  <strong>Email</strong><br>\n                  {{notification?.contact_details?.email?.trim()}}\n                </div>\n                <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n                  <strong>Post</strong><br>\n                  {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n                </div>\n              </td>\n\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\">\n\n                <a *ngIf=\"isCurrentRefundInProcess()\" href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a><span *ngIf=\"isCurrentRefundInProcess()\">&nbsp;|&nbsp;</span>\n                <a *ngIf=\"isCurrentRefundInProcess()\"href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a><span *ngIf=\"isCurrentRefundInProcess()\">&nbsp;|&nbsp;</span>\n                <a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a>\n                <a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a>\n\n              </td>\n\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n            </tr>\n            <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n              <td class=\"govuk-table__cell\" colspan=\"4\">\n                <app-notification-preview\n                  [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n                </app-notification-preview>\n              </td>\n            </tr>\n          </ng-container>\n\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  <!-- Status history -->\n  <div>\n    <br />\n    <div class=\"refund-status-history-header govuk-flex\">\n      <h2 class=\"govuk-heading-m\">Refund status history</h2>\n        <div *ngIf=\"isCurrentRefundVisibleForReset()\">\n        <button\n          type=\"button\"\n          [disabled]=\"isRefundStatusResetBtnDisabled\"\n          class=\"govuk-button govuk-button--secondary\"\n          (click)=\"displayResetRefundConfirmation()\">\n          Reset Refund\n        </button>\n      </div>\n    </div>\n    <div *ngIf=\"refundStatusHistories\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</th>\n          <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</th>\n          <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</th>\n          <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">\n             {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n           </td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  </div>\n\n  <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n    <div  *ngIf=\"refundButtonState==='Update required'\" >\n      <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n      <br />\n      <button type=\"submit\" class=\"govuk-button govuk-button--secondary btnmargin\"\n        (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n    </div>\n    <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n      <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n      <br />\n      <button type=\"submit\" class=\"govuk-button govuk-button--secondary\"\n        (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n    </div>\n  </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div> -->\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"govuk-heading-l\">Check your answers</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</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n      <td class=\"govuk-table__cell\">{{refundreason}}</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n        <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n      <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n      <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n      <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n        <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</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</td>\n      <td class=\"govuk-table__cell whitespace-inherit\">\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Email</strong>\n          <br/>\n          {{refundlist?.contact_details?.email?.trim()}}\n        </div>\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Post</strong>\n          <br/>\n          {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n        </div>\n        <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\"  class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n          Change\n        </a>\n      </td>\n    </tr>\n\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n      <td class=\"govuk-table__cell\">{{templateInstructionType}}\n          <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n            Preview\n          </a>\n          <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n            Hide Preview\n          </a>\n      </td>\n    </tr>\n  </table>\n  <app-notification-preview *ngIf=\"notificationPreview\"\n  [paymentReference]=\"refundlist?.payment_reference\"\n  [payment]=\"paymentObj\"\n  [contactDetails]=\"refundlist?.contact_details\"\n  [refundReason]=\"refundlist?.reason_code\"\n  [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n  [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n  <div class=\"govuk-button-group\">\n    <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n  <!-- <div class=\"govuk-button-group\">\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n  </div> -->\n  <!-- <p>\n    <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n  </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-!-font-size-19\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperationInRefundList] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n    (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n   [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\"  (refundListAmount)=\"getRefundAmount($event)\"  (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-grid-row pagesize\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_refund_title\">\n          Refund submitted\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n        </div>\n\n      </div>\n\n      <h2 class=\"govuk-heading-l\">What happens next</h2>\n      <p class=\"govuk-body\">\n        A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n      </p>\n\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n  <div class=\"govuk-grid-row pagesize\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_refund_title\">\n          Notification sent\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n        </div>\n\n      </div>\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-!-font-size-19\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperationInRefundList] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n    (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'>\n    <h1 class=\"govuk-heading-l\">Check your answers</h1>\n    <dl class=\"govuk-summary-list\">\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Refund reference\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ refundlist?.refund_reference}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\"></span>\n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Send via\n          <br/>\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{addressDetails?.email?.trim()}}\n          </div>\n          <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n          </div>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n            Change\n          </a>\n        </dd>\n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Notification\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{templateInstructionType}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\">\n          <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n            Preview\n          </a>\n          <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n            Hide Preview\n          </a>\n        </span>\n      </div>\n    </dl>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n    [payment]=\"paymentObj\"\n    [contactDetails]=\"addressDetails\"\n    [refundReason]=\"refundlist?.reason_code\"\n    [refundAmount]=\"refundlist?.amount\"\n    [refundReference]=\"refundlist?.refund_reference\">\n  </app-notification-preview>\n\n\n\n    <div class=\"govuk-button-group\">\n      <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n      <button (click)=\"submitEditDetail()\" class=\"govuk-button\"\n        data-module=\"govuk-button\">\n          Send notification\n      </button>\n  </div>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n\n\n<ng-container *ngIf=\"viewName === 'confirmSubmitResetRefund'\">\n\n\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"govuk-heading-l\">Reset Refund</h1>\n  </div>\n\n  <table class=\"govuk-table\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">When you click Submit, the system will:</td>\n    </tr>\n\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">\n            <div class=\"refund-list\">\n              <ul class=\"govuk-list--bullet\">\n                <li>Close current refund reference number {{ refundlist?.refund_reference }}</li>\n                <li>Reissue refund with a new reference number</li>\n                <li>Issue a new Offer and Contact notification for the reissued refund</li>\n              </ul>\n            </div>\n          </td>\n        </tr>\n  </table>\n\n\n  <button (click)=\"redirectToRefundListPage()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n  <button (click)=\"postResetRefund()\" class=\"govuk-button\">Submit</button>\n</ng-container>\n", styles: [".right{float:right!important}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px;margin-top:40px;margin-bottom:5px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-panel_refund_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}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.refund-status-history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.govuk-button--secondary{margin-bottom:0}.govuk-heading-custom{padding-left:19em;padding-top:2em}.refund-list{text-align:left}.refund-list ul{list-style-type:disc;padding-left:2em}.govuk-button-group-custom{padding-top:3em;padding-left:20em;align-items:center;align-content:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { 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: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { 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: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: RefundStatusComponent, isStandalone: true, selector: "ccpay-refund-status", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", API_ROOT: "API_ROOT", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", orderParty: "orderParty" }, ngImport: i0, template: "\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\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      {{ errorMessage }}\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- payments -->\n\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n        <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n        <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n        <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n        <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n        <td class=\"govuk-table__header\" scope=\"col\"></td>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell  whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a  href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n\n    <tbody>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n\n    <!-- Notification sent details -->\n    <div>\n      <br />\n      <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n          <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n              <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n              <td class=\"govuk-table__cell whitespace-inherit col-40\">\n                <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n                  <strong>Email</strong><br>\n                  {{notification?.contact_details?.email?.trim()}}\n                </div>\n                <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n                  <strong>Post</strong><br>\n                  {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n                </div>\n              </td>\n\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\">\n\n                <a *ngIf=\"isCurrentRefundInProcess()\" href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a><span *ngIf=\"isCurrentRefundInProcess()\">&nbsp;|&nbsp;</span>\n                <a *ngIf=\"isCurrentRefundInProcess()\"href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a><span *ngIf=\"isCurrentRefundInProcess()\">&nbsp;|&nbsp;</span>\n                <a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a>\n                <a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a>\n\n              </td>\n\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n            </tr>\n            <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n              <td class=\"govuk-table__cell\" colspan=\"4\">\n                <app-notification-preview\n                  [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n                </app-notification-preview>\n              </td>\n            </tr>\n          </ng-container>\n\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  <!-- Status history -->\n  <div>\n    <br />\n    <div class=\"refund-status-history-header govuk-flex\">\n      <h2 class=\"govuk-heading-m\">Refund status history</h2>\n        <div *ngIf=\"isCurrentRefundVisibleForReset()\">\n        <button\n          type=\"button\"\n          [disabled]=\"isRefundStatusResetBtnDisabled\"\n          class=\"govuk-button govuk-button--secondary\"\n          (click)=\"displayResetRefundConfirmation()\">\n          Reset Refund\n        </button>\n      </div>\n    </div>\n    <div *ngIf=\"refundStatusHistories\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n          <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n          <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n          <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">\n             {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n           </td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  </div>\n\n  <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n    <div  *ngIf=\"refundButtonState==='Update required'\" >\n      <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n        (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n    </div>\n    <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n      <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary\"\n        (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n    </div>\n  </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div> -->\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"heading-large\">Check your answers</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</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n      <td class=\"govuk-table__cell\">{{refundreason}}</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n        <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n      <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n      <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n      <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n        <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</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</td>\n      <td class=\"govuk-table__cell whitespace-inherit\">\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Email</strong>\n          <br/>\n          {{refundlist?.contact_details?.email?.trim()}}\n        </div>\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Post</strong>\n          <br/>\n          {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n        </div>\n        <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\"  class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n          Change\n        </a>\n      </td>\n    </tr>\n\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n      <td class=\"govuk-table__cell\">{{templateInstructionType}}\n          <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n            Preview\n          </a>\n          <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n            Hide Preview\n          </a>\n      </td>\n    </tr>\n  </table>\n  <app-notification-preview *ngIf=\"notificationPreview\"\n  [paymentReference]=\"refundlist?.payment_reference\"\n  [payment]=\"paymentObj\"\n  [contactDetails]=\"refundlist?.contact_details\"\n  [refundReason]=\"refundlist?.reason_code\"\n  [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n  [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n  <div class=\"govuk-button-group\">\n    <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n  <!-- <div class=\"govuk-button-group\">\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n  </div> -->\n  <!-- <p>\n    <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n  </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperationInRefundList] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n    (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n   [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\"  (refundListAmount)=\"getRefundAmount($event)\"  (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-grid-row pagesize\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_refund_title\">\n          Refund submitted\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n        </div>\n\n      </div>\n\n      <h2 class=\"govuk-heading-l\">What happens next</h2>\n      <p class=\"govuk-body\">\n        A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n      </p>\n\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n  <div class=\"govuk-grid-row pagesize\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_refund_title\">\n          Notification sent\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n        </div>\n\n      </div>\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperationInRefundList] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n    (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'>\n    <h1 class=\"govuk-heading-l\">Check your answers</h1>\n    <dl class=\"govuk-summary-list\">\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Refund reference\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ refundlist?.refund_reference}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\"></span>\n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Send via\n          <br/>\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{addressDetails?.email?.trim()}}\n          </div>\n          <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n          </div>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n            Change\n          </a>\n        </dd>\n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Notification\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{templateInstructionType}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\">\n          <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n            Preview\n          </a>\n          <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n            Hide Preview\n          </a>\n        </span>\n      </div>\n    </dl>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n    [payment]=\"paymentObj\"\n    [contactDetails]=\"addressDetails\"\n    [refundReason]=\"refundlist?.reason_code\"\n    [refundAmount]=\"refundlist?.amount\"\n    [refundReference]=\"refundlist?.refund_reference\">\n  </app-notification-preview>\n\n\n\n    <div class=\"govuk-button-group\">\n      <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n      <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n        data-module=\"govuk-button\">\n          Send notification\n      </button>\n  </div>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n\n\n<ng-container *ngIf=\"viewName === 'confirmSubmitResetRefund'\">\n\n\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"govuk-heading-l\">Reset Refund</h1>\n  </div>\n\n  <table class=\"govuk-table\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">When you click Submit, the system will:</td>\n    </tr>\n\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">\n            <div class=\"refund-list\">\n              <ul class=\"govuk-list--bullet\">\n                <li>Close current refund reference number {{ refundlist?.refund_reference }}</li>\n                <li>Reissue refund with a new reference number</li>\n                <li>Issue a new Offer and Contact notification for the reissued refund</li>\n              </ul>\n            </div>\n          </td>\n        </tr>\n  </table>\n\n\n  <button (click)=\"redirectToRefundListPage()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n  <button (click)=\"postResetRefund()\" class=\"govuk-button\">Submit</button>\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px;margin-top:40px;margin-bottom:5px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-panel_refund_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}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.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}.refund-status-history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.govuk-button--secondary{margin-bottom:0}.govuk-heading-custom{padding-left:19em;padding-top:2em}.refund-list{text-align:left}.refund-list ul{list-style-type:disc;padding-left:2em}.govuk-button-group-custom{padding-top:3em;padding-left:20em;align-items:center;align-content:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { 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: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { 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: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RefundStatusComponent, decorators: [{
             type: Component,
@@ -2049,7 +2048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         forwardRef(() => AddRemissionComponent),
                         CcdHyphensPipe,
                         CapitalizePipe,
-                    ], standalone: true, template: "\n<div *ngIf=\"errorMessage\">\n  <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n    <div role=\"alert\">\n      <h2 class=\"govuk-error-summary__title\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- payments -->\n\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header col-16\" scope=\"col\">Status</th>\n        <th class=\"govuk-table__header col-11\" scope=\"col\">Amount</th>\n        <th class=\"govuk-table__header col-18\" scope=\"col\">Date</th>\n        <th class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</th>\n        <th class=\"govuk-table__header col-24 \" scope=\"col\">Reason</th>\n        <th class=\"govuk-table__header\" scope=\"col\"></th>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a  href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n\n    <tbody>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n\n    <!-- Notification sent details -->\n    <div>\n      <br />\n      <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</th>\n            <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</th>\n            <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</th>\n            <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</th>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n          <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n              <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n              <td class=\"govuk-table__cell whitespace-inherit col-40\">\n                <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n                  <strong>Email</strong><br>\n                  {{notification?.contact_details?.email?.trim()}}\n                </div>\n                <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n                  <strong>Post</strong><br>\n                  {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n                </div>\n              </td>\n\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\">\n\n                <a *ngIf=\"isCurrentRefundInProcess()\" href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a><span *ngIf=\"isCurrentRefundInProcess()\">&nbsp;|&nbsp;</span>\n                <a *ngIf=\"isCurrentRefundInProcess()\"href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a><span *ngIf=\"isCurrentRefundInProcess()\">&nbsp;|&nbsp;</span>\n                <a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a>\n                <a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a>\n\n              </td>\n\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n            </tr>\n            <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n              <td class=\"govuk-table__cell\" colspan=\"4\">\n                <app-notification-preview\n                  [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n                </app-notification-preview>\n              </td>\n            </tr>\n          </ng-container>\n\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  <!-- Status history -->\n  <div>\n    <br />\n    <div class=\"refund-status-history-header govuk-flex\">\n      <h2 class=\"govuk-heading-m\">Refund status history</h2>\n        <div *ngIf=\"isCurrentRefundVisibleForReset()\">\n        <button\n          type=\"button\"\n          [disabled]=\"isRefundStatusResetBtnDisabled\"\n          class=\"govuk-button govuk-button--secondary\"\n          (click)=\"displayResetRefundConfirmation()\">\n          Reset Refund\n        </button>\n      </div>\n    </div>\n    <div *ngIf=\"refundStatusHistories\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</th>\n          <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</th>\n          <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</th>\n          <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">\n             {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n           </td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  </div>\n\n  <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n    <div  *ngIf=\"refundButtonState==='Update required'\" >\n      <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n      <br />\n      <button type=\"submit\" class=\"govuk-button govuk-button--secondary btnmargin\"\n        (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n    </div>\n    <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n      <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n      <br />\n      <button type=\"submit\" class=\"govuk-button govuk-button--secondary\"\n        (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n    </div>\n  </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div> -->\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"govuk-heading-l\">Check your answers</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</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n      <td class=\"govuk-table__cell\">{{refundreason}}</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n        <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n      <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n      <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n      <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n        <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</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</td>\n      <td class=\"govuk-table__cell whitespace-inherit\">\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Email</strong>\n          <br/>\n          {{refundlist?.contact_details?.email?.trim()}}\n        </div>\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Post</strong>\n          <br/>\n          {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n        </div>\n        <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\"  class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n          Change\n        </a>\n      </td>\n    </tr>\n\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n      <td class=\"govuk-table__cell\">{{templateInstructionType}}\n          <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n            Preview\n          </a>\n          <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n            Hide Preview\n          </a>\n      </td>\n    </tr>\n  </table>\n  <app-notification-preview *ngIf=\"notificationPreview\"\n  [paymentReference]=\"refundlist?.payment_reference\"\n  [payment]=\"paymentObj\"\n  [contactDetails]=\"refundlist?.contact_details\"\n  [refundReason]=\"refundlist?.reason_code\"\n  [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n  [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n  <div class=\"govuk-button-group\">\n    <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n  <!-- <div class=\"govuk-button-group\">\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n  </div> -->\n  <!-- <p>\n    <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n  </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-!-font-size-19\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperationInRefundList] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n    (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n   [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\"  (refundListAmount)=\"getRefundAmount($event)\"  (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-grid-row pagesize\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_refund_title\">\n          Refund submitted\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n        </div>\n\n      </div>\n\n      <h2 class=\"govuk-heading-l\">What happens next</h2>\n      <p class=\"govuk-body\">\n        A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n      </p>\n\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n  <div class=\"govuk-grid-row pagesize\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_refund_title\">\n          Notification sent\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n        </div>\n\n      </div>\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-!-font-size-19\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperationInRefundList] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n    (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'>\n    <h1 class=\"govuk-heading-l\">Check your answers</h1>\n    <dl class=\"govuk-summary-list\">\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Refund reference\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ refundlist?.refund_reference}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\"></span>\n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Send via\n          <br/>\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{addressDetails?.email?.trim()}}\n          </div>\n          <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n          </div>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n            Change\n          </a>\n        </dd>\n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Notification\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{templateInstructionType}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\">\n          <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n            Preview\n          </a>\n          <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n            Hide Preview\n          </a>\n        </span>\n      </div>\n    </dl>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n    [payment]=\"paymentObj\"\n    [contactDetails]=\"addressDetails\"\n    [refundReason]=\"refundlist?.reason_code\"\n    [refundAmount]=\"refundlist?.amount\"\n    [refundReference]=\"refundlist?.refund_reference\">\n  </app-notification-preview>\n\n\n\n    <div class=\"govuk-button-group\">\n      <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n      <button (click)=\"submitEditDetail()\" class=\"govuk-button\"\n        data-module=\"govuk-button\">\n          Send notification\n      </button>\n  </div>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n\n\n<ng-container *ngIf=\"viewName === 'confirmSubmitResetRefund'\">\n\n\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"govuk-heading-l\">Reset Refund</h1>\n  </div>\n\n  <table class=\"govuk-table\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">When you click Submit, the system will:</td>\n    </tr>\n\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">\n            <div class=\"refund-list\">\n              <ul class=\"govuk-list--bullet\">\n                <li>Close current refund reference number {{ refundlist?.refund_reference }}</li>\n                <li>Reissue refund with a new reference number</li>\n                <li>Issue a new Offer and Contact notification for the reissued refund</li>\n              </ul>\n            </div>\n          </td>\n        </tr>\n  </table>\n\n\n  <button (click)=\"redirectToRefundListPage()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n  <button (click)=\"postResetRefund()\" class=\"govuk-button\">Submit</button>\n</ng-container>\n", styles: [".right{float:right!important}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px;margin-top:40px;margin-bottom:5px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-panel_refund_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}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.refund-status-history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.govuk-button--secondary{margin-bottom:0}.govuk-heading-custom{padding-left:19em;padding-top:2em}.refund-list{text-align:left}.refund-list ul{list-style-type:disc;padding-left:2em}.govuk-button-group-custom{padding-top:3em;padding-left:20em;align-items:center;align-content:center}\n"] }]
+                    ], standalone: true, template: "\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\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      {{ errorMessage }}\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- payments -->\n\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n        <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n        <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n        <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n        <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n        <td class=\"govuk-table__header\" scope=\"col\"></td>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell  whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a  href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n\n    <tbody>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n\n    <!-- Notification sent details -->\n    <div>\n      <br />\n      <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n          <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n              <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n              <td class=\"govuk-table__cell whitespace-inherit col-40\">\n                <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n                  <strong>Email</strong><br>\n                  {{notification?.contact_details?.email?.trim()}}\n                </div>\n                <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n                  <strong>Post</strong><br>\n                  {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n                </div>\n              </td>\n\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\">\n\n                <a *ngIf=\"isCurrentRefundInProcess()\" href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a><span *ngIf=\"isCurrentRefundInProcess()\">&nbsp;|&nbsp;</span>\n                <a *ngIf=\"isCurrentRefundInProcess()\"href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a><span *ngIf=\"isCurrentRefundInProcess()\">&nbsp;|&nbsp;</span>\n                <a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a>\n                <a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a>\n\n              </td>\n\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n            </tr>\n            <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n              <td class=\"govuk-table__cell\" colspan=\"4\">\n                <app-notification-preview\n                  [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n                </app-notification-preview>\n              </td>\n            </tr>\n          </ng-container>\n\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  <!-- Status history -->\n  <div>\n    <br />\n    <div class=\"refund-status-history-header govuk-flex\">\n      <h2 class=\"govuk-heading-m\">Refund status history</h2>\n        <div *ngIf=\"isCurrentRefundVisibleForReset()\">\n        <button\n          type=\"button\"\n          [disabled]=\"isRefundStatusResetBtnDisabled\"\n          class=\"govuk-button govuk-button--secondary\"\n          (click)=\"displayResetRefundConfirmation()\">\n          Reset Refund\n        </button>\n      </div>\n    </div>\n    <div *ngIf=\"refundStatusHistories\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n          <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n          <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n          <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">\n             {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n           </td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  </div>\n\n  <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n    <div  *ngIf=\"refundButtonState==='Update required'\" >\n      <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n        (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n    </div>\n    <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n      <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary\"\n        (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n    </div>\n  </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div> -->\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"heading-large\">Check your answers</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</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n      <td class=\"govuk-table__cell\">{{refundreason}}</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n        <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n      <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n      <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n      <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n        <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</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</td>\n      <td class=\"govuk-table__cell whitespace-inherit\">\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Email</strong>\n          <br/>\n          {{refundlist?.contact_details?.email?.trim()}}\n        </div>\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Post</strong>\n          <br/>\n          {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n        </div>\n        <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\"  class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n          Change\n        </a>\n      </td>\n    </tr>\n\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n      <td class=\"govuk-table__cell\">{{templateInstructionType}}\n          <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n            Preview\n          </a>\n          <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n            Hide Preview\n          </a>\n      </td>\n    </tr>\n  </table>\n  <app-notification-preview *ngIf=\"notificationPreview\"\n  [paymentReference]=\"refundlist?.payment_reference\"\n  [payment]=\"paymentObj\"\n  [contactDetails]=\"refundlist?.contact_details\"\n  [refundReason]=\"refundlist?.reason_code\"\n  [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n  [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n  <div class=\"govuk-button-group\">\n    <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n  <!-- <div class=\"govuk-button-group\">\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n  </div> -->\n  <!-- <p>\n    <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n  </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperationInRefundList] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n    (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n   [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\"  (refundListAmount)=\"getRefundAmount($event)\"  (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-grid-row pagesize\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_refund_title\">\n          Refund submitted\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n        </div>\n\n      </div>\n\n      <h2 class=\"govuk-heading-l\">What happens next</h2>\n      <p class=\"govuk-body\">\n        A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n      </p>\n\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n  <div class=\"govuk-grid-row pagesize\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_refund_title\">\n          Notification sent\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n        </div>\n\n      </div>\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperationInRefundList] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n    (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'>\n    <h1 class=\"govuk-heading-l\">Check your answers</h1>\n    <dl class=\"govuk-summary-list\">\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Refund reference\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ refundlist?.refund_reference}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\"></span>\n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Send via\n          <br/>\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{addressDetails?.email?.trim()}}\n          </div>\n          <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n          </div>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n            Change\n          </a>\n        </dd>\n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Notification\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{templateInstructionType}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\">\n          <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n            Preview\n          </a>\n          <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n            Hide Preview\n          </a>\n        </span>\n      </div>\n    </dl>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n    [payment]=\"paymentObj\"\n    [contactDetails]=\"addressDetails\"\n    [refundReason]=\"refundlist?.reason_code\"\n    [refundAmount]=\"refundlist?.amount\"\n    [refundReference]=\"refundlist?.refund_reference\">\n  </app-notification-preview>\n\n\n\n    <div class=\"govuk-button-group\">\n      <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n      <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n        data-module=\"govuk-button\">\n          Send notification\n      </button>\n  </div>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n\n\n<ng-container *ngIf=\"viewName === 'confirmSubmitResetRefund'\">\n\n\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"govuk-heading-l\">Reset Refund</h1>\n  </div>\n\n  <table class=\"govuk-table\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">When you click Submit, the system will:</td>\n    </tr>\n\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">\n            <div class=\"refund-list\">\n              <ul class=\"govuk-list--bullet\">\n                <li>Close current refund reference number {{ refundlist?.refund_reference }}</li>\n                <li>Reissue refund with a new reference number</li>\n                <li>Issue a new Offer and Contact notification for the reissued refund</li>\n              </ul>\n            </div>\n          </td>\n        </tr>\n  </table>\n\n\n  <button (click)=\"redirectToRefundListPage()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n  <button (click)=\"postResetRefund()\" class=\"govuk-button\">Submit</button>\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px;margin-top:40px;margin-bottom:5px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-panel_refund_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}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.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}.refund-status-history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.govuk-button--secondary{margin-bottom:0}.govuk-heading-custom{padding-left:19em;padding-top:2em}.refund-list{text-align:left}.refund-list ul{list-style-type:disc;padding-left:2em}.govuk-button-group-custom{padding-top:3em;padding-left:20em;align-items:center;align-content:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: RefundsService }, { type: NotificationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -2920,7 +2919,7 @@ class CaseTransactionsComponent {
         return Math.round(Number(amount) * 100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaseTransactionsComponent, deps: [{ token: i1$2.Router }, { token: PaymentViewService }, { token: BulkScaningPaymentService }, { token: CaseTransactionsService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CaseTransactionsComponent, isStandalone: true, selector: "ccpay-case-transactions", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", isTakePayment: "isTakePayment", isFromServiceRequestPage: "isFromServiceRequestPage" }, ngImport: i0, template: "<div>\n  <main>\n    <ng-container  *ngIf=\"viewStatus === 'main1'\">\n      <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n            <div class=\"govuk-grid-column-two-thirds\">\n              <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n            </div>\n          </div>\n\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n            <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"govuk-heading-m\">CCD reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n\n            <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"govuk-heading-m\">Exception reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n            <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n              <hr class=\"govuk-section-break govuk-section-break--visible\">\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header\" scope=\"col\">Total payments</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Total remissions</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n                    <th class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</th>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n                [disabled]=\"!isAddFeeBtnEnabled\"\n                [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                Take telephony payment\n              </button>\n          </div>\n\n          </div>\n          <div class=\"govuk-grid-row\">\n\n          </div>\n          <div  *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n            <div class=\"govuk-grid-row\">\n              <div class=\"govuk-grid-column-full\">\n                  <h3 class=\"govuk-heading-m\">Fees</h3>\n              </div>\n              <div class=\"govuk-grid-column-full\">\n                <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Action</th>\n\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n                    <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n                      <td class=\"govuk-table__cell\">{{fee.description}}</td>\n                      <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n                      <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell govuk-!-font-weight-bold\"  [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n                    </td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n                    <tr class=\"govuk-table__row\" >\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n              <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n                  <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n                C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n              </svg>\n              <div class=\"hmcts-banner__message\">\n                <span class=\"hmcts-banner__assistive\">information</span>\n                * These fees have already been processed offline. Check the notes in CCD for more information.\n              </div>\n            </div>\n            <div class=\"govuk-inset-text panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n                <!-- payments -->\n                <h3 class=\"govuk-heading-m\">Payments</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <th class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Channel</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n                          <th class=\"govuk-table__header col-15\" scope=\"col\">Amount</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Payment status</th>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <h3 class=\"govuk-heading-m\">Remissions</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission reference</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission code</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Fee code</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission amount</th>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n          </div>\n      </div>\n\n      <div  *ngIf=\"takePayment && isTurnOff\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n        </div>\n\n        <div  class=\"govuk-grid-column-one-third\" align=\"right\" >\n          <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"govuk-button\">Add a new fee</a>\n        </div>\n      </div>\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n          <h3 class=\"govuk-heading-m\">CCD reference:</h3>\n          <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n        </div>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <th class=\"govuk-table__header\" scope=\"col\">Total payments</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Total remissions</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n              </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n              <tr class=\"totalpayments govuk-table__row\">\n                <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n\n      <!-- No fees start -->\n      <div *ngIf=\"paymentGroups?.length === 0\">\n        <div class=\"govuk-grid-row\">\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"govuk-heading-s\">Existing fees</span>\n          </div>\n\n          <div class=\"govuk-grid-column-full\">\n            <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</th>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n              </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- No fees end -->\n\n      <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n          <span class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n        </div>\n      </div>\n        <div class=\"govuk-grid-row\">\n\n          <!--New Code start-->\n\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"govuk-heading-s\">Exisiting fees</span>\n          </div>\n          <div class=feeclass>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n              <th class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</th>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n            <tr class=\"govuk-table__row\"  *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n              <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n              <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n                {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n            </tbody>\n          </table>\n        </div>\n        </div>\n      <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n        <details>\n          <summary class=\"govuk-hidetext\">\n          <span class=\"summary\">Allocated payments and remissions</span>\n          </summary>\n\n            <div class=\"govuk-inset-text\">\n                <!-- payments -->\n                <span class=\"govuk-heading-m\">Payments</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <th class=\"govuk-table__header\" scope=\"col\">Payment reference</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Channel</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Status</th>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of paymentGroup.payments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <span class=\"govuk-heading-m\">Remissions</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission reference</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission code</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Fee applied against</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission amount</th>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n      </details>\n\n\n          <div *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n                [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n                [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                  Add telephone payment\n              </button>\n          </div>\n        </div>\n      </div>\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"5\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n      </ccpay-app-unprocessed-payments>\n      <div class=\"govuk-grid-row govuk-grid__surplus-payments\"  *ngIf=\"totalRefundAmount > 0 && takePayment\">\n        <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n          <h3 class=\"govuk-heading-m\">Surplus payments</h3>\n        </div>\n        <div class=\"govuk-grid-column-full\">\n          Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n        </div>\n      </div>\n      </div>\n\n      <div  *ngIf=\"takePayment\">\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable && !takePayment\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"1\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n        </ccpay-app-unprocessed-payments>\n      </div>\n\n      <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n        <div class=\"govuk-grid-column-full\">\n\n          <span class=\"govuk-heading-m\">{{ \"Payments\" | rpxTranslate }}</span>\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header col-13\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n                    <th class=\"govuk-table__header\" scope=\"col\"></th>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                    <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n                    <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n            </table>\n            <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"2\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n        </ccpay-app-unprocessed-payments>\n        </div>\n      </div>\n    </ng-container>\n\n<!--Order Case Transactions Page-->\n   <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n      <div>\n\n          <div>\n              <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n              <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div>\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header col-25\" scope=\"col\">Total payments</th>\n                    <th class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</th>\n                    <th class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</th>\n                    <th class=\"govuk-table__header col-20\" scope=\"col\">Amount due</th>\n                    <th class=\"govuk-table__header col-20\" scope=\"col\">Over payment</th>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n            <!--Payment Request-->\n          <div class=\"paymentrequest\">\n              <span class=\"govuk-heading-m\">{{ \"Service requests\" | rpxTranslate }}</span>\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header  col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header  col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header  col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header  col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header  col-9\" scope=\"col\"></th>\n                    <th class=\"govuk-table__header col\" scope=\"col\"></th>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n                        <ng-container *ngFor=\"let cpo of cpoDetails\">\n                          <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                            {{cpo.responsibleParty}}\n                          </ng-container>\n                        </ng-container>\n                      </td>\n                      <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                      <td  class=\"alignright\">\n\n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n                        [disabled]=\"!orderRef.orderAddBtnEnable\"\n                        [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                        {{ \"Take telephony payment\" | rpxTranslate }}\n                      </button></td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n                    <td colspan=\"6\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n                  </tbody>\n              </table>\n            </ng-container>\n              <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n                  <br/>No service requests on this case.<br/>\n              </ng-container> -->\n              <span>\n                  <br/>\n                  <a (click)=\"redirectToFeeSearchPage($event)\"\n                    [class.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request\" | rpxTranslate }}</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"govuk-heading-m\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n              <ccpay-app-unprocessed-payments\n              *ngIf=\"isBulkScanEnable\"\n              [IS_BUTTON_ENABLE]=\"takePayment\"\n              [LEVEL]=\"3\"\n              [PAYMENTSLENGTH]=\"allPayments?.length\"\n              [ISTURNOFF]=\"isTurnOff\"\n              [ISSFENABLE]=\"isStrategicFixEnable\"\n              [PAYMENTREF]=\"paymentRef\"\n              [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n              (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n              [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n              [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n              [SELECTED_OPTION]=\"selectedOption\"\n              [DCN_NUMBER]=\"dcnNumber\"\n              [ISBSENABLE]=\"isBulkScanEnable\"\n              [CASETYPE]=\"caseType\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n              (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n              (setViewName) = \"setViewName($event)\"\n              (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n              (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n               </ccpay-app-unprocessed-payments>\n\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                    <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                        <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                        <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                        <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                        <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                        <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                        <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                          </td>\n                      </tr>\n                  </tbody>\n\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n                    <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"govuk-heading-m\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\"\n              [isTurnOff]=\"isTurnOff\"\n              [orderParty]=\"orderParty\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n              ></ccpay-refund-status>\n          </div>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n      <div  class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n        <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"govuk-heading-m\">Service requests</span> -->\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n                <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n                <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</th>\n                <th class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n                </th>\n                <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n                <th class=\"govuk-table__header\" scope=\"col\"></th>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n                    <ng-container *ngFor=\"let cpo of cpoDetails\">\n                      <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                        {{cpo.responsibleParty}}\n                      </ng-container>\n                    </ng-container>\n                  </td>\n                  <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                  <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n                </td>\n                </tr>\n              </tbody>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                <tr class=\"govuk-table__row\" >\n                  <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n                </tr>\n              </tbody>\n          </table>\n        </ng-container>\n        <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n          <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n          <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n        </ng-container>\n    <!-- </div> -->\n        </div>\n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"govuk-heading-m\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n            <ng-container >\n              <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-13\" scope=\"col\"></th>\n                    <th class=\"govuk-table__header\" scope=\"col\"></th>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n              </tbody>\n              </table>\n              <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"4\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n              </ccpay-app-unprocessed-payments>\n            </ng-container>\n\n          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n            <span class=\"govuk-heading-m\"><br/>Refunds</span>\n            <ccpay-refund-status\n            [ccdCaseNumber]=\"ccdCaseNumber\"\n            [orderParty] =\"orderParty\"\n            [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n             ></ccpay-refund-status>\n        </div>\n\n   </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [paymentGroupList] = \"paymentGroups\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"serviceRequestValue\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n  ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n  <div class=\"govuk-warning-text\">\n    <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n    <strong class=\"govuk-warning-text__text\">\n      <span class=\"govuk-visually-hidden\">Warning</span>\n      Are you sure you want to delete this fee?\n    </strong>\n  </div>\n  <div class=\"govuk-button-grb\">\n    <form novalidate>\n      <button type=\"submit\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n        Cancel\n      </button>\n      <button type=\"submit\" class=\"govuk-button\"\n      [disabled]=\"isRemoveBtnDisabled\"\n      [ngClass]='isRemoveBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'\n      (click)=\"removeFee(feeId)\">\n        Remove\n      </button>\n    </form>\n  </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"], dependencies: [{ 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: "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(() => UnprocessedPaymentsComponent), selector: "ccpay-app-unprocessed-payments", inputs: ["FEE_RECORDS_EXISTS", "PAYMENTREF", "ISTURNOFF", "IS_BUTTON_ENABLE", "IS_OS_AMT_AVAILABLE", "ISSFENABLE", "PAYMENTSLENGTH", "LEVEL", "CCD_CASE_NUMBER", "SELECTED_OPTION", "DCN_NUMBER", "ISBSENABLE", "CASETYPE"], outputs: ["selectedUnprocessedFeeEvent", "getUnprocessedFeeCount", "setBspaymentdcn", "setViewName", "setUnProcessedPaymentServiceId", "setPaymentGroupReference"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => RefundStatusComponent), selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { 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.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i3.LowerCasePipe), name: "lowercase" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CaseTransactionsComponent, isStandalone: true, selector: "ccpay-case-transactions", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", isTakePayment: "isTakePayment", isFromServiceRequestPage: "isFromServiceRequestPage" }, ngImport: i0, template: "<div>\n  <main>\n    <ng-container  *ngIf=\"viewStatus === 'main1'\">\n      <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n            <div class=\"govuk-grid-column-two-thirds\">\n              <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n            </div>\n          </div>\n\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n            <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">CCD reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n\n            <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">Exception reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n            <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n              <hr class=\"govuk-section-break govuk-section-break--visible\">\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n                [disabled]=\"!isAddFeeBtnEnabled\"\n                [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                Take telephony payment\n              </button>\n          </div>\n\n          </div>\n          <div class=\"govuk-grid-row\">\n\n          </div>\n          <div  *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n            <div class=\"govuk-grid-row\">\n              <div class=\"govuk-grid-column-full\">\n                  <h3 class=\"heading-medium\">Fees</h3>\n              </div>\n              <div class=\"govuk-grid-column-full\">\n                <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n                    <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n                      <td class=\"govuk-table__cell\">{{fee.description}}</td>\n                      <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n                      <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell govuk-!-font-weight-bold\"  [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n                    </td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n                    <tr class=\"govuk-table__row\" >\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n              <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n                  <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n                C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n              </svg>\n              <div class=\"hmcts-banner__message\">\n                <span class=\"hmcts-banner__assistive\">information</span>\n                * These fees have already been processed offline. Check the notes in CCD for more information.\n              </div>\n            </div>\n            <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n                <!-- payments -->\n                <h3 class=\"heading-medium\">Payments</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <h3 class=\"heading-medium\">Remissions</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n          </div>\n      </div>\n\n      <div  *ngIf=\"takePayment && isTurnOff\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n        </div>\n\n        <div  class=\"govuk-grid-column-one-third\" align=\"right\" >\n          <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n        </div>\n      </div>\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n          <h3 class=\"heading-medium\">CCD reference:</h3>\n          <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n        </div>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n              </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n              <tr class=\"totalpayments govuk-table__row\">\n                <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n\n      <!-- No fees start -->\n      <div *ngIf=\"paymentGroups?.length === 0\">\n        <div class=\"govuk-grid-row\">\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Existing fees</span>\n          </div>\n\n          <div class=\"govuk-grid-column-full\">\n            <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n              </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- No fees end -->\n\n      <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n          <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n        </div>\n      </div>\n        <div class=\"govuk-grid-row\">\n\n          <!--New Code start-->\n\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Exisiting fees</span>\n          </div>\n          <div class=feeclass>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n              <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n            <tr class=\"govuk-table__row\"  *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n              <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n              <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n                {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n            </tbody>\n          </table>\n        </div>\n        </div>\n      <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n        <details>\n          <summary class=\"govuk-hidetext\">\n          <span class=\"summary\">Allocated payments and remissions</span>\n          </summary>\n\n            <div class=\"panel panel-border-narrow\">\n                <!-- payments -->\n                <span class=\"heading-medium\">Payments</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of paymentGroup.payments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <span class=\"heading-medium\">Remissions</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n      </details>\n\n\n          <div *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n                [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n                [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                  Add telephone payment\n              </button>\n          </div>\n        </div>\n      </div>\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"5\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n      </ccpay-app-unprocessed-payments>\n      <div class=\"govuk-grid-row govuk-grid__surplus-payments\"  *ngIf=\"totalRefundAmount > 0 && takePayment\">\n        <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n          <h3 class=\"heading-medium\">Surplus payments</h3>\n        </div>\n        <div class=\"govuk-grid-column-full\">\n          Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n        </div>\n      </div>\n      </div>\n\n      <div  *ngIf=\"takePayment\">\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable && !takePayment\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"1\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n        </ccpay-app-unprocessed-payments>\n      </div>\n\n      <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n        <div class=\"govuk-grid-column-full\">\n\n          <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</span>\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-13\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                    <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n                    <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n            </table>\n            <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"2\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n        </ccpay-app-unprocessed-payments>\n        </div>\n      </div>\n    </ng-container>\n\n<!--Order Case Transactions Page-->\n   <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n      <div>\n\n          <div>\n              <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n              <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\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-25\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n            <!--Payment Request-->\n          <div class=\"paymentrequest\">\n              <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</span>\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header  col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header col\" scope=\"col\"></td>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                        <ng-container *ngFor=\"let cpo of cpoDetails\">\n                          <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                            {{cpo.responsibleParty}}\n                          </ng-container>\n                        </ng-container>\n                      </td>\n                      <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                      <td  class=\"alignright\">\n\n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n                        [disabled]=\"!orderRef.orderAddBtnEnable\"\n                        [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                        {{ \"Take telephony payment\" | rpxTranslate }}\n                      </button></td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n                    <td colspan=\"6\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n                  </tbody>\n              </table>\n            </ng-container>\n              <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n                  <br/>No service requests on this case.<br/>\n              </ng-container> -->\n              <span>\n                  <br/>\n                  <a (click)=\"redirectToFeeSearchPage($event)\"\n                    [class.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request\" | rpxTranslate }}</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n              <ccpay-app-unprocessed-payments\n              *ngIf=\"isBulkScanEnable\"\n              [IS_BUTTON_ENABLE]=\"takePayment\"\n              [LEVEL]=\"3\"\n              [PAYMENTSLENGTH]=\"allPayments?.length\"\n              [ISTURNOFF]=\"isTurnOff\"\n              [ISSFENABLE]=\"isStrategicFixEnable\"\n              [PAYMENTREF]=\"paymentRef\"\n              [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n              (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n              [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n              [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n              [SELECTED_OPTION]=\"selectedOption\"\n              [DCN_NUMBER]=\"dcnNumber\"\n              [ISBSENABLE]=\"isBulkScanEnable\"\n              [CASETYPE]=\"caseType\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n              (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n              (setViewName) = \"setViewName($event)\"\n              (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n              (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n               </ccpay-app-unprocessed-payments>\n\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                    <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                        <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                        <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                        <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                        <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                        <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                        <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                          </td>\n                      </tr>\n                  </tbody>\n\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n                    <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\"\n              [isTurnOff]=\"isTurnOff\"\n              [orderParty]=\"orderParty\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n              ></ccpay-refund-status>\n          </div>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n      <div  class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n        <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n                </td>\n                <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                    <ng-container *ngFor=\"let cpo of cpoDetails\">\n                      <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                        {{cpo.responsibleParty}}\n                      </ng-container>\n                    </ng-container>\n                  </td>\n                  <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                  <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n                </td>\n                </tr>\n              </tbody>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                <tr class=\"govuk-table__row\" >\n                  <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n                </tr>\n              </tbody>\n          </table>\n        </ng-container>\n        <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n          <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n          <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n        </ng-container>\n    <!-- </div> -->\n        </div>\n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n            <ng-container >\n              <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n              </tbody>\n              </table>\n              <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"4\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n              </ccpay-app-unprocessed-payments>\n            </ng-container>\n\n          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n            <span class=\"heading-medium\"><br/>Refunds</span>\n            <ccpay-refund-status\n            [ccdCaseNumber]=\"ccdCaseNumber\"\n            [orderParty] =\"orderParty\"\n            [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n             ></ccpay-refund-status>\n        </div>\n\n   </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [paymentGroupList] = \"paymentGroups\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"serviceRequestValue\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n  ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\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</span>\n      Are you sure you want to delete this fee?\n    </strong>\n  </div>\n  <div class=\"govuk-button-grb\">\n    <form novalidate>\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n        Cancel\n      </button>\n      <button type=\"submit\" class=\"button\"\n      [disabled]=\"isRemoveBtnDisabled\"\n      [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"removeFee(feeId)\">\n        Remove\n      </button>\n    </form>\n  </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"], dependencies: [{ 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: "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(() => UnprocessedPaymentsComponent), selector: "ccpay-app-unprocessed-payments", inputs: ["FEE_RECORDS_EXISTS", "PAYMENTREF", "ISTURNOFF", "IS_BUTTON_ENABLE", "IS_OS_AMT_AVAILABLE", "ISSFENABLE", "PAYMENTSLENGTH", "LEVEL", "CCD_CASE_NUMBER", "SELECTED_OPTION", "DCN_NUMBER", "ISBSENABLE", "CASETYPE"], outputs: ["selectedUnprocessedFeeEvent", "getUnprocessedFeeCount", "setBspaymentdcn", "setViewName", "setUnProcessedPaymentServiceId", "setPaymentGroupReference"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => RefundStatusComponent), selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { 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.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i3.LowerCasePipe), name: "lowercase" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaseTransactionsComponent, decorators: [{
             type: Component,
@@ -2934,7 +2933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         CapitalizePipe,
                         FormsModule,
                         RpxTranslationModule
-                    ], standalone: true, template: "<div>\n  <main>\n    <ng-container  *ngIf=\"viewStatus === 'main1'\">\n      <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n            <div class=\"govuk-grid-column-two-thirds\">\n              <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n            </div>\n          </div>\n\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n            <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"govuk-heading-m\">CCD reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n\n            <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"govuk-heading-m\">Exception reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n            <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n              <hr class=\"govuk-section-break govuk-section-break--visible\">\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header\" scope=\"col\">Total payments</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Total remissions</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n                    <th class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</th>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n                [disabled]=\"!isAddFeeBtnEnabled\"\n                [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                Take telephony payment\n              </button>\n          </div>\n\n          </div>\n          <div class=\"govuk-grid-row\">\n\n          </div>\n          <div  *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n            <div class=\"govuk-grid-row\">\n              <div class=\"govuk-grid-column-full\">\n                  <h3 class=\"govuk-heading-m\">Fees</h3>\n              </div>\n              <div class=\"govuk-grid-column-full\">\n                <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n                    <th class=\"govuk-table__header\" scope=\"col\">Action</th>\n\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n                    <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n                      <td class=\"govuk-table__cell\">{{fee.description}}</td>\n                      <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n                      <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell govuk-!-font-weight-bold\"  [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n                    </td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n                    <tr class=\"govuk-table__row\" >\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n              <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n                  <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n                C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n              </svg>\n              <div class=\"hmcts-banner__message\">\n                <span class=\"hmcts-banner__assistive\">information</span>\n                * These fees have already been processed offline. Check the notes in CCD for more information.\n              </div>\n            </div>\n            <div class=\"govuk-inset-text panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n                <!-- payments -->\n                <h3 class=\"govuk-heading-m\">Payments</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <th class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Channel</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n                          <th class=\"govuk-table__header col-15\" scope=\"col\">Amount</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Payment status</th>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <h3 class=\"govuk-heading-m\">Remissions</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission reference</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission code</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Fee code</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission amount</th>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n          </div>\n      </div>\n\n      <div  *ngIf=\"takePayment && isTurnOff\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n        </div>\n\n        <div  class=\"govuk-grid-column-one-third\" align=\"right\" >\n          <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"govuk-button\">Add a new fee</a>\n        </div>\n      </div>\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n          <h3 class=\"govuk-heading-m\">CCD reference:</h3>\n          <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n        </div>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <th class=\"govuk-table__header\" scope=\"col\">Total payments</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Total remissions</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n              </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n              <tr class=\"totalpayments govuk-table__row\">\n                <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n\n      <!-- No fees start -->\n      <div *ngIf=\"paymentGroups?.length === 0\">\n        <div class=\"govuk-grid-row\">\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"govuk-heading-s\">Existing fees</span>\n          </div>\n\n          <div class=\"govuk-grid-column-full\">\n            <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n                <th class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</th>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n              </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- No fees end -->\n\n      <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n          <span class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n        </div>\n      </div>\n        <div class=\"govuk-grid-row\">\n\n          <!--New Code start-->\n\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"govuk-heading-s\">Exisiting fees</span>\n          </div>\n          <div class=feeclass>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n              <th class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</th>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n            <tr class=\"govuk-table__row\"  *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n              <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n              <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n                {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n            </tbody>\n          </table>\n        </div>\n        </div>\n      <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n        <details>\n          <summary class=\"govuk-hidetext\">\n          <span class=\"summary\">Allocated payments and remissions</span>\n          </summary>\n\n            <div class=\"govuk-inset-text\">\n                <!-- payments -->\n                <span class=\"govuk-heading-m\">Payments</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <th class=\"govuk-table__header\" scope=\"col\">Payment reference</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Channel</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Status</th>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of paymentGroup.payments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <span class=\"govuk-heading-m\">Remissions</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission reference</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission code</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Fee applied against</th>\n                          <th class=\"govuk-table__header\" scope=\"col\">Remission amount</th>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n      </details>\n\n\n          <div *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n                [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n                [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                  Add telephone payment\n              </button>\n          </div>\n        </div>\n      </div>\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"5\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n      </ccpay-app-unprocessed-payments>\n      <div class=\"govuk-grid-row govuk-grid__surplus-payments\"  *ngIf=\"totalRefundAmount > 0 && takePayment\">\n        <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n          <h3 class=\"govuk-heading-m\">Surplus payments</h3>\n        </div>\n        <div class=\"govuk-grid-column-full\">\n          Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n        </div>\n      </div>\n      </div>\n\n      <div  *ngIf=\"takePayment\">\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable && !takePayment\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"1\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n        </ccpay-app-unprocessed-payments>\n      </div>\n\n      <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n        <div class=\"govuk-grid-column-full\">\n\n          <span class=\"govuk-heading-m\">{{ \"Payments\" | rpxTranslate }}</span>\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header col-13\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n                    <th class=\"govuk-table__header\" scope=\"col\"></th>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                    <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n                    <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n            </table>\n            <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"2\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n        </ccpay-app-unprocessed-payments>\n        </div>\n      </div>\n    </ng-container>\n\n<!--Order Case Transactions Page-->\n   <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n      <div>\n\n          <div>\n              <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n              <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div>\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header col-25\" scope=\"col\">Total payments</th>\n                    <th class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</th>\n                    <th class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</th>\n                    <th class=\"govuk-table__header col-20\" scope=\"col\">Amount due</th>\n                    <th class=\"govuk-table__header col-20\" scope=\"col\">Over payment</th>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n            <!--Payment Request-->\n          <div class=\"paymentrequest\">\n              <span class=\"govuk-heading-m\">{{ \"Service requests\" | rpxTranslate }}</span>\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header  col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header  col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header  col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header  col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header  col-9\" scope=\"col\"></th>\n                    <th class=\"govuk-table__header col\" scope=\"col\"></th>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n                        <ng-container *ngFor=\"let cpo of cpoDetails\">\n                          <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                            {{cpo.responsibleParty}}\n                          </ng-container>\n                        </ng-container>\n                      </td>\n                      <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                      <td  class=\"alignright\">\n\n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n                        [disabled]=\"!orderRef.orderAddBtnEnable\"\n                        [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                        {{ \"Take telephony payment\" | rpxTranslate }}\n                      </button></td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n                    <td colspan=\"6\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n                  </tbody>\n              </table>\n            </ng-container>\n              <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n                  <br/>No service requests on this case.<br/>\n              </ng-container> -->\n              <span>\n                  <br/>\n                  <a (click)=\"redirectToFeeSearchPage($event)\"\n                    [class.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request\" | rpxTranslate }}</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"govuk-heading-m\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n              <ccpay-app-unprocessed-payments\n              *ngIf=\"isBulkScanEnable\"\n              [IS_BUTTON_ENABLE]=\"takePayment\"\n              [LEVEL]=\"3\"\n              [PAYMENTSLENGTH]=\"allPayments?.length\"\n              [ISTURNOFF]=\"isTurnOff\"\n              [ISSFENABLE]=\"isStrategicFixEnable\"\n              [PAYMENTREF]=\"paymentRef\"\n              [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n              (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n              [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n              [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n              [SELECTED_OPTION]=\"selectedOption\"\n              [DCN_NUMBER]=\"dcnNumber\"\n              [ISBSENABLE]=\"isBulkScanEnable\"\n              [CASETYPE]=\"caseType\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n              (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n              (setViewName) = \"setViewName($event)\"\n              (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n              (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n               </ccpay-app-unprocessed-payments>\n\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                    <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                        <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                        <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                        <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                        <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                        <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                        <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                          </td>\n                      </tr>\n                  </tbody>\n\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n                    <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"govuk-heading-m\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\"\n              [isTurnOff]=\"isTurnOff\"\n              [orderParty]=\"orderParty\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n              ></ccpay-refund-status>\n          </div>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n      <div  class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n        <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"govuk-heading-m\">Service requests</span> -->\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n                <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n                <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</th>\n                <th class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n                </th>\n                <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n                <th class=\"govuk-table__header\" scope=\"col\"></th>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n                    <ng-container *ngFor=\"let cpo of cpoDetails\">\n                      <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                        {{cpo.responsibleParty}}\n                      </ng-container>\n                    </ng-container>\n                  </td>\n                  <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                  <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n                </td>\n                </tr>\n              </tbody>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                <tr class=\"govuk-table__row\" >\n                  <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n                </tr>\n              </tbody>\n          </table>\n        </ng-container>\n        <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n          <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n          <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n        </ng-container>\n    <!-- </div> -->\n        </div>\n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"govuk-heading-m\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n            <ng-container >\n              <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</th>\n                    <th class=\"govuk-table__header col-13\" scope=\"col\"></th>\n                    <th class=\"govuk-table__header\" scope=\"col\"></th>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n              </tbody>\n              </table>\n              <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"4\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n              </ccpay-app-unprocessed-payments>\n            </ng-container>\n\n          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n            <span class=\"govuk-heading-m\"><br/>Refunds</span>\n            <ccpay-refund-status\n            [ccdCaseNumber]=\"ccdCaseNumber\"\n            [orderParty] =\"orderParty\"\n            [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n             ></ccpay-refund-status>\n        </div>\n\n   </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [paymentGroupList] = \"paymentGroups\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"serviceRequestValue\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n  ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n  <div class=\"govuk-warning-text\">\n    <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n    <strong class=\"govuk-warning-text__text\">\n      <span class=\"govuk-visually-hidden\">Warning</span>\n      Are you sure you want to delete this fee?\n    </strong>\n  </div>\n  <div class=\"govuk-button-grb\">\n    <form novalidate>\n      <button type=\"submit\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n        Cancel\n      </button>\n      <button type=\"submit\" class=\"govuk-button\"\n      [disabled]=\"isRemoveBtnDisabled\"\n      [ngClass]='isRemoveBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'\n      (click)=\"removeFee(feeId)\">\n        Remove\n      </button>\n    </form>\n  </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"] }]
+                    ], standalone: true, template: "<div>\n  <main>\n    <ng-container  *ngIf=\"viewStatus === 'main1'\">\n      <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n            <div class=\"govuk-grid-column-two-thirds\">\n              <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n            </div>\n          </div>\n\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n            <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">CCD reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n\n            <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">Exception reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n            <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n              <hr class=\"govuk-section-break govuk-section-break--visible\">\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n                [disabled]=\"!isAddFeeBtnEnabled\"\n                [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                Take telephony payment\n              </button>\n          </div>\n\n          </div>\n          <div class=\"govuk-grid-row\">\n\n          </div>\n          <div  *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n            <div class=\"govuk-grid-row\">\n              <div class=\"govuk-grid-column-full\">\n                  <h3 class=\"heading-medium\">Fees</h3>\n              </div>\n              <div class=\"govuk-grid-column-full\">\n                <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n                    <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n                      <td class=\"govuk-table__cell\">{{fee.description}}</td>\n                      <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n                      <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell govuk-!-font-weight-bold\"  [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n                    </td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n                    <tr class=\"govuk-table__row\" >\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n              <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n                  <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n                C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n              </svg>\n              <div class=\"hmcts-banner__message\">\n                <span class=\"hmcts-banner__assistive\">information</span>\n                * These fees have already been processed offline. Check the notes in CCD for more information.\n              </div>\n            </div>\n            <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n                <!-- payments -->\n                <h3 class=\"heading-medium\">Payments</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <h3 class=\"heading-medium\">Remissions</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n          </div>\n      </div>\n\n      <div  *ngIf=\"takePayment && isTurnOff\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n        </div>\n\n        <div  class=\"govuk-grid-column-one-third\" align=\"right\" >\n          <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n        </div>\n      </div>\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n          <h3 class=\"heading-medium\">CCD reference:</h3>\n          <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n        </div>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n              </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n              <tr class=\"totalpayments govuk-table__row\">\n                <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n\n      <!-- No fees start -->\n      <div *ngIf=\"paymentGroups?.length === 0\">\n        <div class=\"govuk-grid-row\">\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Existing fees</span>\n          </div>\n\n          <div class=\"govuk-grid-column-full\">\n            <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n              </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- No fees end -->\n\n      <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n          <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n        </div>\n      </div>\n        <div class=\"govuk-grid-row\">\n\n          <!--New Code start-->\n\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Exisiting fees</span>\n          </div>\n          <div class=feeclass>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n              <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n            <tr class=\"govuk-table__row\"  *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n              <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n              <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n                {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n            </tbody>\n          </table>\n        </div>\n        </div>\n      <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n        <details>\n          <summary class=\"govuk-hidetext\">\n          <span class=\"summary\">Allocated payments and remissions</span>\n          </summary>\n\n            <div class=\"panel panel-border-narrow\">\n                <!-- payments -->\n                <span class=\"heading-medium\">Payments</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of paymentGroup.payments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <span class=\"heading-medium\">Remissions</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n      </details>\n\n\n          <div *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n                [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n                [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                  Add telephone payment\n              </button>\n          </div>\n        </div>\n      </div>\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"5\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n      </ccpay-app-unprocessed-payments>\n      <div class=\"govuk-grid-row govuk-grid__surplus-payments\"  *ngIf=\"totalRefundAmount > 0 && takePayment\">\n        <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n          <h3 class=\"heading-medium\">Surplus payments</h3>\n        </div>\n        <div class=\"govuk-grid-column-full\">\n          Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n        </div>\n      </div>\n      </div>\n\n      <div  *ngIf=\"takePayment\">\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable && !takePayment\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"1\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n        </ccpay-app-unprocessed-payments>\n      </div>\n\n      <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n        <div class=\"govuk-grid-column-full\">\n\n          <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</span>\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-13\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                    <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n                    <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n            </table>\n            <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"2\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n        </ccpay-app-unprocessed-payments>\n        </div>\n      </div>\n    </ng-container>\n\n<!--Order Case Transactions Page-->\n   <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n      <div>\n\n          <div>\n              <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n              <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\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-25\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n            <!--Payment Request-->\n          <div class=\"paymentrequest\">\n              <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</span>\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header  col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header col\" scope=\"col\"></td>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                        <ng-container *ngFor=\"let cpo of cpoDetails\">\n                          <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                            {{cpo.responsibleParty}}\n                          </ng-container>\n                        </ng-container>\n                      </td>\n                      <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                      <td  class=\"alignright\">\n\n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n                        [disabled]=\"!orderRef.orderAddBtnEnable\"\n                        [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                        {{ \"Take telephony payment\" | rpxTranslate }}\n                      </button></td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n                    <td colspan=\"6\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n                  </tbody>\n              </table>\n            </ng-container>\n              <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n                  <br/>No service requests on this case.<br/>\n              </ng-container> -->\n              <span>\n                  <br/>\n                  <a (click)=\"redirectToFeeSearchPage($event)\"\n                    [class.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request\" | rpxTranslate }}</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n              <ccpay-app-unprocessed-payments\n              *ngIf=\"isBulkScanEnable\"\n              [IS_BUTTON_ENABLE]=\"takePayment\"\n              [LEVEL]=\"3\"\n              [PAYMENTSLENGTH]=\"allPayments?.length\"\n              [ISTURNOFF]=\"isTurnOff\"\n              [ISSFENABLE]=\"isStrategicFixEnable\"\n              [PAYMENTREF]=\"paymentRef\"\n              [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n              (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n              [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n              [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n              [SELECTED_OPTION]=\"selectedOption\"\n              [DCN_NUMBER]=\"dcnNumber\"\n              [ISBSENABLE]=\"isBulkScanEnable\"\n              [CASETYPE]=\"caseType\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n              (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n              (setViewName) = \"setViewName($event)\"\n              (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n              (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n               </ccpay-app-unprocessed-payments>\n\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                    <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                        <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                        <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                        <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                        <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                        <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                        <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                          </td>\n                      </tr>\n                  </tbody>\n\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n                    <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\"\n              [isTurnOff]=\"isTurnOff\"\n              [orderParty]=\"orderParty\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n              ></ccpay-refund-status>\n          </div>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n      <div  class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n        <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n                </td>\n                <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                    <ng-container *ngFor=\"let cpo of cpoDetails\">\n                      <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                        {{cpo.responsibleParty}}\n                      </ng-container>\n                    </ng-container>\n                  </td>\n                  <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                  <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n                </td>\n                </tr>\n              </tbody>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                <tr class=\"govuk-table__row\" >\n                  <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n                </tr>\n              </tbody>\n          </table>\n        </ng-container>\n        <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n          <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n          <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n        </ng-container>\n    <!-- </div> -->\n        </div>\n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n            <ng-container >\n              <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n              </tbody>\n              </table>\n              <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"4\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($event)\">\n              </ccpay-app-unprocessed-payments>\n            </ng-container>\n\n          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n            <span class=\"heading-medium\"><br/>Refunds</span>\n            <ccpay-refund-status\n            [ccdCaseNumber]=\"ccdCaseNumber\"\n            [orderParty] =\"orderParty\"\n            [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n             ></ccpay-refund-status>\n        </div>\n\n   </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [paymentGroupList] = \"paymentGroups\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"serviceRequestValue\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n  ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\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</span>\n      Are you sure you want to delete this fee?\n    </strong>\n  </div>\n  <div class=\"govuk-button-grb\">\n    <form novalidate>\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n        Cancel\n      </button>\n      <button type=\"submit\" class=\"button\"\n      [disabled]=\"isRemoveBtnDisabled\"\n      [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"removeFee(feeId)\">\n        Remove\n      </button>\n    </form>\n  </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: PaymentViewService }, { type: BulkScaningPaymentService }, { type: CaseTransactionsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -3374,7 +3373,7 @@ class ServiceRequestComponent {
         return this.LOGGEDINUSERROLES.includes('payments');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ServiceRequestComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }, { token: OrderslistService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ServiceRequestComponent, isStandalone: true, selector: "ccpay-service-request", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", viewStatus: "viewStatus", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal", paymentGroupList: "paymentGroupList", takePayment: "takePayment", ccdCaseNumber: "ccdCaseNumber", isServiceRequest: "isServiceRequest" }, outputs: { goToServiceRquestComponent: "goToServiceRquestComponent" }, providers: [{ provide: 'SERVICE_REQUEST', useExisting: forwardRef(() => ServiceRequestComponent) }], ngImport: i0, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n      </ol>\n    </div>\n  <div class=\"govuk-grid-column-full\">\n      <div class=\"column\">\n        <h1 class=\"govuk-heading-l govuk-!-margin-top-0\">{{ \"Service request\" | rpxTranslate }}</h1>\n      </div>\n      <table >\n          <tbody>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n              <td>{{orderRef}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n              <td>{{ orderStatus | rpxTranslate }}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n              <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n              <td>{{orderParty}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n              <td>{{ orderCCDEvent | rpxTranslate}}</td>\n            </tr>\n          </tbody>\n        </table>\n  </div>\n\n  <div class=\"govuk-grid-column-full order-class\">\n      <div class=\"column\">\n        <table class=\"govuk-table \">\n          <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</th>\n            <th  class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></th>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n              <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\"   (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</button>\n              </td>\n\n            </tr>\n          </tbody>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n              <td class=\"govuk-table__cell alignleft\" colspan=\"7\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">\n          <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</th>\n           <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</th>\n           <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</th>\n           <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</th>\n           <th  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></th>\n         </tr>\n     </thead>\n     <tbody  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n           </td>\n           <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n\n         </td> -->\n         </tr>\n     </tbody>\n\n\n   </table>\n   <div *ngIf=\"order.remissions?.length === 0\">\n    <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n   <div class=\"summarypagealign\">\n      <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n  </div>\n  <div class=\"summarypagealign\">\n        <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n    </div>\n  </div>\n\n</ng-container>\n\n   <!--Payments-->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n      <h3 class=\"govuk-heading-m\">{{ \"Payments\" | rpxTranslate }}</h3>\n   <table class=\"govuk-table \">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header col-25\" scope=\"col\"></th>\n            <th class=\"govuk-table__header\" scope=\"col\">{{ \"Date created\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\"></th>\n          </tr>\n      </thead>\n      <tbody  *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\"  *ngFor=\"let payment of order.payments\">\n            <td class=\"govuk-table__cell whitespace-inherit\">\n              <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n            <td class=\"govuk-table__cell alignright\">\n              <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\"   (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n            </td>\n            <!-- <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n            </td> -->\n          </tr>\n      </tbody>\n    </table>\n\n  <div *ngIf=\"order.payments === undefined || order.payments === null\">\n      <!-- <h3 class=\"govuk-heading-m mar-17\">Payments</h3> -->\n            <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n  </div>\n</div>\n</ng-container>\n  <div>\n      <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n  </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\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[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-visually-hidden\">{{ \"Warning\" | rpxTranslate }}</span>\n    {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\n  </strong>\n</div>\n<div class=\"govuk-button-grb\">\n  <form novalidate>\n    <button type=\"submit\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\" class=\"govuk-button\"\n    [disabled]=\"isRemoveBtnDisabled\"\n    [ngClass]='isRemoveBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'\n    (click)=\"removeFee(feeId)\">\n      {{ \"Remove\" | rpxTranslate }}\n    </button>\n  </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n  <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n    <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n    <h1 class=\"govuk-heading-m\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <div class=\"govuk-form-group\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-heading-m\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n      </legend>\n      <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n          <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"where-do-you-live\">\n            {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n          <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"where-do-you-live-2\">\n            {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n          </label>\n        </div>\n      </div>\n        <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-!-font-size-19\"\n        (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n        <button\n        (click)=\"continuePayment(paymentGroupList)\"\n        [disabled]=\"isContinueBtnDisabled\"\n        [ngClass]='isContinueBtnDisabled ? \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\" : \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\"'\n        class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n    </fieldset>\n  </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n    <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-!-font-size-19\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event)\"\n  (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n    <div class=\"govuk-warning-text\">\n\n        <h1 class=\"govuk-heading-l\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table govuk-table-mb\">\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\">{{paymentGroupList.payments[0].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\">{{paymentGroupList.payments[0].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\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_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\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{getOverPaymentValue() | 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\">{{ \"Refund reason\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</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</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</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</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\"\n    [payment]=\"paymentGroupList.payments[0]\"\n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR037'\"\n    [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n    <button type=\"submit\" class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-!-font-size-19\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n    <button type=\"submit\"\n    [ngClass]='isContinueBtnDisabled ? \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\" : \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\"'\n    (click)=\"processRefund()\">\n      Submit refund\n    </button>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-!-font-size-19\" data-module=\"govuk-button\">\n            Cancel\n        </a>\n    </p>\n\n  </ng-container>\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n    <div class=\"govuk-grid-row pagesize\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel_service_request_title\">\n            Refund submitted\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n        </p>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        Return to case\n    </a>\n      </p>\n      </div>\n    </div>\n\n  </ng-container>\n  </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_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}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { 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: "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: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { 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(() => CaseTransactionsComponent), selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ServiceRequestComponent, isStandalone: true, selector: "ccpay-service-request", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", viewStatus: "viewStatus", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal", paymentGroupList: "paymentGroupList", takePayment: "takePayment", ccdCaseNumber: "ccdCaseNumber", isServiceRequest: "isServiceRequest" }, outputs: { goToServiceRquestComponent: "goToServiceRquestComponent" }, providers: [{ provide: 'SERVICE_REQUEST', useExisting: forwardRef(() => ServiceRequestComponent) }], ngImport: i0, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n      </ol>\n    </div>\n  <div class=\"govuk-grid-column-full\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Service request\" | rpxTranslate }}</h1>\n      </div>\n      <table >\n          <tbody>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n              <td>{{orderRef}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n              <td>{{ orderStatus | rpxTranslate }}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n              <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n              <td>{{orderParty}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n              <td>{{ orderCCDEvent | rpxTranslate}}</td>\n            </tr>\n          </tbody>\n        </table>\n  </div>\n\n  <div class=\"govuk-grid-column-full order-class\">\n      <div class=\"column\">\n        <table class=\"govuk-table \">\n          <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</td>\n            <td  class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n              <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\"   (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</button>\n              </td>\n\n            </tr>\n          </tbody>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n              <td class=\"govuk-table__cell alignleft\" colspan=\"7\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">\n          <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n           <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n           <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n         </tr>\n     </thead>\n     <tbody  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n           </td>\n           <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n\n         </td> -->\n         </tr>\n     </tbody>\n\n\n   </table>\n   <div *ngIf=\"order.remissions?.length === 0\">\n    <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n   <div class=\"summarypagealign\">\n      <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n  </div>\n  <div class=\"summarypagealign\">\n        <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n    </div>\n  </div>\n\n</ng-container>\n\n   <!--Payments-->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n      <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</h3>\n   <table class=\"govuk-table \">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-25\" scope=\"col\"></td>\n            <td class=\"govuk-table__header\" scope=\"col\">{{ \"Date created\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody  *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\"  *ngFor=\"let payment of order.payments\">\n            <td class=\"govuk-table__cell whitespace-inherit\">\n              <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n            <td class=\"govuk-table__cell alignright\">\n              <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\"   (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n            </td>\n            <!-- <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n            </td> -->\n          </tr>\n      </tbody>\n    </table>\n\n  <div *ngIf=\"order.payments === undefined || order.payments === null\">\n      <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n            <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n  </div>\n</div>\n</ng-container>\n  <div>\n      <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n  </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\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[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\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 delete this fee?\" | rpxTranslate }}\n  </strong>\n</div>\n<div class=\"govuk-button-grb\">\n  <form novalidate>\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\" class=\"button\"\n    [disabled]=\"isRemoveBtnDisabled\"\n    [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"removeFee(feeId)\">\n      {{ \"Remove\" | rpxTranslate }}\n    </button>\n  </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n  <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n    <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <div class=\"govuk-form-group\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n      </legend>\n      <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n          <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n            {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n          <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n            {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n          </label>\n        </div>\n      </div>\n        <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n        (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n        <button\n        (click)=\"continuePayment(paymentGroupList)\"\n        [disabled]=\"isContinueBtnDisabled\"\n        [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n        class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n    </fieldset>\n  </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n    <h1 class=\"govuk-heading-l\">{{ \"Issue 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 }}: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event)\"\n  (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\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 govuk-table-mb\">\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\">{{paymentGroupList.payments[0].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\">{{paymentGroupList.payments[0].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\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_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\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{getOverPaymentValue() | 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\">{{ \"Refund reason\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</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</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</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</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\"\n    [payment]=\"paymentGroupList.payments[0]\"\n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR037'\"\n    [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n    <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n    <button type=\"submit\"\n    [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n    (click)=\"processRefund()\">\n      Submit refund\n    </button>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n            Cancel\n        </a>\n    </p>\n\n  </ng-container>\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n    <div class=\"govuk-grid-row pagesize\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel_service_request_title\">\n            Refund submitted\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n        </p>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        Return to case\n    </a>\n      </p>\n      </div>\n    </div>\n\n  </ng-container>\n  </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.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}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_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}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { 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: "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: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { 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(() => CaseTransactionsComponent), selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ServiceRequestComponent, decorators: [{
             type: Component,
@@ -3388,7 +3387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         CcdHyphensPipe,
                         CapitalizePipe,
                         RpxTranslationModule
-                    ], standalone: true, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n      </ol>\n    </div>\n  <div class=\"govuk-grid-column-full\">\n      <div class=\"column\">\n        <h1 class=\"govuk-heading-l govuk-!-margin-top-0\">{{ \"Service request\" | rpxTranslate }}</h1>\n      </div>\n      <table >\n          <tbody>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n              <td>{{orderRef}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n              <td>{{ orderStatus | rpxTranslate }}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n              <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n              <td>{{orderParty}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"govuk-!-font-weight-bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n              <td>{{ orderCCDEvent | rpxTranslate}}</td>\n            </tr>\n          </tbody>\n        </table>\n  </div>\n\n  <div class=\"govuk-grid-column-full order-class\">\n      <div class=\"column\">\n        <table class=\"govuk-table \">\n          <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</th>\n            <th  class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></th>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n              <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\"   (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</button>\n              </td>\n\n            </tr>\n          </tbody>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n              <td class=\"govuk-table__cell alignleft\" colspan=\"7\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">\n          <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</th>\n           <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</th>\n           <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</th>\n           <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</th>\n           <th  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></th>\n         </tr>\n     </thead>\n     <tbody  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n           </td>\n           <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n\n         </td> -->\n         </tr>\n     </tbody>\n\n\n   </table>\n   <div *ngIf=\"order.remissions?.length === 0\">\n    <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n   <div class=\"summarypagealign\">\n      <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n  </div>\n  <div class=\"summarypagealign\">\n        <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n    </div>\n  </div>\n\n</ng-container>\n\n   <!--Payments-->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n      <h3 class=\"govuk-heading-m\">{{ \"Payments\" | rpxTranslate }}</h3>\n   <table class=\"govuk-table \">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header col-25\" scope=\"col\"></th>\n            <th class=\"govuk-table__header\" scope=\"col\">{{ \"Date created\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\"></th>\n          </tr>\n      </thead>\n      <tbody  *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\"  *ngFor=\"let payment of order.payments\">\n            <td class=\"govuk-table__cell whitespace-inherit\">\n              <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n            <td class=\"govuk-table__cell alignright\">\n              <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\"   (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n            </td>\n            <!-- <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n            </td> -->\n          </tr>\n      </tbody>\n    </table>\n\n  <div *ngIf=\"order.payments === undefined || order.payments === null\">\n      <!-- <h3 class=\"govuk-heading-m mar-17\">Payments</h3> -->\n            <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n  </div>\n</div>\n</ng-container>\n  <div>\n      <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n  </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\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[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-visually-hidden\">{{ \"Warning\" | rpxTranslate }}</span>\n    {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\n  </strong>\n</div>\n<div class=\"govuk-button-grb\">\n  <form novalidate>\n    <button type=\"submit\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\" class=\"govuk-button\"\n    [disabled]=\"isRemoveBtnDisabled\"\n    [ngClass]='isRemoveBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'\n    (click)=\"removeFee(feeId)\">\n      {{ \"Remove\" | rpxTranslate }}\n    </button>\n  </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n  <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n    <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n    <h1 class=\"govuk-heading-m\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <div class=\"govuk-form-group\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-heading-m\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n      </legend>\n      <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n          <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"where-do-you-live\">\n            {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n          <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"where-do-you-live-2\">\n            {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n          </label>\n        </div>\n      </div>\n        <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-!-font-size-19\"\n        (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n        <button\n        (click)=\"continuePayment(paymentGroupList)\"\n        [disabled]=\"isContinueBtnDisabled\"\n        [ngClass]='isContinueBtnDisabled ? \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\" : \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\"'\n        class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n    </fieldset>\n  </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n    <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m govuk-!-font-size-19\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event)\"\n  (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n    <div class=\"govuk-warning-text\">\n\n        <h1 class=\"govuk-heading-l\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n    </div>\n    <table class=\"govuk-table govuk-table-mb\">\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\">{{paymentGroupList.payments[0].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\">{{paymentGroupList.payments[0].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\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_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\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{getOverPaymentValue() | 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\">{{ \"Refund reason\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</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</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</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</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\"\n    [payment]=\"paymentGroupList.payments[0]\"\n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR037'\"\n    [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n    <button type=\"submit\" class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-!-font-size-19\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n    <button type=\"submit\"\n    [ngClass]='isContinueBtnDisabled ? \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\" : \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\"'\n    (click)=\"processRefund()\">\n      Submit refund\n    </button>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-!-font-size-19\" data-module=\"govuk-button\">\n            Cancel\n        </a>\n    </p>\n\n  </ng-container>\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n    <div class=\"govuk-grid-row pagesize\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel_service_request_title\">\n            Refund submitted\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n        </p>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        Return to case\n    </a>\n      </p>\n      </div>\n    </div>\n\n  </ng-container>\n  </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_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}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"] }]
+                    ], standalone: true, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n      </ol>\n    </div>\n  <div class=\"govuk-grid-column-full\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Service request\" | rpxTranslate }}</h1>\n      </div>\n      <table >\n          <tbody>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n              <td>{{orderRef}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n              <td>{{ orderStatus | rpxTranslate }}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n              <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n              <td>{{orderParty}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n              <td>{{ orderCCDEvent | rpxTranslate}}</td>\n            </tr>\n          </tbody>\n        </table>\n  </div>\n\n  <div class=\"govuk-grid-column-full order-class\">\n      <div class=\"column\">\n        <table class=\"govuk-table \">\n          <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</td>\n            <td  class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n              <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\"   (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</button>\n              </td>\n\n            </tr>\n          </tbody>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n              <td class=\"govuk-table__cell alignleft\" colspan=\"7\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">\n          <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n           <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n           <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n         </tr>\n     </thead>\n     <tbody  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n           </td>\n           <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n\n         </td> -->\n         </tr>\n     </tbody>\n\n\n   </table>\n   <div *ngIf=\"order.remissions?.length === 0\">\n    <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n   <div class=\"summarypagealign\">\n      <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n  </div>\n  <div class=\"summarypagealign\">\n        <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n    </div>\n  </div>\n\n</ng-container>\n\n   <!--Payments-->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n      <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</h3>\n   <table class=\"govuk-table \">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-25\" scope=\"col\"></td>\n            <td class=\"govuk-table__header\" scope=\"col\">{{ \"Date created\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody  *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\"  *ngFor=\"let payment of order.payments\">\n            <td class=\"govuk-table__cell whitespace-inherit\">\n              <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n            <td class=\"govuk-table__cell alignright\">\n              <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\"   (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n            </td>\n            <!-- <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n            </td> -->\n          </tr>\n      </tbody>\n    </table>\n\n  <div *ngIf=\"order.payments === undefined || order.payments === null\">\n      <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n            <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n  </div>\n</div>\n</ng-container>\n  <div>\n      <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n  </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\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[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\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 delete this fee?\" | rpxTranslate }}\n  </strong>\n</div>\n<div class=\"govuk-button-grb\">\n  <form novalidate>\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\" class=\"button\"\n    [disabled]=\"isRemoveBtnDisabled\"\n    [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"removeFee(feeId)\">\n      {{ \"Remove\" | rpxTranslate }}\n    </button>\n  </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n  <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n    <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n    <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <div class=\"govuk-form-group\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n      </legend>\n      <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n          <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n            {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n          <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n            {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n          </label>\n        </div>\n      </div>\n        <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n        (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n        <button\n        (click)=\"continuePayment(paymentGroupList)\"\n        [disabled]=\"isContinueBtnDisabled\"\n        [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n        class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n    </fieldset>\n  </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n    <h1 class=\"govuk-heading-l\">{{ \"Issue 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 }}: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event)\"\n  (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\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 govuk-table-mb\">\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\">{{paymentGroupList.payments[0].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\">{{paymentGroupList.payments[0].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\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_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\">{{ \"Refund amount\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{getOverPaymentValue() | 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\">{{ \"Refund reason\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</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</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</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</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\"\n    [payment]=\"paymentGroupList.payments[0]\"\n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR037'\"\n    [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n    <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n    <button type=\"submit\"\n    [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n    (click)=\"processRefund()\">\n      Submit refund\n    </button>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n            Cancel\n        </a>\n    </p>\n\n  </ng-container>\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n    <div class=\"govuk-grid-row pagesize\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel_service_request_title\">\n            Refund submitted\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n        </p>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        Return to case\n    </a>\n      </p>\n      </div>\n    </div>\n\n  </ng-container>\n  </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.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}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_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}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -4605,7 +4604,7 @@ class AddRemissionComponent {
         return Number(totalRefundAmount.toFixed(2));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", 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: "20.3.18", 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", confirmRemissionEvent: "confirmRemissionEvent", remissionAdded: "remissionAdded", 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=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\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>\n  <div *ngIf=\"errorMsg.length > 0\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\n          {{ \"Error in processing the request\" | rpxTranslate }}\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          <ul class=\"govuk-list govuk-error-summary__list\">\n            <li *ngFor=\"let err of errorMsg\">{{ err | rpxTranslate }}</li>\n          </ul>\n        </div>\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=\"govuk-heading-l\">{{ \"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=\"govuk-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>\n              <div class=\"govuk-input__wrapper\">\n                <div class=\"govuk-input__prefix\" aria-hidden=\"true\">\u00A3</div>\n                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n              </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\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n              </p>\n            </div>\n          </div>\n        </form>\n        <button class=\"govuk-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-visually-hidden\">{{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'\n    (click)=\"confirmRemission($event)\">\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=\"govuk-heading-l\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"govuk-heading-m\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n    <h1 class=\"govuk-heading-l\">{{ \"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=\"govuk-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=\"govuk-heading-l\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"govuk-heading-m\">#{{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=\"govuk-heading-m\">\n                              {{ \"Enter the HWF or remission amount\" | rpxTranslate }}\n                          </h1>\n                          <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"govuk-heading-m\">\n                              {{ \"Enter the remission amount\" | rpxTranslate }}\n                          </h1>\n                          <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"govuk-heading-m\">\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=\"govuk-input__wrapper\">\n\n                            <div class=\"govuk-input__prefix\" aria-hidden=\"true\">\u00A3</div>\n                            <input class=\"govuk-input govuk-input--width-10\" [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=\"govuk-heading-l\"> {{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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 ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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-!-font-size-19\">{{ \"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=\"govuk-heading-l\"> {{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <h3 class=\"govuk-heading-s\">{{ \"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            <th class=\"govuk-table__header  col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Remission amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\"></th>\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                  <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\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ this.getRemissionsHwfAmount(fee.controls['code'].value)}}</div>\n              {{ this.getRemissionsHwfAmount(fee.controls['code'].value) | currency:'GBP':'symbol-narrow':'1.2-2' }}\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 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 center\" scope=\"row\">\n                <div  [formGroupName]=\"i\"  class=\"govuk-input__wrapper\">\n                  <div class=\"govuk-input__prefix\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input app-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            </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\n            <td class=\"govuk-table__cell whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeRemission_{{fee.id}}\">{{ this.getRemissionValueForFullyRefund()}}</div>\n              {{ this.getRemissionsHwfAmount(fee.code) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n\n            </td>\n\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=\"govuk-input__wrapper\">\n\n                  <div class=\"govuk-input__prefix\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input app-input--width-small\" 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=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h1 class=\"govuk-heading-m\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint\" *ngIf=\"payment\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <span id=\"how-contacted-conditional-hint\" *ngIf=\"refundPaymentReference\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n    </span>\n    <h1 class=\"govuk-heading-l\">{{ \"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 govuk-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]=\"{'govuk-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]=\"{'govuk-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-!-font-size-19\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\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=\"govuk-heading-l\"> {{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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-!-font-size-19\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\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=\"govuk-heading-l\"> {{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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 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 .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{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.app-input--width-small{max-width:110px}.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}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}\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: "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: "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(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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", confirmRemissionEvent: "confirmRemissionEvent", remissionAdded: "remissionAdded", 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($event)\">\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\">{{ \"Remission amount\" | 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                  <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\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ this.getRemissionsHwfAmount(fee.controls['code'].value)}}</div>\n              {{ this.getRemissionsHwfAmount(fee.controls['code'].value) | currency:'GBP':'symbol-narrow':'1.2-2' }}\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 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 center\" scope=\"row\">\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            </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\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeRemission_{{fee.id}}\">{{ this.getRemissionValueForFullyRefund()}}</div>\n              {{ this.getRemissionsHwfAmount(fee.code) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n\n            </td>\n\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: "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: "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(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddRemissionComponent, decorators: [{
             type: Component,
@@ -4620,7 +4619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         RpxTranslationModule
-                    ], standalone: true, template: "<div class=\"add-remission pagesize\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\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>\n  <div *ngIf=\"errorMsg.length > 0\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\n          {{ \"Error in processing the request\" | rpxTranslate }}\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          <ul class=\"govuk-list govuk-error-summary__list\">\n            <li *ngFor=\"let err of errorMsg\">{{ err | rpxTranslate }}</li>\n          </ul>\n        </div>\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=\"govuk-heading-l\">{{ \"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=\"govuk-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>\n              <div class=\"govuk-input__wrapper\">\n                <div class=\"govuk-input__prefix\" aria-hidden=\"true\">\u00A3</div>\n                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n              </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\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n              </p>\n            </div>\n          </div>\n        </form>\n        <button class=\"govuk-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-visually-hidden\">{{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n      {{ \"Cancel\" | rpxTranslate }}\n    </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'\n    (click)=\"confirmRemission($event)\">\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=\"govuk-heading-l\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"govuk-heading-m\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n    <h1 class=\"govuk-heading-l\">{{ \"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=\"govuk-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=\"govuk-heading-l\">{{ \"Process remission\" | rpxTranslate }}</h1>\n    <h1 class=\"govuk-heading-m\">#{{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=\"govuk-heading-m\">\n                              {{ \"Enter the HWF or remission amount\" | rpxTranslate }}\n                          </h1>\n                          <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"govuk-heading-m\">\n                              {{ \"Enter the remission amount\" | rpxTranslate }}\n                          </h1>\n                          <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"govuk-heading-m\">\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=\"govuk-input__wrapper\">\n\n                            <div class=\"govuk-input__prefix\" aria-hidden=\"true\">\u00A3</div>\n                            <input class=\"govuk-input govuk-input--width-10\" [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=\"govuk-heading-l\"> {{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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 ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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-!-font-size-19\">{{ \"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=\"govuk-heading-l\"> {{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h2 class=\"govuk-heading-m\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <h3 class=\"govuk-heading-s\">{{ \"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            <th class=\"govuk-table__header  col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Remission amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header\" scope=\"col\"></th>\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                  <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\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ this.getRemissionsHwfAmount(fee.controls['code'].value)}}</div>\n              {{ this.getRemissionsHwfAmount(fee.controls['code'].value) | currency:'GBP':'symbol-narrow':'1.2-2' }}\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 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 center\" scope=\"row\">\n                <div  [formGroupName]=\"i\"  class=\"govuk-input__wrapper\">\n                  <div class=\"govuk-input__prefix\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input app-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            </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\n            <td class=\"govuk-table__cell whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeRemission_{{fee.id}}\">{{ this.getRemissionValueForFullyRefund()}}</div>\n              {{ this.getRemissionsHwfAmount(fee.code) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n\n            </td>\n\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=\"govuk-input__wrapper\">\n\n                  <div class=\"govuk-input__prefix\" aria-hidden=\"true\">\u00A3</div>\n                  <input disabled=\"disabled\" class=\"govuk-input app-input--width-small\" 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=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n    <h1 class=\"govuk-heading-m\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint\" *ngIf=\"payment\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n    </span>\n    <span id=\"how-contacted-conditional-hint\" *ngIf=\"refundPaymentReference\" class=\"govuk-hint govuk-!-font-size-19\">\n      {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n    </span>\n    <h1 class=\"govuk-heading-l\">{{ \"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 govuk-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]=\"{'govuk-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]=\"{'govuk-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-!-font-size-19\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\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=\"govuk-heading-l\"> {{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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-!-font-size-19\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\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=\"govuk-heading-l\"> {{ \"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=\"govuk-button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n    <button type=\"submit\"\n    [disabled]=\"isConfirmationBtnDisabled\"\n    [ngClass]='isConfirmationBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-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 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 .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{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.app-input--width-small{max-width:110px}.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}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}\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($event)\">\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\">{{ \"Remission amount\" | 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                  <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\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ this.getRemissionsHwfAmount(fee.controls['code'].value)}}</div>\n              {{ this.getRemissionsHwfAmount(fee.controls['code'].value) | currency:'GBP':'symbol-narrow':'1.2-2' }}\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 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 center\" scope=\"row\">\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            </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\n            <td class=\"govuk-table__cell  whitespace-inherit left\" >\n              <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeRemission_{{fee.id}}\">{{ this.getRemissionValueForFullyRefund()}}</div>\n              {{ this.getRemissionsHwfAmount(fee.code) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n\n            </td>\n\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']
@@ -4786,11 +4785,11 @@ class StatusHistoryComponent {
         }, (error) => this.errorMessage = error.replace(/"/g, ""));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: StatusHistoryComponent, deps: [{ token: StatusHistoryService }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: StatusHistoryComponent, isStandalone: true, selector: "ccpay-payment-statuses", inputs: { isTakePayment: "isTakePayment" }, ngImport: i0, template: "<div class=\"column\">\n  <h2 class=\"govuk-heading-m\">{{ pageTitle }}</h2>\n</div>\n\n\n<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\" *ngIf=\"errorMessage\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Payment status history could not be retrieved\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      {{ errorMessage }}\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!errorMessage && statuses\">\n  <table>\n      <thead>\n        <tr>\n          <th>Status</th>\n          <th *ngIf=\"isDisplayFailureReasonColumn\">Failure reason</th>\n          <th *ngIf=\"isTakePayment\">Amount</th>\n          <th>Date and time</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let status of statuses.status_histories; let i = index\">\n          <td>{{ status.status }}</td>\n          <td *ngIf=\"isDisplayFailureReasonColumn\">{{ isDisplayReasons[i] ? status.error_message : '' }}</td>\n          <td *ngIf=\"isTakePayment\">\u00A3{{ statuses.amount | number:'.2' }}</td>\n          <td>{{ status.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n        </tr>\n    </tbody>\n  </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: StatusHistoryComponent, isStandalone: true, selector: "ccpay-payment-statuses", inputs: { isTakePayment: "isTakePayment" }, ngImport: i0, template: "<div class=\"column\">\n  <h2 class=\"heading-medium\">{{ pageTitle }}</h2>\n</div>\n\n\n<div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n  <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n    Payment status history could not be retrieved\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    {{ errorMessage }}\n  </div>\n</div>\n\n<div *ngIf=\"!errorMessage && statuses\">\n  <table>\n      <thead>\n        <tr>\n          <th>Status</th>\n          <th *ngIf=\"isDisplayFailureReasonColumn\">Failure reason</th>\n          <th *ngIf=\"isTakePayment\">Amount</th>\n          <th>Date and time</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let status of statuses.status_histories; let i = index\">\n          <td>{{ status.status }}</td>\n          <td *ngIf=\"isDisplayFailureReasonColumn\">{{ isDisplayReasons[i] ? status.error_message : '' }}</td>\n          <td *ngIf=\"isTakePayment\">\u00A3{{ statuses.amount | number:'.2' }}</td>\n          <td>{{ status.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n        </tr>\n    </tbody>\n  </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: StatusHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-payment-statuses', imports: [CommonModule], standalone: true, template: "<div class=\"column\">\n  <h2 class=\"govuk-heading-m\">{{ pageTitle }}</h2>\n</div>\n\n\n<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\" *ngIf=\"errorMessage\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Payment status history could not be retrieved\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      {{ errorMessage }}\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!errorMessage && statuses\">\n  <table>\n      <thead>\n        <tr>\n          <th>Status</th>\n          <th *ngIf=\"isDisplayFailureReasonColumn\">Failure reason</th>\n          <th *ngIf=\"isTakePayment\">Amount</th>\n          <th>Date and time</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let status of statuses.status_histories; let i = index\">\n          <td>{{ status.status }}</td>\n          <td *ngIf=\"isDisplayFailureReasonColumn\">{{ isDisplayReasons[i] ? status.error_message : '' }}</td>\n          <td *ngIf=\"isTakePayment\">\u00A3{{ statuses.amount | number:'.2' }}</td>\n          <td>{{ status.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n        </tr>\n    </tbody>\n  </table>\n</div>\n" }]
+            args: [{ selector: 'ccpay-payment-statuses', imports: [CommonModule], standalone: true, template: "<div class=\"column\">\n  <h2 class=\"heading-medium\">{{ pageTitle }}</h2>\n</div>\n\n\n<div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n  <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n    Payment status history could not be retrieved\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    {{ errorMessage }}\n  </div>\n</div>\n\n<div *ngIf=\"!errorMessage && statuses\">\n  <table>\n      <thead>\n        <tr>\n          <th>Status</th>\n          <th *ngIf=\"isDisplayFailureReasonColumn\">Failure reason</th>\n          <th *ngIf=\"isTakePayment\">Amount</th>\n          <th>Date and time</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let status of statuses.status_histories; let i = index\">\n          <td>{{ status.status }}</td>\n          <td *ngIf=\"isDisplayFailureReasonColumn\">{{ isDisplayReasons[i] ? status.error_message : '' }}</td>\n          <td *ngIf=\"isTakePayment\">\u00A3{{ statuses.amount | number:'.2' }}</td>\n          <td>{{ status.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n        </tr>\n    </tbody>\n  </table>\n</div>\n" }]
         }], ctorParameters: () => [{ type: StatusHistoryService }, { type: PaymentViewService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -5194,7 +5193,7 @@ class PaymentViewComponent {
         this.notificationPreview = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PaymentViewComponent, deps: [{ token: PaymentViewService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PaymentViewComponent, isStandalone: true, selector: "ccpay-payment-view", inputs: { isTurnOff: "isTurnOff", isTakePayment: "isTakePayment", caseType: "caseType", orderRef: "orderRef", orderStatus: "orderStatus", orderTotalPayments: "orderTotalPayments", payment: "payment", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderRemissionTotal: "orderRemissionTotal", orderDetail: "orderDetail", isServiceRequest: "isServiceRequest" }, providers: [{ provide: 'PAYMENT_VIEW', useExisting: forwardRef(() => PaymentViewComponent) }], ngImport: i0, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n    <div *ngIf=\"errorMessage\">\n      <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n        <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title\">\n            {{ \"Payment details could not be retrieved\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            {{ errorMessage | rpxTranslate }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"govuk-heading-l govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n\n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n     </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n     <div class=\"column\">\n      <h2 class=\"govuk-heading-m\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n    </div>\n    \n    <div>\n      <table>\n          <thead>\n            <tr>\n              <th>{{ \"Status\" | rpxTranslate }}</th>\n              <th>{{ \"Amount\" | rpxTranslate }}</th>\n              <th>{{ \"Date\" | rpxTranslate }}</th>\n              <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n              <th>{{ \"Event\" | rpxTranslate }}</th>\n              <th></th>\n            </tr>\n          </thead> \n          <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n            <tr *ngFor=\"let payment of allPaymentsFailure\">\n              <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n              <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n              <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n              <td>{{ payment.payment_reference }}</td>\n              <td >{{ payment.failure_type | rpxTranslate }}</td>\n              <td>\n                \n                <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n              </td>\n            </tr>\n          </tbody>\n          <tbody  *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n            <tr>\n              <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n            </tr>\n        </tbody>\n      </table>\n    </div>\n    <br/>\n    <br/>\n  </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n          <br/>\n          <br/>\n          <h2 class=\"govuk-heading-l\">{{ \"Fee and remission details\" | rpxTranslate }}</h2>\n\n        </div>\n      </div>\n\n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Description\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n\n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">{{ \"Allocated amount\" | rpxTranslate }}</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\n      </div>\n\n                <!-- remissions -->\n                <div class=\"order-class\">\n                  <div class=\"column\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n           <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></th>\n          </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\"  *ngFor=\"let remission of paymentGroup.remissions\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n            <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n               <button  [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n          </tr>\n      </tbody>\n\n\n    </table>\n                  </div></div>\n\n   <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n      <span class=\"mar-17\" >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n   </div>\n\n  </div>\n    </div>\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\"\n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [orderStatus] =\"paymentGroup.payments[0].status\"\n    [paidAmount]= \"paymentGroup.payments[0].amount\"\n    [isRefundRemission]=\"isRefundRemission\"\n    [caseType]=\"caseType\"\n    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [fees] =\"paymentFees\"\n    [isFullyRefund] = \"isFullyRefund\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n    \n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n  <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n  <h1 class=\"govuk-heading-m\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <h1 class=\"govuk-heading-m\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n        <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"where-do-you-live\">\n          {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n        <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"where-do-you-live-2\">\n          {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n        </label>\n      </div>\n    </div>\n      <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-!-font-size-19\"\n      (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n      <button \n      (click)=\"continuePayment(paymentGroup)\"\n      [disabled]=\"isContinueBtnDisabled\"\n      [ngClass]='isContinueBtnDisabled ? \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\" : \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\"'\n      class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n  </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>      \n  <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n  <h2 class=\"govuk-heading-m govuk-!-font-size-19\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        {{ \"Cancel\" | rpxTranslate }}\n    </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n  <div class=\"govuk-warning-text\">\n   \n      <h1 class=\"govuk-heading-l\"> {{ \"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\"> {{paymentGroup.payments[0].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\">{{paymentGroup.payments[0].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\">{{ \"Fee amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_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\">{{ \"Refund amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{getOverPaymentValue() | 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\">{{ \"Refund reason\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</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  [payment]=\"paymentGroup.payments[0]\" \n  [contactDetails]=\"contactDetailsObj\"\n  [refundReason]=\"'RR037'\"\n  [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n  <button type=\"submit\" class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-!-font-size-19\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n  <button type=\"submit\"\n  [ngClass]='isContinueBtnDisabled ? \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\" : \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\"'\n  (click)=\"processRefund()\">\n    {{ \"Submit refund\" | rpxTranslate }}\n  </button>\n  <p>\n      <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-!-font-size-19\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n  <div class=\"govuk-grid-row pagesize\">\n    <div >\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_view_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      <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    <p class=\"govuk-body\">\n    <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($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</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n  <div class=\"payment-failure-alignment\">\n    <div  class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-grid-row\">\n      <div class=\"column\">\n        <h1 class=\"govuk-heading-l govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n      </div>\n    </div>\n    <table>\n      <tbody>\n\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n          <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n      </tr>\n      <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n          <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount  | number:'.2'}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n        <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n        <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n        <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.representment_date  | date:'dd MMM yyyy HH:mm:ss'}}</td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}\n"], dependencies: [{ 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: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => StatusHistoryComponent), selector: "ccpay-payment-statuses", inputs: ["isTakePayment"] }, { 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(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => CapitalizePipe), name: "capitalize" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PaymentViewComponent, isStandalone: true, selector: "ccpay-payment-view", inputs: { isTurnOff: "isTurnOff", isTakePayment: "isTakePayment", caseType: "caseType", orderRef: "orderRef", orderStatus: "orderStatus", orderTotalPayments: "orderTotalPayments", payment: "payment", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderRemissionTotal: "orderRemissionTotal", orderDetail: "orderDetail", isServiceRequest: "isServiceRequest" }, providers: [{ provide: 'PAYMENT_VIEW', useExisting: forwardRef(() => PaymentViewComponent) }], ngImport: i0, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\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          {{ \"Payment details could not be retrieved\" | rpxTranslate }}\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage | rpxTranslate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n          <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n\n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n     </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n     <div class=\"column\">\n      <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n    </div>\n    \n    <div>\n      <table>\n          <thead>\n            <tr>\n              <th>{{ \"Status\" | rpxTranslate }}</th>\n              <th>{{ \"Amount\" | rpxTranslate }}</th>\n              <th>{{ \"Date\" | rpxTranslate }}</th>\n              <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n              <th>{{ \"Event\" | rpxTranslate }}</th>\n              <th></th>\n            </tr>\n          </thead> \n          <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n            <tr *ngFor=\"let payment of allPaymentsFailure\">\n              <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n              <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n              <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n              <td>{{ payment.payment_reference }}</td>\n              <td >{{ payment.failure_type | rpxTranslate }}</td>\n              <td>\n                \n                <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n              </td>\n            </tr>\n          </tbody>\n          <tbody  *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n            <tr>\n              <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n            </tr>\n        </tbody>\n      </table>\n    </div>\n    <br/>\n    <br/>\n  </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n          <br/>\n          <br/>\n          <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</h2>\n\n        </div>\n      </div>\n\n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">{{ \"Description\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n\n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">{{ \"Allocated amount\" | rpxTranslate }}</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\n      </div>\n\n                <!-- remissions -->\n                <div class=\"order-class\">\n                  <div class=\"column\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n            <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\"  *ngFor=\"let remission of paymentGroup.remissions\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n            <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n               <button  [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n          </tr>\n      </tbody>\n\n\n    </table>\n                  </div></div>\n\n   <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n      <span class=\"mar-17\" >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n   </div>\n\n  </div>\n    </div>\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\"\n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [orderStatus] =\"paymentGroup.payments[0].status\"\n    [paidAmount]= \"paymentGroup.payments[0].amount\"\n    [isRefundRemission]=\"isRefundRemission\"\n    [caseType]=\"caseType\"\n    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [fees] =\"paymentFees\"\n    [isFullyRefund] = \"isFullyRefund\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n    \n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n  <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n  <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n  <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n        <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n          {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n        <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n          {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n        </label>\n      </div>\n    </div>\n      <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n      (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n      <button \n      (click)=\"continuePayment(paymentGroup)\"\n      [disabled]=\"isContinueBtnDisabled\"\n      [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n      class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n  </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>      \n  <h1 class=\"govuk-heading-l\">{{ \"Issue 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 }}: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        {{ \"Cancel\" | rpxTranslate }}\n    </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\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\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].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\">{{paymentGroup.payments[0].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\">{{ \"Fee amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_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\">{{ \"Refund amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{getOverPaymentValue() | 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\">{{ \"Refund reason\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</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  [payment]=\"paymentGroup.payments[0]\" \n  [contactDetails]=\"contactDetailsObj\"\n  [refundReason]=\"'RR037'\"\n  [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n  <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n  <button type=\"submit\"\n  [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n  (click)=\"processRefund()\">\n    {{ \"Submit refund\" | rpxTranslate }}\n  </button>\n  <p>\n      <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n  <div class=\"govuk-grid-row pagesize\">\n    <div >\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_view_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      <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    <p class=\"govuk-body\">\n    <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($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</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n  <div class=\"payment-failure-alignment\">\n    <div  class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-grid-row\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n      </div>\n    </div>\n    <table>\n      <tbody>\n\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n          <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n          <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount  | number:'.2'}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n        <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n        <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n        <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n        <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n        <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n        <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.representment_date  | date:'dd MMM yyyy HH:mm:ss'}}</td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.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: "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: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => StatusHistoryComponent), selector: "ccpay-payment-statuses", inputs: ["isTakePayment"] }, { 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(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => CapitalizePipe), name: "capitalize" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PaymentViewComponent, decorators: [{
             type: Component,
@@ -5206,7 +5205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         CcdHyphensPipe,
                         CapitalizePipe,
                         RpxTranslationModule
-                    ], standalone: true, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n    <div *ngIf=\"errorMessage\">\n      <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n        <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title\">\n            {{ \"Payment details could not be retrieved\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            {{ errorMessage | rpxTranslate }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"govuk-heading-l govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n\n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n     </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n     <div class=\"column\">\n      <h2 class=\"govuk-heading-m\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n    </div>\n    \n    <div>\n      <table>\n          <thead>\n            <tr>\n              <th>{{ \"Status\" | rpxTranslate }}</th>\n              <th>{{ \"Amount\" | rpxTranslate }}</th>\n              <th>{{ \"Date\" | rpxTranslate }}</th>\n              <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n              <th>{{ \"Event\" | rpxTranslate }}</th>\n              <th></th>\n            </tr>\n          </thead> \n          <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n            <tr *ngFor=\"let payment of allPaymentsFailure\">\n              <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n              <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n              <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n              <td>{{ payment.payment_reference }}</td>\n              <td >{{ payment.failure_type | rpxTranslate }}</td>\n              <td>\n                \n                <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n              </td>\n            </tr>\n          </tbody>\n          <tbody  *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n            <tr>\n              <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n            </tr>\n        </tbody>\n      </table>\n    </div>\n    <br/>\n    <br/>\n  </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n          <br/>\n          <br/>\n          <h2 class=\"govuk-heading-l\">{{ \"Fee and remission details\" | rpxTranslate }}</h2>\n\n        </div>\n      </div>\n\n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Description\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n\n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">{{ \"Allocated amount\" | rpxTranslate }}</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\n      </div>\n\n                <!-- remissions -->\n                <div class=\"order-class\">\n                  <div class=\"column\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n           <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</th>\n            <th class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></th>\n          </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\"  *ngFor=\"let remission of paymentGroup.remissions\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n            <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n               <button  [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n          </tr>\n      </tbody>\n\n\n    </table>\n                  </div></div>\n\n   <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n      <span class=\"mar-17\" >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n   </div>\n\n  </div>\n    </div>\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\"\n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [orderStatus] =\"paymentGroup.payments[0].status\"\n    [paidAmount]= \"paymentGroup.payments[0].amount\"\n    [isRefundRemission]=\"isRefundRemission\"\n    [caseType]=\"caseType\"\n    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [fees] =\"paymentFees\"\n    [isFullyRefund] = \"isFullyRefund\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n    \n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n  <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n  <h1 class=\"govuk-heading-m\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <h1 class=\"govuk-heading-m\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n        <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"where-do-you-live\">\n          {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n        <label class=\"govuk-label govuk-radios__label govuk-!-font-size-19\" for=\"where-do-you-live-2\">\n          {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n        </label>\n      </div>\n    </div>\n      <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-!-font-size-19\"\n      (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n      <button \n      (click)=\"continuePayment(paymentGroup)\"\n      [disabled]=\"isContinueBtnDisabled\"\n      [ngClass]='isContinueBtnDisabled ? \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\" : \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\"'\n      class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n  </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>      \n  <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n  <h2 class=\"govuk-heading-m govuk-!-font-size-19\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-!-font-size-19\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        {{ \"Cancel\" | rpxTranslate }}\n    </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n  <div class=\"govuk-warning-text\">\n   \n      <h1 class=\"govuk-heading-l\"> {{ \"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\"> {{paymentGroup.payments[0].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\">{{paymentGroup.payments[0].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\">{{ \"Fee amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_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\">{{ \"Refund amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{getOverPaymentValue() | 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\">{{ \"Refund reason\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</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  [payment]=\"paymentGroup.payments[0]\" \n  [contactDetails]=\"contactDetailsObj\"\n  [refundReason]=\"'RR037'\"\n  [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n  <button type=\"submit\" class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-!-font-size-19\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n  <button type=\"submit\"\n  [ngClass]='isContinueBtnDisabled ? \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\" : \"govuk-button govuk-!-margin-right-1 govuk-!-font-size-19\"'\n  (click)=\"processRefund()\">\n    {{ \"Submit refund\" | rpxTranslate }}\n  </button>\n  <p>\n      <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-!-font-size-19\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n  <div class=\"govuk-grid-row pagesize\">\n    <div >\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_view_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      <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    <p class=\"govuk-body\">\n    <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($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</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n  <div class=\"payment-failure-alignment\">\n    <div  class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-grid-row\">\n      <div class=\"column\">\n        <h1 class=\"govuk-heading-l govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n      </div>\n    </div>\n    <table>\n      <tbody>\n\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n          <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n      </tr>\n      <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n          <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount  | number:'.2'}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n        <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n        <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n        <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n        <td class=\"govuk-!-font-weight-bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.representment_date  | date:'dd MMM yyyy HH:mm:ss'}}</td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}\n"] }]
+                    ], standalone: true, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\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          {{ \"Payment details could not be retrieved\" | rpxTranslate }}\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage | rpxTranslate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n          <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n\n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n     </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n     <div class=\"column\">\n      <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n    </div>\n    \n    <div>\n      <table>\n          <thead>\n            <tr>\n              <th>{{ \"Status\" | rpxTranslate }}</th>\n              <th>{{ \"Amount\" | rpxTranslate }}</th>\n              <th>{{ \"Date\" | rpxTranslate }}</th>\n              <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n              <th>{{ \"Event\" | rpxTranslate }}</th>\n              <th></th>\n            </tr>\n          </thead> \n          <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n            <tr *ngFor=\"let payment of allPaymentsFailure\">\n              <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n              <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n              <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n              <td>{{ payment.payment_reference }}</td>\n              <td >{{ payment.failure_type | rpxTranslate }}</td>\n              <td>\n                \n                <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n              </td>\n            </tr>\n          </tbody>\n          <tbody  *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n            <tr>\n              <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n            </tr>\n        </tbody>\n      </table>\n    </div>\n    <br/>\n    <br/>\n  </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n          <br/>\n          <br/>\n          <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</h2>\n\n        </div>\n      </div>\n\n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">{{ \"Description\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n\n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">{{ \"Allocated amount\" | rpxTranslate }}</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\n      </div>\n\n                <!-- remissions -->\n                <div class=\"order-class\">\n                  <div class=\"column\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n            <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\"  *ngFor=\"let remission of paymentGroup.remissions\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n            <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n               <button  [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n          </tr>\n      </tbody>\n\n\n    </table>\n                  </div></div>\n\n   <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n      <span class=\"mar-17\" >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n   </div>\n\n  </div>\n    </div>\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\"\n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [orderStatus] =\"paymentGroup.payments[0].status\"\n    [paidAmount]= \"paymentGroup.payments[0].amount\"\n    [isRefundRemission]=\"isRefundRemission\"\n    [caseType]=\"caseType\"\n    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [fees] =\"paymentFees\"\n    [isFullyRefund] = \"isFullyRefund\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n    \n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n  <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n  <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n  <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n    {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n        <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n          {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n        <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n          {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n        </label>\n      </div>\n    </div>\n      <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n      (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n      <button \n      (click)=\"continuePayment(paymentGroup)\"\n      [disabled]=\"isContinueBtnDisabled\"\n      [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n      class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n  </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>      \n  <h1 class=\"govuk-heading-l\">{{ \"Issue 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 }}: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        {{ \"Cancel\" | rpxTranslate }}\n    </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\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\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].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\">{{paymentGroup.payments[0].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\">{{ \"Fee amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_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\">{{ \"Refund amount\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{getOverPaymentValue() | 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\">{{ \"Refund reason\" | rpxTranslate }}</td>\n          <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</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  [payment]=\"paymentGroup.payments[0]\" \n  [contactDetails]=\"contactDetailsObj\"\n  [refundReason]=\"'RR037'\"\n  [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n  <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n  <button type=\"submit\"\n  [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n  (click)=\"processRefund()\">\n    {{ \"Submit refund\" | rpxTranslate }}\n  </button>\n  <p>\n      <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n          {{ \"Cancel\" | rpxTranslate }}\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n  <div class=\"govuk-grid-row pagesize\">\n    <div >\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel_view_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      <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    <p class=\"govuk-body\">\n    <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($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</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n  <div class=\"payment-failure-alignment\">\n    <div  class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-grid-row\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n      </div>\n    </div>\n    <table>\n      <tbody>\n\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n          <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n          <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n          <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount  | number:'.2'}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n        <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n        <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n        <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n        <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n        <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n        <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n        <td>\t{{selectedPaymentsStatus.representment_date  | date:'dd MMM yyyy HH:mm:ss'}}</td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.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: PaymentViewService }, { type: NotificationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -5409,14 +5408,14 @@ class PbaPaymentComponent {
         this.paymentLibComponent.isFromServiceRequestPage = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PbaPaymentComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PbaPaymentComponent, isStandalone: true, selector: "ccpay-pba-payment", inputs: { pbaPayOrderRef: "pbaPayOrderRef" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n  <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\">\n        {{ \"There is a problem\"  | rpxTranslate }}\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n          </li>\n        </ul>\n      </div>\n      </div>\n    </div>\n    <!-- <h1 class=\"govuk-heading-m margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n    <div class=\"govuk-form-group margin-top-10-px\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        {{ \"Amount to pay\" | rpxTranslate }}\n      </label>\n      <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n        <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n              {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n            <div class=\"govuk-form-group pba-payments-select-box--size\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n                {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <select class=\"govuk-select short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n                <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n                <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n              </select>\n            </div>\n            <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n                {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n                {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n            </div>\n            <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n            </div>\n\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n              {{ \"Pay by credit or debit card\" | rpxTranslate }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n\n    <div class=\"govuk-button-group\"  *ngIf=\"errorMsg\">\n      <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        {{ \"View Service Request\" | rpxTranslate }}\n      </button>\n      <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n        {{ \"Pay by card\" | rpxTranslate }}\n      </button>\n    </div>\n    <div class=\"govuk-button-group\"  *ngIf=\"!errorMsg\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n        <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n      </button>\n    </div>\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-warning-text\">\n          <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n          <strong class=\"govuk-warning-text__text\">\n            <span class=\"govuk-visually-hidden\">{{ \"Warning\" | rpxTranslate }}</span>\n            <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body ypba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </p>\n\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n            email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport&#64;justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n            MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n            again to pay the fee.\" | rpxTranslate }}\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" data-module=\"govuk-error-summary\">\n          <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n              </li>\n            </ul>\n          </div>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" data-module=\"govuk-error-summary\">\n          <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n              </li>\n            </ul>\n          </div>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" data-module=\"govuk-error-summary\">\n          <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }}  ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title white\">\n             {{ \"Payment successful\" | rpxTranslate }}\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body white\">\n              {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <!-- <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p> -->\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RpxTranslationModule }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PbaPaymentComponent, isStandalone: true, selector: "ccpay-pba-payment", inputs: { pbaPayOrderRef: "pbaPayOrderRef" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n  <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n        {{ \"There is a problem\"  | rpxTranslate }}\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n          </li>\n        </ul>\n      </div>\n    </div>\n    <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n    <div class=\"govuk-form-group margin-top-10-px\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        {{ \"Amount to pay\" | rpxTranslate }}\n      </label>\n      <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n        <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n              {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n            <div class=\"govuk-form-group pba-payments-select-box--size\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n                {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n                <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n                <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n              </select>\n            </div>\n            <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n                {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n                {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n            </div>\n            <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n            </div>\n\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n              {{ \"Pay by credit or debit card\" | rpxTranslate }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n\n    <div class=\"govuk-button--group\"  *ngIf=\"errorMsg\">\n      <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        {{ \"View Service Request\" | rpxTranslate }}\n      </button>\n      <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n        {{ \"Pay by card\" | rpxTranslate }}\n      </button>\n    </div>\n    <div class=\"govuk-button--group\"  *ngIf=\"!errorMsg\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n        <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n      </button>\n    </div>\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\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            <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-bod ypba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </p>\n\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n            email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport&#64;justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n            MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n            again to pay the fee.\" | rpxTranslate }}\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{ selectedPbaAccount }}) {{ \" no longer exists.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }}  ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title white\">\n             {{ \"Payment successful\" | rpxTranslate }}\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body white\">\n              {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <!-- <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p> -->\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RpxTranslationModule }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PbaPaymentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccpay-pba-payment', imports: [
                         CommonModule,
                         RpxTranslationModule
-                    ], standalone: true, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n  <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\">\n        {{ \"There is a problem\"  | rpxTranslate }}\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n          </li>\n        </ul>\n      </div>\n      </div>\n    </div>\n    <!-- <h1 class=\"govuk-heading-m margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n    <div class=\"govuk-form-group margin-top-10-px\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        {{ \"Amount to pay\" | rpxTranslate }}\n      </label>\n      <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n        <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n              {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n            <div class=\"govuk-form-group pba-payments-select-box--size\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n                {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <select class=\"govuk-select short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n                <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n                <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n              </select>\n            </div>\n            <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n                {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n                {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n            </div>\n            <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n            </div>\n\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n              {{ \"Pay by credit or debit card\" | rpxTranslate }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n\n    <div class=\"govuk-button-group\"  *ngIf=\"errorMsg\">\n      <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        {{ \"View Service Request\" | rpxTranslate }}\n      </button>\n      <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n        {{ \"Pay by card\" | rpxTranslate }}\n      </button>\n    </div>\n    <div class=\"govuk-button-group\"  *ngIf=\"!errorMsg\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n        <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n      </button>\n    </div>\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-warning-text\">\n          <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n          <strong class=\"govuk-warning-text__text\">\n            <span class=\"govuk-visually-hidden\">{{ \"Warning\" | rpxTranslate }}</span>\n            <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body ypba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </p>\n\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n            email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport&#64;justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n            MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n            again to pay the fee.\" | rpxTranslate }}\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" data-module=\"govuk-error-summary\">\n          <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n              </li>\n            </ul>\n          </div>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" data-module=\"govuk-error-summary\">\n          <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n              </li>\n            </ul>\n          </div>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" data-module=\"govuk-error-summary\">\n          <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }}  ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"govuk-heading-m\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"govuk-button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title white\">\n             {{ \"Payment successful\" | rpxTranslate }}\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body white\">\n              {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <!-- <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p> -->\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"] }]
+                    ], standalone: true, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n  <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n        {{ \"There is a problem\"  | rpxTranslate }}\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n          </li>\n        </ul>\n      </div>\n    </div>\n    <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n    <div class=\"govuk-form-group margin-top-10-px\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        {{ \"Amount to pay\" | rpxTranslate }}\n      </label>\n      <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n        <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n              {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n            <div class=\"govuk-form-group pba-payments-select-box--size\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n                {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n                <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n                <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n              </select>\n            </div>\n            <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n                {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n                {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n            </div>\n            <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n            </div>\n\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n              {{ \"Pay by credit or debit card\" | rpxTranslate }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n\n    <div class=\"govuk-button--group\"  *ngIf=\"errorMsg\">\n      <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        {{ \"View Service Request\" | rpxTranslate }}\n      </button>\n      <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n        {{ \"Pay by card\" | rpxTranslate }}\n      </button>\n    </div>\n    <div class=\"govuk-button--group\"  *ngIf=\"!errorMsg\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n        <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n      </button>\n    </div>\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\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            <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-bod ypba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </p>\n\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n            email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport&#64;justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n            MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n            again to pay the fee.\" | rpxTranslate }}\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{ selectedPbaAccount }}) {{ \" no longer exists.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }}  ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title white\">\n             {{ \"Payment successful\" | rpxTranslate }}\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body white\">\n              {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <!-- <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p> -->\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -5474,11 +5473,11 @@ class PaymentListComponent {
         this.paymentLibComponent.viewName = 'payment-view';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PaymentListComponent, deps: [{ token: PaymentListService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PaymentListComponent, isStandalone: false, selector: "ccpay-payment-list", ngImport: i0, template: "<div class=\"govuk-width-container\">\n\n  <div *ngIf=\"errorMessage\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\n          Payments list could not be retrieved\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!errorMessage && payments\">\n\n    <table class=\"table\">\n      <tr>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Payment group reference</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Payment reference</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Date created</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Channel</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Method</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Amount</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Status</th>\n      </tr>\n      <tr *ngFor=\"let payment of payments.payments\">\n        <td class=\"govuk-!-font-size-16\">\n          <a href=\"javascript:void(0)\" (click)=\"loadPaymentViewComponent(payment.payment_group_reference, payment.payment_reference, payment.method)\">{{ payment.payment_group_reference }}</a>\n        <td class=\"govuk-!-font-size-16\">{{ payment.payment_reference }}</td>\n        <td class=\"govuk-!-font-size-16\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n        <td class=\"govuk-!-font-size-16\">{{ payment.channel | titlecase }}</td>\n        <td class=\"govuk-!-font-size-16\">{{ payment.method | titlecase }}</td>\n        <td class=\"govuk-!-font-size-16\">\u00A3{{ payment.amount | number:'.2' }}</td>\n        <td *ngIf=\"payment.method === 'card' && payment.channel === 'online'\">\n          <details>\n            <summary><span class=\"summary govuk-!-font-size-16\">{{ payment.status }}</span></summary>\n            <div class=\"govuk-inset-text\" *ngIf=\"payment.status === 'Failed'\">\n              <div *ngFor=\"let statusHistory of payment.status_histories\">\n                <p class=\"govuk-!-font-size-16\" *ngIf=\"statusHistory.error_code === 'P0010'\">\n                  Payment rejected due to payment method selected or payment information entered, for example, failed fraud check, a 3D Secure authentication failure, or the user does not have enough money in account\n                </p>\n                <p class=\"govuk-!-font-size-16\" *ngIf=\"statusHistory.error_code === 'P0020'\">\n                  Payment was not confirmed and completed within 90 minutes of being created\n                </p>\n                <p class=\"govuk-!-font-size-16\" *ngIf=\"statusHistory.error_code === 'P0030'\">\n                  User clicked on the \u201CCancel payment\u201D button during the payment journey\n                </p>\n                <p class=\"govuk-!-font-size-16\" *ngIf=\"statusHistory.error_code === 'P0050'\">\n                  Multiple possible causes, for example a configuration problem with the payment provider, or incorrect login credentials\n                </p>\n              </div>\n            </div>\n          </details>\n        </td>\n        <td *ngIf=\"payment.method === 'card' && payment.channel === 'telephony'\" class=\"govuk-!-font-size-16\">\n          {{ payment.status}}\n        </td>\n        <td *ngIf=\"payment.method === 'payment by account'\">\n          <details>\n            <summary><span class=\"summary govuk-!-font-size-16\">{{ payment.status }}</span></summary>\n            <div class=\"govuk-inset-text\" *ngIf=\"payment.status === 'Pending'\">\n              <p class=\"govuk-!-font-size-16\">This means the transaction is being processed by Liberata.</p>\n            </div>\n          </details>\n        </td>\n      </tr>\n    </table>\n\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PaymentListComponent, isStandalone: false, selector: "ccpay-payment-list", ngImport: i0, template: "<div class=\"govuk-width-container\">\n\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        Payments list could not be retrieved\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!errorMessage && payments\">\n\n    <table class=\"table\">\n      <tr>\n        <th class=\"bold font-xsmall\">Payment group reference</th>\n        <th class=\"bold font-xsmall\">Payment reference</th>\n        <th class=\"bold font-xsmall\">Date created</th>\n        <th class=\"bold font-xsmall\">Channel</th>\n        <th class=\"bold font-xsmall\">Method</th>\n        <th class=\"bold font-xsmall\">Amount</th>\n        <th class=\"bold font-xsmall\">Status</th>\n      </tr>\n      <tr *ngFor=\"let payment of payments.payments\">\n        <td class=\"font-xsmall\">\n          <a href=\"javascript:void(0)\" (click)=\"loadPaymentViewComponent(payment.payment_group_reference, payment.payment_reference, payment.method)\">{{ payment.payment_group_reference }}</a>\n        <td class=\"font-xsmall\">{{ payment.payment_reference }}</td>\n        <td class=\"font-xsmall\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n        <td class=\"font-xsmall\">{{ payment.channel | titlecase }}</td>\n        <td class=\"font-xsmall\">{{ payment.method | titlecase }}</td>\n        <td class=\"font-xsmall\">\u00A3{{ payment.amount | number:'.2' }}</td>\n        <td *ngIf=\"payment.method === 'card' && payment.channel === 'online'\">\n          <details>\n            <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n            <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Failed'\">\n              <div *ngFor=\"let statusHistory of payment.status_histories\">\n                <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0010'\">\n                  Payment rejected due to payment method selected or payment information entered, for example, failed fraud check, a 3D Secure authentication failure, or the user does not have enough money in account\n                </p>\n                <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0020'\">\n                  Payment was not confirmed and completed within 90 minutes of being created\n                </p>\n                <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0030'\">\n                  User clicked on the \u201CCancel payment\u201D button during the payment journey\n                </p>\n                <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0050'\">\n                  Multiple possible causes, for example a configuration problem with the payment provider, or incorrect login credentials\n                </p>\n              </div>\n            </div>\n          </details>\n        </td>\n        <td *ngIf=\"payment.method === 'card' && payment.channel === 'telephony'\" class=\"font-xsmall\">\n          {{ payment.status}}\n        </td>\n        <td *ngIf=\"payment.method === 'payment by account'\">\n          <details>\n            <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n            <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Pending'\">\n              <p class=\"font-xsmall\">This means the transaction is being processed by Liberata.</p>\n            </div>\n          </details>\n        </td>\n      </tr>\n    </table>\n\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PaymentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-payment-list', standalone: false, template: "<div class=\"govuk-width-container\">\n\n  <div *ngIf=\"errorMessage\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\n          Payments list could not be retrieved\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!errorMessage && payments\">\n\n    <table class=\"table\">\n      <tr>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Payment group reference</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Payment reference</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Date created</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Channel</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Method</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Amount</th>\n        <th class=\"govuk-!-font-weight-bold govuk-!-font-size-16\">Status</th>\n      </tr>\n      <tr *ngFor=\"let payment of payments.payments\">\n        <td class=\"govuk-!-font-size-16\">\n          <a href=\"javascript:void(0)\" (click)=\"loadPaymentViewComponent(payment.payment_group_reference, payment.payment_reference, payment.method)\">{{ payment.payment_group_reference }}</a>\n        <td class=\"govuk-!-font-size-16\">{{ payment.payment_reference }}</td>\n        <td class=\"govuk-!-font-size-16\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n        <td class=\"govuk-!-font-size-16\">{{ payment.channel | titlecase }}</td>\n        <td class=\"govuk-!-font-size-16\">{{ payment.method | titlecase }}</td>\n        <td class=\"govuk-!-font-size-16\">\u00A3{{ payment.amount | number:'.2' }}</td>\n        <td *ngIf=\"payment.method === 'card' && payment.channel === 'online'\">\n          <details>\n            <summary><span class=\"summary govuk-!-font-size-16\">{{ payment.status }}</span></summary>\n            <div class=\"govuk-inset-text\" *ngIf=\"payment.status === 'Failed'\">\n              <div *ngFor=\"let statusHistory of payment.status_histories\">\n                <p class=\"govuk-!-font-size-16\" *ngIf=\"statusHistory.error_code === 'P0010'\">\n                  Payment rejected due to payment method selected or payment information entered, for example, failed fraud check, a 3D Secure authentication failure, or the user does not have enough money in account\n                </p>\n                <p class=\"govuk-!-font-size-16\" *ngIf=\"statusHistory.error_code === 'P0020'\">\n                  Payment was not confirmed and completed within 90 minutes of being created\n                </p>\n                <p class=\"govuk-!-font-size-16\" *ngIf=\"statusHistory.error_code === 'P0030'\">\n                  User clicked on the \u201CCancel payment\u201D button during the payment journey\n                </p>\n                <p class=\"govuk-!-font-size-16\" *ngIf=\"statusHistory.error_code === 'P0050'\">\n                  Multiple possible causes, for example a configuration problem with the payment provider, or incorrect login credentials\n                </p>\n              </div>\n            </div>\n          </details>\n        </td>\n        <td *ngIf=\"payment.method === 'card' && payment.channel === 'telephony'\" class=\"govuk-!-font-size-16\">\n          {{ payment.status}}\n        </td>\n        <td *ngIf=\"payment.method === 'payment by account'\">\n          <details>\n            <summary><span class=\"summary govuk-!-font-size-16\">{{ payment.status }}</span></summary>\n            <div class=\"govuk-inset-text\" *ngIf=\"payment.status === 'Pending'\">\n              <p class=\"govuk-!-font-size-16\">This means the transaction is being processed by Liberata.</p>\n            </div>\n          </details>\n        </td>\n      </tr>\n    </table>\n\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'ccpay-payment-list', standalone: false, template: "<div class=\"govuk-width-container\">\n\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        Payments list could not be retrieved\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!errorMessage && payments\">\n\n    <table class=\"table\">\n      <tr>\n        <th class=\"bold font-xsmall\">Payment group reference</th>\n        <th class=\"bold font-xsmall\">Payment reference</th>\n        <th class=\"bold font-xsmall\">Date created</th>\n        <th class=\"bold font-xsmall\">Channel</th>\n        <th class=\"bold font-xsmall\">Method</th>\n        <th class=\"bold font-xsmall\">Amount</th>\n        <th class=\"bold font-xsmall\">Status</th>\n      </tr>\n      <tr *ngFor=\"let payment of payments.payments\">\n        <td class=\"font-xsmall\">\n          <a href=\"javascript:void(0)\" (click)=\"loadPaymentViewComponent(payment.payment_group_reference, payment.payment_reference, payment.method)\">{{ payment.payment_group_reference }}</a>\n        <td class=\"font-xsmall\">{{ payment.payment_reference }}</td>\n        <td class=\"font-xsmall\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n        <td class=\"font-xsmall\">{{ payment.channel | titlecase }}</td>\n        <td class=\"font-xsmall\">{{ payment.method | titlecase }}</td>\n        <td class=\"font-xsmall\">\u00A3{{ payment.amount | number:'.2' }}</td>\n        <td *ngIf=\"payment.method === 'card' && payment.channel === 'online'\">\n          <details>\n            <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n            <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Failed'\">\n              <div *ngFor=\"let statusHistory of payment.status_histories\">\n                <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0010'\">\n                  Payment rejected due to payment method selected or payment information entered, for example, failed fraud check, a 3D Secure authentication failure, or the user does not have enough money in account\n                </p>\n                <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0020'\">\n                  Payment was not confirmed and completed within 90 minutes of being created\n                </p>\n                <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0030'\">\n                  User clicked on the \u201CCancel payment\u201D button during the payment journey\n                </p>\n                <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0050'\">\n                  Multiple possible causes, for example a configuration problem with the payment provider, or incorrect login credentials\n                </p>\n              </div>\n            </div>\n          </details>\n        </td>\n        <td *ngIf=\"payment.method === 'card' && payment.channel === 'telephony'\" class=\"font-xsmall\">\n          {{ payment.status}}\n        </td>\n        <td *ngIf=\"payment.method === 'payment by account'\">\n          <details>\n            <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n            <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Pending'\">\n              <p class=\"font-xsmall\">This means the transaction is being processed by Liberata.</p>\n            </div>\n          </details>\n        </td>\n      </tr>\n    </table>\n\n  </div>\n\n</div>\n" }]
         }], ctorParameters: () => [{ type: PaymentListService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -5871,11 +5870,11 @@ class ProcessRefundComponent {
         this.notificationPreview = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProcessRefundComponent, deps: [{ token: RefundsService }, { token: PaymentViewService }, { token: i1$1.FormBuilder }, { token: OrderslistService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ProcessRefundComponent, isStandalone: false, selector: "ccpay-process-refund", inputs: { refundReference: "refundReference", refundlistsource: "refundlistsource" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <div *ngIf=\"errorMessage.showError\">\n      <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n        <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title\">\n            {{errorMessage.title}}\n          </h2>\n          <div class=\"govuk-error-summary__body process-refund-font\">\n            {{errorMessage.body}}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"govuk-heading-l govuk-!-margin-top-0\">Review refund details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Payment to be refunded</td>\n          <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount  | currency :'GBP':'symbol':'1.2-2'  }})</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Reason for refund</td>\n          <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Amount to be refunded</td>\n            <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Sent to</td>\n          <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Sent via</td>\n          <td colspan=\"2\">\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.email?.trim()}}\n          </div>\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n          </div> \n          </td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Submitted by</td>\n            <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n        </tr>\n        <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Date submitted</td>\n            <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Notification</td>\n          <td>{{templateInstructionType}}</td>\n          <td>\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n\n      </tr>\n\n        </tbody>\n      </table>\n\n      <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n        [payment]=\"paymentObj\"\n        [contactDetails]=\"refundlistsource?.contact_details\"\n        [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n        [refundReference]=\"refundlistsource?.refund_reference\"\n        (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n      </app-notification-preview>\n\n      <div>\n      </div>\n    </div>\n    <div class=\"process-refund__panel\">\n      <form [formGroup]=\"processRefundForm\" novalidate>\n        <div class=\"\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h1 class=\"govuk-heading-l\">\n              What do you want to do with this refund?\n            </h1>\n          </legend>\n          <div class=\"govuk-radios\"  [ngClass]=\"{'govuk-form-group--error': refundActionsHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundActionsHasError\">\n            <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundAction-{{i}}\" \n              name=\"refundActionField\"\n              type=\"radio\"\n              formControlName=\"refundActionField\"\n              (click)=\"checkRefundActions(refundAction.code)\"\n                value=\"{{refundAction.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n                {{refundAction.code}}\n              </label>\n              <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n                {{refundAction.label}}\n              </div>\n            </div>\n            <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n                  Add a reason\n                </label>\n                <p class=\"inline-error-message\"\n                *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n                <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n                <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n                <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n                <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n              </p>\n                <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n                [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n                  id=\"sendmeback\"\n                  name=\"sendMeBackField\" \n                  formControlName=\"sendMeBackField\"\n                rows=\"5\"></textarea>\n              \n              </div>\n\n            </div>\n  \n          </div>\n      \n        </fieldset>\n      </div>\n\n      <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h2 class=\"govuk-heading-m\">\n              Why are you rejecting this refund?\n            </h2>\n          </legend>\n          <div class=\"govuk-radios\" [ngClass]=\"{'govuk-form-group--error': refundRejectReasonHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundRejectReasonHasError\">\n            <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundRejectReason-{{j}}\"\n              formControlName=\"refundRejectReasonField\"\n              name=\"refundRejectReasonField\"\n              (click)=\"checkRefundActions(refundRejectReason.code)\"\n              type=\"radio\" value=\"{{refundRejectReason.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n                {{refundRejectReason.name}}\n              </label>\n            </div>\n            </div>\n      <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n            Enter reason\n          </label>\n          <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n            <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n            <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n          </p>\n          <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n          [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n          formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n        \n      </div>\n      \n        </fieldset>\n      </div>\n\n      <div class=\"govuk-button-group\">\n        <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n        <button (click)=\"processRefundSubmit()\" class=\"govuk-button\"\n          data-module=\"govuk-button\">\n          Submit \n        </button>\n      <br/><br/>\n    </div>\n   \n  <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n  <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n  </div>\n \n\n  </main>\n \n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row pagesize\">\n        <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n          <h1 class=\"heading-refunds-xlarge\">\n            {{successMsg}}\n          </h1>\n        </div>\n        <p class=\"govuk-body process-refund-font\">\n        <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n        </p>\n      </div>\n  </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: 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: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NotificationPreviewComponent, selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ProcessRefundComponent, isStandalone: false, selector: "ccpay-process-refund", inputs: { refundReference: "refundReference", refundlistsource: "refundlistsource" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <div *ngIf=\"errorMessage.showError\">\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          {{errorMessage.title}}\n        </h2>\n        <div class=\"govuk-error-summary__body process-refund-font\">\n          {{errorMessage.body}}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment to be refunded</td>\n          <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount  | currency :'GBP':'symbol':'1.2-2'  }})</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Reason for refund</td>\n          <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Amount to be refunded</td>\n            <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Sent to</td>\n          <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Sent via</td>\n          <td colspan=\"2\">\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.email?.trim()}}\n          </div>\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n          </div> \n          </td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Submitted by</td>\n            <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Date submitted</td>\n            <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Notification</td>\n          <td>{{templateInstructionType}}</td>\n          <td>\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n\n      </tr>\n\n        </tbody>\n      </table>\n\n      <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n        [payment]=\"paymentObj\"\n        [contactDetails]=\"refundlistsource?.contact_details\"\n        [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n        [refundReference]=\"refundlistsource?.refund_reference\"\n        (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n      </app-notification-preview>\n\n      <div>\n      </div>\n    </div>\n    <div class=\"process-refund__panel\">\n      <form [formGroup]=\"processRefundForm\" novalidate>\n        <div class=\"\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h1 class=\"heading-large\">\n              What do you want to do with this refund?\n            </h1>\n          </legend>\n          <div class=\"govuk-radios\"  [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundActionsHasError\">\n            <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundAction-{{i}}\" \n              name=\"refundActionField\"\n              type=\"radio\"\n              formControlName=\"refundActionField\"\n              (click)=\"checkRefundActions(refundAction.code)\"\n                value=\"{{refundAction.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n                {{refundAction.code}}\n              </label>\n              <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n                {{refundAction.label}}\n              </div>\n            </div>\n            <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n                  Add a reason\n                </label>\n                <p class=\"inline-error-message\"\n                *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n                <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n                <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n                <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n                <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n              </p>\n                <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n                [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n                  id=\"sendmeback\"\n                  name=\"sendMeBackField\" \n                  formControlName=\"sendMeBackField\"\n                rows=\"5\"></textarea>\n              \n              </div>\n\n            </div>\n  \n          </div>\n      \n        </fieldset>\n      </div>\n\n      <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h2 class=\"heading-medium\">\n              Why are you rejecting this refund?\n            </h2>\n          </legend>\n          <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundRejectReasonHasError\">\n            <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundRejectReason-{{j}}\"\n              formControlName=\"refundRejectReasonField\"\n              name=\"refundRejectReasonField\"\n              (click)=\"checkRefundActions(refundRejectReason.code)\"\n              type=\"radio\" value=\"{{refundRejectReason.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n                {{refundRejectReason.name}}\n              </label>\n            </div>\n            </div>\n      <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n            Enter reason\n          </label>\n          <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n            <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n            <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n          </p>\n          <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n          [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n          formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n        \n      </div>\n      \n        </fieldset>\n      </div>\n\n      <div class=\"govuk-button-group\">\n        <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n        <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n          data-module=\"govuk-button\">\n          Submit \n        </button>\n      <br/><br/>\n    </div>\n   \n  <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n  <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n  </div>\n \n\n  </main>\n \n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row pagesize\">\n        <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n          <h1 class=\"heading-refunds-xlarge\">\n            {{successMsg}}\n          </h1>\n        </div>\n        <p class=\"govuk-body process-refund-font\">\n        <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n        </p>\n      </div>\n  </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: 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: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NotificationPreviewComponent, selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProcessRefundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-process-refund', standalone: false, template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <div *ngIf=\"errorMessage.showError\">\n      <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n        <div role=\"alert\">\n          <h2 class=\"govuk-error-summary__title\">\n            {{errorMessage.title}}\n          </h2>\n          <div class=\"govuk-error-summary__body process-refund-font\">\n            {{errorMessage.body}}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"govuk-heading-l govuk-!-margin-top-0\">Review refund details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Payment to be refunded</td>\n          <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount  | currency :'GBP':'symbol':'1.2-2'  }})</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Reason for refund</td>\n          <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Amount to be refunded</td>\n            <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Sent to</td>\n          <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Sent via</td>\n          <td colspan=\"2\">\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.email?.trim()}}\n          </div>\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n          </div> \n          </td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Submitted by</td>\n            <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n        </tr>\n        <tr class=\"section\">\n            <td class=\"govuk-!-font-weight-bold tb-col-w\">Date submitted</td>\n            <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"govuk-!-font-weight-bold tb-col-w\">Notification</td>\n          <td>{{templateInstructionType}}</td>\n          <td>\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n\n      </tr>\n\n        </tbody>\n      </table>\n\n      <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n        [payment]=\"paymentObj\"\n        [contactDetails]=\"refundlistsource?.contact_details\"\n        [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n        [refundReference]=\"refundlistsource?.refund_reference\"\n        (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n      </app-notification-preview>\n\n      <div>\n      </div>\n    </div>\n    <div class=\"process-refund__panel\">\n      <form [formGroup]=\"processRefundForm\" novalidate>\n        <div class=\"\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h1 class=\"govuk-heading-l\">\n              What do you want to do with this refund?\n            </h1>\n          </legend>\n          <div class=\"govuk-radios\"  [ngClass]=\"{'govuk-form-group--error': refundActionsHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundActionsHasError\">\n            <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundAction-{{i}}\" \n              name=\"refundActionField\"\n              type=\"radio\"\n              formControlName=\"refundActionField\"\n              (click)=\"checkRefundActions(refundAction.code)\"\n                value=\"{{refundAction.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n                {{refundAction.code}}\n              </label>\n              <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n                {{refundAction.label}}\n              </div>\n            </div>\n            <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n                  Add a reason\n                </label>\n                <p class=\"inline-error-message\"\n                *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n                <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n                <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n                <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n                <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n              </p>\n                <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n                [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n                  id=\"sendmeback\"\n                  name=\"sendMeBackField\" \n                  formControlName=\"sendMeBackField\"\n                rows=\"5\"></textarea>\n              \n              </div>\n\n            </div>\n  \n          </div>\n      \n        </fieldset>\n      </div>\n\n      <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h2 class=\"govuk-heading-m\">\n              Why are you rejecting this refund?\n            </h2>\n          </legend>\n          <div class=\"govuk-radios\" [ngClass]=\"{'govuk-form-group--error': refundRejectReasonHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundRejectReasonHasError\">\n            <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundRejectReason-{{j}}\"\n              formControlName=\"refundRejectReasonField\"\n              name=\"refundRejectReasonField\"\n              (click)=\"checkRefundActions(refundRejectReason.code)\"\n              type=\"radio\" value=\"{{refundRejectReason.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n                {{refundRejectReason.name}}\n              </label>\n            </div>\n            </div>\n      <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n            Enter reason\n          </label>\n          <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n            <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n            <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n          </p>\n          <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n          [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n          formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n        \n      </div>\n      \n        </fieldset>\n      </div>\n\n      <div class=\"govuk-button-group\">\n        <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n        <button (click)=\"processRefundSubmit()\" class=\"govuk-button\"\n          data-module=\"govuk-button\">\n          Submit \n        </button>\n      <br/><br/>\n    </div>\n   \n  <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n  <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n  </div>\n \n\n  </main>\n \n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row pagesize\">\n        <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n          <h1 class=\"heading-refunds-xlarge\">\n            {{successMsg}}\n          </h1>\n        </div>\n        <p class=\"govuk-body process-refund-font\">\n        <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n        </p>\n      </div>\n  </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"] }]
+            args: [{ selector: 'ccpay-process-refund', standalone: false, template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <div *ngIf=\"errorMessage.showError\">\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          {{errorMessage.title}}\n        </h2>\n        <div class=\"govuk-error-summary__body process-refund-font\">\n          {{errorMessage.body}}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment to be refunded</td>\n          <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount  | currency :'GBP':'symbol':'1.2-2'  }})</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Reason for refund</td>\n          <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Amount to be refunded</td>\n            <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Sent to</td>\n          <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Sent via</td>\n          <td colspan=\"2\">\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.email?.trim()}}\n          </div>\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n          </div> \n          </td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Submitted by</td>\n            <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Date submitted</td>\n            <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Notification</td>\n          <td>{{templateInstructionType}}</td>\n          <td>\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n\n      </tr>\n\n        </tbody>\n      </table>\n\n      <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n        [payment]=\"paymentObj\"\n        [contactDetails]=\"refundlistsource?.contact_details\"\n        [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n        [refundReference]=\"refundlistsource?.refund_reference\"\n        (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n      </app-notification-preview>\n\n      <div>\n      </div>\n    </div>\n    <div class=\"process-refund__panel\">\n      <form [formGroup]=\"processRefundForm\" novalidate>\n        <div class=\"\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h1 class=\"heading-large\">\n              What do you want to do with this refund?\n            </h1>\n          </legend>\n          <div class=\"govuk-radios\"  [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundActionsHasError\">\n            <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundAction-{{i}}\" \n              name=\"refundActionField\"\n              type=\"radio\"\n              formControlName=\"refundActionField\"\n              (click)=\"checkRefundActions(refundAction.code)\"\n                value=\"{{refundAction.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n                {{refundAction.code}}\n              </label>\n              <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n                {{refundAction.label}}\n              </div>\n            </div>\n            <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n                  Add a reason\n                </label>\n                <p class=\"inline-error-message\"\n                *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n                <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n                <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n                <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n                <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n              </p>\n                <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n                [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n                  id=\"sendmeback\"\n                  name=\"sendMeBackField\" \n                  formControlName=\"sendMeBackField\"\n                rows=\"5\"></textarea>\n              \n              </div>\n\n            </div>\n  \n          </div>\n      \n        </fieldset>\n      </div>\n\n      <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h2 class=\"heading-medium\">\n              Why are you rejecting this refund?\n            </h2>\n          </legend>\n          <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundRejectReasonHasError\">\n            <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundRejectReason-{{j}}\"\n              formControlName=\"refundRejectReasonField\"\n              name=\"refundRejectReasonField\"\n              (click)=\"checkRefundActions(refundRejectReason.code)\"\n              type=\"radio\" value=\"{{refundRejectReason.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n                {{refundRejectReason.name}}\n              </label>\n            </div>\n            </div>\n      <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n            Enter reason\n          </label>\n          <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n            <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n            <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n          </p>\n          <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n          [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n          formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n        \n      </div>\n      \n        </fieldset>\n      </div>\n\n      <div class=\"govuk-button-group\">\n        <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n        <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n          data-module=\"govuk-button\">\n          Submit \n        </button>\n      <br/><br/>\n    </div>\n   \n  <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n  <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n  </div>\n \n\n  </main>\n \n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row pagesize\">\n        <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n          <h1 class=\"heading-refunds-xlarge\">\n            {{successMsg}}\n          </h1>\n        </div>\n        <p class=\"govuk-body process-refund-font\">\n        <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n        </p>\n      </div>\n  </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"] }]
         }], ctorParameters: () => [{ type: RefundsService }, { type: PaymentViewService }, { type: i1$1.FormBuilder }, { type: OrderslistService }, { type: NotificationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -5972,11 +5971,11 @@ class TableComponent {
         this.router.navigate([`/cases/case-details/${ccdCaseNumber}`], { relativeTo: this.activeRoute });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TableComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: TableComponent, isStandalone: false, selector: "ccpay-table", inputs: { DATASOURCE: "DATASOURCE", STATUS: "STATUS", errorMessage: "errorMessage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\">\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>ss\n    </select>\n  </div>\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right-padding\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\">\n      Filter by service:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All services</option>\n      <option *ngFor=\"let name of serviceLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n    <mat-table [dataSource]=\"dataSource\" matSort>\n\n      <ng-container matColumnDef=\"ccd_case_number\">\n        <mat-header-cell *matHeaderCellDef>Case reference</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"refund_reference\">\n        <mat-header-cell *matHeaderCellDef> Refund reference</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"user_full_name\">\n        <mat-header-cell *matHeaderCellDef> Submitted by</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }}\n        </mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date_created\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Date created</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated |\n          date:'d MMMM yyyy'}}\n        </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n        <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"><a href=\"javascript:void(0)\"\n                                                                     (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review\n          case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process\n          refund</a></mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n        <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"><a href=\"javascript:void(0)\"\n                                                                     (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review\n          refund</a></mat-cell>\n      </ng-container>\n\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n      </mat-row>\n    </mat-table>\n    <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n  </div>\n\n  <div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n</div>\n", styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell,.mat-mdc-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.mat-mdc-row,mat-header-row,mat-footer-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.row.mat-mdc-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}.float-right{float:right}.float-right-padding{float:initial;padding-right:2em;padding-left:8em}.float-left-padding{padding-left:12em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: TableComponent, isStandalone: false, selector: "ccpay-table", inputs: { DATASOURCE: "DATASOURCE", STATUS: "STATUS", errorMessage: "errorMessage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"add-remission\">\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\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\">\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>ss\n    </select>\n  </div>\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right-padding\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\">\n      Filter by service:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All services</option>\n      <option *ngFor=\"let name of serviceLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n    <mat-table [dataSource]=\"dataSource\" matSort>\n\n      <ng-container matColumnDef=\"ccd_case_number\">\n        <mat-header-cell *matHeaderCellDef>Case reference</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"refund_reference\">\n        <mat-header-cell *matHeaderCellDef> Refund reference</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"user_full_name\">\n        <mat-header-cell *matHeaderCellDef> Submitted by</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }}\n        </mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date_created\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Date created</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated |\n          date:'d MMMM yyyy'}}\n        </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n        <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"><a href=\"javascript:void(0)\"\n                                                                     (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review\n          case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process\n          refund</a></mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n        <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"><a href=\"javascript:void(0)\"\n                                                                     (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review\n          refund</a></mat-cell>\n      </ng-container>\n\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n      </mat-row>\n    </mat-table>\n    <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n  </div>\n\n  <div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n</div>\n", styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell,.mat-mdc-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.mat-mdc-row,mat-header-row,mat-footer-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.row.mat-mdc-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}.float-right{float:right}.float-right-padding{float:initial;padding-right:2em;padding-left:8em}.float-left-padding{padding-left:12em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-table', standalone: false, template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\">\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>ss\n    </select>\n  </div>\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right-padding\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\">\n      Filter by service:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All services</option>\n      <option *ngFor=\"let name of serviceLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n    <mat-table [dataSource]=\"dataSource\" matSort>\n\n      <ng-container matColumnDef=\"ccd_case_number\">\n        <mat-header-cell *matHeaderCellDef>Case reference</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"refund_reference\">\n        <mat-header-cell *matHeaderCellDef> Refund reference</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"user_full_name\">\n        <mat-header-cell *matHeaderCellDef> Submitted by</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }}\n        </mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date_created\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Date created</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated |\n          date:'d MMMM yyyy'}}\n        </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n        <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"><a href=\"javascript:void(0)\"\n                                                                     (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review\n          case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process\n          refund</a></mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n        <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"><a href=\"javascript:void(0)\"\n                                                                     (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review\n          refund</a></mat-cell>\n      </ng-container>\n\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n      </mat-row>\n    </mat-table>\n    <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n  </div>\n\n  <div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n</div>\n", styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell,.mat-mdc-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.mat-mdc-row,mat-header-row,mat-footer-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.row.mat-mdc-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}.float-right{float:right}.float-right-padding{float:initial;padding-right:2em;padding-left:8em}.float-left-padding{padding-left:12em}\n"] }]
+            args: [{ selector: 'ccpay-table', standalone: false, template: "<div class=\"add-remission\">\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\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\">\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>ss\n    </select>\n  </div>\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right-padding\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\">\n      Filter by service:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All services</option>\n      <option *ngFor=\"let name of serviceLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n\n  <div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n    <mat-table [dataSource]=\"dataSource\" matSort>\n\n      <ng-container matColumnDef=\"ccd_case_number\">\n        <mat-header-cell *matHeaderCellDef>Case reference</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"refund_reference\">\n        <mat-header-cell *matHeaderCellDef> Refund reference</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"user_full_name\">\n        <mat-header-cell *matHeaderCellDef> Submitted by</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }}\n        </mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date_created\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Date created</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}}</mat-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated |\n          date:'d MMMM yyyy'}}\n        </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n        <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"><a href=\"javascript:void(0)\"\n                                                                     (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review\n          case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process\n          refund</a></mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n        <mat-header-cell *matHeaderCellDef> Action</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"><a href=\"javascript:void(0)\"\n                                                                     (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review\n          refund</a></mat-cell>\n      </ng-container>\n\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n      </mat-row>\n    </mat-table>\n    <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n  </div>\n\n  <div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n</div>\n", styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell,.mat-mdc-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.mat-mdc-row,mat-header-row,mat-footer-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.row.mat-mdc-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}.float-right{float:right}.float-right-padding{float:initial;padding-right:2em;padding-left:8em}.float-left-padding{padding-left:12em}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -6127,11 +6126,11 @@ class ErrorBannerComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ErrorBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ErrorBannerComponent, isStandalone: false, selector: "ccpay-error-banner", inputs: { errorMessage: "errorMessage" }, ngImport: i0, template: "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom\">\n      {{errorMessage.title}}\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          {{errorMessage.body}}\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: [".govuk-error-summary h2{font-size:24px}.govuk-error-summary__list li{font-size:19px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ErrorBannerComponent, isStandalone: false, selector: "ccpay-error-banner", inputs: { errorMessage: "errorMessage" }, ngImport: i0, template: "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom\" id=\"error-summary-title\">\n      {{errorMessage.title}}\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n          {{errorMessage.body}}\n      </li>\n    </ul>\n  </div>\n</div>", styles: [".govuk-error-summary h2{font-size:24px}.govuk-error-summary__list li{font-size:19px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ErrorBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-error-banner', standalone: false, template: "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom\">\n      {{errorMessage.title}}\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          {{errorMessage.body}}\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: [".govuk-error-summary h2{font-size:24px}.govuk-error-summary__list li{font-size:19px}\n"] }]
+            args: [{ selector: 'ccpay-error-banner', standalone: false, template: "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom\" id=\"error-summary-title\">\n      {{errorMessage.title}}\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n          {{errorMessage.body}}\n      </li>\n    </ul>\n  </div>\n</div>", styles: [".govuk-error-summary h2{font-size:24px}.govuk-error-summary__list li{font-size:19px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { errorMessage: [{
                 type: Input,
                 args: ['errorMessage']
@@ -6308,11 +6307,11 @@ class MarkUnidentifiedPaymentComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkUnidentifiedPaymentComponent, deps: [{ token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MarkUnidentifiedPaymentComponent, isStandalone: false, selector: "app-mark-unidentified-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\" >\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n    <input #myInput  type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n    <h1 class=\"govuk-heading-l\">Mark payment as unidentified</h1>\n\n    <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n      <hr class=\"govuk-section-break govuk-section-break--visible\">\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n           \n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n        </tr>\n      </tbody>\n    </table>\n    </div>\n    <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n      <div class=\"govuk-form-group\">\n        <p class=\"unidentifiedSubText\">\n          Give a reason for marking this payment as unidentified.\n          <br/>\n          Include any investigations you've made.\n        </p>\n        <label class=\"govuk-heading-s\" for=\"investicationDetail\">\n\n        </label>\n        <textarea class=\"govuk-textarea govuk-!-width-three-quarters\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n        </textarea>\n        <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n          <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n          <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n          <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n          <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n        </p>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" (click)=\"saveAndContinue()\">\n          Continue\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n          Cancel\n        </button>\n      </div>\n    </form>\n  </div>\n   <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n        <h1 class=\"govuk-heading-s\"> Are you sure you want to mark this payment as unidentified? </h1>\n         \n        </strong>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <th class=\"govuk-table__header\" scope=\"col\">Investigations</th>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n          Cancel\n        </button>\n      </div>\n    </ng-container>\n      <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n          Are you sure you want to cancel?\n        </strong>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" (click)=\"gotoCasetransationPage()\">\n          Yes\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n          No\n        </button>\n      </div>\n    </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button-group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MarkUnidentifiedPaymentComponent, isStandalone: false, selector: "app-mark-unidentified-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\" >\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n    <input #myInput  type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n    <h1 class=\"heading-large\">Mark payment as unidentified</h1>\n\n    <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n      <hr class=\"govuk-section-break govuk-section-break--visible\">\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n           \n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n        </tr>\n      </tbody>\n    </table>\n    </div>\n    <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n      <div class=\"govuk-form-group\">\n        <p class=\"unidentifiedSubText\">\n          Give a reason for marking this payment as unidentified.\n          <br/>\n          Include any investigations you've made.\n        </p>\n        <label class=\"heading-small\" for=\"investicationDetail\">\n\n        </label>\n        <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n        </textarea>\n        <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n          <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n          <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n          <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n          <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n        </p>\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" (click)=\"saveAndContinue()\">\n          Continue\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n          Cancel\n        </button>\n      </div>\n    </form>\n  </div>\n   <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\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</span>\n        <h1 class=\"heading-small\"> Are you sure you want to mark this payment as unidentified? </h1>\n         \n        </strong>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Investigations</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n          Cancel\n        </button>\n      </div>\n    </ng-container>\n      <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\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</span>\n          Are you sure you want to cancel?\n        </strong>\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n          Yes\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n          No\n        </button>\n      </div>\n    </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkUnidentifiedPaymentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-mark-unidentified-payment', standalone: false, template: "<div class=\"mkpay-unidentified\" >\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n    <input #myInput  type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n    <h1 class=\"govuk-heading-l\">Mark payment as unidentified</h1>\n\n    <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n      <hr class=\"govuk-section-break govuk-section-break--visible\">\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n           \n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n        </tr>\n      </tbody>\n    </table>\n    </div>\n    <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n      <div class=\"govuk-form-group\">\n        <p class=\"unidentifiedSubText\">\n          Give a reason for marking this payment as unidentified.\n          <br/>\n          Include any investigations you've made.\n        </p>\n        <label class=\"govuk-heading-s\" for=\"investicationDetail\">\n\n        </label>\n        <textarea class=\"govuk-textarea govuk-!-width-three-quarters\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n        </textarea>\n        <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n          <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n          <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n          <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n          <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n        </p>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" (click)=\"saveAndContinue()\">\n          Continue\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n          Cancel\n        </button>\n      </div>\n    </form>\n  </div>\n   <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n        <h1 class=\"govuk-heading-s\"> Are you sure you want to mark this payment as unidentified? </h1>\n         \n        </strong>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <th class=\"govuk-table__header\" scope=\"col\">Investigations</th>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n          Cancel\n        </button>\n      </div>\n    </ng-container>\n      <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n          Are you sure you want to cancel?\n        </strong>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" (click)=\"gotoCasetransationPage()\">\n          Yes\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n          No\n        </button>\n      </div>\n    </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button-group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"] }]
+            args: [{ selector: 'app-mark-unidentified-payment', standalone: false, template: "<div class=\"mkpay-unidentified\" >\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n    <input #myInput  type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n    <h1 class=\"heading-large\">Mark payment as unidentified</h1>\n\n    <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n      <hr class=\"govuk-section-break govuk-section-break--visible\">\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n           \n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n        </tr>\n      </tbody>\n    </table>\n    </div>\n    <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n      <div class=\"govuk-form-group\">\n        <p class=\"unidentifiedSubText\">\n          Give a reason for marking this payment as unidentified.\n          <br/>\n          Include any investigations you've made.\n        </p>\n        <label class=\"heading-small\" for=\"investicationDetail\">\n\n        </label>\n        <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n        </textarea>\n        <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n          <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n          <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n          <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n          <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n        </p>\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" (click)=\"saveAndContinue()\">\n          Continue\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n          Cancel\n        </button>\n      </div>\n    </form>\n  </div>\n   <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\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</span>\n        <h1 class=\"heading-small\"> Are you sure you want to mark this payment as unidentified? </h1>\n         \n        </strong>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Investigations</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n          Cancel\n        </button>\n      </div>\n    </ng-container>\n      <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\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</span>\n          Are you sure you want to cancel?\n        </strong>\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n          Yes\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n          No\n        </button>\n      </div>\n    </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -6593,11 +6592,11 @@ class MarkUnsolicitedPaymentComponent {
         this.selectedSiteName = args.target.options[args.target.selectedIndex].text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkUnsolicitedPaymentComponent, deps: [{ token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MarkUnsolicitedPaymentComponent, isStandalone: false, selector: "app-mark-unsolicited-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\">\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n  <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n  <h1 class=\"govuk-heading-l\">Mark payment as transferred</h1>\n  <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n    <hr class=\"govuk-section-break govuk-section-break--visible\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  \n  <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label custom-govuk-label\" for=\"reason\">\n        Reason for payment being marked as transferred   \n      </label>\n        <textarea class=\"govuk-textarea govuk-!-width-three-quarters\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n        </textarea>\n        <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n          <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n          <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n          <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n          <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n        </p>\n    </div>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n        Receiving Site ID (Receiving court/Bulk centre site ID)    \n      </label>\n      <select class=\"govuk-select short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option  *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n      </select>\n      <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n        <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n        <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n      </p>\n    </div>\n   <div class=\"govuk-button-group\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"govuk-button\" (click)=\"saveAndContinue()\">\n        Confirm\n      </button>\n      <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n        Cancel\n      </button>\n    </div>\n  </form>\n  \n</div>\n       <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n          <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n        <h1 class=\"govuk-heading-s\"> Are you sure you want to mark this payment as transferred? </h1>\n        </strong>\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <th class=\"govuk-table__header\" scope=\"col\">Reason</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Receiving site ID</th>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{reason}}</td>\n            <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n          Cancel\n        </button>\n      </div>\n    </ng-container>\n      <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n          Are you sure you want to cancel?\n        </strong>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" (click)=\"gotoCasetransationPage()\">\n          Yes\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n          No\n        </button>\n      </div>\n    </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: 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: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MarkUnsolicitedPaymentComponent, isStandalone: false, selector: "app-mark-unsolicited-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\">\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n  <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n  <h1 class=\"heading-large\">Mark payment as transferred</h1>\n  <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n    <hr class=\"govuk-section-break govuk-section-break--visible\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  \n  <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label custom-govuk-label custom-govuk-label\" for=\"reason\">\n        Reason for payment being marked as transferred   \n      </label>\n        <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n        </textarea>\n        <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n          <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n          <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n          <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n          <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n        </p>\n    </div>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n        Receiving Site ID (Receiving court/Bulk centre site ID)    \n      </label>\n      <select class=\"form-control short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option  *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n      </select>\n      <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n        <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n        <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n      </p>\n    </div>\n   <div class=\"govuk-button--group\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button\" (click)=\"saveAndContinue()\">\n        Confirm\n      </button>\n      <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n        Cancel\n      </button>\n    </div>\n  </form>\n  \n</div>\n       <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n          <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\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</span>\n        <h1 class=\"heading-small\"> Are you sure you want to mark this payment as transferred? </h1>\n        </strong>\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Reason</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Receiving site ID</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{reason}}</td>\n            <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n          Cancel\n        </button>\n      </div>\n    </ng-container>\n      <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\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</span>\n          Are you sure you want to cancel?\n        </strong>\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n          Yes\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n          No\n        </button>\n      </div>\n    </ng-container>\n</div>", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: 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: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkUnsolicitedPaymentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-mark-unsolicited-payment', standalone: false, template: "<div class=\"mkpay-unidentified\">\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n  <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n  <h1 class=\"govuk-heading-l\">Mark payment as transferred</h1>\n  <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n    <hr class=\"govuk-section-break govuk-section-break--visible\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  \n  <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label custom-govuk-label\" for=\"reason\">\n        Reason for payment being marked as transferred   \n      </label>\n        <textarea class=\"govuk-textarea govuk-!-width-three-quarters\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n        </textarea>\n        <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n          <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n          <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n          <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n          <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n        </p>\n    </div>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n        Receiving Site ID (Receiving court/Bulk centre site ID)    \n      </label>\n      <select class=\"govuk-select short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option  *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n      </select>\n      <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n        <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n        <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n      </p>\n    </div>\n   <div class=\"govuk-button-group\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"govuk-button\" (click)=\"saveAndContinue()\">\n        Confirm\n      </button>\n      <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n        Cancel\n      </button>\n    </div>\n  </form>\n  \n</div>\n       <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n          <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n        <h1 class=\"govuk-heading-s\"> Are you sure you want to mark this payment as transferred? </h1>\n        </strong>\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <th class=\"govuk-table__header\" scope=\"col\">Reason</th>\n              <th class=\"govuk-table__header\" scope=\"col\">Receiving site ID</th>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{reason}}</td>\n            <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n          Cancel\n        </button>\n      </div>\n    </ng-container>\n      <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n          Are you sure you want to cancel?\n        </strong>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" class=\"govuk-button\" (click)=\"gotoCasetransationPage()\">\n          Yes\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n          No\n        </button>\n      </div>\n    </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"] }]
+            args: [{ selector: 'app-mark-unsolicited-payment', standalone: false, template: "<div class=\"mkpay-unidentified\">\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n  <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n  <h1 class=\"heading-large\">Mark payment as transferred</h1>\n  <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n    <hr class=\"govuk-section-break govuk-section-break--visible\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}}  </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  \n  <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label custom-govuk-label custom-govuk-label\" for=\"reason\">\n        Reason for payment being marked as transferred   \n      </label>\n        <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n        </textarea>\n        <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n          <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n          <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n          <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n          <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n        </p>\n    </div>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n        Receiving Site ID (Receiving court/Bulk centre site ID)    \n      </label>\n      <select class=\"form-control short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option  *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n      </select>\n      <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n        <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n        <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n      </p>\n    </div>\n   <div class=\"govuk-button--group\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button\" (click)=\"saveAndContinue()\">\n        Confirm\n      </button>\n      <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n        Cancel\n      </button>\n    </div>\n  </form>\n  \n</div>\n       <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n          <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\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</span>\n        <h1 class=\"heading-small\"> Are you sure you want to mark this payment as transferred? </h1>\n        </strong>\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Reason</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Receiving site ID</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell\">{{reason}}</td>\n            <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n          Cancel\n        </button>\n      </div>\n    </ng-container>\n      <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n        <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\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</span>\n          Are you sure you want to cancel?\n        </strong>\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n          Yes\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n          No\n        </button>\n      </div>\n    </ng-container>\n</div>", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -7033,11 +7032,11 @@ class AllocatePaymentsComponent {
         this.paymentLibComponent.viewName = 'fee-summary';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AllocatePaymentsComponent, deps: [{ token: ErrorHandlerService }, { token: CaseTransactionsService }, { token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AllocatePaymentsComponent, isStandalone: false, selector: "app-allocate-payments", inputs: { isTurnOff: "isTurnOff", caseType: "caseType" }, outputs: { reasonEventEmitter: "reasonEventEmitter", explanationEventEmitter: "explanationEventEmitter" }, ngImport: i0, template: "<div class=\"allocate-payments\">\n  <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n      <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n            </li>\n          </ol>\n        </div>\n\n    <div class=\"paymentrequest\">\n        <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n        <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n    </div>\n\n    <div  *ngFor=\"let orderRef of orderLevelFees; let i = index;\" class=\"govuk-radios__item unprocessed-payments--radio-button\">\n      <input class=\"govuk-radios__input\" id=\"'orderfee'+i+''\"\n      aria-label=\"orderLevelRecord\"\n      name=\"orderLevelRecord\"\n\n      (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n      type=\"radio\"\n      value=\"{{orderRef.orderTotalFees}}\" />\n      <label class=\"govuk-label govuk-radios__label\" for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n    </div>\n\n    <div class=\"paymentrequest\">\n        <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"govuk-button allbtb govuk-!-margin-right-1\">\n          Continue\n        </button>\n      </div>\n\n  </ng-container>\n\n   <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n    <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-heading-section\">\n      <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n      <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n        {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n    </div>\n    <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n      <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\"></th>\n            <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</th>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n            <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n              [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n              <div class=\"govuk-radios__item\">\n                <input class=\"govuk-radios__input\" id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n                  (click)=\"selectedPaymentGroup(paymentGroup)\" />\n                <label class=\"govuk-label govuk-radios__label\" for=\"unpaiedFee-{{i}}\"></label>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n            <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col4\">\n              {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col5\">\n              {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\"\n              [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n              {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n          </tr>\n\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-button-group-allocate\">\n      <button type=\"button\" class=\"govuk-button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n        (click)=\"saveAndContinue()\">\n        Continue\n      </button>\n      <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n        Cancel\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n    <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n    <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n    <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n      Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n    </h2>\n    <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n      <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n      </h3>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Amount Due</th>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n            <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n            <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col4\">\n              {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col5\">\n              {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n              *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length == 0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n        {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n      </strong>\n    </div>\n    <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n      <div class=\"govuk-form-group\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n          <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n            [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n            {{paymentSectionLabel.reason}}\n          </span>\n          <div\n            [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional govuk-form-group--error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n                     [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{reason.value}}\n              </label>\n            </div>\n          </div>\n          <div\n            [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional govuk-form-group--error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n                     [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{reason.value}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n      <div class=\"govuk-form-group\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n          <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n            [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n            Provide an explanatory note\n          </span>\n          <div\n            [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional govuk-form-group--error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n                     [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n                (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{explanation.value}}\n              </label>\n            </div>\n          </div>\n          <div\n            [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional govuk-form-group--error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n                     [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n                (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{explanation.value}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n\n    <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n      <div\n        [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n        id=\"conditional-how-contacted-conditional-3\">\n        <div class=\"govuk-form-group\">\n          <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n            Please enter details\n          </span>\n          <textarea class=\"govuk-textarea\"\n            [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n            id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n          </textarea>\n          <p class=\"inline-error-message\"\n            *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n            <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n            <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n            <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n            <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n          </p>\n        </div>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n          [ngClass]=\"isConfirmButtondisabled ? 'govuk-button' : 'govuk-button'\"\n          (click)=\"confirmAllocatePayement()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n          Cancel\n        </button>\n      </div>\n    </form>\n  </ng-container>\n</div>\n", styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .inline-error-class{outline:3px solid #a71414;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: keyValuePipe, name: "keyValue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AllocatePaymentsComponent, isStandalone: false, selector: "app-allocate-payments", inputs: { isTurnOff: "isTurnOff", caseType: "caseType" }, outputs: { reasonEventEmitter: "reasonEventEmitter", explanationEventEmitter: "explanationEventEmitter" }, ngImport: i0, template: "<div class=\"allocate-payments\">\n  <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n      <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n            </li>\n          </ol>\n        </div>\n\n    <div class=\"paymentrequest\">\n        <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n        <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n    </div>\n\n    <div  *ngFor=\"let orderRef of orderLevelFees; let i = index;\" class=\"multiple-choice unprocessed-payments--radio-button\">\n      <input id=\"'orderfee'+i+''\"\n      aria-label=\"orderLevelRecord\"\n      name=\"orderLevelRecord\"\n\n      (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n      type=\"radio\"\n      value=\"{{orderRef.orderTotalFees}}\" />\n      <label for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n    </div>\n\n    <div class=\"paymentrequest\">\n        <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"button allbtb button--disabled govuk-!-margin-right-1\">\n          Continue\n        </button>\n      </div>\n\n  </ng-container>\n\n   <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n    <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-heading-section\">\n      <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n      <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n        {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n    </div>\n    <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n      <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n            <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n            <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n              [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n              <div class=\"multiple-choice\">\n                <input id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n                  (click)=\"selectedPaymentGroup(paymentGroup)\" />\n                <label for=\"unpaiedFee-{{i}}\"></label>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n            <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col4\">\n              {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col5\">\n              {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\"\n              [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n              {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n          </tr>\n\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-button-group-allocate\">\n      <button type=\"button\" class=\"button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n        (click)=\"saveAndContinue()\">\n        Continue\n      </button>\n      <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n        Cancel\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n    <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n    <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n    <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n      Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n    </h2>\n    <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n      <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n      </h3>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount Due</td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n            <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n            <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col4\">\n              {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col5\">\n              {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n              *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length == 0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n        <span class=\"govuk-warning-text__assistive\">Warning</span>\n        {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n      </strong>\n    </div>\n    <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n      <div class=\"govuk-form-group\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n          <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n            [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n            {{paymentSectionLabel.reason}}\n          </span>\n          <div\n            [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n                     [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{reason.value}}\n              </label>\n            </div>\n          </div>\n          <div\n            [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n                     [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{reason.value}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n      <div class=\"govuk-form-group\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n          <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n            [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n            Provide an explanatory note\n          </span>\n          <div\n            [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n                     [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n                (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{explanation.value}}\n              </label>\n            </div>\n          </div>\n          <div\n            [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n                     [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n                (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{explanation.value}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n\n    <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n      <div\n        [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n        id=\"conditional-how-contacted-conditional-3\">\n        <div class=\"govuk-form-group\">\n          <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n            Please enter details\n          </span>\n          <textarea class=\"govuk-textarea\"\n            [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n            id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n          </textarea>\n          <p class=\"inline-error-message\"\n            *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n            <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n            <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n            <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n            <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n          </p>\n        </div>\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n          [ngClass]=\"isConfirmButtondisabled ? 'button button--disabled' : 'button'\"\n          (click)=\"confirmAllocatePayement()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n          Cancel\n        </button>\n      </div>\n    </form>\n  </ng-container>\n</div>\n", styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .form-group-error{border-left:5px solid #b10e1e;padding-left:15px}.allocate-payments .inline-error-class{outline:3px solid #a71414;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.multiple-choice{font-size:19px}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: keyValuePipe, name: "keyValue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AllocatePaymentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-allocate-payments', standalone: false, template: "<div class=\"allocate-payments\">\n  <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n      <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n            </li>\n          </ol>\n        </div>\n\n    <div class=\"paymentrequest\">\n        <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n        <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n    </div>\n\n    <div  *ngFor=\"let orderRef of orderLevelFees; let i = index;\" class=\"govuk-radios__item unprocessed-payments--radio-button\">\n      <input class=\"govuk-radios__input\" id=\"'orderfee'+i+''\"\n      aria-label=\"orderLevelRecord\"\n      name=\"orderLevelRecord\"\n\n      (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n      type=\"radio\"\n      value=\"{{orderRef.orderTotalFees}}\" />\n      <label class=\"govuk-label govuk-radios__label\" for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n    </div>\n\n    <div class=\"paymentrequest\">\n        <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"govuk-button allbtb govuk-!-margin-right-1\">\n          Continue\n        </button>\n      </div>\n\n  </ng-container>\n\n   <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n    <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-heading-section\">\n      <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n      <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n        {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n    </div>\n    <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n      <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\"></th>\n            <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</th>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n            <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n              [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n              <div class=\"govuk-radios__item\">\n                <input class=\"govuk-radios__input\" id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n                  (click)=\"selectedPaymentGroup(paymentGroup)\" />\n                <label class=\"govuk-label govuk-radios__label\" for=\"unpaiedFee-{{i}}\"></label>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n            <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col4\">\n              {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col5\">\n              {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\"\n              [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n              {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n          </tr>\n\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-button-group-allocate\">\n      <button type=\"button\" class=\"govuk-button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n        (click)=\"saveAndContinue()\">\n        Continue\n      </button>\n      <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n        Cancel\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n    <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n    <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n    <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n      Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n    </h2>\n    <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n      <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n      </h3>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Amount Due</th>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n            <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n            <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col4\">\n              {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col5\">\n              {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n              *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length == 0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n        <span class=\"govuk-visually-hidden\">Warning</span>\n        {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n      </strong>\n    </div>\n    <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n      <div class=\"govuk-form-group\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n          <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n            [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n            {{paymentSectionLabel.reason}}\n          </span>\n          <div\n            [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional govuk-form-group--error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n                     [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{reason.value}}\n              </label>\n            </div>\n          </div>\n          <div\n            [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional govuk-form-group--error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n                     [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{reason.value}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n      <div class=\"govuk-form-group\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n          <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n            [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n            Provide an explanatory note\n          </span>\n          <div\n            [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional govuk-form-group--error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n                     [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n                (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{explanation.value}}\n              </label>\n            </div>\n          </div>\n          <div\n            [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional govuk-form-group--error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n                     [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n                (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{explanation.value}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n\n    <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n      <div\n        [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n        id=\"conditional-how-contacted-conditional-3\">\n        <div class=\"govuk-form-group\">\n          <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n            Please enter details\n          </span>\n          <textarea class=\"govuk-textarea\"\n            [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n            id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n          </textarea>\n          <p class=\"inline-error-message\"\n            *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n            <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n            <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n            <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n            <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n          </p>\n        </div>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n          [ngClass]=\"isConfirmButtondisabled ? 'govuk-button' : 'govuk-button'\"\n          (click)=\"confirmAllocatePayement()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n          Cancel\n        </button>\n      </div>\n    </form>\n  </ng-container>\n</div>\n", styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .inline-error-class{outline:3px solid #a71414;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}\n"] }]
+            args: [{ selector: 'app-allocate-payments', standalone: false, template: "<div class=\"allocate-payments\">\n  <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n      <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n            </li>\n          </ol>\n        </div>\n\n    <div class=\"paymentrequest\">\n        <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n        <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n    </div>\n\n    <div  *ngFor=\"let orderRef of orderLevelFees; let i = index;\" class=\"multiple-choice unprocessed-payments--radio-button\">\n      <input id=\"'orderfee'+i+''\"\n      aria-label=\"orderLevelRecord\"\n      name=\"orderLevelRecord\"\n\n      (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n      type=\"radio\"\n      value=\"{{orderRef.orderTotalFees}}\" />\n      <label for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n    </div>\n\n    <div class=\"paymentrequest\">\n        <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"button allbtb button--disabled govuk-!-margin-right-1\">\n          Continue\n        </button>\n      </div>\n\n  </ng-container>\n\n   <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n    <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-heading-section\">\n      <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n      <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n        {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n    </div>\n    <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n      <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n            <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n            <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n              [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n              <div class=\"multiple-choice\">\n                <input id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n                  (click)=\"selectedPaymentGroup(paymentGroup)\" />\n                <label for=\"unpaiedFee-{{i}}\"></label>\n              </div>\n            </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n            <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col4\">\n              {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col5\">\n              {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\"\n              [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n              {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n          </tr>\n\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-button-group-allocate\">\n      <button type=\"button\" class=\"button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n        (click)=\"saveAndContinue()\">\n        Continue\n      </button>\n      <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n        Cancel\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n    <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n    <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n    <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n      Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n    </h2>\n    <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n      <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n      </h3>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount Due</td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n            <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n            <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col4\">\n              {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col5\">\n              {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n            <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n              *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length == 0\">\n          <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n        <span class=\"govuk-warning-text__assistive\">Warning</span>\n        {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n      </strong>\n    </div>\n    <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n      <div class=\"govuk-form-group\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n          <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n            [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n            {{paymentSectionLabel.reason}}\n          </span>\n          <div\n            [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n                     [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{reason.value}}\n              </label>\n            </div>\n          </div>\n          <div\n            [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n                     [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{reason.value}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n      <div class=\"govuk-form-group\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n          <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n            [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n            Provide an explanatory note\n          </span>\n          <div\n            [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n                     [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n                (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{explanation.value}}\n              </label>\n            </div>\n          </div>\n          <div\n            [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n            data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n              <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n                     [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n                (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                {{explanation.value}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n\n    <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n      <div\n        [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n        id=\"conditional-how-contacted-conditional-3\">\n        <div class=\"govuk-form-group\">\n          <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n            Please enter details\n          </span>\n          <textarea class=\"govuk-textarea\"\n            [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n            id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n          </textarea>\n          <p class=\"inline-error-message\"\n            *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n            <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n            <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n            <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n            <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n          </p>\n        </div>\n      </div>\n      <div class=\"govuk-button--group\">\n        <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n          [ngClass]=\"isConfirmButtondisabled ? 'button button--disabled' : 'button'\"\n          (click)=\"confirmAllocatePayement()\">\n          Confirm\n        </button>\n        <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n          Cancel\n        </button>\n      </div>\n    </form>\n  </ng-container>\n</div>\n", styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .form-group-error{border-left:5px solid #b10e1e;padding-left:15px}.allocate-payments .inline-error-class{outline:3px solid #a71414;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.multiple-choice{font-size:19px}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}\n"] }]
         }], ctorParameters: () => [{ type: ErrorHandlerService }, { type: CaseTransactionsService }, { type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -7335,11 +7334,11 @@ class FeeSummaryComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FeeSummaryComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: i3.Location }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: FeeSummaryComponent, isStandalone: false, selector: "ccpay-fee-summary", inputs: { paymentGroupRef: "paymentGroupRef", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", caseType: "caseType", telephonySelectionEnable: "telephonySelectionEnable" }, ngImport: i0, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n      <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n        <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n  </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n    <main class=\"govuk-main-wrapper\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n      <div class=\"summaryheader\">\n          <h1 class=\"govuk-heading-l govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n          <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n      </div>\n\n  <!-- <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <h1 class=\"govuk-heading-xl\">Fee Summary</h1>\n    </div>\n\n\n    \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"govuk-button govuk-!-margin-right-1\"\u00A0:\u00A0\"govuk-button govuk-!-margin-right-1\"'>\n              Add a new fee\n            </button>\n\n            <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button\">Add a new fee</a>\n    </div>\n  </div> -->\n\n\n\n\n\n  <div *ngIf=\"errorMessage\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\n          An error has occurred on the Fee summary page.\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"paymentGroup\">\n          <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n              </tr>\n          </thead>\n\n          <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n              <ng-container *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n              <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n                          <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n                              <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n                            </span>\n\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"  *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"   *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                      </td>\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                      </td>\n              </tr>\n              <tr class=\"govuk-table__row\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                    <td>\n                      <div>Remission {{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td>\n                      <div>1</div>\n                    </td>\n                    <td>\n                      <div></div>\n                    </td>\n                    <td>\n                      <div style=\"text-align: right;\">\n                        -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                      </div>\n                    </td>\n              </tr>\n          </ng-container>\n          </tbody>\n      </table>\n  </div>\n  <div class=\"addfee\">\n      <button  *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n              [disabled]=\"isPaymentExist\"\n              [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary\" : \"govuk-button govuk-button--secondary\"'>\n                Add fee\n      </button>\n    <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n   <div  class=\"feeAddButton\">\n          <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n    </div>\n  </div>\n\n<!--   This is  section is used when there is more that one payment provider. It is commented as kerv is the default option.\n  <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n    <h3 class=\"govuk-heading-m govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to take a payment?</h3>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\"   [value]=\"getAntennaValue()\"\n           (input)=\"setPaymentValue(getAntennaValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n           (input)=\"setPaymentValue(getKervValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Nexus</label>\n  </div>\n-->\n\n\n<!--\n  <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n      <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n        <strong>What service is this fee for?</strong>\n      </label>\n      <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option value=\"AA07\">Divorce</option>\n        <option value=\"AA09\">Financial Remedy</option>\n        <option value=\"AA08\">Probate</option>\n      </select>\n  </div> -->\n\n  <div class=\"govuk-panel govuk-panel-border--remission-added\"  *ngIf=\"isThereAnyRemission()\">\n    <h1 class=\"govuk-panel__title\">\n      {{ \"Remission added\" | rpxTranslate }}\n    </h1>\n  </div>\n\n  <div class=\"centerDiv\"><strong> What would you like to do next? </strong> </div>\n  <div class=\"centerDiv\">\n    <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n              [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n              [ngClass]='totalFee <= 0 || !service || isConfirmationBtnDisabled? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'>\n        Take payment\n    </button>\n    <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"govuk-button govuk-!-margin-right-1\">\n      <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n\n    <button (click)=\"loadCaseTransactionPage()\"\n            class=\"govuk-button govuk-!-margin-right-1\">\n      Return to the case\n    </button>\n\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n          <span class=\"govuk-visually-hidden\">Warning</span>\n          Are you sure you want to delete this fee?\n        </strong>\n      </div>\n      <div class=\"govuk-button-grb\">\n        <form novalidate>\n          <button type=\"submit\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelRemission()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"govuk-button\"\n          *ngIf =\"!isRemoveBtnDisabled\"\n          [ngClass]='isRemoveBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'\n          (click)=\"removeFee(currentFee)\">\n            Remove\n          </button>\n        </form>\n      </div>\n    </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (confirmRemissionEvent)=\"confirmRemission()\"\n (remissionAdded)=\"setAddedRemission()\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.centerDiv{font-size:24px;margin-top:30px;display:flex;justify-content:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.govuk-heading-xl{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.govuk-panel-border--remission-added{color:#0b0c0c;border:5px solid #00703C}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AddRemissionComponent, selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: FeeSummaryComponent, isStandalone: false, selector: "ccpay-fee-summary", inputs: { paymentGroupRef: "paymentGroupRef", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", caseType: "caseType", telephonySelectionEnable: "telephonySelectionEnable" }, ngImport: i0, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n      <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n        <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n  </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n    <main class=\"govuk-main-wrapper\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n      <div class=\"summaryheader\">\n          <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n          <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n      </div>\n\n  <!-- <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <h1 class=\"heading-xlarge\">Fee Summary</h1>\n    </div>\n\n\n    \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n              Add a new fee\n            </button>\n\n            <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n    </div>\n  </div> -->\n\n\n\n\n\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        An error has occurred on the Fee summary page.\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table  govuk-!-margin-bottom-2\" *ngIf=\"paymentGroup\">\n          <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n              </tr>\n          </thead>\n\n          <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n              <ng-container *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n              <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n                          <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n                              <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n                            </span>\n\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"  *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"   *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                      </td>\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                      </td>\n              </tr>\n              <tr class=\"govuk-table__row\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                    <td>\n                      <div>Remission {{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td>\n                      <div>1</div>\n                    </td>\n                    <td>\n                      <div></div>\n                    </td>\n                    <td>\n                      <div style=\"text-align: right;\">\n                        -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                      </div>\n                    </td>\n              </tr>\n          </ng-container>\n          </tbody>\n      </table>\n  </div>\n  <div class=\"addfee\">\n      <button  *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n              [disabled]=\"isPaymentExist\"\n              [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n                Add fee\n      </button>\n    <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n   <div  class=\"feeAddButton\">\n          <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n    </div>\n  </div>\n\n<!--   This is  section is used when there is more that one payment provider. It is commented as kerv is the default option.\n  <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n    <h3 class=\"heading-medium govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to take a payment?</h3>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\"   [value]=\"getAntennaValue()\"\n           (input)=\"setPaymentValue(getAntennaValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n           (input)=\"setPaymentValue(getKervValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Nexus</label>\n  </div>\n-->\n\n\n<!--\n  <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n      <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n        <strong>What service is this fee for?</strong>\n      </label>\n      <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option value=\"AA07\">Divorce</option>\n        <option value=\"AA09\">Financial Remedy</option>\n        <option value=\"AA08\">Probate</option>\n      </select>\n  </div> -->\n\n  <div class=\"govuk-panel govuk-panel-border--remission-added\"  *ngIf=\"isThereAnyRemission()\">\n    <h1 class=\"govuk-panel__title\">\n      {{ \"Remission added\" | rpxTranslate }}\n    </h1>\n  </div>\n\n  <div class=\"centerDiv\"><strong> What would you like to do next? </strong> </div>\n  <div class=\"centerDiv\">\n    <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n              [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n              [ngClass]='totalFee <= 0 || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n        Take payment\n    </button>\n    <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n      <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n\n    <button (click)=\"loadCaseTransactionPage()\"\n            class=\"button govuk-!-margin-right-1\">\n      Return to the case\n    </button>\n\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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</span>\n          Are you sure you want to delete this fee?\n        </strong>\n      </div>\n      <div class=\"govuk-button-grb\">\n        <form novalidate>\n          <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"button\"\n          *ngIf =\"!isRemoveBtnDisabled\"\n          [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n          (click)=\"removeFee(currentFee)\">\n            Remove\n          </button>\n        </form>\n      </div>\n    </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (confirmRemissionEvent)=\"confirmRemission()\"\n (remissionAdded)=\"setAddedRemission()\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.centerDiv{font-size:24px;margin-top:30px;display:flex;justify-content:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}.heading-medium{font-size:20px;line-height:1.11111}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.govuk-panel-border--remission-added{color:#0b0c0c;border:5px solid #00703C}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AddRemissionComponent, selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "confirmRemissionEvent", "remissionAdded", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FeeSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-fee-summary', standalone: false, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n      <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n        <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n  </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n    <main class=\"govuk-main-wrapper\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n      <div class=\"summaryheader\">\n          <h1 class=\"govuk-heading-l govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n          <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n      </div>\n\n  <!-- <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <h1 class=\"govuk-heading-xl\">Fee Summary</h1>\n    </div>\n\n\n    \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"govuk-button govuk-!-margin-right-1\"\u00A0:\u00A0\"govuk-button govuk-!-margin-right-1\"'>\n              Add a new fee\n            </button>\n\n            <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button\">Add a new fee</a>\n    </div>\n  </div> -->\n\n\n\n\n\n  <div *ngIf=\"errorMessage\">\n    <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n      <div role=\"alert\">\n        <h2 class=\"govuk-error-summary__title\">\n          An error has occurred on the Fee summary page.\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"paymentGroup\">\n          <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n              </tr>\n          </thead>\n\n          <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n              <ng-container *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n              <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n                          <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n                              <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n                            </span>\n\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"  *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"   *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                      </td>\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                      </td>\n              </tr>\n              <tr class=\"govuk-table__row\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                    <td>\n                      <div>Remission {{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td>\n                      <div>1</div>\n                    </td>\n                    <td>\n                      <div></div>\n                    </td>\n                    <td>\n                      <div style=\"text-align: right;\">\n                        -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                      </div>\n                    </td>\n              </tr>\n          </ng-container>\n          </tbody>\n      </table>\n  </div>\n  <div class=\"addfee\">\n      <button  *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n              [disabled]=\"isPaymentExist\"\n              [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary\" : \"govuk-button govuk-button--secondary\"'>\n                Add fee\n      </button>\n    <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n   <div  class=\"feeAddButton\">\n          <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n    </div>\n  </div>\n\n<!--   This is  section is used when there is more that one payment provider. It is commented as kerv is the default option.\n  <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n    <h3 class=\"govuk-heading-m govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to take a payment?</h3>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\"   [value]=\"getAntennaValue()\"\n           (input)=\"setPaymentValue(getAntennaValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n           (input)=\"setPaymentValue(getKervValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Nexus</label>\n  </div>\n-->\n\n\n<!--\n  <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n      <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n        <strong>What service is this fee for?</strong>\n      </label>\n      <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option value=\"AA07\">Divorce</option>\n        <option value=\"AA09\">Financial Remedy</option>\n        <option value=\"AA08\">Probate</option>\n      </select>\n  </div> -->\n\n  <div class=\"govuk-panel govuk-panel-border--remission-added\"  *ngIf=\"isThereAnyRemission()\">\n    <h1 class=\"govuk-panel__title\">\n      {{ \"Remission added\" | rpxTranslate }}\n    </h1>\n  </div>\n\n  <div class=\"centerDiv\"><strong> What would you like to do next? </strong> </div>\n  <div class=\"centerDiv\">\n    <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n              [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n              [ngClass]='totalFee <= 0 || !service || isConfirmationBtnDisabled? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'>\n        Take payment\n    </button>\n    <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"govuk-button govuk-!-margin-right-1\">\n      <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n\n    <button (click)=\"loadCaseTransactionPage()\"\n            class=\"govuk-button govuk-!-margin-right-1\">\n      Return to the case\n    </button>\n\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n          <span class=\"govuk-visually-hidden\">Warning</span>\n          Are you sure you want to delete this fee?\n        </strong>\n      </div>\n      <div class=\"govuk-button-grb\">\n        <form novalidate>\n          <button type=\"submit\" class=\"govuk-button govuk-button--secondary\" (click)=\"cancelRemission()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"govuk-button\"\n          *ngIf =\"!isRemoveBtnDisabled\"\n          [ngClass]='isRemoveBtnDisabled ? \"govuk-button govuk-!-margin-right-1\" : \"govuk-button govuk-!-margin-right-1\"'\n          (click)=\"removeFee(currentFee)\">\n            Remove\n          </button>\n        </form>\n      </div>\n    </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (confirmRemissionEvent)=\"confirmRemission()\"\n (remissionAdded)=\"setAddedRemission()\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.centerDiv{font-size:24px;margin-top:30px;display:flex;justify-content:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.govuk-heading-xl{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.govuk-panel-border--remission-added{color:#0b0c0c;border:5px solid #00703C}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"] }]
+            args: [{ selector: 'ccpay-fee-summary', standalone: false, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n      <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n        <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n  </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n    <main class=\"govuk-main-wrapper\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n      <div class=\"summaryheader\">\n          <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n          <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n      </div>\n\n  <!-- <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <h1 class=\"heading-xlarge\">Fee Summary</h1>\n    </div>\n\n\n    \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n              Add a new fee\n            </button>\n\n            <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n    </div>\n  </div> -->\n\n\n\n\n\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        An error has occurred on the Fee summary page.\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table  govuk-!-margin-bottom-2\" *ngIf=\"paymentGroup\">\n          <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n              </tr>\n          </thead>\n\n          <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n              <ng-container *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n              <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n                          <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n                              <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n                            </span>\n\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"  *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"   *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                      </td>\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                      </td>\n              </tr>\n              <tr class=\"govuk-table__row\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                    <td>\n                      <div>Remission {{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td>\n                      <div>1</div>\n                    </td>\n                    <td>\n                      <div></div>\n                    </td>\n                    <td>\n                      <div style=\"text-align: right;\">\n                        -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                      </div>\n                    </td>\n              </tr>\n          </ng-container>\n          </tbody>\n      </table>\n  </div>\n  <div class=\"addfee\">\n      <button  *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n              [disabled]=\"isPaymentExist\"\n              [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n                Add fee\n      </button>\n    <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n   <div  class=\"feeAddButton\">\n          <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n    </div>\n  </div>\n\n<!--   This is  section is used when there is more that one payment provider. It is commented as kerv is the default option.\n  <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n    <h3 class=\"heading-medium govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to take a payment?</h3>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\"   [value]=\"getAntennaValue()\"\n           (input)=\"setPaymentValue(getAntennaValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n           (input)=\"setPaymentValue(getKervValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Nexus</label>\n  </div>\n-->\n\n\n<!--\n  <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n      <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n        <strong>What service is this fee for?</strong>\n      </label>\n      <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option value=\"AA07\">Divorce</option>\n        <option value=\"AA09\">Financial Remedy</option>\n        <option value=\"AA08\">Probate</option>\n      </select>\n  </div> -->\n\n  <div class=\"govuk-panel govuk-panel-border--remission-added\"  *ngIf=\"isThereAnyRemission()\">\n    <h1 class=\"govuk-panel__title\">\n      {{ \"Remission added\" | rpxTranslate }}\n    </h1>\n  </div>\n\n  <div class=\"centerDiv\"><strong> What would you like to do next? </strong> </div>\n  <div class=\"centerDiv\">\n    <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n              [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n              [ngClass]='totalFee <= 0 || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n        Take payment\n    </button>\n    <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n      <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n\n    <button (click)=\"loadCaseTransactionPage()\"\n            class=\"button govuk-!-margin-right-1\">\n      Return to the case\n    </button>\n\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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</span>\n          Are you sure you want to delete this fee?\n        </strong>\n      </div>\n      <div class=\"govuk-button-grb\">\n        <form novalidate>\n          <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"button\"\n          *ngIf =\"!isRemoveBtnDisabled\"\n          [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n          (click)=\"removeFee(currentFee)\">\n            Remove\n          </button>\n        </form>\n      </div>\n    </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (confirmRemissionEvent)=\"confirmRemission()\"\n (remissionAdded)=\"setAddedRemission()\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.centerDiv{font-size:24px;margin-top:30px;display:flex;justify-content:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}.heading-medium{font-size:20px;line-height:1.11111}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.govuk-panel-border--remission-added{color:#0b0c0c;border:5px solid #00703C}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: i3.Location }, { type: PaymentViewService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -7928,11 +7927,11 @@ class ReportsComponent {
         return amt ? Number.parseFloat(amt).toFixed(2) : '0.00';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ReportsComponent, deps: [{ token: XlFileService }, { token: ErrorHandlerService }, { token: i1$1.FormBuilder }, { token: BulkScaningPaymentService }, { token: 'PAYMENT_LIB' }, { token: PaymentViewService }, { token: RefundsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ReportsComponent, isStandalone: false, selector: "ccpay-reports", inputs: { ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED" }, ngImport: i0, template: "<div class=\"header\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='REPORTS'>\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <legend class=\"govuk-fieldset__legend--xl\">\n         <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n      </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n     <div  class=\"govuk-form-group\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div  class=\"govuk-radios__item\">\n              <input\n              required\n              id=\"DataLoss\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('DATA_LOSS')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"DATA_LOSS\"\n               data-aria-controls=\"DataLoss\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n              <span class=\"govuk-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n          </div>\n\n         <div class=\"govuk-radios__item\">\n              <input\n              id=\"UnprocessedTransactions\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('UNPROCESSED')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"UNPROCESSED\"\n              data-aria-controls=\"UnprocessedTransactions\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n              <span class=\"govuk-hint\">Transaction records that are still unprocessed by staff.</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"ProcessedUnallocated\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n            type=\"radio\"\n            value=\"PROCESSED_UNALLOCATED\"\n            data-aria-controls=\"ProcessedUnallocated\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n            <span class=\"govuk-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"ShortfallsandSurplus\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n            type=\"radio\"\n            value=\"SURPLUS_AND_SHORTFALL\"\n            data-aria-controls=\"ShortfallsandSurplus\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n            <span class=\"govuk-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n               E.g: Refund approval, Customer contact</span>\n         </div>\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"PaymentFailureEvent\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n            type=\"radio\"\n            value=\"PAYMENT_FAILURE_EVENT\"\n            data-aria-controls=\"PaymentFailureEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n            <span class=\"govuk-hint\">Failed payment transaction details</span>\n         </div>\n          <div class=\"govuk-radios__item\">\n            <input\n              id=\"TelephonyPayments\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              name=\"selectedreport\"\n              (click)=\"validateDates('TELEPHONY_PAYMENTS')\"\n              type=\"radio\"\n              value=\"TELEPHONY_PAYMENTS\"\n              data-aria-controls=\"TelephonyPayments\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"TelephonyPayments\">Telephony Payments</label>\n            <span class=\"govuk-hint\">All Telephony Payments</span>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input\n              id=\"RefundsEvent\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              name=\"selectedreport\"\n              (click)=\"validateDates('REFUNDS')\"\n              type=\"radio\"\n              value=\"REFUNDS\"\n              data-aria-controls=\"RefundsEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"RefundsEvent\">Refunds</label>\n            <span class=\"govuk-hint\">Details of refunds</span>\n          </div>\n       </div>\n     </div>\n     <div  class=\"govuk-form-group\">\n      <div class=\"datefrom\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"govuk-input\" id=\"date-from\" name=\"date-from\" type=\"date\"  formControlName=\"startDate\" required/>\n      </div>\n\n      <div class=\"dateto\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"govuk-input\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n      </div>\n     </div>\n   <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">\n      <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n      <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n      <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 days</span>\n   </p>\n    <div class=\"btnsubmit\">\n     <button type=\"submit\" (click)=\"downloadReport()\" class=\"govuk-button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">Download report</button>\n   </div>\n </form>\n\n", styles: [".govuk-radios__input:focus+.govuk-radios__label:before{border-width:4px;-webkit-box-shadow:0 0 0 4px rgb(255,175,0);box-shadow:0 0 0 4px #ffaf00}.datefrom{width:50%;float:left}.dateto{width:50%;float:right}.govuk-label--m{font-size:large}.govuk-hint{padding-left:.7em}.header{margin-top:10px;margin-bottom:15px}.btnsubmit{margin-bottom:30px}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: 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: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ReportsComponent, isStandalone: false, selector: "ccpay-reports", inputs: { ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED" }, ngImport: i0, template: "<div class=\"header\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='REPORTS'>\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <legend class=\"govuk-fieldset__legend--xl\">\n         <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n      </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n     <div  class=\"govuk-form-group\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div  class=\"govuk-radios__item\">\n              <input\n              required\n              id=\"DataLoss\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('DATA_LOSS')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"DATA_LOSS\"\n               data-aria-controls=\"DataLoss\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n              <span class=\"form-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n          </div>\n\n         <div class=\"govuk-radios__item\">\n              <input\n              id=\"UnprocessedTransactions\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('UNPROCESSED')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"UNPROCESSED\"\n              data-aria-controls=\"UnprocessedTransactions\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n              <span class=\"form-hint\">Transaction records that are still unprocessed by staff.</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"ProcessedUnallocated\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n            type=\"radio\"\n            value=\"PROCESSED_UNALLOCATED\"\n            data-aria-controls=\"ProcessedUnallocated\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n            <span class=\"form-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"ShortfallsandSurplus\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n            type=\"radio\"\n            value=\"SURPLUS_AND_SHORTFALL\"\n            data-aria-controls=\"ShortfallsandSurplus\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n            <span class=\"form-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n               E.g: Refund approval, Customer contact</span>\n         </div>\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"PaymentFailureEvent\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n            type=\"radio\"\n            value=\"PAYMENT_FAILURE_EVENT\"\n            data-aria-controls=\"PaymentFailureEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n            <span class=\"form-hint\">Failed payment transaction details</span>\n         </div>\n          <div class=\"govuk-radios__item\">\n            <input\n              id=\"TelephonyPayments\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              name=\"selectedreport\"\n              (click)=\"validateDates('TELEPHONY_PAYMENTS')\"\n              type=\"radio\"\n              value=\"TELEPHONY_PAYMENTS\"\n              data-aria-controls=\"TelephonyPayments\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"TelephonyPayments\">Telephony Payments</label>\n            <span class=\"form-hint\">All Telephony Payments</span>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input\n              id=\"RefundsEvent\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              name=\"selectedreport\"\n              (click)=\"validateDates('REFUNDS')\"\n              type=\"radio\"\n              value=\"REFUNDS\"\n              data-aria-controls=\"RefundsEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"RefundsEvent\">Refunds</label>\n            <span class=\"form-hint\">Details of refunds</span>\n          </div>\n       </div>\n     </div>\n     <div  class=\"govuk-form-group\">\n      <div class=\"datefrom\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-from\" name=\"date-from\" type=\"date\"  formControlName=\"startDate\" required/>\n      </div>\n\n      <div class=\"dateto\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n      </div>\n     </div>\n   <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">\n      <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n      <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n      <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 days</span>\n   </p>\n    <div class=\"btnsubmit\">\n     <button type=\"submit\" (click)=\"downloadReport()\" class=\"button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">Download report</button>\n   </div>\n </form>\n\n", styles: [".govuk-radios__input:focus+.govuk-radios__label:before{border-width:4px;-webkit-box-shadow:0 0 0 4px rgb(255,175,0);box-shadow:0 0 0 4px #ffaf00}.datefrom{width:50%;float:left}.dateto{width:50%;float:right}.govuk-label--m{font-size:large}.form-hint{padding-left:.7em}.header{margin-top:10px;margin-bottom:15px}.btnsubmit{margin-bottom:30px}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: 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: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ReportsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-reports', standalone: false, template: "<div class=\"header\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='REPORTS'>\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <legend class=\"govuk-fieldset__legend--xl\">\n         <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n      </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n     <div  class=\"govuk-form-group\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div  class=\"govuk-radios__item\">\n              <input\n              required\n              id=\"DataLoss\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('DATA_LOSS')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"DATA_LOSS\"\n               data-aria-controls=\"DataLoss\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n              <span class=\"govuk-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n          </div>\n\n         <div class=\"govuk-radios__item\">\n              <input\n              id=\"UnprocessedTransactions\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('UNPROCESSED')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"UNPROCESSED\"\n              data-aria-controls=\"UnprocessedTransactions\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n              <span class=\"govuk-hint\">Transaction records that are still unprocessed by staff.</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"ProcessedUnallocated\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n            type=\"radio\"\n            value=\"PROCESSED_UNALLOCATED\"\n            data-aria-controls=\"ProcessedUnallocated\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n            <span class=\"govuk-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"ShortfallsandSurplus\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n            type=\"radio\"\n            value=\"SURPLUS_AND_SHORTFALL\"\n            data-aria-controls=\"ShortfallsandSurplus\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n            <span class=\"govuk-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n               E.g: Refund approval, Customer contact</span>\n         </div>\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"PaymentFailureEvent\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n            type=\"radio\"\n            value=\"PAYMENT_FAILURE_EVENT\"\n            data-aria-controls=\"PaymentFailureEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n            <span class=\"govuk-hint\">Failed payment transaction details</span>\n         </div>\n          <div class=\"govuk-radios__item\">\n            <input\n              id=\"TelephonyPayments\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              name=\"selectedreport\"\n              (click)=\"validateDates('TELEPHONY_PAYMENTS')\"\n              type=\"radio\"\n              value=\"TELEPHONY_PAYMENTS\"\n              data-aria-controls=\"TelephonyPayments\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"TelephonyPayments\">Telephony Payments</label>\n            <span class=\"govuk-hint\">All Telephony Payments</span>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input\n              id=\"RefundsEvent\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              name=\"selectedreport\"\n              (click)=\"validateDates('REFUNDS')\"\n              type=\"radio\"\n              value=\"REFUNDS\"\n              data-aria-controls=\"RefundsEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"RefundsEvent\">Refunds</label>\n            <span class=\"govuk-hint\">Details of refunds</span>\n          </div>\n       </div>\n     </div>\n     <div  class=\"govuk-form-group\">\n      <div class=\"datefrom\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"govuk-input\" id=\"date-from\" name=\"date-from\" type=\"date\"  formControlName=\"startDate\" required/>\n      </div>\n\n      <div class=\"dateto\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"govuk-input\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n      </div>\n     </div>\n   <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">\n      <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n      <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n      <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 days</span>\n   </p>\n    <div class=\"btnsubmit\">\n     <button type=\"submit\" (click)=\"downloadReport()\" class=\"govuk-button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">Download report</button>\n   </div>\n </form>\n\n", styles: [".govuk-radios__input:focus+.govuk-radios__label:before{border-width:4px;-webkit-box-shadow:0 0 0 4px rgb(255,175,0);box-shadow:0 0 0 4px #ffaf00}.datefrom{width:50%;float:left}.dateto{width:50%;float:right}.govuk-label--m{font-size:large}.govuk-hint{padding-left:.7em}.header{margin-top:10px;margin-bottom:15px}.btnsubmit{margin-bottom:30px}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}\n"] }]
+            args: [{ selector: 'ccpay-reports', standalone: false, template: "<div class=\"header\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='REPORTS'>\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <legend class=\"govuk-fieldset__legend--xl\">\n         <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n      </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n     <div  class=\"govuk-form-group\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div  class=\"govuk-radios__item\">\n              <input\n              required\n              id=\"DataLoss\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('DATA_LOSS')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"DATA_LOSS\"\n               data-aria-controls=\"DataLoss\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n              <span class=\"form-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n          </div>\n\n         <div class=\"govuk-radios__item\">\n              <input\n              id=\"UnprocessedTransactions\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('UNPROCESSED')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"UNPROCESSED\"\n              data-aria-controls=\"UnprocessedTransactions\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n              <span class=\"form-hint\">Transaction records that are still unprocessed by staff.</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"ProcessedUnallocated\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n            type=\"radio\"\n            value=\"PROCESSED_UNALLOCATED\"\n            data-aria-controls=\"ProcessedUnallocated\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n            <span class=\"form-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"ShortfallsandSurplus\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n            type=\"radio\"\n            value=\"SURPLUS_AND_SHORTFALL\"\n            data-aria-controls=\"ShortfallsandSurplus\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n            <span class=\"form-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n               E.g: Refund approval, Customer contact</span>\n         </div>\n         <div class=\"govuk-radios__item\">\n            <input\n            id=\"PaymentFailureEvent\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n            type=\"radio\"\n            value=\"PAYMENT_FAILURE_EVENT\"\n            data-aria-controls=\"PaymentFailureEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n            <span class=\"form-hint\">Failed payment transaction details</span>\n         </div>\n          <div class=\"govuk-radios__item\">\n            <input\n              id=\"TelephonyPayments\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              name=\"selectedreport\"\n              (click)=\"validateDates('TELEPHONY_PAYMENTS')\"\n              type=\"radio\"\n              value=\"TELEPHONY_PAYMENTS\"\n              data-aria-controls=\"TelephonyPayments\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"TelephonyPayments\">Telephony Payments</label>\n            <span class=\"form-hint\">All Telephony Payments</span>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input\n              id=\"RefundsEvent\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              name=\"selectedreport\"\n              (click)=\"validateDates('REFUNDS')\"\n              type=\"radio\"\n              value=\"REFUNDS\"\n              data-aria-controls=\"RefundsEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"RefundsEvent\">Refunds</label>\n            <span class=\"form-hint\">Details of refunds</span>\n          </div>\n       </div>\n     </div>\n     <div  class=\"govuk-form-group\">\n      <div class=\"datefrom\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-from\" name=\"date-from\" type=\"date\"  formControlName=\"startDate\" required/>\n      </div>\n\n      <div class=\"dateto\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n      </div>\n     </div>\n   <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">\n      <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n      <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n      <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 days</span>\n   </p>\n    <div class=\"btnsubmit\">\n     <button type=\"submit\" (click)=\"downloadReport()\" class=\"button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">Download report</button>\n   </div>\n </form>\n\n", styles: [".govuk-radios__input:focus+.govuk-radios__label:before{border-width:4px;-webkit-box-shadow:0 0 0 4px rgb(255,175,0);box-shadow:0 0 0 4px #ffaf00}.datefrom{width:50%;float:left}.dateto{width:50%;float:right}.govuk-label--m{font-size:large}.form-hint{padding-left:.7em}.header{margin-top:10px;margin-bottom:15px}.btnsubmit{margin-bottom:30px}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}\n"] }]
         }], ctorParameters: () => [{ type: XlFileService }, { type: ErrorHandlerService }, { type: i1$1.FormBuilder }, { type: BulkScaningPaymentService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -7945,7 +7944,6 @@ class PaymentLibComponent {
     paymentLibService;
     cd;
     OrderslistService;
-    hostElement;
     API_ROOT;
     BULKSCAN_API_ROOT;
     REFUNDS_API_ROOT;
@@ -7993,8 +7991,6 @@ class PaymentLibComponent {
     isFromPaymentDetailPage;
     pbaPayOrderRef;
     isTakePayment;
-    govukObserver;
-    govukInitialisationQueued = false;
     orderDetail;
     orderRef;
     orderStatus;
@@ -8010,11 +8006,10 @@ class PaymentLibComponent {
     paymentGroup;
     overPaymentAmount = 0.00;
     refunds;
-    constructor(paymentLibService, cd, OrderslistService, hostElement) {
+    constructor(paymentLibService, cd, OrderslistService) {
         this.paymentLibService = paymentLibService;
         this.cd = cd;
         this.OrderslistService = OrderslistService;
-        this.hostElement = hostElement;
     }
     ngAfterContentChecked() {
         this.cd.detectChanges();
@@ -8054,35 +8049,6 @@ class PaymentLibComponent {
             this.isFromPayBubble = true;
         }
     }
-    ngAfterViewInit() {
-        this.queueGovukInitialisation();
-        this.govukObserver = new MutationObserver(() => this.queueGovukInitialisation());
-        this.govukObserver.observe(this.hostElement.nativeElement, {
-            childList: true,
-            subtree: true
-        });
-    }
-    ngOnDestroy() {
-        this.govukObserver?.disconnect();
-    }
-    queueGovukInitialisation() {
-        if (this.govukInitialisationQueued) {
-            return;
-        }
-        this.govukInitialisationQueued = true;
-        queueMicrotask(() => {
-            this.govukInitialisationQueued = false;
-            initAll({
-                scope: this.hostElement.nativeElement,
-                onError: (error) => {
-                    // Angular can leave already-initialised components in the scoped subtree.
-                    if (error.name !== 'InitError') {
-                        console.error(error);
-                    }
-                }
-            });
-        });
-    }
     /**
      * Adds a remission to the payment group using data from the provided form group.
      *
@@ -8216,7 +8182,7 @@ class PaymentLibComponent {
     getRoundedOverPayment() {
         return this.roundTinyValue(this.overPaymentAmount);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PaymentLibComponent, deps: [{ token: PaymentLibService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PaymentLibComponent, deps: [{ token: PaymentLibService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PaymentLibComponent, isStandalone: false, selector: "ccpay-payment-lib", inputs: { API_ROOT: "API_ROOT", BULKSCAN_API_ROOT: "BULKSCAN_API_ROOT", REFUNDS_API_ROOT: "REFUNDS_API_ROOT", NOTIFICATION_API_ROOT: "NOTIFICATION_API_ROOT", CARDPAYMENTRETURNURL: "CARDPAYMENTRETURNURL", CCD_CASE_NUMBER: "CCD_CASE_NUMBER", EXC_REFERENCE: "EXC_REFERENCE", PAYMENT_METHOD: "PAYMENT_METHOD", VIEW: "VIEW", VIEWSERVICE: "VIEWSERVICE", PAYMENT_GROUP_REF: "PAYMENT_GROUP_REF", TAKEPAYMENT: "TAKEPAYMENT", SERVICEREQUEST: "SERVICEREQUEST", DCN_NUMBER: "DCN_NUMBER", SELECTED_OPTION: "SELECTED_OPTION", ISBSENABLE: "ISBSENABLE", ISSFENABLE: "ISSFENABLE", ISTURNOFF: "ISTURNOFF", CASETYPE: "CASETYPE", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", rootUrl: "rootUrl", REFUNDLIST: "REFUNDLIST", USERID: "USERID", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", LOGGEDINUSEREMAIL: "LOGGEDINUSEREMAIL", isFromServiceRequestPage: "isFromServiceRequestPage", telephonySelectionEnable: "telephonySelectionEnable" }, providers: [{ provide: 'PAYMENT_LIB', useExisting: forwardRef(() => PaymentLibComponent) }], ngImport: i0, template: `
   <ccpay-refund-list [USERID]="USERID" [LOGGEDINUSERROLES]="LOGGEDINUSERROLES" [LOGGEDINUSEREMAIL]="LOGGEDINUSEREMAIL" *ngIf="viewName === 'refund-list'"></ccpay-refund-list>
     <ccpay-payment-list *ngIf="viewName === 'payment-list'"></ccpay-payment-list>
@@ -8303,7 +8269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     providers: [{ provide: 'PAYMENT_LIB', useExisting: forwardRef(() => PaymentLibComponent) }],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: PaymentLibService }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }, { type: i0.ElementRef }], propDecorators: { API_ROOT: [{
+        }], ctorParameters: () => [{ type: PaymentLibService }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }], propDecorators: { API_ROOT: [{
                 type: Input,
                 args: ['API_ROOT']
             }], BULKSCAN_API_ROOT: [{
@@ -8432,11 +8398,11 @@ class CardDetailsComponent {
         return this.paymentReference;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CardDetailsComponent, deps: [{ token: CardDetailsService }, { token: PaymentLibComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CardDetailsComponent, isStandalone: false, selector: "ccpay-card-details", ngImport: i0, template: "\n<div class=\"column\">\n  <h2 class=\"govuk-heading-m\">Payment method</h2>\n</div>\n\n<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\" *ngIf=\"errorMessage\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">There is a problem</h2>\n    <div class=\"govuk-error-summary__body\">\n      Payment method unavailable. The payment has either expired or was unsuccessful.\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!errorMessage && cardDetails\">\n\n<table>\n  <tbody>\n  <tr>\n    <td class=\"govuk-!-font-weight-bold tb-col-w\">Method</td>\n    <td>Card</td>\n  </tr>\n  <tr>\n    <td class=\"govuk-!-font-weight-bold tb-col-w\">Type</td>\n    <td>{{ cardDetails.card_brand }}</td>\n  </tr>\n  </tbody>\n</table>\n</div>\n\n", styles: [".tb-col-w{width:330px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CardDetailsComponent, isStandalone: false, selector: "ccpay-card-details", ngImport: i0, template: "\n<div class=\"column\">\n  <h2 class=\"heading-medium\">Payment method</h2>\n</div>\n\n<div role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n    Payment method unavailable, The payment has either expired or unsuccessful.\n</div>\n\n<div *ngIf=\"!errorMessage && cardDetails\">\n\n<table>\n  <tbody>\n  <tr>\n    <td class=\"bold tb-col-w\">Method</td>\n    <td>Card</td>\n  </tr>\n  <tr>\n    <td class=\"bold tb-col-w\">Type</td>\n    <td>{{ cardDetails.card_brand }}</td>\n  </tr>\n  </tbody>\n</table>\n</div>\n\n", styles: [".tb-col-w{width:330px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-card-details', standalone: false, template: "\n<div class=\"column\">\n  <h2 class=\"govuk-heading-m\">Payment method</h2>\n</div>\n\n<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\" *ngIf=\"errorMessage\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">There is a problem</h2>\n    <div class=\"govuk-error-summary__body\">\n      Payment method unavailable. The payment has either expired or was unsuccessful.\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!errorMessage && cardDetails\">\n\n<table>\n  <tbody>\n  <tr>\n    <td class=\"govuk-!-font-weight-bold tb-col-w\">Method</td>\n    <td>Card</td>\n  </tr>\n  <tr>\n    <td class=\"govuk-!-font-weight-bold tb-col-w\">Type</td>\n    <td>{{ cardDetails.card_brand }}</td>\n  </tr>\n  </tbody>\n</table>\n</div>\n\n", styles: [".tb-col-w{width:330px}\n"] }]
+            args: [{ selector: 'ccpay-card-details', standalone: false, template: "\n<div class=\"column\">\n  <h2 class=\"heading-medium\">Payment method</h2>\n</div>\n\n<div role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n    Payment method unavailable, The payment has either expired or unsuccessful.\n</div>\n\n<div *ngIf=\"!errorMessage && cardDetails\">\n\n<table>\n  <tbody>\n  <tr>\n    <td class=\"bold tb-col-w\">Method</td>\n    <td>Card</td>\n  </tr>\n  <tr>\n    <td class=\"bold tb-col-w\">Type</td>\n    <td>{{ cardDetails.card_brand }}</td>\n  </tr>\n  </tbody>\n</table>\n</div>\n\n", styles: [".tb-col-w{width:330px}\n"] }]
         }], ctorParameters: () => [{ type: CardDetailsService }, { type: PaymentLibComponent }] });
 
 class PageNotFoundComponent {
@@ -8461,11 +8427,11 @@ class PbaDetailsComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PbaDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PbaDetailsComponent, isStandalone: false, selector: "ccpay-pba-details", inputs: { payment: "payment" }, ngImport: i0, template: "\n  <h2 class=\"govuk-heading-l\">Payment method</h2>\n  <table>\n    <tbody>\n    <tr>\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">Method</td>\n      <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n    </tr>\n    <tr>\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">Type</td>\n      <td>Credit</td>\n    </tr>\n    <tr *ngIf=\"payment.organisation_name\">\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">PBA account name</td>\n      <td>{{ payment.organisation_name }}</td>\n    </tr>\n    <tr *ngIf=\"payment.account_number\">\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">PBA number</td>\n      <td>{{ payment.account_number }}</td>\n    </tr>\n    <tr *ngIf=\"payment.customer_reference\">\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">Customer internal reference</td>\n      <td>{{ payment.customer_reference }}</td>\n    </tr>\n    </tbody>\n  </table>\n", styles: [".capitalize:first-letter{text-transform:uppercase}.tb-col-w{width:330px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: PbaDetailsComponent, isStandalone: false, selector: "ccpay-pba-details", inputs: { payment: "payment" }, ngImport: i0, template: "\n  <h2 class=\"heading-large\">Payment method</h2>\n  <table>\n    <tbody>\n    <tr>\n      <td class=\"bold tb-col-w\">Method</td>\n      <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n    </tr>\n    <tr>\n      <td class=\"bold tb-col-w\">Type</td>\n      <td>Credit</td>\n    </tr>\n    <tr *ngIf=\"payment.organisation_name\">\n      <td class=\"bold tb-col-w\">PBA account name</td>\n      <td>{{ payment.organisation_name }}</td>\n    </tr>\n    <tr *ngIf=\"payment.account_number\">\n      <td class=\"bold tb-col-w\">PBA number</td>\n      <td>{{ payment.account_number }}</td>\n    </tr>\n    <tr *ngIf=\"payment.customer_reference\">\n      <td class=\"bold tb-col-w\">Customer internal reference</td>\n      <td>{{ payment.customer_reference }}</td>\n    </tr>\n    </tbody>\n  </table>\n", styles: [".capitalize:first-letter{text-transform:uppercase}.tb-col-w{width:330px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PbaDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-pba-details', standalone: false, template: "\n  <h2 class=\"govuk-heading-l\">Payment method</h2>\n  <table>\n    <tbody>\n    <tr>\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">Method</td>\n      <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n    </tr>\n    <tr>\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">Type</td>\n      <td>Credit</td>\n    </tr>\n    <tr *ngIf=\"payment.organisation_name\">\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">PBA account name</td>\n      <td>{{ payment.organisation_name }}</td>\n    </tr>\n    <tr *ngIf=\"payment.account_number\">\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">PBA number</td>\n      <td>{{ payment.account_number }}</td>\n    </tr>\n    <tr *ngIf=\"payment.customer_reference\">\n      <td class=\"govuk-!-font-weight-bold tb-col-w\">Customer internal reference</td>\n      <td>{{ payment.customer_reference }}</td>\n    </tr>\n    </tbody>\n  </table>\n", styles: [".capitalize:first-letter{text-transform:uppercase}.tb-col-w{width:330px}\n"] }]
+            args: [{ selector: 'ccpay-pba-details', standalone: false, template: "\n  <h2 class=\"heading-large\">Payment method</h2>\n  <table>\n    <tbody>\n    <tr>\n      <td class=\"bold tb-col-w\">Method</td>\n      <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n    </tr>\n    <tr>\n      <td class=\"bold tb-col-w\">Type</td>\n      <td>Credit</td>\n    </tr>\n    <tr *ngIf=\"payment.organisation_name\">\n      <td class=\"bold tb-col-w\">PBA account name</td>\n      <td>{{ payment.organisation_name }}</td>\n    </tr>\n    <tr *ngIf=\"payment.account_number\">\n      <td class=\"bold tb-col-w\">PBA number</td>\n      <td>{{ payment.account_number }}</td>\n    </tr>\n    <tr *ngIf=\"payment.customer_reference\">\n      <td class=\"bold tb-col-w\">Customer internal reference</td>\n      <td>{{ payment.customer_reference }}</td>\n    </tr>\n    </tbody>\n  </table>\n", styles: [".capitalize:first-letter{text-transform:uppercase}.tb-col-w{width:330px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { payment: [{
                 type: Input
             }] } });
@@ -8529,11 +8495,11 @@ class ProcessedPaymentsComponent {
         this.goToPaymentViewComponent.emit({ paymentGroupReference, paymentReference, paymentMethod });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProcessedPaymentsComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ProcessedPaymentsComponent, isStandalone: false, selector: "ccpay-app-processed-payments", inputs: { NONPAYMENTS: "NONPAYMENTS" }, outputs: { goToPaymentViewComponent: "goToPaymentViewComponent" }, ngImport: i0, template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n  <h3 class=\"govuk-heading-m\">Processed payments</h3>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n           </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" >\n        <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n            <td class=\"govuk-table__cell\">\n                <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n            </td>\n            <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}}  </td>\n            <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }}  </td>\n\n          </tr>\n          <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n            <td class=\"govuk-table__cell\" colspan=\"5\">\n              No processed payments\n             </td>\n\n          </tr>\n\n      </tbody>\n    </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ProcessedPaymentsComponent, isStandalone: false, selector: "ccpay-app-processed-payments", inputs: { NONPAYMENTS: "NONPAYMENTS" }, outputs: { goToPaymentViewComponent: "goToPaymentViewComponent" }, ngImport: i0, template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n  <h3 class=\"heading-medium\">Processed payments</h3>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n           </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" >\n        <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n            <td class=\"govuk-table__cell\">\n                <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n            </td>\n            <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}}  </td>\n            <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }}  </td>\n\n          </tr>\n          <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n            <td class=\"govuk-table__cell\" colspan=\"5\">\n              No processed payments\n             </td>\n\n          </tr>\n\n      </tbody>\n    </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProcessedPaymentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-app-processed-payments', standalone: false, template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n  <h3 class=\"govuk-heading-m\">Processed payments</h3>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n           </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" >\n        <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n            <td class=\"govuk-table__cell\">\n                <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n            </td>\n            <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}}  </td>\n            <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }}  </td>\n\n          </tr>\n          <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n            <td class=\"govuk-table__cell\" colspan=\"5\">\n              No processed payments\n             </td>\n\n          </tr>\n\n      </tbody>\n    </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"] }]
+            args: [{ selector: 'ccpay-app-processed-payments', standalone: false, template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n  <h3 class=\"heading-medium\">Processed payments</h3>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n           </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" >\n        <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n            <td class=\"govuk-table__cell\">\n                <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n            </td>\n            <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n            <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n            <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}}  </td>\n            <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }}  </td>\n\n          </tr>\n          <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n            <td class=\"govuk-table__cell\" colspan=\"5\">\n              No processed payments\n             </td>\n\n          </tr>\n\n      </tbody>\n    </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }], propDecorators: { NONPAYMENTS: [{
                 type: Input,
                 args: ['NONPAYMENTS']