@hmcts/ccpay-web-component 5.0.8-beta02 → 5.0.8-beta05

package/fesm2015/hmcts-ccpay-web-component.js

@@ -1,23 +1,24 @@
-import { _throw } from 'rxjs/observable/throw';
+import { Injectable, ɵɵdefineInjectable, Component, ChangeDetectorRef, Input, ɵɵinject, EventEmitter, Output, Pipe, ViewChild, NgModule } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
+import { Location, formatDate, CommonModule } from '@angular/common';
 import { catchError } from 'rxjs/operators';
+import { _throw } from 'rxjs/observable/throw';
 import { Meta, DomSanitizer } from '@angular/platform-browser';
-import { Location, formatDate, CommonModule } from '@angular/common';
+import { FormControl, Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
 import { saveAs } from 'file-saver';
 import { utils, write } from 'xlsx';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { FormBuilder, Validators, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Injectable, Component, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef, Pipe, NgModule, defineInjectable, inject } from '@angular/core';
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/payment-lib.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PaymentLibService {
     constructor() { }
@@ -81,11 +82,22 @@ PaymentLibService.decorators = [
 ];
 /** @nocollapse */
 PaymentLibService.ctorParameters = () => [];
-/** @nocollapse */ PaymentLibService.ngInjectableDef = defineInjectable({ factory: function PaymentLibService_Factory() { return new PaymentLibService(); }, token: PaymentLibService, providedIn: "root" });
+/** @nocollapse */ PaymentLibService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PaymentLibService_Factory() { return new PaymentLibService(); }, token: PaymentLibService, providedIn: "root" });
+if (false) {
+    /** @type {?} */
+    PaymentLibService.prototype.API_ROOT;
+    /** @type {?} */
+    PaymentLibService.prototype.BULKSCAN_API_ROOT;
+    /** @type {?} */
+    PaymentLibService.prototype.REFUNDS_API_ROOT;
+    /** @type {?} */
+    PaymentLibService.prototype.CARDPAYMENTRETURNURL;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/orderslist.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class OrderslistService {
     constructor() {
@@ -363,11 +375,130 @@ OrderslistService.decorators = [
 ];
 /** @nocollapse */
 OrderslistService.ctorParameters = () => [];
-/** @nocollapse */ OrderslistService.ngInjectableDef = defineInjectable({ factory: function OrderslistService_Factory() { return new OrderslistService(); }, token: OrderslistService, providedIn: "root" });
+/** @nocollapse */ OrderslistService.ngInjectableDef = ɵɵdefineInjectable({ factory: function OrderslistService_Factory() { return new OrderslistService(); }, token: OrderslistService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.ordersList;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.refundView;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.caseType;
+    /** @type {?} */
+    OrderslistService.prototype.getcaseType;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.feeExists;
+    /** @type {?} */
+    OrderslistService.prototype.getFeeExist;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.ccdCaseNumber;
+    /** @type {?} */
+    OrderslistService.prototype.getCCDCaseNumberforRefund;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.isFromServiceRequestPage;
+    /** @type {?} */
+    OrderslistService.prototype.getisFromServiceRequestPage;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.OrderRefId;
+    /** @type {?} */
+    OrderslistService.prototype.getOrderRefId;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.navigationPage;
+    /** @type {?} */
+    OrderslistService.prototype.getnavigationPage;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.orderRef;
+    /** @type {?} */
+    OrderslistService.prototype.getorderRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.orderCCDEvent;
+    /** @type {?} */
+    OrderslistService.prototype.getorderCCDEvent;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.orderCreated;
+    /** @type {?} */
+    OrderslistService.prototype.getorderCreated;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.orderParty;
+    /** @type {?} */
+    OrderslistService.prototype.getorderParty;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.orderRemissionTotal;
+    /** @type {?} */
+    OrderslistService.prototype.getorderRemissionTotal;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.orderFeesTotal;
+    /** @type {?} */
+    OrderslistService.prototype.getorderFeesTotal;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.orderTotalPayments;
+    /** @type {?} */
+    OrderslistService.prototype.getorderTotalPayments;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.rolesList;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.orderDetail;
+    /**
+     * @type {?}
+     * @private
+     */
+    OrderslistService.prototype.paymentPageView;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/payment-lib.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PaymentLibComponent {
     /**
@@ -375,10 +506,10 @@ class PaymentLibComponent {
      * @param {?} cd
      * @param {?} OrderslistService
      */
-    constructor(paymentLibService, cd, OrderslistService$$1) {
+    constructor(paymentLibService, cd, OrderslistService) {
         this.paymentLibService = paymentLibService;
         this.cd = cd;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.unProcessedPaymentServiceId = null;
         this.unProcessedPayment = null;
         this.orderFeesTotal = 0.00;
@@ -503,10 +634,140 @@ PaymentLibComponent.propDecorators = {
     LOGGEDINUSEREMAIL: [{ type: Input, args: ['LOGGEDINUSEREMAIL',] }],
     isFromServiceRequestPage: [{ type: Input, args: ['isFromServiceRequestPage',] }]
 };
+if (false) {
+    /** @type {?} */
+    PaymentLibComponent.prototype.API_ROOT;
+    /** @type {?} */
+    PaymentLibComponent.prototype.BULKSCAN_API_ROOT;
+    /** @type {?} */
+    PaymentLibComponent.prototype.REFUNDS_API_ROOT;
+    /** @type {?} */
+    PaymentLibComponent.prototype.CARDPAYMENTRETURNURL;
+    /** @type {?} */
+    PaymentLibComponent.prototype.CCD_CASE_NUMBER;
+    /** @type {?} */
+    PaymentLibComponent.prototype.EXC_REFERENCE;
+    /** @type {?} */
+    PaymentLibComponent.prototype.PAYMENT_METHOD;
+    /** @type {?} */
+    PaymentLibComponent.prototype.VIEW;
+    /** @type {?} */
+    PaymentLibComponent.prototype.VIEWSERVICE;
+    /** @type {?} */
+    PaymentLibComponent.prototype.PAYMENT_GROUP_REF;
+    /** @type {?} */
+    PaymentLibComponent.prototype.TAKEPAYMENT;
+    /** @type {?} */
+    PaymentLibComponent.prototype.SERVICEREQUEST;
+    /** @type {?} */
+    PaymentLibComponent.prototype.DCN_NUMBER;
+    /** @type {?} */
+    PaymentLibComponent.prototype.SELECTED_OPTION;
+    /** @type {?} */
+    PaymentLibComponent.prototype.ISBSENABLE;
+    /** @type {?} */
+    PaymentLibComponent.prototype.ISSFENABLE;
+    /** @type {?} */
+    PaymentLibComponent.prototype.ISTURNOFF;
+    /** @type {?} */
+    PaymentLibComponent.prototype.CASETYPE;
+    /** @type {?} */
+    PaymentLibComponent.prototype.ISPAYMENTSTATUSENABLED;
+    /** @type {?} */
+    PaymentLibComponent.prototype.rootUrl;
+    /** @type {?} */
+    PaymentLibComponent.prototype.REFUNDLIST;
+    /** @type {?} */
+    PaymentLibComponent.prototype.USERID;
+    /** @type {?} */
+    PaymentLibComponent.prototype.LOGGEDINUSERROLES;
+    /** @type {?} */
+    PaymentLibComponent.prototype.LOGGEDINUSEREMAIL;
+    /** @type {?} */
+    PaymentLibComponent.prototype.isFromServiceRequestPage;
+    /** @type {?} */
+    PaymentLibComponent.prototype.paymentMethod;
+    /** @type {?} */
+    PaymentLibComponent.prototype.bspaymentdcn;
+    /** @type {?} */
+    PaymentLibComponent.prototype.unProcessedPaymentServiceId;
+    /** @type {?} */
+    PaymentLibComponent.prototype.paymentGroupReference;
+    /** @type {?} */
+    PaymentLibComponent.prototype.paymentReference;
+    /** @type {?} */
+    PaymentLibComponent.prototype.refundReference;
+    /** @type {?} */
+    PaymentLibComponent.prototype.refundlistsource;
+    /** @type {?} */
+    PaymentLibComponent.prototype.viewName;
+    /** @type {?} */
+    PaymentLibComponent.prototype.isTurnOff;
+    /** @type {?} */
+    PaymentLibComponent.prototype.caseType;
+    /** @type {?} */
+    PaymentLibComponent.prototype.unProcessedPayment;
+    /** @type {?} */
+    PaymentLibComponent.prototype.isRefundStatusView;
+    /** @type {?} */
+    PaymentLibComponent.prototype.isRedirectFromCaseTransactionPage;
+    /** @type {?} */
+    PaymentLibComponent.prototype.isCallFromRefundList;
+    /** @type {?} */
+    PaymentLibComponent.prototype.isFromRefundStatusPage;
+    /** @type {?} */
+    PaymentLibComponent.prototype.iscancelClicked;
+    /** @type {?} */
+    PaymentLibComponent.prototype.isFromPaymentDetailPage;
+    /** @type {?} */
+    PaymentLibComponent.prototype.pbaPayOrderRef;
+    /** @type {?} */
+    PaymentLibComponent.prototype.isTakePayment;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderDetail;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderRef;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderStatus;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderParty;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderCreated;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderCCDEvent;
+    /** @type {?} */
+    PaymentLibComponent.prototype.serviceRequestValue;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderAddBtnEnable;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderFeesTotal;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderRemissionTotal;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderTotalPayments;
+    /** @type {?} */
+    PaymentLibComponent.prototype.orderPendingPayments;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentLibComponent.prototype.paymentLibService;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentLibComponent.prototype.cd;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentLibComponent.prototype.OrderslistService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/shared/error-handler.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class ErrorHandlerService {
     constructor() { }
@@ -611,12 +872,32 @@ ErrorHandlerService.decorators = [
 ];
 /** @nocollapse */
 ErrorHandlerService.ctorParameters = () => [];
-/** @nocollapse */ ErrorHandlerService.ngInjectableDef = defineInjectable({ factory: function ErrorHandlerService_Factory() { return new ErrorHandlerService(); }, token: ErrorHandlerService, providedIn: "root" });
+/** @nocollapse */ ErrorHandlerService.ngInjectableDef = ɵɵdefineInjectable({ factory: function ErrorHandlerService_Factory() { return new ErrorHandlerService(); }, token: ErrorHandlerService, providedIn: "root" });
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/shared/logger/logger.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const noop = (/**
+ * @return {?}
  */
+() => undefined);
+const ɵ0 = noop;
+/**
+ * @abstract
+ */
+class Logger {
+}
+if (false) {
+    /** @type {?} */
+    Logger.prototype.info;
+    /** @type {?} */
+    Logger.prototype.warn;
+    /** @type {?} */
+    Logger.prototype.error;
+}
 class LoggerService {
     /**
      * @param {?} type
@@ -630,11 +911,20 @@ LoggerService.decorators = [
                 providedIn: 'root'
             },] }
 ];
-/** @nocollapse */ LoggerService.ngInjectableDef = defineInjectable({ factory: function LoggerService_Factory() { return new LoggerService(); }, token: LoggerService, providedIn: "root" });
+/** @nocollapse */ LoggerService.ngInjectableDef = ɵɵdefineInjectable({ factory: function LoggerService_Factory() { return new LoggerService(); }, token: LoggerService, providedIn: "root" });
+if (false) {
+    /** @type {?} */
+    LoggerService.prototype.info;
+    /** @type {?} */
+    LoggerService.prototype.warn;
+    /** @type {?} */
+    LoggerService.prototype.error;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/payment-list/payment-list.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PaymentListService {
     /**
@@ -674,11 +964,36 @@ PaymentListService.ctorParameters = () => [
     { type: ErrorHandlerService },
     { type: PaymentLibService }
 ];
-/** @nocollapse */ PaymentListService.ngInjectableDef = defineInjectable({ factory: function PaymentListService_Factory() { return new PaymentListService(inject(HttpClient), inject(LoggerService), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: PaymentListService, providedIn: "root" });
+/** @nocollapse */ PaymentListService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PaymentListService_Factory() { return new PaymentListService(ɵɵinject(HttpClient), ɵɵinject(LoggerService), ɵɵinject(ErrorHandlerService), ɵɵinject(PaymentLibService)); }, token: PaymentListService, providedIn: "root" });
+if (false) {
+    /** @type {?} */
+    PaymentListService.prototype.payments;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentListService.prototype.http;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentListService.prototype.logger;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentListService.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentListService.prototype.paymentLibService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/payment-list/payment-list.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PaymentListComponent {
     /**
@@ -729,10 +1044,29 @@ PaymentListComponent.ctorParameters = () => [
     { type: PaymentListService },
     { type: PaymentLibComponent }
 ];
+if (false) {
+    /** @type {?} */
+    PaymentListComponent.prototype.payments;
+    /** @type {?} */
+    PaymentListComponent.prototype.errorMessage;
+    /** @type {?} */
+    PaymentListComponent.prototype.code;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentListComponent.prototype.paymentListService;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentListComponent.prototype.paymentLibComponent;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/shared/httpclient/webcomponent.http.client.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class WebComponentHttpClient {
     /**
@@ -851,10 +1185,23 @@ WebComponentHttpClient.ctorParameters = () => [
     { type: HttpClient },
     { type: Meta }
 ];
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    WebComponentHttpClient.prototype.http;
+    /**
+     * @type {?}
+     * @private
+     */
+    WebComponentHttpClient.prototype.meta;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/payment-view/payment-view.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PaymentViewService {
     /**
@@ -1106,12 +1453,52 @@ PaymentViewService.ctorParameters = () => [
     { type: ErrorHandlerService },
     { type: PaymentLibService }
 ];
-/** @nocollapse */ PaymentViewService.ngInjectableDef = defineInjectable({ factory: function PaymentViewService_Factory() { return new PaymentViewService(inject(HttpClient), inject(WebComponentHttpClient), inject(LoggerService), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: PaymentViewService, providedIn: "root" });
+/** @nocollapse */ PaymentViewService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PaymentViewService_Factory() { return new PaymentViewService(ɵɵinject(HttpClient), ɵɵinject(WebComponentHttpClient), ɵɵinject(LoggerService), ɵɵinject(ErrorHandlerService), ɵɵinject(PaymentLibService)); }, token: PaymentViewService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewService.prototype.ordersList;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewService.prototype.meta;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewService.prototype.http;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewService.prototype.https;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewService.prototype.logger;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewService.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewService.prototype.paymentLibService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/payment-view/payment-view.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+const BS_ENABLE_FLAG = 'bulk-scan-enabling-fe';
 class PaymentViewComponent {
     /**
      * @param {?} paymentViewService
@@ -1119,11 +1506,11 @@ class PaymentViewComponent {
      * @param {?} cd
      * @param {?} OrderslistService
      */
-    constructor(paymentViewService, paymentLibComponent, cd, OrderslistService$$1) {
+    constructor(paymentViewService, paymentLibComponent, cd, OrderslistService) {
         this.paymentViewService = paymentViewService;
         this.paymentLibComponent = paymentLibComponent;
         this.cd = cd;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.isRefundRemission = false;
         this.isAddFeeBtnEnabled = false;
         this.isIssueRefunfBtnEnable = false;
@@ -1424,6 +1811,7 @@ class PaymentViewComponent {
             else {
                 return false;
             }
+            ;
         }
     }
     /**
@@ -1472,6 +1860,7 @@ class PaymentViewComponent {
         else {
             return false;
         }
+        ;
     }
     /**
      * @return {?}
@@ -1539,7 +1928,7 @@ class PaymentViewComponent {
 PaymentViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-payment-view',
-                template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\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</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\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\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</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Service request reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</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</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] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(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</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</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</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</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</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</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</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</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]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n     <div class=\"column\">\n      <h2 class=\"heading-medium\">Disputed payment history</h2>\n    </div>\n    \n    <div>\n      <table>\n          <thead>\n            <tr>\n              <th>Status</th>\n              <th>Amount</th>\n              <th>Date</th>\n              <th>Payment reference</th>\n              <th>Event</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 }}</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 }}</td>\n              <td>\n                \n                <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">Show detail</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. </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</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</td>\n            <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</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</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</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]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</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</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</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]=\"!chkIsRefundRemissionBtnEnable()\" (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.</span>\n   </div>\n\n  </div>\n    </div>\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\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\">\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'\">\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    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n  ></ccpay-add-remission>\n</ng-container>\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  [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\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</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</h1>\n      </div>\n    </div>\n    <table>\n      <tbody>\n\n      <tr class=\"section\">\n        <td class=\"bold\">Failure reference</td>\n        <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure reason</td>\n        <td>\t{{selectedPaymentsStatus.failure_reason}}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Payment reference</td>\n          <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Payment amount</td>\n          <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Disputed amount</td>\n          <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount  | number:'.2'}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Additional information</td>\n        <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure type</td>\n        <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure event date and time</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</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</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</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",
+                template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\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</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\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Service request reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</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</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] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(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</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</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</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</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</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</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</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</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]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n     <div class=\"column\">\n      <h2 class=\"heading-medium\">Disputed payment history</h2>\n    </div>\n    \n    <div>\n      <table>\n          <thead>\n            <tr>\n              <th>Status</th>\n              <th>Amount</th>\n              <th>Date</th>\n              <th>Payment reference</th>\n              <th>Event</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 }}</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 }}</td>\n              <td>\n                \n                <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">Show detail</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. </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</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</td>\n            <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</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</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</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]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</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</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</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]=\"!chkIsRefundRemissionBtnEnable()\" (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.</span>\n   </div>\n\n  </div>\n    </div>\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\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\">\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'\">\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    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n  ></ccpay-add-remission>\n</ng-container>\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  [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\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</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</h1>\n      </div>\n    </div>\n    <table>\n      <tbody>\n\n      <tr class=\"section\">\n        <td class=\"bold\">Failure reference</td>\n        <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure reason</td>\n        <td>\t{{selectedPaymentsStatus.failure_reason}}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Payment reference</td>\n          <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Payment amount</td>\n          <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Disputed amount</td>\n          <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount  | number:'.2'}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Additional information</td>\n        <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure type</td>\n        <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure event date and time</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</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</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</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: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:19px;float:left;margin-top:2em}.remission{margin-bottom:7em}.govuk-error-summary__title{font-size:24px!important}.govuk-table__cell,.govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}.text-transform::first-letter{text-transform:capitalize}.govuk-link{cursor:pointer}.mar-17{font-size:19px!important}.payment-failure-alignment{margin-bottom:50px!important;margin-left:15px!important}"]
             }] }
 ];
@@ -1568,10 +1957,115 @@ PaymentViewComponent.propDecorators = {
     orderDetail: [{ type: Input }],
     isServiceRequest: [{ type: Input, args: ["isServiceRequest",] }]
 };
+if (false) {
+    /** @type {?} */
+    PaymentViewComponent.prototype.isTurnOff;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isTakePayment;
+    /** @type {?} */
+    PaymentViewComponent.prototype.caseType;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderRef;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderStatus;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderTotalPayments;
+    /** @type {?} */
+    PaymentViewComponent.prototype.payment;
+    /** @type {?} */
+    PaymentViewComponent.prototype.LOGGEDINUSERROLES;
+    /** @type {?} */
+    PaymentViewComponent.prototype.ISPAYMENTSTATUSENABLED;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderParty;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderCreated;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderCCDEvent;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderFeesTotal;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderRemissionTotal;
+    /** @type {?} */
+    PaymentViewComponent.prototype.orderDetail;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isServiceRequest;
+    /** @type {?} */
+    PaymentViewComponent.prototype.errorMsg;
+    /** @type {?} */
+    PaymentViewComponent.prototype.paymentGroup;
+    /** @type {?} */
+    PaymentViewComponent.prototype.errorMessage;
+    /** @type {?} */
+    PaymentViewComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    PaymentViewComponent.prototype.selectedOption;
+    /** @type {?} */
+    PaymentViewComponent.prototype.dcnNumber;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isStatusAllocated;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isRemissionsMatch;
+    /** @type {?} */
+    PaymentViewComponent.prototype.feeId;
+    /** @type {?} */
+    PaymentViewComponent.prototype.viewStatus;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isRefundRemission;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isStrategicFixEnable;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isAddFeeBtnEnabled;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isIssueRefunfBtnEnable;
+    /** @type {?} */
+    PaymentViewComponent.prototype.allowedRolesToAccessRefund;
+    /** @type {?} */
+    PaymentViewComponent.prototype.remissions;
+    /** @type {?} */
+    PaymentViewComponent.prototype.allPaymentsFailure;
+    /** @type {?} */
+    PaymentViewComponent.prototype.selectedPaymentsStatus;
+    /** @type {?} */
+    PaymentViewComponent.prototype.remissionFeeAmt;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isRefundRemissionBtnEnable;
+    /** @type {?} */
+    PaymentViewComponent.prototype.serviceReference;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isFromServiceRequestPage;
+    /** @type {?} */
+    PaymentViewComponent.prototype.isFromPaymentDetailPage;
+    /** @type {?} */
+    PaymentViewComponent.prototype.check4AllowedRoles2AccessRefund;
+    /** @type {?} */
+    PaymentViewComponent.prototype.allowFurtherAccessAfter4Days;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewComponent.prototype.cd;
+    /**
+     * @type {?}
+     * @private
+     */
+    PaymentViewComponent.prototype.OrderslistService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/refunds/refunds.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class RefundsService {
     /**
@@ -1743,11 +2237,39 @@ RefundsService.ctorParameters = () => [
     { type: PaymentLibService },
     { type: Meta }
 ];
-/** @nocollapse */ RefundsService.ngInjectableDef = defineInjectable({ factory: function RefundsService_Factory() { return new RefundsService(inject(HttpClient), inject(WebComponentHttpClient), inject(ErrorHandlerService), inject(PaymentLibService), inject(Meta)); }, token: RefundsService, providedIn: "root" });
+/** @nocollapse */ RefundsService.ngInjectableDef = ɵɵdefineInjectable({ factory: function RefundsService_Factory() { return new RefundsService(ɵɵinject(HttpClient), ɵɵinject(WebComponentHttpClient), ɵɵinject(ErrorHandlerService), ɵɵinject(PaymentLibService), ɵɵinject(Meta)); }, token: RefundsService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundsService.prototype.http;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundsService.prototype.https;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundsService.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundsService.prototype.paymentLibService;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundsService.prototype.meta;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/process-refund/process-refund.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class ProcessRefundComponent {
     /**
@@ -1758,10 +2280,10 @@ class ProcessRefundComponent {
      * @param {?} router
      * @param {?} activeRoute
      */
-    constructor(RefundsService$$1, formBuilder, OrderslistService$$1, paymentLibComponent, router, activeRoute) {
-        this.RefundsService = RefundsService$$1;
+    constructor(RefundsService, formBuilder, OrderslistService, paymentLibComponent, router, activeRoute) {
+        this.RefundsService = RefundsService;
         this.formBuilder = formBuilder;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.paymentLibComponent = paymentLibComponent;
         this.router = router;
         this.activeRoute = activeRoute;
@@ -2111,10 +2633,93 @@ ProcessRefundComponent.propDecorators = {
     refundReference: [{ type: Input }],
     refundlistsource: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    ProcessRefundComponent.prototype.refundReference;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.refundlistsource;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.processRefundForm;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.errorMessage;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.sendmeback;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.viewStatus;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.refundActionList;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.refundRejectReasonList;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isSendMeBackClicked;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isRejectClicked;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isOtherClicked;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isSuccesspageEnable;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.refundActionsHasError;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.refundRejectReasonHasError;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isReasonFieldEmpty;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isReasonFieldInvalid;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.reasonFieldMinHasError;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.reasonFieldMaxHasError;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isReasonEmpty;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isReasonInvalid;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.successMsg;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.navigationpage;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isFromRefundListPage;
+    /** @type {?} */
+    ProcessRefundComponent.prototype.isConfirmButtondisabled;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProcessRefundComponent.prototype.RefundsService;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProcessRefundComponent.prototype.formBuilder;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProcessRefundComponent.prototype.OrderslistService;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProcessRefundComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProcessRefundComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProcessRefundComponent.prototype.activeRoute;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/refund-list/refund-list.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class RefundListComponent {
     /**
@@ -2199,10 +2804,48 @@ RefundListComponent.propDecorators = {
     LOGGEDINUSERROLES: [{ type: Input, args: ['LOGGEDINUSERROLES',] }],
     LOGGEDINUSEREMAIL: [{ type: Input, args: ['LOGGEDINUSEREMAIL',] }]
 };
+if (false) {
+    /** @type {?} */
+    RefundListComponent.prototype.USERID;
+    /** @type {?} */
+    RefundListComponent.prototype.LOGGEDINUSERROLES;
+    /** @type {?} */
+    RefundListComponent.prototype.LOGGEDINUSEREMAIL;
+    /** @type {?} */
+    RefundListComponent.prototype.tableApprovalHeader;
+    /** @type {?} */
+    RefundListComponent.prototype.tableRejectedHeader;
+    /** @type {?} */
+    RefundListComponent.prototype.submittedRefundList;
+    /** @type {?} */
+    RefundListComponent.prototype.rejectedRefundList;
+    /** @type {?} */
+    RefundListComponent.prototype.approvalStatus;
+    /** @type {?} */
+    RefundListComponent.prototype.rejectStatus;
+    /** @type {?} */
+    RefundListComponent.prototype.errorMessage;
+    /** @type {?} */
+    RefundListComponent.prototype.isApproveTableVisible;
+    /** @type {?} */
+    RefundListComponent.prototype.isRejectTableVisible;
+    /** @type {?} */
+    RefundListComponent.prototype.dropdownvalue;
+    /** @type {?} */
+    RefundListComponent.prototype.isAuthorized;
+    /** @type {?} */
+    RefundListComponent.prototype.userLst;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundListComponent.prototype.refundService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/card-details/card-details.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CardDetailsService {
     /**
@@ -2241,11 +2884,34 @@ CardDetailsService.ctorParameters = () => [
     { type: ErrorHandlerService },
     { type: PaymentLibService }
 ];
-/** @nocollapse */ CardDetailsService.ngInjectableDef = defineInjectable({ factory: function CardDetailsService_Factory() { return new CardDetailsService(inject(HttpClient), inject(LoggerService), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: CardDetailsService, providedIn: "root" });
+/** @nocollapse */ CardDetailsService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CardDetailsService_Factory() { return new CardDetailsService(ɵɵinject(HttpClient), ɵɵinject(LoggerService), ɵɵinject(ErrorHandlerService), ɵɵinject(PaymentLibService)); }, token: CardDetailsService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    CardDetailsService.prototype.http;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardDetailsService.prototype.logger;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardDetailsService.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardDetailsService.prototype.paymentLibService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/card-details/card-details.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CardDetailsComponent {
     /**
@@ -2290,10 +2956,31 @@ CardDetailsComponent.ctorParameters = () => [
     { type: CardDetailsService },
     { type: PaymentLibComponent }
 ];
+if (false) {
+    /** @type {?} */
+    CardDetailsComponent.prototype.pageTitle;
+    /** @type {?} */
+    CardDetailsComponent.prototype.cardDetails;
+    /** @type {?} */
+    CardDetailsComponent.prototype.paymentReference;
+    /** @type {?} */
+    CardDetailsComponent.prototype.errorMessage;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardDetailsComponent.prototype.cardDetailsService;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardDetailsComponent.prototype.paymentLibComponent;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/page-not-found.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PageNotFoundComponent {
 }
@@ -2307,7 +2994,8 @@ PageNotFoundComponent.decorators = [
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/status-history/status-history.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class StatusHistoryService {
     /**
@@ -2349,11 +3037,34 @@ StatusHistoryService.ctorParameters = () => [
     { type: ErrorHandlerService },
     { type: PaymentLibService }
 ];
-/** @nocollapse */ StatusHistoryService.ngInjectableDef = defineInjectable({ factory: function StatusHistoryService_Factory() { return new StatusHistoryService(inject(HttpClient), inject(LoggerService), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: StatusHistoryService, providedIn: "root" });
+/** @nocollapse */ StatusHistoryService.ngInjectableDef = ɵɵdefineInjectable({ factory: function StatusHistoryService_Factory() { return new StatusHistoryService(ɵɵinject(HttpClient), ɵɵinject(LoggerService), ɵɵinject(ErrorHandlerService), ɵɵinject(PaymentLibService)); }, token: StatusHistoryService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    StatusHistoryService.prototype.http;
+    /**
+     * @type {?}
+     * @private
+     */
+    StatusHistoryService.prototype.logger;
+    /**
+     * @type {?}
+     * @private
+     */
+    StatusHistoryService.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    StatusHistoryService.prototype.paymentLibService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/status-history/status-history.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class StatusHistoryComponent {
     /**
@@ -2395,10 +3106,31 @@ StatusHistoryComponent.ctorParameters = () => [
 StatusHistoryComponent.propDecorators = {
     isTakePayment: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    StatusHistoryComponent.prototype.isTakePayment;
+    /** @type {?} */
+    StatusHistoryComponent.prototype.pageTitle;
+    /** @type {?} */
+    StatusHistoryComponent.prototype.statuses;
+    /** @type {?} */
+    StatusHistoryComponent.prototype.errorMessage;
+    /**
+     * @type {?}
+     * @private
+     */
+    StatusHistoryComponent.prototype.statusHistoryService;
+    /**
+     * @type {?}
+     * @private
+     */
+    StatusHistoryComponent.prototype.paymentLibComponent;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/pba-details/pba-details.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PbaDetailsComponent {
     constructor() { }
@@ -2420,22 +3152,33 @@ PbaDetailsComponent.ctorParameters = () => [];
 PbaDetailsComponent.propDecorators = {
     payment: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    PbaDetailsComponent.prototype.payment;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/shared/logger/console-logger.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
+let isDebugMode = false;
+/** @type {?} */
 const noop$1 = (/**
  * @return {?}
  */
 () => undefined);
+const ɵ0$1 = noop$1;
 class ConsoleLoggerService {
     /**
      * @return {?}
      */
     get info() {
-        {
+        if (isDebugMode) {
+            return console.info.bind(console);
+        }
+        else {
             return noop$1;
         }
     }
@@ -2443,7 +3186,10 @@ class ConsoleLoggerService {
      * @return {?}
      */
     get warn() {
-        {
+        if (isDebugMode) {
+            return console.warn.bind(console);
+        }
+        else {
             return noop$1;
         }
     }
@@ -2451,7 +3197,10 @@ class ConsoleLoggerService {
      * @return {?}
      */
     get error() {
-        {
+        if (isDebugMode) {
+            return console.error.bind(console);
+        }
+        else {
             return noop$1;
         }
     }
@@ -2471,11 +3220,12 @@ ConsoleLoggerService.decorators = [
                 providedIn: 'root'
             },] }
 ];
-/** @nocollapse */ ConsoleLoggerService.ngInjectableDef = defineInjectable({ factory: function ConsoleLoggerService_Factory() { return new ConsoleLoggerService(); }, token: ConsoleLoggerService, providedIn: "root" });
+/** @nocollapse */ ConsoleLoggerService.ngInjectableDef = ɵɵdefineInjectable({ factory: function ConsoleLoggerService_Factory() { return new ConsoleLoggerService(); }, token: ConsoleLoggerService, providedIn: "root" });
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/case-transactions/case-transactions.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CaseTransactionsService {
     /**
@@ -2514,11 +3264,34 @@ CaseTransactionsService.ctorParameters = () => [
     { type: ErrorHandlerService },
     { type: PaymentLibService }
 ];
-/** @nocollapse */ CaseTransactionsService.ngInjectableDef = defineInjectable({ factory: function CaseTransactionsService_Factory() { return new CaseTransactionsService(inject(HttpClient), inject(LoggerService), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: CaseTransactionsService, providedIn: "root" });
+/** @nocollapse */ CaseTransactionsService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CaseTransactionsService_Factory() { return new CaseTransactionsService(ɵɵinject(HttpClient), ɵɵinject(LoggerService), ɵɵinject(ErrorHandlerService), ɵɵinject(PaymentLibService)); }, token: CaseTransactionsService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsService.prototype.http;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsService.prototype.logger;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsService.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsService.prototype.paymentLibService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/bulk-scaning-payment/bulk-scaning-payment.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class BulkScaningPaymentService {
     /**
@@ -2661,12 +3434,37 @@ BulkScaningPaymentService.ctorParameters = () => [
     { type: ErrorHandlerService },
     { type: PaymentLibService }
 ];
-/** @nocollapse */ BulkScaningPaymentService.ngInjectableDef = defineInjectable({ factory: function BulkScaningPaymentService_Factory() { return new BulkScaningPaymentService(inject(HttpClient), inject(WebComponentHttpClient), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: BulkScaningPaymentService, providedIn: "root" });
+/** @nocollapse */ BulkScaningPaymentService.ngInjectableDef = ɵɵdefineInjectable({ factory: function BulkScaningPaymentService_Factory() { return new BulkScaningPaymentService(ɵɵinject(HttpClient), ɵɵinject(WebComponentHttpClient), ɵɵinject(ErrorHandlerService), ɵɵinject(PaymentLibService)); }, token: BulkScaningPaymentService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    BulkScaningPaymentService.prototype.http;
+    /**
+     * @type {?}
+     * @private
+     */
+    BulkScaningPaymentService.prototype.https;
+    /**
+     * @type {?}
+     * @private
+     */
+    BulkScaningPaymentService.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    BulkScaningPaymentService.prototype.paymentLibService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/case-transactions/case-transactions.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+const BS_ENABLE_FLAG$1 = 'bulk-scan-enabling-fe';
 class CaseTransactionsComponent {
     /**
      * @param {?} router
@@ -2676,13 +3474,13 @@ class CaseTransactionsComponent {
      * @param {?} paymentLibComponent
      * @param {?} OrderslistService
      */
-    constructor(router, paymentViewService, bulkScaningPaymentService, caseTransactionsService, paymentLibComponent, OrderslistService$$1) {
+    constructor(router, paymentViewService, bulkScaningPaymentService, caseTransactionsService, paymentLibComponent, OrderslistService) {
         this.router = router;
         this.paymentViewService = paymentViewService;
         this.bulkScaningPaymentService = bulkScaningPaymentService;
         this.caseTransactionsService = caseTransactionsService;
         this.paymentLibComponent = paymentLibComponent;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.paymentGroups = [];
         this.payments = [];
         this.nonPayments = [];
@@ -2983,6 +3781,8 @@ class CaseTransactionsComponent {
      * @return {?}
      */
     calculateOrderFeesAmounts() {
+        /** @type {?} */
+        let feesTotal = 0.00;
         this.paymentGroups.forEach((/**
          * @param {?} paymentGroup
          * @return {?}
@@ -3684,6 +4484,7 @@ class CaseTransactionsComponent {
             else {
                 return false;
             }
+            ;
         }
     }
     /**
@@ -3701,6 +4502,7 @@ class CaseTransactionsComponent {
         else {
             return false;
         }
+        ;
     }
     /**
      * @return {?}
@@ -3731,6 +4533,7 @@ class CaseTransactionsComponent {
             else {
                 return false;
             }
+            ;
         }
     }
     /**
@@ -3745,7 +4548,7 @@ class CaseTransactionsComponent {
 CaseTransactionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-case-transactions',
-                template: "<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper\">\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        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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</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</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</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\" *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 }}</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</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            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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-25\" scope=\"col\">Amount due</td>\n\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                     </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</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</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">Party</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">Request reference</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}}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td>\n                      <td *ngIf=\"cpoDetails === null\" 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</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\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.</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.disabled]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>Payments</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              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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 }}</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</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</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>Refunds</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\"\n              [isTurnOff]=\"isTurnOff\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" \n              [isEliginbleToAccess] = check4AllowedRoles2AccessRefund()\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</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Amount</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">Request reference\t</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}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell  whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td>\n                  <td *ngIf=\"cpoDetails === null\" 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</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</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.</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,</h1>\n          <p>please refresh and try in some time.</p>\n        </ng-container>\n\n    <!-- </div> -->\n\n      </div>\n\n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Payments</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</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">Date</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">Payment 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 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 }}</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</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</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            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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            [isEliginbleToAccess] = check4AllowedRoles2AccessRefund()\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  [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\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\n</main>\n</div>\n",
+                template: "<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper\">\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        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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</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</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</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\" *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 }}</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</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            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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-25\" scope=\"col\">Amount due</td>\n\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                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n            <!--Payment Request-->\n          <div class=\"paymentrequest\">\n              <span class=\"heading-medium\">Service requests</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</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">Party</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">Request reference</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}}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td>\n                      <td *ngIf=\"cpoDetails === null\" 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</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\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.</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.disabled]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>Payments</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              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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 }}</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</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</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>Refunds</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\"\n              [isTurnOff]=\"isTurnOff\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" \n              [isEliginbleToAccess] = check4AllowedRoles2AccessRefund()\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</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Amount</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">Request reference\t</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}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell  whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td>\n                  <td *ngIf=\"cpoDetails === null\" 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</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</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.</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,</h1>\n          <p>please refresh and try in some time.</p>\n        </ng-container>\n\n    <!-- </div> -->\n\n      </div>\n\n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Payments</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</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">Date</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">Payment 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 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 }}</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</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</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            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($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            [isEliginbleToAccess] = check4AllowedRoles2AccessRefund()\n             ></ccpay-refund-status>\n        </div>\n\n   </ng-container>\n\n\n<input #myInput type='hidden' id='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  [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\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\n</main>\n</div>\n",
                 styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;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:0}.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 #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{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 #000!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__cell:last-child,.govuk-table__header: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%}td,th{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}"]
             }] }
 ];
@@ -3762,10 +4565,193 @@ CaseTransactionsComponent.propDecorators = {
     LOGGEDINUSERROLES: [{ type: Input, args: ['LOGGEDINUSERROLES',] }],
     isTakePayment: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.LOGGEDINUSERROLES;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isTakePayment;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.takePayment;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.excReference;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.paymentGroups;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.payments;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.nonPayments;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.allPayments;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.remissions;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.fees;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.errorMessage;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.totalFees;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.totalPayments;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.totalNonOffPayments;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.totalRemissions;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.selectedOption;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.dcnNumber;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.paymentRef;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isTurnOff;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isRefundRemission;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isStrategicFixEnable;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isAddFeeBtnEnabled;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isExceptionRecord;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isUnprocessedRecordSelected;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.exceptionRecordReference;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isAnyFeeGroupAvilable;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isHistoricGroupAvailable;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isBulkScanEnable;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isRemissionsMatch;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.viewStatus;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isRemoveBtnDisabled;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.feeId;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.clAmountDue;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.unprocessedRecordCount;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isFeeRecordsExist;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isGrpOutstandingAmtPositive;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.totalRefundAmount;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.caseType;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.payment;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.paymentGroup;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.paymentView;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderDetail;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isAddRemissionEnable;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderRemissionDetails;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderLevelFees;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.ispaymentGroupApisuccess;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.cpoDetails;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderRef;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderStatus;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderParty;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderCreated;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderCCDEvent;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.serviceRequestValue;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderAddBtnEnable;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderFeesTotal;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderRemissionTotal;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderTotalPayments;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.orderPendingPayments;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isCPODown;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.test;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isPBA;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isIssueRefunfBtnEnable;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isAddRemissionBtnEnabled;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isRefundRemissionBtnEnable;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.allowedRolesToAccessRefund;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isEligible4PBAPayment;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.currentDate;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.isFromServiceRequestPage;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.navigationpage;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.remissionFeeAmt;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.check4AllowedRoles2AccessRefund;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.check4AllowedRoles2AccessPBApayment;
+    /** @type {?} */
+    CaseTransactionsComponent.prototype.allowFurtherAccessAfter4Days;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsComponent.prototype.bulkScaningPaymentService;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsComponent.prototype.caseTransactionsService;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    CaseTransactionsComponent.prototype.OrderslistService;
+    /* Skipping unhandled member: ;*/
+    /* Skipping unhandled member: ;*/
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/PaymentToPayhubRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PaymentToPayhubRequest {
     /**
@@ -3783,10 +4769,27 @@ class PaymentToPayhubRequest {
         this.case_type = caseType;
     }
 }
+if (false) {
+    /** @type {?} */
+    PaymentToPayhubRequest.prototype.currency;
+    /** @type {?} */
+    PaymentToPayhubRequest.prototype.description;
+    /** @type {?} */
+    PaymentToPayhubRequest.prototype.channel;
+    /** @type {?} */
+    PaymentToPayhubRequest.prototype.provider;
+    /** @type {?} */
+    PaymentToPayhubRequest.prototype.case_type;
+    /** @type {?} */
+    PaymentToPayhubRequest.prototype.ccd_case_number;
+    /** @type {?} */
+    PaymentToPayhubRequest.prototype.amount;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/PayhubAntennaRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PayhubAntennaRequest {
     /**
@@ -3801,10 +4804,21 @@ class PayhubAntennaRequest {
         this.case_type = caseType;
     }
 }
+if (false) {
+    /** @type {?} */
+    PayhubAntennaRequest.prototype.currency;
+    /** @type {?} */
+    PayhubAntennaRequest.prototype.case_type;
+    /** @type {?} */
+    PayhubAntennaRequest.prototype.ccd_case_number;
+    /** @type {?} */
+    PayhubAntennaRequest.prototype.amount;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/fee-summary/fee-summary.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 const BS_ENABLE_FLAG$2 = 'bulk-scan-enabling-fe';
@@ -3817,13 +4831,13 @@ class FeeSummaryComponent {
      * @param {?} paymentLibComponent
      * @param {?} OrderslistService
      */
-    constructor(router, bulkScaningPaymentService, location, paymentViewService, paymentLibComponent, OrderslistService$$1) {
+    constructor(router, bulkScaningPaymentService, location, paymentViewService, paymentLibComponent, OrderslistService) {
         this.router = router;
         this.bulkScaningPaymentService = bulkScaningPaymentService;
         this.location = location;
         this.paymentViewService = paymentViewService;
         this.paymentLibComponent = paymentLibComponent;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.viewStatus = 'main';
         this.service = "";
         this.platForm = "";
@@ -4135,7 +5149,7 @@ class FeeSummaryComponent {
 FeeSummaryComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-fee-summary',
-                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  <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 Group details could not be retrieved\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <!-- <table class=\"govuk-table\"  *ngIf=\"!errorMessage && paymentGroup\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header govuk-!-font-weight-bold\" scope=\"col\">Fee Code</th>\n        <th class=\"govuk-table__header govuk-!-font-weight-bold\" scope=\"col\">Fee description</th>\n        <th class=\"govuk-table__header govuk-!-font-weight-bold\" scope=\"col\">Remission code</th>\n        <th class=\"govuk-table__header govuk-!-font-weight-bold\" scope=\"col\"></th>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n        <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n        <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        <td class=\"govuk-table__cell\">{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</td>\n        <td class=\"govuk-table__cell grey-text\">\n          <table class=\"govuk-table\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border grey-text subcolumn-1\">Fee amount:</td>\n              <td class=\"no-border subcolumn-2\">{{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"no-border subcolumn-3\" *ngIf=\"!isTurnOff\">\n                <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='isPaymentExist || fee.remissions ? \"disable-link\" : \"\"'>remove fee</a>\n              </td>\n              <td class=\"no-border subcolumn-3\" *ngIf=\"isTurnOff\">\n                <a (click)=\"confirmRemoveFee(fee.id)\">remove fee</a>\n              </td>\n            </tr>\n            <tr class=\"govuk-table__row\" *ngIf=\"fee.volume && fee.volume > 0\">\n              <td class=\"no-border grey-text subcolumn-1\">Volume:</td>\n              <td class=\"no-border subcolumn-2\">{{ fee.volume }}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border grey-text subcolumn-1\">Fee total:</td>\n              <td class=\"no-border subcolumn-2\">{{ fee.calculated_amount  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border grey-text subcolumn-1\">Remission amount:</td>\n              <td class=\"no-border subcolumn-2\">{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}</td>\n              <td class=\"no-border subcolumn-3\" *ngIf=\"!isTurnOff\">\n                <a (click)=\"addRemission(fee)\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist\">\n                  Deduct remission\n                </a>\n              </td>\n              <td class=\"no-border subcolumn-3\" *ngIf=\"isTurnOff\">\n                <a (click)=\"addRemission(fee)\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount\">\n                Deduct remission\n              </a>\n              </td>\n                        </tr>\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border grey-text subcolumn-1\">Total after remission:</td>\n              <td class=\"no-border subcolumn-2\">{{ fee.net_amount  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n          </table>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\">\n          <table class=\"govuk-table\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border govuk-!-font-weight-bold subcolumn-1\">Total payment</td>\n              <td class=\"no-border subcolumn-2\">{{ totalAfterRemission - outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border govuk-!-font-weight-bold subcolumn-1\">Total outstanding amount</td>\n              <td class=\"no-border subcolumn-2\">{{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n          </table>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"!bsPaymentDcnNumber && isOldPcipalOff && isNewPcipalOff\">\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\">\n          <div class=\"govuk-form-group govuk-form-group--mg\">\n            <fieldset class=\"govuk-fieldset\">\n              <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n                <span class=\"govuk-fieldset__heading govuk-fieldset__heading--fz\">\n                  Which system are you using to take the payment?\n                </span>\n              </legend>\n              <div class=\"govuk-radios govuk-radios--small\">\n                <div class=\"govuk-radios__item\">\n                  <input id=\"changed-name\" class=\"govuk-radios__input\" [(ngModel)]=\"platForm\" type=\"radio\" aria-label=\"8x8\" value=\"8x8\">\n                  <label class=\"govuk-label govuk-radios__label\" for=\"changed-name\">\n                    8x8\n                  </label>\n                </div>\n                <div class=\"govuk-radios__item\">\n                  <input id=\"changed-name-2\" class=\"govuk-radios__input\" [(ngModel)]=\"platForm\" type=\"radio\" aria-label=\"Antenna\" value=\"Antenna\">\n                  <label class=\"govuk-label govuk-radios__label\" for=\"changed-name-2\">\n                    Antenna\n                  </label>\n                </div>\n              </div>\n            </fieldset>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n    <tr class=\"govuk-table__row\">\n      <td class=\"no-border\"></td>\n      <td class=\"no-border\"></td>\n      <td class=\"no-border\"></td>\n      <td class=\"no-border\">\n          <table class=\"govuk-table\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border subcolumn-2\">\n                <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n                [disabled]=\"totalFee <= 0 || !platForm || isConfirmationBtnDisabled\"\n                [ngClass]='totalFee <= 0 || !platForm || 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 *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n                  Allocate payment\n                </span>\n                <span *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n                  Continue\n                </span>\n              </button>\n              </td>\n            </tr>\n          </table>\n      </td>\n    </tr>\n  </tbody>\n  </table> -->\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table  govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && 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              <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n\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                            <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                              <br>\n                                <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                            </span>\n                      </td>\n\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                          <span  *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                             <br>\n                             <div class=\"govuk-table__cell_border\">1</div>\n                          </span>\n                      </td>\n\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                        <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                        <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                            <br>\n                            <div class=\"govuk-table__cell_rmborder alignright\">\n                                -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                              </div>\n                            </span>\n                      </td>\n\n\n              </tr>\n              <!-- <tr>\n                  <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                      <br>\n                        <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n                        <div class=\"govuk-table__cell_border\"></div>\n                    </td>\n                    <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n                        <br>\n                          <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n                      </td>\n                      <td>\n                          <br>\n                            <div class=\"govuk-table__cell_border\" 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          </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  <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>\n      <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n      [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n      [ngClass]='totalFee <= 0 || !platForm || !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 *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\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 (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n",
+                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' id='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  <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 Group details could not be retrieved\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <!-- <table class=\"govuk-table\"  *ngIf=\"!errorMessage && paymentGroup\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header govuk-!-font-weight-bold\" scope=\"col\">Fee Code</th>\n        <th class=\"govuk-table__header govuk-!-font-weight-bold\" scope=\"col\">Fee description</th>\n        <th class=\"govuk-table__header govuk-!-font-weight-bold\" scope=\"col\">Remission code</th>\n        <th class=\"govuk-table__header govuk-!-font-weight-bold\" scope=\"col\"></th>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n        <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n        <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        <td class=\"govuk-table__cell\">{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</td>\n        <td class=\"govuk-table__cell grey-text\">\n          <table class=\"govuk-table\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border grey-text subcolumn-1\">Fee amount:</td>\n              <td class=\"no-border subcolumn-2\">{{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"no-border subcolumn-3\" *ngIf=\"!isTurnOff\">\n                <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='isPaymentExist || fee.remissions ? \"disable-link\" : \"\"'>remove fee</a>\n              </td>\n              <td class=\"no-border subcolumn-3\" *ngIf=\"isTurnOff\">\n                <a (click)=\"confirmRemoveFee(fee.id)\">remove fee</a>\n              </td>\n            </tr>\n            <tr class=\"govuk-table__row\" *ngIf=\"fee.volume && fee.volume > 0\">\n              <td class=\"no-border grey-text subcolumn-1\">Volume:</td>\n              <td class=\"no-border subcolumn-2\">{{ fee.volume }}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border grey-text subcolumn-1\">Fee total:</td>\n              <td class=\"no-border subcolumn-2\">{{ fee.calculated_amount  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border grey-text subcolumn-1\">Remission amount:</td>\n              <td class=\"no-border subcolumn-2\">{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}</td>\n              <td class=\"no-border subcolumn-3\" *ngIf=\"!isTurnOff\">\n                <a (click)=\"addRemission(fee)\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist\">\n                  Deduct remission\n                </a>\n              </td>\n              <td class=\"no-border subcolumn-3\" *ngIf=\"isTurnOff\">\n                <a (click)=\"addRemission(fee)\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount\">\n                Deduct remission\n              </a>\n              </td>\n                        </tr>\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border grey-text subcolumn-1\">Total after remission:</td>\n              <td class=\"no-border subcolumn-2\">{{ fee.net_amount  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n          </table>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\">\n          <table class=\"govuk-table\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border govuk-!-font-weight-bold subcolumn-1\">Total payment</td>\n              <td class=\"no-border subcolumn-2\">{{ totalAfterRemission - outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border govuk-!-font-weight-bold subcolumn-1\">Total outstanding amount</td>\n              <td class=\"no-border subcolumn-2\">{{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n              <td class=\"no-border subcolumn-3\"></td>\n            </tr>\n          </table>\n        </td>\n      </tr>\n      <tr class=\"govuk-table__row\" *ngIf=\"!bsPaymentDcnNumber && isOldPcipalOff && isNewPcipalOff\">\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\"></td>\n        <td class=\"no-border\">\n          <div class=\"govuk-form-group govuk-form-group--mg\">\n            <fieldset class=\"govuk-fieldset\">\n              <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n                <span class=\"govuk-fieldset__heading govuk-fieldset__heading--fz\">\n                  Which system are you using to take the payment?\n                </span>\n              </legend>\n              <div class=\"govuk-radios govuk-radios--small\">\n                <div class=\"govuk-radios__item\">\n                  <input id=\"changed-name\" class=\"govuk-radios__input\" [(ngModel)]=\"platForm\" type=\"radio\" aria-label=\"8x8\" value=\"8x8\">\n                  <label class=\"govuk-label govuk-radios__label\" for=\"changed-name\">\n                    8x8\n                  </label>\n                </div>\n                <div class=\"govuk-radios__item\">\n                  <input id=\"changed-name-2\" class=\"govuk-radios__input\" [(ngModel)]=\"platForm\" type=\"radio\" aria-label=\"Antenna\" value=\"Antenna\">\n                  <label class=\"govuk-label govuk-radios__label\" for=\"changed-name-2\">\n                    Antenna\n                  </label>\n                </div>\n              </div>\n            </fieldset>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n    <tr class=\"govuk-table__row\">\n      <td class=\"no-border\"></td>\n      <td class=\"no-border\"></td>\n      <td class=\"no-border\"></td>\n      <td class=\"no-border\">\n          <table class=\"govuk-table\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"no-border subcolumn-2\">\n                <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n                [disabled]=\"totalFee <= 0 || !platForm || isConfirmationBtnDisabled\"\n                [ngClass]='totalFee <= 0 || !platForm || 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 *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n                  Allocate payment\n                </span>\n                <span *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n                  Continue\n                </span>\n              </button>\n              </td>\n            </tr>\n          </table>\n      </td>\n    </tr>\n  </tbody>\n  </table> -->\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table  govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && 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              <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n\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                            <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                              <br>\n                                <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                            </span>\n                      </td>\n\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                          <span  *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                             <br>\n                             <div class=\"govuk-table__cell_border\">1</div>\n                          </span>\n                      </td>\n\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                        <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                        <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                            <br>\n                            <div class=\"govuk-table__cell_rmborder alignright\">\n                                -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                              </div>\n                            </span>\n                      </td>\n\n\n              </tr>\n              <!-- <tr>\n                  <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                      <br>\n                        <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n                        <div class=\"govuk-table__cell_border\"></div>\n                    </td>\n                    <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n                        <br>\n                          <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n                      </td>\n                      <td>\n                          <br>\n                            <div class=\"govuk-table__cell_border\" 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          </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  <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>\n      <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n      [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n      [ngClass]='totalFee <= 0 || !platForm || !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 *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' id='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 (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' id='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 td,.fee-summary table th{font-size:19px;vertical-align:top}.fee-summary table td .no-padding,.fee-summary table th .no-padding{padding:0}.fee-summary table td .subcolumn-1,.fee-summary table th .subcolumn-1{width:45%}.fee-summary table td .subcolumn-2,.fee-summary table th .subcolumn-2{width:25%;text-align:right}.fee-summary table td .subcolumn-3,.fee-summary table th .subcolumn-3{width:30%;text-align:center}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:grey;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__cell_border,.govuk-table__header{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__cell,.govuk-table__header{padding:10px 0}.govuk-table__cell_rmborder,.govuk-table__header{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}.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}"]
             }] }
 ];
@@ -4154,10 +5168,93 @@ FeeSummaryComponent.propDecorators = {
     isTurnOff: [{ type: Input }],
     caseType: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    FeeSummaryComponent.prototype.paymentGroupRef;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isTurnOff;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.caseType;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.bsPaymentDcnNumber;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.paymentGroup;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.errorMessage;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.viewStatus;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.currentFee;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.totalFee;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.payhubHtml;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.service;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.platForm;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.upPaymentErrorMessage;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.selectedOption;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isBackButtonEnable;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.outStandingAmount;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isFeeAmountZero;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.totalAfterRemission;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isConfirmationBtnDisabled;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isRemoveBtnDisabled;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isPaymentExist;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isRemissionsExist;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isRemissionsMatch;
+    /** @type {?} */
+    FeeSummaryComponent.prototype.isStrategicFixEnable;
+    /**
+     * @type {?}
+     * @private
+     */
+    FeeSummaryComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    FeeSummaryComponent.prototype.bulkScaningPaymentService;
+    /**
+     * @type {?}
+     * @private
+     */
+    FeeSummaryComponent.prototype.location;
+    /**
+     * @type {?}
+     * @private
+     */
+    FeeSummaryComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    FeeSummaryComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    FeeSummaryComponent.prototype.OrderslistService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/error-banner/error-banner.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class ErrorBannerComponent {
     constructor() { }
@@ -4179,10 +5276,15 @@ ErrorBannerComponent.ctorParameters = () => [];
 ErrorBannerComponent.propDecorators = {
     errorMessage: [{ type: Input, args: ['errorMessage',] }]
 };
+if (false) {
+    /** @type {?} */
+    ErrorBannerComponent.prototype.errorMessage;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/UnidentifiedPaymentsRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class UnidentifiedPaymentsRequest {
     /**
@@ -4200,10 +5302,21 @@ class UnidentifiedPaymentsRequest {
         this.unidentified_reason = unidentified_reason;
     }
 }
+if (false) {
+    /** @type {?} */
+    UnidentifiedPaymentsRequest.prototype.payment_allocation_status;
+    /** @type {?} */
+    UnidentifiedPaymentsRequest.prototype.payment_group_reference;
+    /** @type {?} */
+    UnidentifiedPaymentsRequest.prototype.payment_reference;
+    /** @type {?} */
+    UnidentifiedPaymentsRequest.prototype.unidentified_reason;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/AllocatePaymentRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AllocatePaymentRequest {
     /**
@@ -4238,10 +5351,41 @@ class AllocatePaymentRequest {
         }
     }
 }
+if (false) {
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.amount;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.banked_date;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.ccd_case_number;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.exception_record;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.currency;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.document_control_number;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.external_provider;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.giro_slip_no;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.payer_name;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.payment_channel;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.payment_status;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.payment_method;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.case_type;
+    /** @type {?} */
+    AllocatePaymentRequest.prototype.payment_allocation_dto;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/mark-unidentified-payment/mark-unidentified-payment.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class MarkUnidentifiedPaymentComponent {
     /**
@@ -4503,7 +5647,7 @@ class MarkUnidentifiedPaymentComponent {
 MarkUnidentifiedPaymentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-mark-unidentified-payment',
-                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",
+                template: "<div class=\"mkpay-unidentified\" >\n  <div *ngIf=\"viewStatus === 'mainForm'\">\n    <input #myInput  type='hidden' id='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' id='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' id='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:#a71414 solid 3px;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}"]
             }] }
 ];
@@ -4517,10 +5661,67 @@ MarkUnidentifiedPaymentComponent.ctorParameters = () => [
 MarkUnidentifiedPaymentComponent.propDecorators = {
     caseType: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.caseType;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.markPaymentUnidentifiedForm;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.viewStatus;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.bspaymentdcn;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.isInvesticationDetailEmpty;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.investicationDetailHasError;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.investicationDetailMinHasError;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.investicationDetailMaxHasError;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.errorMessage;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.unassignedRecord;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.siteID;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.investigationComment;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.isConfirmButtondisabled;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.ccdReference;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.exceptionReference;
+    /** @type {?} */
+    MarkUnidentifiedPaymentComponent.prototype.isStrategicFixEnable;
+    /**
+     * @type {?}
+     * @private
+     */
+    MarkUnidentifiedPaymentComponent.prototype.formBuilder;
+    /**
+     * @type {?}
+     * @private
+     */
+    MarkUnidentifiedPaymentComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    MarkUnidentifiedPaymentComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    MarkUnidentifiedPaymentComponent.prototype.bulkScaningPaymentService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/UnsolicitedPaymentsRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class UnsolicitedPaymentsRequest {
     /**
@@ -4544,10 +5745,27 @@ class UnsolicitedPaymentsRequest {
         this.sending_email_address = responsible_person;
     }
 }
+if (false) {
+    /** @type {?} */
+    UnsolicitedPaymentsRequest.prototype.payment_allocation_status;
+    /** @type {?} */
+    UnsolicitedPaymentsRequest.prototype.payment_group_reference;
+    /** @type {?} */
+    UnsolicitedPaymentsRequest.prototype.payment_reference;
+    /** @type {?} */
+    UnsolicitedPaymentsRequest.prototype.receiving_office;
+    /** @type {?} */
+    UnsolicitedPaymentsRequest.prototype.receiving_email_address;
+    /** @type {?} */
+    UnsolicitedPaymentsRequest.prototype.sending_email_address;
+    /** @type {?} */
+    UnsolicitedPaymentsRequest.prototype.unidentified_reason;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/mark-unsolicited-payment/mark-unsolicited-payment.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class MarkUnsolicitedPaymentComponent {
     /**
@@ -4885,7 +6103,7 @@ class MarkUnsolicitedPaymentComponent {
 MarkUnsolicitedPaymentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-mark-unsolicited-payment',
-                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>",
+                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' id='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' id='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' id='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:#a71414 solid 3px;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:#fff}select option{background:#fff}"]
             }] }
 ];
@@ -4899,10 +6117,85 @@ MarkUnsolicitedPaymentComponent.ctorParameters = () => [
 MarkUnsolicitedPaymentComponent.propDecorators = {
     caseType: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.caseType;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.markPaymentUnsolicitedForm;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.viewStatus;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.reasonHasError;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.isReasonEmpty;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.reasonMinHasError;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.reasonMaxHasError;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.responsibleOfficeHasError;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.isResponsibleOfficeEmpty;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.errorMessage;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.bspaymentdcn;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.unassignedRecord;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.siteID;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.reason;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.responsiblePerson;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.responsibleOffice;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.emailId;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.isConfirmButtondisabled;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.isContinueButtondisabled;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.ccdReference;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.exceptionReference;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.selectedSiteId;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.selectedSiteName;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.isStrategicFixEnable;
+    /** @type {?} */
+    MarkUnsolicitedPaymentComponent.prototype.siteIDList;
+    /**
+     * @type {?}
+     * @private
+     */
+    MarkUnsolicitedPaymentComponent.prototype.formBuilder;
+    /**
+     * @type {?}
+     * @private
+     */
+    MarkUnsolicitedPaymentComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    MarkUnsolicitedPaymentComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    MarkUnsolicitedPaymentComponent.prototype.bulkScaningPaymentService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/unprocessed-payments/unprocessed-payments.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class UnprocessedPaymentsComponent {
     /**
@@ -4912,12 +6205,12 @@ class UnprocessedPaymentsComponent {
      * @param {?} paymentViewService
      * @param {?} OrderslistService
      */
-    constructor(router, bulkScaningPaymentService, paymentLibComponent, paymentViewService, OrderslistService$$1) {
+    constructor(router, bulkScaningPaymentService, paymentLibComponent, paymentViewService, OrderslistService) {
         this.router = router;
         this.bulkScaningPaymentService = bulkScaningPaymentService;
         this.paymentLibComponent = paymentLibComponent;
         this.paymentViewService = paymentViewService;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.selectedUnprocessedFeeEvent = new EventEmitter();
         this.getUnprocessedFeeCount = new EventEmitter();
         this.viewStatus = 'main';
@@ -5151,7 +6444,7 @@ class UnprocessedPaymentsComponent {
 UnprocessedPaymentsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-app-unprocessed-payments',
-                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 of 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 of 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",
+                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' id='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 of 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' id='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 of 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:transparent solid 1px;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px 0 #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;box-shadow:0 2px 0 #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%}td,th{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}"]
             }] }
 ];
@@ -5175,10 +6468,98 @@ UnprocessedPaymentsComponent.propDecorators = {
     selectedUnprocessedFeeEvent: [{ type: Output }],
     getUnprocessedFeeCount: [{ type: Output }]
 };
+if (false) {
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.FEE_RECORDS_EXISTS;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.PAYMENTREF;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.ISTURNOFF;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.IS_BUTTON_ENABLE;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.IS_OS_AMT_AVAILABLE;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.ISSFENABLE;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.PAYMENTSLENGTH;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.LEVEL;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.selectedUnprocessedFeeEvent;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.getUnprocessedFeeCount;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.viewStatus;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.unassignedRecordList;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.upPaymentErrorMessage;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.recordId;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isRecordExist;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.dcnNumber;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.selectedOption;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isUnprocessedRecordSelected;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isAllocateToExistingFeebtnEnabled;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isMarkAsUnidentifiedbtnEnabled;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isAllocatedToNewFeebtnEnabled;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isExceptionCase;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.serviceId;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isBulkScanEnable;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isTurnOff;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.isStFixEnable;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.unassignedRecordSelectedList;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.unassignedRecordListLength;
+    /** @type {?} */
+    UnprocessedPaymentsComponent.prototype.showContent;
+    /**
+     * @type {?}
+     * @private
+     */
+    UnprocessedPaymentsComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    UnprocessedPaymentsComponent.prototype.bulkScaningPaymentService;
+    /**
+     * @type {?}
+     * @private
+     */
+    UnprocessedPaymentsComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    UnprocessedPaymentsComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    UnprocessedPaymentsComponent.prototype.OrderslistService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/processed-payments/processed-payments.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class ProcessedPaymentsComponent {
     /**
@@ -5228,10 +6609,27 @@ ProcessedPaymentsComponent.propDecorators = {
     NONPAYMENTS: [{ type: Input, args: ['NONPAYMENTS',] }],
     goToPaymentViewComponent: [{ type: Output }]
 };
+if (false) {
+    /** @type {?} */
+    ProcessedPaymentsComponent.prototype.NONPAYMENTS;
+    /** @type {?} */
+    ProcessedPaymentsComponent.prototype.goToPaymentViewComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProcessedPaymentsComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProcessedPaymentsComponent.prototype.bulkScaningPaymentService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/IAllocationPaymentsRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class IAllocationPaymentsRequest {
     /**
@@ -5253,10 +6651,25 @@ class IAllocationPaymentsRequest {
         this.user_name = userName ? userName : null;
     }
 }
+if (false) {
+    /** @type {?} */
+    IAllocationPaymentsRequest.prototype.payment_allocation_status;
+    /** @type {?} */
+    IAllocationPaymentsRequest.prototype.payment_group_reference;
+    /** @type {?} */
+    IAllocationPaymentsRequest.prototype.payment_reference;
+    /** @type {?} */
+    IAllocationPaymentsRequest.prototype.reason;
+    /** @type {?} */
+    IAllocationPaymentsRequest.prototype.explanation;
+    /** @type {?} */
+    IAllocationPaymentsRequest.prototype.user_name;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/allocate-payments/allocate-payments.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AllocatePaymentsComponent {
     /**
@@ -5268,14 +6681,14 @@ class AllocatePaymentsComponent {
      * @param {?} bulkScaningPaymentService
      * @param {?} OrderslistService
      */
-    constructor(errorHandlerService, caseTransactionsService, formBuilder, paymentViewService, paymentLibComponent, bulkScaningPaymentService, OrderslistService$$1) {
+    constructor(errorHandlerService, caseTransactionsService, formBuilder, paymentViewService, paymentLibComponent, bulkScaningPaymentService, OrderslistService) {
         this.errorHandlerService = errorHandlerService;
         this.caseTransactionsService = caseTransactionsService;
         this.formBuilder = formBuilder;
         this.paymentViewService = paymentViewService;
         this.paymentLibComponent = paymentLibComponent;
         this.bulkScaningPaymentService = bulkScaningPaymentService;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.unAllocatedPayment = {
             amount: 0
         };
@@ -5786,7 +7199,7 @@ class AllocatePaymentsComponent {
 AllocatePaymentsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-allocate-payments',
-                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 of 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                [(ngModel)]=\"paymentReason\" value={{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                [(ngModel)]=\"paymentReason\" value={{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                [(ngModel)]=\"paymentExplanation\" value={{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                [(ngModel)]=\"paymentExplanation\" value={{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>",
+                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 of 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' id='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' id='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                [(ngModel)]=\"paymentReason\" value={{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                [(ngModel)]=\"paymentReason\" value={{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                [(ngModel)]=\"paymentExplanation\" value={{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                [(ngModel)]=\"paymentExplanation\" value={{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>",
                 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-font__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-hint,.allocate-payments .govuk-label--m,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-warning-text__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:#a71414 solid 3px;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}"]
             }] }
 ];
@@ -5804,10 +7217,142 @@ AllocatePaymentsComponent.propDecorators = {
     isTurnOff: [{ type: Input }],
     caseType: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isTurnOff;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.caseType;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.overUnderPaymentForm;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.viewStatus;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.bspaymentdcn;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.recordId;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.feedbackUrlLabel;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.unAllocatedPayment;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.siteID;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.errorMessage;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentGroup;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentGroups;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.remainingAmount;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isRemainingAmountGtZero;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isMoreDetailsBoxHide;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isRemainingAmountLtZero;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.afterFeeAllocateOutstanding;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.amountForAllocation;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isConfirmButtondisabled;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isContinueButtondisabled;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.otherPaymentExplanation;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.selectedOption;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isFeeAmountZero;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentReasonHasError;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentExplanationHasError;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isPaymentDetailsEmpty;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isPaymentDetailsInvalid;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentDetailsMinHasError;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentDetailsMaxHasError;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isUserNameEmpty;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isUserNameInvalid;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.ccdReference;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.exceptionReference;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentReason;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentExplanation;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.userName;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentSectionLabel;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.paymentRef;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.isStrategicFixEnable;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.orderLevelFees;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.cookieUserName;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.enCookieUserName;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.userNameField;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.reasonList;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.explanationList;
+    /** @type {?} */
+    AllocatePaymentsComponent.prototype.refund;
+    /**
+     * @type {?}
+     * @private
+     */
+    AllocatePaymentsComponent.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    AllocatePaymentsComponent.prototype.caseTransactionsService;
+    /**
+     * @type {?}
+     * @private
+     */
+    AllocatePaymentsComponent.prototype.formBuilder;
+    /**
+     * @type {?}
+     * @private
+     */
+    AllocatePaymentsComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    AllocatePaymentsComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    AllocatePaymentsComponent.prototype.bulkScaningPaymentService;
+    /**
+     * @type {?}
+     * @private
+     */
+    AllocatePaymentsComponent.prototype.OrderslistService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/AddRemissionRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AddRemissionRequest {
     /**
@@ -5825,10 +7370,27 @@ class AddRemissionRequest {
         this.case_type = caseType;
     }
 }
+if (false) {
+    /** @type {?} */
+    AddRemissionRequest.prototype.beneficiary_name;
+    /** @type {?} */
+    AddRemissionRequest.prototype.ccd_case_number;
+    /** @type {?} */
+    AddRemissionRequest.prototype.fee;
+    /** @type {?} */
+    AddRemissionRequest.prototype.hwf_amount;
+    /** @type {?} */
+    AddRemissionRequest.prototype.hwf_reference;
+    /** @type {?} */
+    AddRemissionRequest.prototype.payment_group_reference;
+    /** @type {?} */
+    AddRemissionRequest.prototype.case_type;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/AddRetroRemissionRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AddRetroRemissionRequest {
     /**
@@ -5840,10 +7402,17 @@ class AddRetroRemissionRequest {
         this.hwf_reference = hwf_reference;
     }
 }
+if (false) {
+    /** @type {?} */
+    AddRetroRemissionRequest.prototype.hwf_amount;
+    /** @type {?} */
+    AddRetroRemissionRequest.prototype.hwf_reference;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/PostRefundRetroRemission.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PostRefundRetroRemission {
     /**
@@ -5855,10 +7424,17 @@ class PostRefundRetroRemission {
         this.refund_reason = refund_reason;
     }
 }
+if (false) {
+    /** @type {?} */
+    PostRefundRetroRemission.prototype.payment_reference;
+    /** @type {?} */
+    PostRefundRetroRemission.prototype.refund_reason;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/PostIssueRefundRetroRemission.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PostIssueRefundRetroRemission {
     /**
@@ -5868,11 +7444,18 @@ class PostIssueRefundRetroRemission {
         this.remissionReference = remissionReference;
     }
 }
+if (false) {
+    /** @type {?} */
+    PostIssueRefundRetroRemission.prototype.remissionReference;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/add-remission/add-remission.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+const BS_ENABLE_FLAG$3 = 'bulk-scan-enabling-fe';
 class AddRemissionComponent {
     /**
      * @param {?} formBuilder
@@ -5883,14 +7466,14 @@ class AddRemissionComponent {
      * @param {?} cd
      * @param {?} OrderslistService
      */
-    constructor(formBuilder, router, paymentViewService, paymentLibComponent, refundService, cd, OrderslistService$$1) {
+    constructor(formBuilder, router, paymentViewService, paymentLibComponent, refundService, cd, OrderslistService) {
         this.formBuilder = formBuilder;
         this.router = router;
         this.paymentViewService = paymentViewService;
         this.paymentLibComponent = paymentLibComponent;
         this.refundService = refundService;
         this.cd = cd;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.cancelRemission = new EventEmitter();
         //@Output() refundListReason: EventEmitter<any> = new EventEmitter({reason:string, code:string});
         this.refundListReason = new EventEmitter();
@@ -5934,7 +7517,8 @@ class AddRemissionComponent {
         if (this.viewCompStatus !== '' && this.viewCompStatus !== undefined) {
             this.viewStatus = '';
         }
-        if (this.remission) ;
+        if (this.remission) {
+        }
         if (this.fee) {
             this.amount = (this.fee.volume * this.fee.calculated_amount);
         }
@@ -6692,7 +8276,7 @@ class AddRemissionComponent {
 AddRemissionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-add-remission',
-                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\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ADDREMISSION'>\n      <h1 class=\"heading-large\">Add remission </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 {{ fee?.code }}: {{ fee?.description }}\n                <span class=\"form-hint\">Enter remission for reference. For example: 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</span>\n                <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</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?\n              </label>\n\n              <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</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\" [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</span>\n                  <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                  <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n                </p>\n              </div>\n            </div>\n          </form>\n          <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n              Submit\n            </button>\n        </div>\n      </form>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n      <input #myInput type='hidden' class='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</span>\n          Are you sure you want to add remission to this fee?\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:</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:</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:</td>\n            <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</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\n      </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"confirmRemission()\">\n        Confirm\n      </button>\n\n  </ng-container>\n\n  <!-- Add retro remission changes-->\n\n  <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'>\n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n      <h1 class=\"heading-large\">Enter help with fees or remission reference</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: 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</span>\n                  <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</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</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n            </div>\n            <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n          </div>\n      </form>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'>\n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                      <fieldset class=\"govuk-fieldset\">\n                        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n                            <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1>\n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the remission amount\n                            </h1>\n                            <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                                Enter the  amount\n                            </h1>\n                          </legend>\n                       <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                       <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                        <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                        <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                        <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</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\" [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</button>\n                      <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n\n                  </div>\n                  <p>\n                    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                </p>\n              </div>\n\n          </form>\n      </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'>\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\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</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</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</td>\n              <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} ({{ 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</td>\n              <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n               <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n              <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                  <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</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 </button>\n      <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'>\n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Remission added\n          </h1>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>The amount to be refunded should be {{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]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </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\n          </a>\n            </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n      <div class=\"govuk-grid-row\">\n        <div >\n          <div class=\"govuk-panel govuk-panel--confirmation\">\n            <h1 class=\"govuk-panel__title\">\n              Refund submitted\n            </h1>\n\n            <div class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n            </div>\n\n          </div>\n          <div *ngIf=\"isPaymentSuccess\">\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        </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\n      </a>\n        </p>\n        </div>\n      </div>\n\n  </ng-container>\n\n  <!-- Issue Refund Section -->\n\n  <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'>\n      <h1 class=\"heading-large\">Process refund</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <h1 class=\"heading-large\">Why are you making this refund?\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</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.name, 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\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</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\n                                    </label>\n                                    <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</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)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n            <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n        </div>\n        <p>\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'>\n      <div class=\"govuk-warning-text\">\n\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\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> {{ displayRefundReason  }}\n               <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\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\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </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()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <!--Retro Refund-->\n  <ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n      <div class=\"govuk-warning-text\">\n\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\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> Retrospective remission </td>\n          </tr>\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\">{{this.payment.reference}}</td>\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\">{{this.remission.hwf_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 code</td>\n              <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n              <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</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\n      </button>\n      </div>\n      <p>\n          <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\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__title\">\n            Refund submitted\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\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 passed to a team leader to approve.\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\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    [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    [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\n\n\n",
+                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\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\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 </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 {{ fee?.code }}: {{ fee?.description }}\n                <span class=\"form-hint\">Enter remission for reference. For example: 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</span>\n                <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</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?\n              </label>\n\n              <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</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\" [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</span>\n                  <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                  <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n                </p>\n              </div>\n            </div>\n          </form>\n          <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n              Submit\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</span>\n          Are you sure you want to add remission to this fee?\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:</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:</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:</td>\n            <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</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\n      </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"confirmRemission()\">\n        Confirm\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</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n      <h1 class=\"heading-large\">Enter help with fees or remission reference</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: 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</span>\n                  <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</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</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n            </div>\n            <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</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</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                      <fieldset class=\"govuk-fieldset\">\n                        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n                            <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1>\n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the remission amount\n                            </h1>\n                            <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                                Enter the  amount\n                            </h1>\n                          </legend>\n                       <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                       <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                        <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                        <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                        <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</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\" [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</button>\n                      <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n\n                  </div>\n                  <p>\n                    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                </p>\n              </div>\n\n          </form>\n      </div>\n  </ng-container>\n\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</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\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</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</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</td>\n              <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} ({{ 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</td>\n              <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n               <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n              <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                  <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</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 </button>\n      <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</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--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Remission added\n          </h1>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>The amount to be refunded should be {{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]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </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\n          </a>\n            </p>\n      </div>\n    </div>\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__title\">\n              Refund submitted\n            </h1>\n\n            <div class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n            </div>\n\n          </div>\n          <div *ngIf=\"isPaymentSuccess\">\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        </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\n      </a>\n        </p>\n        </div>\n      </div>\n\n  </ng-container>\n\n  <!-- Issue Refund Section -->\n\n  <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'>\n      <h1 class=\"heading-large\">Process refund</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <h1 class=\"heading-large\">Why are you making this refund?\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</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.name, 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\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</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\n                                    </label>\n                                    <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</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)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n            <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n        </div>\n        <p>\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\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</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</td>\n              <td class=\"govuk-table__cell\"> {{ displayRefundReason  }}\n               <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\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\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </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()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\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='ADDREFUNDFORREMISSION'>\n      <div class=\"govuk-warning-text\">\n\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\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> Retrospective remission </td>\n          </tr>\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\">{{this.payment.reference}}</td>\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\">{{this.remission.hwf_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 code</td>\n              <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n              <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</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\n      </button>\n      </div>\n      <p>\n          <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\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__title\">\n            Refund submitted\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\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 passed to a team leader to approve.\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\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    [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    [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\n\n\n",
                 styles: [".add-remission .button{padding:.5em;font-size:19px;font-weight:200;margin:20px 2px}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .right{cursor:pointer}.add-remission .govuk-label--s,.add-remission .govuk-warning-text__text,.add-remission .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:#a71414 solid 3px;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,.add-remission .govuk-body-m{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 .radio,.add-remission .right{float:right}.govuk-input{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.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}.white{color:#fff}.pagesize{margin:2em;width:97%}.right{cursor:pointer}.form-hint{font-size:19px!important}"]
             }] }
 ];
@@ -6737,10 +8321,188 @@ AddRemissionComponent.propDecorators = {
     refundListReason: [{ type: Output }],
     refundListAmount: [{ type: Output }]
 };
+if (false) {
+    /** @type {?} */
+    AddRemissionComponent.prototype.fee;
+    /** @type {?} */
+    AddRemissionComponent.prototype.payment;
+    /** @type {?} */
+    AddRemissionComponent.prototype.remission;
+    /** @type {?} */
+    AddRemissionComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    AddRemissionComponent.prototype.caseType;
+    /** @type {?} */
+    AddRemissionComponent.prototype.viewCompStatus;
+    /** @type {?} */
+    AddRemissionComponent.prototype.paymentGroupRef;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isTurnOff;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isRefundRemission;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isStrategicFixEnable;
+    /** @type {?} */
+    AddRemissionComponent.prototype.paidAmount;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isFromRefundListPage;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isFromPaymentDetailPage;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isFromServiceRequestPage;
+    /** @type {?} */
+    AddRemissionComponent.prototype.feeamount;
+    /** @type {?} */
+    AddRemissionComponent.prototype.LOGGEDINUSERROLES;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderDetail;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderRef;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderStatus;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderParty;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderCreated;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderCCDEvent;
+    /** @type {?} */
+    AddRemissionComponent.prototype.takePayment;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderFeesTotal;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderTotalPayments;
+    /** @type {?} */
+    AddRemissionComponent.prototype.orderRemissionTotal;
+    /** @type {?} */
+    AddRemissionComponent.prototype.cancelRemission;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refundListReason;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refundListAmount;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refund;
+    /** @type {?} */
+    AddRemissionComponent.prototype.remissionForm;
+    /** @type {?} */
+    AddRemissionComponent.prototype.hasErrors;
+    /** @type {?} */
+    AddRemissionComponent.prototype.viewStatus;
+    /** @type {?} */
+    AddRemissionComponent.prototype.errorMessage;
+    /** @type {?} */
+    AddRemissionComponent.prototype.option;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isConfirmationBtnDisabled;
+    /** @type {?} */
+    AddRemissionComponent.prototype.bsPaymentDcnNumber;
+    /** @type {?} */
+    AddRemissionComponent.prototype.selectedValue;
+    /** @type {?} */
+    AddRemissionComponent.prototype.amount;
+    /** @type {?} */
+    AddRemissionComponent.prototype.retroRemission;
+    /** @type {?} */
+    AddRemissionComponent.prototype.remissionReference;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refundReference;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refundAmount;
+    /** @type {?} */
+    AddRemissionComponent.prototype.paymentExplanationHasError;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refundReason;
+    /** @type {?} */
+    AddRemissionComponent.prototype.selectedRefundReason;
+    /** @type {?} */
+    AddRemissionComponent.prototype.displayRefundReason;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refundCode;
+    /** @type {?} */
+    AddRemissionComponent.prototype.remessionPayment;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isRemissionCodeEmpty;
+    /** @type {?} */
+    AddRemissionComponent.prototype.remissionCodeHasError;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isAmountEmpty;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isReasonEmpty;
+    /** @type {?} */
+    AddRemissionComponent.prototype.amountHasError;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isRemissionLessThanFeeError;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refundHasError;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isPaymentSuccess;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isRemissionApplied;
+    /** @type {?} */
+    AddRemissionComponent.prototype.remissionamt;
+    /** @type {?} */
+    AddRemissionComponent.prototype.commonRefundReasons;
+    /** @type {?} */
+    AddRemissionComponent.prototype.showReasonText;
+    /** @type {?} */
+    AddRemissionComponent.prototype.isRefundReasonsSelected;
+    /** @type {?} */
+    AddRemissionComponent.prototype.default;
+    /** @type {?} */
+    AddRemissionComponent.prototype.reasonLength;
+    /** @type {?} */
+    AddRemissionComponent.prototype.refundReasons;
+    /** @type {?} */
+    AddRemissionComponent.prototype.pattern1;
+    /** @type {?} */
+    AddRemissionComponent.prototype.pattern2;
+    /** @type {?} */
+    AddRemissionComponent.prototype.sendOrderDetail;
+    /** @type {?} */
+    AddRemissionComponent.prototype.sendOrderRef;
+    /** @type {?} */
+    AddRemissionComponent.prototype.component;
+    /**
+     * @type {?}
+     * @private
+     */
+    AddRemissionComponent.prototype.formBuilder;
+    /**
+     * @type {?}
+     * @private
+     */
+    AddRemissionComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    AddRemissionComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    AddRemissionComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    AddRemissionComponent.prototype.refundService;
+    /**
+     * @type {?}
+     * @private
+     */
+    AddRemissionComponent.prototype.cd;
+    /**
+     * @type {?}
+     * @private
+     */
+    AddRemissionComponent.prototype.OrderslistService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/pipes/ccd-hyphens.pipe.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CcdHyphensPipe {
     constructor() { }
@@ -6768,7 +8530,8 @@ CcdHyphensPipe.ctorParameters = () => [];
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/pipes/capitalize.pipe.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CapitalizePipe {
     constructor() { }
@@ -6791,7 +8554,8 @@ CapitalizePipe.ctorParameters = () => [];
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/pipes/key-value.pipe.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class keyValuePipe {
     constructor() { }
@@ -6820,7 +8584,8 @@ keyValuePipe.ctorParameters = () => [];
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/pipes/sanitize-html.pipe.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class SanitizeHtmlPipe {
     /**
@@ -6844,10 +8609,18 @@ SanitizeHtmlPipe.decorators = [
 SanitizeHtmlPipe.ctorParameters = () => [
     { type: DomSanitizer }
 ];
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    SanitizeHtmlPipe.prototype.sanitizer;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/services/xl-file/xl-file.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
@@ -7053,7 +8826,8 @@ XlFileService.ctorParameters = () => [];
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/reports/reports.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class ReportsComponent {
     /**
@@ -7441,7 +9215,7 @@ class ReportsComponent {
 ReportsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-reports',
-                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\" *ngIf=\"ISPAYMENTSTATUSENABLED\">\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>\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\">Download report</button>\n   </div>\n </form>\n    \n",
+                template: "<div class=\"header\">\n      <input #myInput type='hidden' id='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\" *ngIf=\"ISPAYMENTSTATUSENABLED\">\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>\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\">Download report</button>\n   </div>\n </form>\n    \n",
                 styles: [".govuk-radios__input:focus+.govuk-radios__label::before{border-width:4px;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}"]
             }] }
 ];
@@ -7456,10 +9230,66 @@ ReportsComponent.ctorParameters = () => [
 ReportsComponent.propDecorators = {
     ISPAYMENTSTATUSENABLED: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    ReportsComponent.prototype.ISPAYMENTSTATUSENABLED;
+    /** @type {?} */
+    ReportsComponent.prototype.fmt;
+    /** @type {?} */
+    ReportsComponent.prototype.loc;
+    /** @type {?} */
+    ReportsComponent.prototype.reportsForm;
+    /** @type {?} */
+    ReportsComponent.prototype.startDate;
+    /** @type {?} */
+    ReportsComponent.prototype.endDate;
+    /** @type {?} */
+    ReportsComponent.prototype.errorMeaagse;
+    /** @type {?} */
+    ReportsComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    ReportsComponent.prototype.isDownLoadButtondisabled;
+    /** @type {?} */
+    ReportsComponent.prototype.isStartDateLesthanEndDate;
+    /** @type {?} */
+    ReportsComponent.prototype.isDateBetwnMonth;
+    /** @type {?} */
+    ReportsComponent.prototype.isDateRangeBetnWeek;
+    /** @type {?} */
+    ReportsComponent.prototype.errorMessage;
+    /** @type {?} */
+    ReportsComponent.prototype.paymentGroups;
+    /**
+     * @type {?}
+     * @private
+     */
+    ReportsComponent.prototype.xlFileService;
+    /**
+     * @type {?}
+     * @private
+     */
+    ReportsComponent.prototype.errorHandlerService;
+    /**
+     * @type {?}
+     * @private
+     */
+    ReportsComponent.prototype.formBuilder;
+    /**
+     * @type {?}
+     * @private
+     */
+    ReportsComponent.prototype.bulkScaningPaymentService;
+    /**
+     * @type {?}
+     * @private
+     */
+    ReportsComponent.prototype.paymentViewService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/table/table.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class TableComponent {
     /**
@@ -7469,10 +9299,10 @@ class TableComponent {
      * @param {?} router
      * @param {?} activeRoute
      */
-    constructor(paymentLibComponent, cdRef, OrderslistService$$1, router, activeRoute) {
+    constructor(paymentLibComponent, cdRef, OrderslistService, router, activeRoute) {
         this.paymentLibComponent = paymentLibComponent;
         this.cdRef = cdRef;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.router = router;
         this.activeRoute = activeRoute;
         // displayedColumns = ['ccdCaseNumber', 'refundReference', 'reason', 'createBy', 'updateDate', 'Action'];
@@ -7591,13 +9421,65 @@ TableComponent.propDecorators = {
     DATASOURCE: [{ type: Input, args: ['DATASOURCE',] }],
     STATUS: [{ type: Input, args: ['STATUS',] }],
     errorMessage: [{ type: Input, args: ['errorMessage',] }],
-    paginator: [{ type: ViewChild, args: [MatPaginator,] }],
-    sort: [{ type: ViewChild, args: [MatSort,] }]
+    paginator: [{ type: ViewChild, args: [MatPaginator, { static: false },] }],
+    sort: [{ type: ViewChild, args: [MatSort, { static: false },] }]
 };
+if (false) {
+    /** @type {?} */
+    TableComponent.prototype.DATASOURCE;
+    /** @type {?} */
+    TableComponent.prototype.STATUS;
+    /** @type {?} */
+    TableComponent.prototype.errorMessage;
+    /** @type {?} */
+    TableComponent.prototype.isApprovalFlow;
+    /** @type {?} */
+    TableComponent.prototype.displayedColumns;
+    /** @type {?} */
+    TableComponent.prototype.dataSource;
+    /** @type {?} */
+    TableComponent.prototype.userLst;
+    /** @type {?} */
+    TableComponent.prototype.actualcount;
+    /** @type {?} */
+    TableComponent.prototype.count;
+    /** @type {?} */
+    TableComponent.prototype.refundList;
+    /** @type {?} */
+    TableComponent.prototype.paginator;
+    /** @type {?} */
+    TableComponent.prototype.sort;
+    /**
+     * @type {?}
+     * @private
+     */
+    TableComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    TableComponent.prototype.cdRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    TableComponent.prototype.OrderslistService;
+    /**
+     * @type {?}
+     * @private
+     */
+    TableComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    TableComponent.prototype.activeRoute;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/IResubmitRefundRequest.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class IResubmitRefundRequest {
     /**
@@ -7609,11 +9491,20 @@ class IResubmitRefundRequest {
         this.amount = amount;
     }
 }
+if (false) {
+    /** @type {?} */
+    IResubmitRefundRequest.prototype.refund_reason;
+    /** @type {?} */
+    IResubmitRefundRequest.prototype.amount;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/refund-status/refund-status.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+const BS_ENABLE_FLAG$4 = 'bulk-scan-enabling-fe';
 class RefundStatusComponent {
     /**
      * @param {?} formBuilder
@@ -7623,13 +9514,13 @@ class RefundStatusComponent {
      * @param {?} router
      * @param {?} OrderslistService
      */
-    constructor(formBuilder, refundService, paymentLibComponent, paymentViewService, router, OrderslistService$$1) {
+    constructor(formBuilder, refundService, paymentLibComponent, paymentViewService, router, OrderslistService) {
         this.formBuilder = formBuilder;
         this.refundService = refundService;
         this.paymentLibComponent = paymentLibComponent;
         this.paymentViewService = paymentViewService;
         this.router = router;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.LOGGEDINUSERROLES = [];
         this.rejectedRefundList = [];
         this.approvalStatus = 'Sent for approval';
@@ -7992,10 +9883,113 @@ RefundStatusComponent.propDecorators = {
     isTurnOff: [{ type: Input }],
     isEliginbleToAccess: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    RefundStatusComponent.prototype.LOGGEDINUSERROLES;
+    /** @type {?} */
+    RefundStatusComponent.prototype.API_ROOT;
+    /** @type {?} */
+    RefundStatusComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isTurnOff;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isEliginbleToAccess;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundStatusForm;
+    /** @type {?} */
+    RefundStatusComponent.prototype.selectedRefundReason;
+    /** @type {?} */
+    RefundStatusComponent.prototype.rejectedRefundList;
+    /** @type {?} */
+    RefundStatusComponent.prototype.approvalStatus;
+    /** @type {?} */
+    RefundStatusComponent.prototype.rejectStatus;
+    /** @type {?} */
+    RefundStatusComponent.prototype.errorMessage;
+    /** @type {?} */
+    RefundStatusComponent.prototype.viewName;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundReason;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundlist;
+    /** @type {?} */
+    RefundStatusComponent.prototype.bsPaymentDcnNumber;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isCallFromRefundList;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundButtonState;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isAmountEmpty;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isReasonEmpty;
+    /** @type {?} */
+    RefundStatusComponent.prototype.amountHasError;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isRemissionLessThanFeeError;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundHasError;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundReasons;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundStatusHistories;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundReference;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundAmount;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundCode;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isRefundBtnDisabled;
+    /** @type {?} */
+    RefundStatusComponent.prototype.oldRefundReason;
+    /** @type {?} */
+    RefundStatusComponent.prototype.refundreason;
+    /** @type {?} */
+    RefundStatusComponent.prototype.navigationpage;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isLastUpdatedByCurrentUser;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isProcessRefund;
+    /** @type {?} */
+    RefundStatusComponent.prototype.changedAmount;
+    /** @type {?} */
+    RefundStatusComponent.prototype.isFromPayBubble;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundStatusComponent.prototype.formBuilder;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundStatusComponent.prototype.refundService;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundStatusComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundStatusComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundStatusComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    RefundStatusComponent.prototype.OrderslistService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/service-request/service-request.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class ServiceRequestComponent {
     /**
@@ -8004,10 +9998,10 @@ class ServiceRequestComponent {
      * @param {?} OrderslistService
      * @param {?} router
      */
-    constructor(paymentLibComponent, paymentViewService, OrderslistService$$1, router) {
+    constructor(paymentLibComponent, paymentViewService, OrderslistService, router) {
         this.paymentLibComponent = paymentLibComponent;
         this.paymentViewService = paymentViewService;
-        this.OrderslistService = OrderslistService$$1;
+        this.OrderslistService = OrderslistService;
         this.router = router;
         this.goToServiceRquestComponent = new EventEmitter();
         this.paymentGroups = [];
@@ -8207,6 +10201,7 @@ class ServiceRequestComponent {
             else {
                 return false;
             }
+            ;
         }
     }
     /**
@@ -8316,6 +10311,7 @@ class ServiceRequestComponent {
         else {
             return false;
         }
+        ;
     }
     /**
      * @return {?}
@@ -8346,6 +10342,7 @@ class ServiceRequestComponent {
             else {
                 return false;
             }
+            ;
         }
     }
     /**
@@ -8435,10 +10432,175 @@ ServiceRequestComponent.propDecorators = {
     isServiceRequest: [{ type: Input, args: ["isServiceRequest",] }],
     goToServiceRquestComponent: [{ type: Output }]
 };
+if (false) {
+    /** @type {?} */
+    ServiceRequestComponent.prototype.LOGGEDINUSERROLES;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.viewStatus;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderDetail;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderRef;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderStatus;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderParty;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderCreated;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderCCDEvent;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderFeesTotal;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderTotalPayments;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderRemissionTotal;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.takePayment;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.ccdCaseNumber;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isServiceRequest;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.goToServiceRquestComponent;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.servicerequest;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.excReference;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.paymentGroups;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.payments;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.nonPayments;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.allPayments;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.remissions;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.fees;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.errorMessage;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.totalFees;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.totalPayments;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.totalNonOffPayments;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.totalRemissions;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.selectedOption;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.dcnNumber;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.paymentRef;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isTurnOff;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isRefundRemission;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isStrategicFixEnable;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isAddFeeBtnEnabled;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isExceptionRecord;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isUnprocessedRecordSelected;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.exceptionRecordReference;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isAnyFeeGroupAvilable;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isHistoricGroupAvailable;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isBulkScanEnable;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isRemissionsMatch;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isRemoveBtnDisabled;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.feeId;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.clAmountDue;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.unprocessedRecordCount;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isFeeRecordsExist;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isGrpOutstandingAmtPositive;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.totalRefundAmount;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.caseType;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.payment;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.paymentGroup;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.paymentView;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isAddRemissionEnable;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderRemissionDetails;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderLevelFees;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.cpoDetails;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.serviceRequestValue;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.orderAddBtnEnable;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isCPODown;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.test;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isPBA;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isIssueRefunfBtnEnable;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isAddRemissionBtnEnabled;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isRefundRemissionBtnEnable;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.allowedRolesToAccessRefund;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.isFromServiceRequestPage;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.navigationpage;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.remissionFeeAmt;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.check4AllowedRoles2AccessRefund;
+    /** @type {?} */
+    ServiceRequestComponent.prototype.allowFurtherAccessAfter4Days;
+    /**
+     * @type {?}
+     * @private
+     */
+    ServiceRequestComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    ServiceRequestComponent.prototype.paymentViewService;
+    /**
+     * @type {?}
+     * @private
+     */
+    ServiceRequestComponent.prototype.OrderslistService;
+    /**
+     * @type {?}
+     * @private
+     */
+    ServiceRequestComponent.prototype.router;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/IserviceRequestCardPayment.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class IserviceRequestCardPayment {
     /**
@@ -8450,10 +10612,19 @@ class IserviceRequestCardPayment {
         this.language = 'string';
     }
 }
+if (false) {
+    /** @type {?} */
+    IserviceRequestCardPayment.prototype.amount;
+    /** @type {?} */
+    IserviceRequestCardPayment.prototype.currency;
+    /** @type {?} */
+    IserviceRequestCardPayment.prototype.language;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/interfaces/IserviceRequestPbaPayment.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class IserviceRequestPbaPayment {
     /**
@@ -8470,11 +10641,26 @@ class IserviceRequestPbaPayment {
         this.organisation_name = orgName;
     }
 }
+if (false) {
+    /** @type {?} */
+    IserviceRequestPbaPayment.prototype.account_number;
+    /** @type {?} */
+    IserviceRequestPbaPayment.prototype.amount;
+    /** @type {?} */
+    IserviceRequestPbaPayment.prototype.currency;
+    /** @type {?} */
+    IserviceRequestPbaPayment.prototype.customer_reference;
+    /** @type {?} */
+    IserviceRequestPbaPayment.prototype.organisation_name;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/components/pba-payment/pba-payment.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+const BS_ENABLE_FLAG$5 = 'bulk-scan-enabling-fe';
 class PbaPaymentComponent {
     /**
      * @param {?} paymentLibComponent
@@ -8661,10 +10847,61 @@ PbaPaymentComponent.ctorParameters = () => [
 PbaPaymentComponent.propDecorators = {
     pbaPayOrderRef: [{ type: Input }]
 };
+if (false) {
+    /** @type {?} */
+    PbaPaymentComponent.prototype.pbaPayOrderRef;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.viewStatus;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.pbaAccountList;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isPBAAccountHold;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.errorMsg;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isCardPaymentSuccess;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isInSufficiantFund;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isPBAAccountNotExist;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isPBAServerError;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isGetPBAAccountSucceed;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.selectedPbaAccount;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.pbaAccountRef;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isPbaAccountSelected;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isCardPaymentSelected;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isPBADropdownSelected;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isContinueButtondisabled;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.isPBAAccountPaymentSuccess;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.pbaAccountrPaymentResult;
+    /** @type {?} */
+    PbaPaymentComponent.prototype.orgName;
+    /**
+     * @type {?}
+     * @private
+     */
+    PbaPaymentComponent.prototype.paymentLibComponent;
+    /**
+     * @type {?}
+     * @private
+     */
+    PbaPaymentComponent.prototype.paymentViewService;
+}
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: lib/payment-lib.module.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PaymentLibModule {
 }
@@ -8721,14 +10958,15 @@ PaymentLibModule.decorators = [
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: public_api.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated from: hmcts-ccpay-web-component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { PaymentLibService, PaymentLibComponent, PaymentLibModule, AddRemissionComponent as ɵbb, AllocatePaymentsComponent as ɵw, CardDetailsComponent as ɵm, CaseTransactionsComponent as ɵz, ErrorBannerComponent as ɵbi, FeeSummaryComponent as ɵba, MarkUnidentifiedPaymentComponent as ɵr, MarkUnsolicitedPaymentComponent as ɵt, PageNotFoundComponent as ɵo, PaymentListComponent as ɵb, PaymentViewComponent as ɵf, PbaDetailsComponent as ɵy, PbaPaymentComponent as ɵi, ProcessRefundComponent as ɵj, ProcessedPaymentsComponent as ɵv, RefundListComponent as ɵl, RefundStatusComponent as ɵbk, ReportsComponent as ɵbg, ServiceRequestComponent as ɵbl, StatusHistoryComponent as ɵp, TableComponent as ɵbj, UnprocessedPaymentsComponent as ɵu, CapitalizePipe as ɵbd, CcdHyphensPipe as ɵbc, keyValuePipe as ɵbe, SanitizeHtmlPipe as ɵbf, BulkScaningPaymentService as ɵs, CardDetailsService as ɵn, CaseTransactionsService as ɵx, OrderslistService as ɵa, PaymentListService as ɵc, PaymentViewService as ɵg, RefundsService as ɵk, ErrorHandlerService as ɵe, WebComponentHttpClient as ɵh, ConsoleLoggerService as ɵbm, LoggerService as ɵd, StatusHistoryService as ɵq, XlFileService as ɵbh };
-
-//# sourceMappingURL=hmcts-ccpay-web-component.js.map
+export { PaymentLibComponent, PaymentLibModule, PaymentLibService, OrderslistService as ɵa, PaymentListComponent as ɵb, FeeSummaryComponent as ɵba, AddRemissionComponent as ɵbb, CcdHyphensPipe as ɵbc, CapitalizePipe as ɵbd, keyValuePipe as ɵbe, SanitizeHtmlPipe as ɵbf, ReportsComponent as ɵbg, XlFileService as ɵbh, ErrorBannerComponent as ɵbi, TableComponent as ɵbj, RefundStatusComponent as ɵbk, ServiceRequestComponent as ɵbl, ConsoleLoggerService as ɵbm, PaymentListService as ɵc, LoggerService as ɵd, ErrorHandlerService as ɵe, PaymentViewComponent as ɵf, PaymentViewService as ɵg, WebComponentHttpClient as ɵh, PbaPaymentComponent as ɵi, ProcessRefundComponent as ɵj, RefundsService as ɵk, RefundListComponent as ɵl, CardDetailsComponent as ɵm, CardDetailsService as ɵn, PageNotFoundComponent as ɵo, StatusHistoryComponent as ɵp, StatusHistoryService as ɵq, MarkUnidentifiedPaymentComponent as ɵr, BulkScaningPaymentService as ɵs, MarkUnsolicitedPaymentComponent as ɵt, UnprocessedPaymentsComponent as ɵu, ProcessedPaymentsComponent as ɵv, AllocatePaymentsComponent as ɵw, CaseTransactionsService as ɵx, PbaDetailsComponent as ɵy, CaseTransactionsComponent as ɵz };
+//# sourceMappingURL=hmcts-ccpay-web-component.js.map