@hmcts/ccpay-web-component 4.0.1-beta5 → 4.0.1-beta9

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

@@ -12,7 +12,6 @@ import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FormBuilder, Validators, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Injectable, Component, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef, Pipe, NgModule, defineInjectable, inject } from '@angular/core';
@@ -1067,6 +1066,7 @@ var PaymentViewComponent = /** @class */ (function () {
         this.isAddFeeBtnEnabled = false;
         this.isIssueRefunfBtnEnable = false;
         this.allowedRolesToAccessRefund = ['payments-refund-approver', 'payments-refund'];
+        this.remissions = [];
         this.check4AllowedRoles2AccessRefund = (/**
          * @return {?}
          */
@@ -1189,6 +1189,7 @@ var PaymentViewComponent = /** @class */ (function () {
         var _this = this;
         event.preventDefault();
         this.OrderslistService.setnavigationPage('casetransactions');
+        this.OrderslistService.setisFromServiceRequestPage(false);
         this.paymentLibComponent.viewName = 'case-transactions';
         this.paymentViewService.getBSfeature().subscribe((/**
          * @param {?} features
@@ -1220,28 +1221,98 @@ var PaymentViewComponent = /** @class */ (function () {
      */
     function (fee) {
         var _this = this;
-        this.feeId = fee;
-        this.paymentViewService.getApportionPaymentDetails(this.paymentGroup.payments[0].reference).subscribe((/**
-         * @param {?} paymentGroup
-         * @return {?}
-         */
-        function (paymentGroup) {
-            _this.paymentGroup = paymentGroup;
-            _this.paymentGroup.payments = _this.paymentGroup.payments.filter((/**
-             * @param {?} paymentGroupObj
+        if (this.chkForAddRemission(fee.code)) {
+            this.feeId = fee;
+            this.paymentViewService.getApportionPaymentDetails(this.paymentGroup.payments[0].reference).subscribe((/**
+             * @param {?} paymentGroup
              * @return {?}
              */
-            function (paymentGroupObj) { return paymentGroupObj['reference'].includes(_this.paymentLibComponent.paymentReference); }));
-            _this.payment = _this.paymentGroup.payments[0];
-            _this.paymentLibComponent.isFromPaymentDetailPage = true;
-            _this.viewStatus = 'addremission';
-            _this.isRefundRemission = true;
-            _this.cd.detectChanges();
-        }), (/**
-         * @param {?} error
+            function (paymentGroup) {
+                _this.paymentGroup = paymentGroup;
+                _this.paymentGroup.payments = _this.paymentGroup.payments.filter((/**
+                 * @param {?} paymentGroupObj
+                 * @return {?}
+                 */
+                function (paymentGroupObj) { return paymentGroupObj['reference'].includes(_this.paymentLibComponent.paymentReference); }));
+                _this.payment = _this.paymentGroup.payments[0];
+                _this.paymentLibComponent.isFromPaymentDetailPage = true;
+                _this.viewStatus = 'addremission';
+                _this.isRefundRemission = true;
+                _this.cd.detectChanges();
+            }), (/**
+             * @param {?} error
+             * @return {?}
+             */
+            function (error) { return _this.errorMessage = error; }));
+        }
+    };
+    /**
+     * @param {?} payment
+     * @param {?} remission
+     * @param {?} fees
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.addRefundForRemission = /**
+     * @param {?} payment
+     * @param {?} remission
+     * @param {?} fees
+     * @return {?}
+     */
+    function (payment, remission, fees) {
+        var _this = this;
+        if (this.chkIsRefundRemissionBtnEnable()) {
+            this.payment = payment;
+            this.paymentViewService.getApportionPaymentDetails(this.payment.reference).subscribe((/**
+             * @param {?} paymentGroup
+             * @return {?}
+             */
+            function (paymentGroup) {
+                _this.paymentGroup = paymentGroup;
+                _this.paymentGroup.payments = _this.paymentGroup.payments.filter((/**
+                 * @param {?} paymentGroupObj
+                 * @return {?}
+                 */
+                function (paymentGroupObj) { return paymentGroupObj['reference'].includes(_this.payment.reference); }));
+                _this.payment = _this.paymentGroup.payments[0];
+                _this.remissions = remission;
+                _this.remissionFeeAmt = fees.filter((/**
+                 * @param {?} data
+                 * @return {?}
+                 */
+                function (data) { return data.code === _this.remissions['fee_code']; }))[0].net_amount;
+                _this.viewStatus = 'addrefundforremission';
+                // const paymentAllocation = this.paymentGroup.payments[0].payment_allocation;
+                // this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
+            }), (/**
+             * @param {?} error
+             * @return {?}
+             */
+            function (error) { return _this.errorMessage = error; }));
+        }
+    };
+    /**
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.chkIsRefundRemissionBtnEnable = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.paymentGroup.payments.forEach((/**
+         * @param {?} payment
          * @return {?}
          */
-        function (error) { return _this.errorMessage = error; }));
+        function (payment) {
+            if (payment.method.toLocaleLowerCase() === 'payment by account' && payment.status.toLocaleLowerCase() === 'success' && _this.allowFurtherAccessAfter4Days(payment)) {
+                _this.isRefundRemissionBtnEnable = true;
+            }
+        }));
+        if (this.isRefundRemissionBtnEnable) {
+            return true;
+        }
+        else {
+            return false;
+        }
     };
     /**
      * @param {?} paymentgrp
@@ -1252,9 +1323,11 @@ var PaymentViewComponent = /** @class */ (function () {
      * @return {?}
      */
     function (paymentgrp) {
-        this.paymentGroup = paymentgrp;
-        this.viewStatus = 'issuerefund';
-        this.isRefundRemission = true;
+        if (this.chkIssueRefundBtnEnable(paymentgrp.payments[0])) {
+            this.paymentGroup = paymentgrp;
+            this.viewStatus = 'issuerefund';
+            this.isRefundRemission = true;
+        }
     };
     /**
      * @param {?} feeCode
@@ -1360,8 +1433,8 @@ var PaymentViewComponent = /** @class */ (function () {
     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=\"#\" (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\">\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      <!-- <tr class=\"section\" *ngIf=\"isTurnOff\">\n          <td class=\"bold tb-col-w\">Payment group reference</td>\n          <td>{{ paymentGroup.payment_group_reference }}</td>\n        </tr> -->\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td>{{ paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td>\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td>{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Type</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td *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>{{ 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\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Allocaton Status</td>\n            <td>{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</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>{{ paymentGroup.payments[0].external_reference }}</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>{{ 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>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n        </tr> -->\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 *ngIf=\"chkIssueRefundBtnEnable(paymentGroup.payments[0])\" class=\"remission\">\n        <button (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n      \n      <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n        \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>Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td>{{ 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          <!-- <tr *ngIf=\"fee.net_amount && isTurnOff\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n          </tr> -->\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          <!-- <tr *ngIf=\"fee.remissions\">\n            <td class=\"bold tb-col-w\">Remission code</td>\n            <td>{{fee.remissions.hwf_reference}}</td>\n          </tr>\n          <tr *ngIf=\"fee.remissions\">\n            <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n            <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n          </tr> -->\n          </tbody>\n        </table>\n        <button *ngIf=\"chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n           \n        <!-- <button  *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n             -->\n\n      </div>\n\n\n      <!-- card details -->\n      <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n      <!-- pba details -->\n      <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n  \n\n    </div>\n\n  </main>\n</div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [isOldPcipalOff]=\"isOldPcipalOff\" \n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [isNewPcipalOff]=\"isNewPcipalOff\" \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    [ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n    <div class=\"govuk-width-container\">\n        <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a href=\"#\" (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\">\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            <tr class=\"section\" *ngIf=\"isTurnOff\">\n                <td class=\"bold tb-col-w\">Payment group reference</td>\n                <td>{{ paymentGroup.payment_group_reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment reference</td>\n                <td>{{ paymentGroup.payments[0].reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment amount</td>\n                <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</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>{{ paymentGroup.payments[0].external_reference }}</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>{{ 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>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n              </tr>\n              </tbody>\n            </table>\n      \n            <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n              <div class=\"column\">\n                <h2 class=\"heading-large\">Fee and remission details</h2>\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>Application for {{ fee.description }}</td>\n                </tr>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\">Fee code</td>\n                  <td>{{ 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                <tr *ngIf=\"fee.net_amount && isTurnOff\">\n                  <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n                </tr>\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                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w\">Remission code</td>\n                  <td>{{fee.remissions.hwf_reference}}</td>\n                </tr>\n                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n                  <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n                </tr>\n                </tbody>\n              </table>\n      \n            </div>\n      \n            <!-- card details -->\n            <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n       -->\n            <!-- pba details -->\n            <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n            <!-- Status histories -->\n            <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n      \n          </div>\n      \n        </main>\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:2.1875rem;float:left;margin-top:2em}.remission{margin-bottom:7em}"]
+                    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=\"#\" (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\">\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      <!-- <tr class=\"section\" *ngIf=\"isTurnOff\">\n          <td class=\"bold tb-col-w\">Payment group reference</td>\n          <td>{{ paymentGroup.payment_group_reference }}</td>\n        </tr> -->\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td>{{ paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td>\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td>{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Type</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td *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>{{ 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\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Allocaton Status</td>\n            <td>{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</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      \n      <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup?.fees.length > 0\">\n        <div class=\"column\">\n        \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>Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td>{{ 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\n\n           \n        <!-- <button  *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n             -->\n\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            <!-- <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n             \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   \n\n\n\n      <!-- card details -->\n      <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n      <!-- pba details -->\n      <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n  \n\n    </div>\n\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[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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\"></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[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [isOldPcipalOff]=\"isOldPcipalOff\" \n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [isNewPcipalOff]=\"isNewPcipalOff\" \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    [ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n    <div class=\"govuk-width-container\">\n        <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a href=\"#\" (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\">\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            <tr class=\"section\" *ngIf=\"isTurnOff\">\n                <td class=\"bold tb-col-w\">Payment group reference</td>\n                <td>{{ paymentGroup.payment_group_reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment reference</td>\n                <td>{{ paymentGroup.payments[0].reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment amount</td>\n                <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</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>{{ paymentGroup.payments[0].external_reference }}</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>{{ 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>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n              </tr>\n              </tbody>\n            </table>\n      \n            <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n              <div class=\"column\">\n                <h2 class=\"heading-large\">Fee and remission details</h2>\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>Application for {{ fee.description }}</td>\n                </tr>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\">Fee code</td>\n                  <td>{{ 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                <tr *ngIf=\"fee.net_amount && isTurnOff\">\n                  <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n                </tr>\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                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w\">Remission code</td>\n                  <td>{{fee.remissions.hwf_reference}}</td>\n                </tr>\n                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n                  <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n                </tr>\n                </tbody>\n              </table>\n      \n            </div>\n      \n            <!-- card details -->\n            <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n       -->\n            <!-- pba details -->\n            <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n            <!-- Status histories -->\n            <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n      \n          </div>\n      \n        </main>\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:2.1875rem;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}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1586,9 +1659,11 @@ var RefundsService = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var ProcessRefundComponent = /** @class */ (function () {
-    function ProcessRefundComponent(RefundsService$$1, formBuilder) {
+    function ProcessRefundComponent(RefundsService$$1, formBuilder, OrderslistService$$1, paymentLibComponent) {
         this.RefundsService = RefundsService$$1;
         this.formBuilder = formBuilder;
+        this.OrderslistService = OrderslistService$$1;
+        this.paymentLibComponent = paymentLibComponent;
         this.errorMessage = this.getErrorMessage(false, '', '');
         this.sendmeback = null;
         this.refundActionList = [];
@@ -1810,12 +1885,112 @@ var ProcessRefundComponent = /** @class */ (function () {
             showError: isErrorExist
         };
     };
+    /**
+     * @return {?}
+     */
+    ProcessRefundComponent.prototype.loadRefundListPage = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.OrderslistService.getnavigationPageValue().subscribe((/**
+         * @param {?} data
+         * @return {?}
+         */
+        function (data) { return _this.navigationpage = data; }));
+        if (this.navigationpage === 'casetransactions') ;
+        else {
+            this.paymentLibComponent.viewName = 'refund-list';
+        }
+    };
+    /**
+     * @return {?}
+     */
+    ProcessRefundComponent.prototype.redirecttoRefundListPage = /**
+     * @return {?}
+     */
+    function () {
+        window.location.href = '/refund-list?takePayment=false&refundlist=true';
+    };
+    // loadCaseTransactionPage() {
+    //   this.paymentLibComponent.isRefundStatusView = false;
+    //   this.paymentLibComponent.TAKEPAYMENT = true;
+    //   this.paymentLibComponent.viewName = 'case-transactions';
+    //   this.paymentViewService.getBSfeature().subscribe(
+    //     features => {
+    //       let result = JSON.parse(features).filter(feature => feature.uid === BS_ENABLE_FLAG);
+    //       this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
+    //     },
+    //     err => {
+    //       this.paymentLibComponent.ISBSENABLE = false;
+    //     }
+    //   );
+    //   let partUrl = `selectedOption=${this.paymentLibComponent.SELECTED_OPTION}`;
+    //   partUrl += this.bsPaymentDcnNumber ? `&dcn=${this.bsPaymentDcnNumber}` : '';
+    //   partUrl += this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
+    //   partUrl += this.paymentLibComponent.ISTURNOFF ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
+    //   partUrl += this.paymentLibComponent.ISSFENABLE ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
+    //   partUrl += `&caseType=${this.paymentLibComponent.CASETYPE}`;
+    //   partUrl += this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
+    //   partUrl += this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
+    //   let url = `/payment-history/${this.ccdCaseNumber}?view=case-transactions&takePayment=true&${partUrl}`;
+    //   this.router.navigateByUrl(url);
+    // }
+    // loadCaseTransactionPage() {
+    //   this.paymentLibComponent.isRefundStatusView = false;
+    //   this.paymentLibComponent.TAKEPAYMENT = true;
+    //   this.paymentLibComponent.viewName = 'case-transactions';
+    //   this.paymentViewService.getBSfeature().subscribe(
+    //     features => {
+    //       let result = JSON.parse(features).filter(feature => feature.uid === BS_ENABLE_FLAG);
+    //       this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
+    //     },
+    //     err => {
+    //       this.paymentLibComponent.ISBSENABLE = false;
+    //     }
+    //   );
+    //   let partUrl = `selectedOption=${this.paymentLibComponent.SELECTED_OPTION}`;
+    //   partUrl += this.bsPaymentDcnNumber ? `&dcn=${this.bsPaymentDcnNumber}` : '';
+    //   partUrl += this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
+    //   partUrl += this.paymentLibComponent.ISTURNOFF ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
+    //   partUrl += this.paymentLibComponent.ISSFENABLE ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
+    //   partUrl += `&caseType=${this.paymentLibComponent.CASETYPE}`;
+    //   partUrl += this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
+    //   partUrl += this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
+    //   let url = `/payment-history/${this.ccdCaseNumber}?view=case-transactions&takePayment=true&${partUrl}`;
+    //   this.router.navigateByUrl(url);
+    // }
     /**
      * @param {?} vals
      * @param {?} field
      * @return {?}
      */
-    ProcessRefundComponent.prototype.resetForm = /**
+    ProcessRefundComponent.prototype.resetForm = 
+    // loadCaseTransactionPage() {
+    //   this.paymentLibComponent.isRefundStatusView = false;
+    //   this.paymentLibComponent.TAKEPAYMENT = true;
+    //   this.paymentLibComponent.viewName = 'case-transactions';
+    //   this.paymentViewService.getBSfeature().subscribe(
+    //     features => {
+    //       let result = JSON.parse(features).filter(feature => feature.uid === BS_ENABLE_FLAG);
+    //       this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
+    //     },
+    //     err => {
+    //       this.paymentLibComponent.ISBSENABLE = false;
+    //     }
+    //   );
+    //   let partUrl = `selectedOption=${this.paymentLibComponent.SELECTED_OPTION}`;
+    //   partUrl += this.bsPaymentDcnNumber ? `&dcn=${this.bsPaymentDcnNumber}` : '';
+    //   partUrl += this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
+    //   partUrl += this.paymentLibComponent.ISTURNOFF ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
+    //   partUrl += this.paymentLibComponent.ISSFENABLE ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
+    //   partUrl += `&caseType=${this.paymentLibComponent.CASETYPE}`;
+    //   partUrl += this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
+    //   partUrl += this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
+    //   let url = `/payment-history/${this.ccdCaseNumber}?view=case-transactions&takePayment=true&${partUrl}`;
+    //   this.router.navigateByUrl(url);
+    // }
+    /**
      * @param {?} vals
      * @param {?} field
      * @return {?}
@@ -1841,14 +2016,16 @@ var ProcessRefundComponent = /** @class */ (function () {
     ProcessRefundComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-process-refund',
-                    template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"/refund-list?takePayment=false&refundlist=true\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n    <div *ngIf=\"errorMessage.showError\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          {{errorMessage.title}}\n        </h2>\n        <div class=\"govuk-error-summary__body process-refund-font\">\n          {{errorMessage.body}}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment to be refunded</td>\n          <td>\t{{refundlistsource.refund_reference}} (\u00A3{{refundlistsource.amount}})</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Reason for refund</td>\n          <td>\t{{refundlistsource.reason}}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Amount to be refunded</td>\n            <td>{{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Submitted by</td>\n            <td>{{refundlistsource.user_full_name}}</td>\n\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Date submitted</td>\n            <td>\t{{refundlistsource.date_created | date:'d MMMM yyyy' }}</td>\n        </tr>\n\n        </tbody>\n      </table>\n\n      <div>\n      </div>\n    </div>\n    <div class=\"process-refund__panel\">\n      <form [formGroup]=\"processRefundForm\" novalidate>\n        <div class=\"\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h1 class=\"heading-large\">\n              What do you want to do with this refund?\n            </h1>\n          </legend>\n          <div class=\"govuk-radios\"  [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundActionsHasError\">\n            <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundAction-{{i}}\" \n              name=\"refundActionField\"\n              type=\"radio\"\n              formControlName=\"refundActionField\"\n              (click)=\"checkRefundActions(refundAction.code)\"\n                value=\"{{refundAction.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n                {{refundAction.code}}\n              </label>\n              <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n                {{refundAction.label}}\n              </div>\n            </div>\n            <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n                  Add a reason\n                </label>\n                <textarea class=\"govuk-textarea govuk-!-width-one-third\"\n                [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n                  id=\"sendmeback\"\n                  name=\"sendMeBackField\" \n                  formControlName=\"sendMeBackField\"\n                rows=\"5\"></textarea>\n                <p class=\"inline-error-message\"\n                *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n                <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n                <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n                <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n                <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n              </p>\n              </div>\n\n            </div>\n  \n          </div>\n      \n        </fieldset>\n      </div>\n\n      <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h2 class=\"heading-medium\">\n              Why are you rejecting this refund?\n            </h2>\n          </legend>\n          <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundRejectReasonHasError\">\n            <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundRejectReason-{{j}}\"\n              formControlName=\"refundRejectReasonField\"\n              name=\"refundRejectReasonField\"\n              (click)=\"checkRefundActions(refundRejectReason.code)\"\n              type=\"radio\" value=\"{{refundRejectReason.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n                {{refundRejectReason.name}}\n              </label>\n            </div>\n            </div>\n      <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n            Enter reason\n          </label>\n          <input class=\"govuk-input govuk-!-width-one-third\" id=\"otherReason\" \n          [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n          formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n          <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n            <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n            <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n          </p>\n      </div>\n      \n        </fieldset>\n      </div>\n</form>\n  </div>\n  <button class=\"govuk-button button-margin--left25\" data-module=\"govuk-button\" (click)=\"processRefundSubmit()\">\n    Submit  \n  </button>\n  </main>\n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n          <h1 class=\"heading-xlarge\">\n            {{successMsg}}\n          </h1>\n        </div>\n        <p class=\"govuk-body process-refund-font\">\n        <a href=\"/orders/pages/v1caseinccd?result=approved\" class=\"govuk-link\">Return to case</a>\n        </p>\n      </div>\n  </main>\n</div>\n</ng-container>\n\n",
-                    styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:2.1875rem;float:left;margin-top:2em}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px}.inline-error-class{outline:#c11717 solid 3px;outline-offset:0}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{display:flex;flex-direction:column;margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}"]
+                    template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <!-- <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"/refund-list?takePayment=false&refundlist=true\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div> -->\n    <div *ngIf=\"errorMessage.showError\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          {{errorMessage.title}}\n        </h2>\n        <div class=\"govuk-error-summary__body process-refund-font\">\n          {{errorMessage.body}}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment to be refunded</td>\n          <td>\t{{refundlistsource?.refund_reference}} ({{refundlistsource.amount  | currency :'GBP':'symbol':'1.2-2'  }})</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Reason for refund</td>\n          <td>\t{{refundlistsource?.reason}}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Amount to be refunded</td>\n            <td>{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Submitted by</td>\n            <td>{{refundlistsource?.user_full_name}}</td>\n\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Date submitted</td>\n            <td>\t{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n        </tr>\n\n        </tbody>\n      </table>\n\n      <div>\n      </div>\n    </div>\n    <div class=\"process-refund__panel\">\n      <form [formGroup]=\"processRefundForm\" novalidate>\n        <div class=\"\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h1 class=\"heading-large\">\n              What do you want to do with this refund?\n            </h1>\n          </legend>\n          <div class=\"govuk-radios\"  [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundActionsHasError\">\n            <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundAction-{{i}}\" \n              name=\"refundActionField\"\n              type=\"radio\"\n              formControlName=\"refundActionField\"\n              (click)=\"checkRefundActions(refundAction.code)\"\n                value=\"{{refundAction.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n                {{refundAction.code}}\n              </label>\n              <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n                {{refundAction.label}}\n              </div>\n            </div>\n            <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n                  Add a reason\n                </label>\n                <p class=\"inline-error-message\"\n                *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n                <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n                <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n                <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n                <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n              </p>\n                <textarea class=\"govuk-textarea govuk-!-width-one-third\"\n                [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n                  id=\"sendmeback\"\n                  name=\"sendMeBackField\" \n                  formControlName=\"sendMeBackField\"\n                rows=\"5\"></textarea>\n              \n              </div>\n\n            </div>\n  \n          </div>\n      \n        </fieldset>\n      </div>\n\n      <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h2 class=\"heading-medium\">\n              Why are you rejecting this refund?\n            </h2>\n          </legend>\n          <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundRejectReasonHasError\">\n            <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundRejectReason-{{j}}\"\n              formControlName=\"refundRejectReasonField\"\n              name=\"refundRejectReasonField\"\n              (click)=\"checkRefundActions(refundRejectReason.code)\"\n              type=\"radio\" value=\"{{refundRejectReason.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n                {{refundRejectReason.name}}\n              </label>\n            </div>\n            </div>\n      <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n            Enter reason\n          </label>\n          <input class=\"govuk-input govuk-!-width-one-third\" id=\"otherReason\" \n          [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n          formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n          <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n            <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n            <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n          </p>\n      </div>\n      \n        </fieldset>\n      </div>\n\n      <div class=\"govuk-button-group\">\n        <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n        <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n          data-module=\"govuk-button\">\n          Submit \n        </button>\n      <br/><br/>\n    </div>\n   \n  <div class=\"govuk-button-group margin\">\n\n  <p><a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n  </div>\n \n<!--   \n  <div class=\"govuk-button-group\">\n   \n    <button class=\"govuk-button govuk-button--secondary\"  (click)=\"redirecttoRefundListPage()\">Previous</button>\n    <button  (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit\n    </button>\n  <div><a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></div>\n  </div> -->\n\n  <!-- <button class=\"govuk-button button-margin--left25\" data-module=\"govuk-button\" (click)=\"processRefundSubmit()\">\n    Submit  \n  </button> -->\n  </main>\n \n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n          <h1 class=\"heading-xlarge\">\n            {{successMsg}}\n          </h1>\n        </div>\n        <p class=\"govuk-body process-refund-font\">\n        <a href=\"/orders/pages/v1caseinccd?result=approved\" class=\"govuk-link\">Return to case</a>\n        </p>\n      </div>\n  </main>\n</div>\n</ng-container>\n\n",
+                    styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:2.1875rem;float:left;margin-top:2em}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px}.inline-error-class{outline:#c11717 solid 3px;outline-offset:0}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{display:flex;flex-direction:column;margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}"]
                 }] }
     ];
     /** @nocollapse */
     ProcessRefundComponent.ctorParameters = function () { return [
         { type: RefundsService },
-        { type: FormBuilder }
+        { type: FormBuilder },
+        { type: OrderslistService },
+        { type: PaymentLibComponent }
     ]; };
     ProcessRefundComponent.propDecorators = {
         refundReference: [{ type: Input }],
@@ -1922,7 +2099,7 @@ var RefundListComponent = /** @class */ (function () {
                  * @return {?}
                  */
                 function (error) {
-                    _this.errorMessage = error;
+                    _this.errorMessage = error.replace(/"/g, "");
                 });
         }
         this.refundService.getRefundList(this.rejectStatus, false).subscribe((/**
@@ -1938,7 +2115,7 @@ var RefundListComponent = /** @class */ (function () {
              * @return {?}
              */
             function (error) {
-                _this.errorMessage = error;
+                _this.errorMessage = error.replace(/"/g, "");
             });
     };
     RefundListComponent.decorators = [
@@ -2142,7 +2319,7 @@ var StatusHistoryComponent = /** @class */ (function () {
          * @param {?} error
          * @return {?}
          */
-        function (error) { return _this.errorMessage = (/** @type {?} */ (error)); }));
+        function (error) { return _this.errorMessage = (/** @type {?} */ (error.replace(/"/g, ""))); }));
     };
     StatusHistoryComponent.decorators = [
         { type: Component, args: [{
@@ -2525,6 +2702,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
         this.isAddRemissionEnable = false;
         this.orderRemissionDetails = [];
         this.orderLevelFees = [];
+        this.ispaymentGroupApisuccess = false;
         this.cpoDetails = null;
         this.orderFeesTotal = 0.00;
         this.orderRemissionTotal = 0.00;
@@ -2535,7 +2713,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
         this.isAddRemissionBtnEnabled = false;
         this.isRefundRemissionBtnEnable = false;
         this.allowedRolesToAccessRefund = ['payments-refund-approver', 'payments-refund'];
-        this.isEligible4PBAPayment = ['pui-finance-manager', 'caseworker', 'pui-user-manager', 'pui-organisation-manager', 'pui-case-manager'];
+        this.isEligible4PBAPayment = ['pui-finance-manager', 'pui-user-manager', 'caseworker', 'pui-organisation-manager', 'pui-case-manager'];
         this.currentDate = new Date();
         this.check4AllowedRoles2AccessRefund = (/**
          * @return {?}
@@ -2567,11 +2745,9 @@ var CaseTransactionsComponent = /** @class */ (function () {
          */
         function (payment) {
             /** @type {?} */
-            var tmp4DayAgo = _this.currentDate;
+            var tmp4DayAgo = new Date();
             tmp4DayAgo.setDate(tmp4DayAgo.getDate() - 4);
-            /** @type {?} */
-            var paymentDate = new Date(payment.date_created);
-            return tmp4DayAgo >= paymentDate;
+            return tmp4DayAgo >= new Date(payment.date_created);
         });
     }
     /**
@@ -2582,17 +2758,22 @@ var CaseTransactionsComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this.OrderslistService.getpaymentPageView().subscribe((/**
-         * @param {?} data
-         * @return {?}
-         */
-        function (data) { return _this.paymentView = data; }));
-        this.OrderslistService.getnavigationPageValue().subscribe((/**
-         * @param {?} data
-         * @return {?}
-         */
-        function (data) { return _this.navigationpage = data; }));
-        if (this.paymentView !== null && this.paymentView.payment_group_reference !== undefined && this.navigationpage === 'paymentdetailspage') {
+        this.navigationpage = '';
+        if (this.OrderslistService.getpaymentPageView() !== null) {
+            this.OrderslistService.getpaymentPageView().subscribe((/**
+             * @param {?} data
+             * @return {?}
+             */
+            function (data) { return _this.paymentView = data; }));
+        }
+        if (this.OrderslistService.getnavigationPageValue() !== null) {
+            this.OrderslistService.getnavigationPageValue().subscribe((/**
+             * @param {?} data
+             * @return {?}
+             */
+            function (data) { return _this.navigationpage = data; }));
+        }
+        if (this.paymentView !== undefined && this.paymentView !== null && this.paymentView.payment_group_reference !== undefined && this.navigationpage === 'paymentdetailspage') {
             this.goToPayementView(this.paymentView.payment_group_reference, this.paymentView.reference, this.paymentView.method);
         }
         this.isGrpOutstandingAmtPositive = false;
@@ -2623,6 +2804,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
              * @return {?}
              */
             function (paymentGroups) {
+                _this.isAnyFeeGroupAvilable = true;
                 _this.paymentGroups = paymentGroups['payment_groups'];
                 _this.calculateAmounts();
                 _this.calculateOrderFeesAmounts();
@@ -2647,7 +2829,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
                  * @return {?}
                  */
                 function (error) {
-                    _this.errorMessage = (/** @type {?} */ (error));
+                    _this.errorMessage = (/** @type {?} */ (error.replace(/"/g, "")));
                     _this.isCPODown = true;
                 }));
             }), (/**
@@ -2655,7 +2837,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
              * @return {?}
              */
             function (error) {
-                _this.errorMessage = (/** @type {?} */ (error));
+                _this.errorMessage = (/** @type {?} */ (error.replace(/"/g, "")));
                 _this.isAnyFeeGroupAvilable = false;
                 _this.setDefaults();
             }));
@@ -2666,6 +2848,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
              * @return {?}
              */
             function (paymentGroups) {
+                _this.isAnyFeeGroupAvilable = true;
                 _this.paymentGroups = paymentGroups['payment_groups'];
                 _this.calculateAmounts();
                 _this.calculateOrderFeesAmounts();
@@ -2681,7 +2864,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
                  * @return {?}
                  */
                 function (error) {
-                    _this.errorMessage = (/** @type {?} */ (error));
+                    _this.errorMessage = (/** @type {?} */ (error.replace(/"/g, "")));
                     _this.setDefaults();
                     _this.isCPODown = true;
                 }));
@@ -2690,17 +2873,19 @@ var CaseTransactionsComponent = /** @class */ (function () {
              * @return {?}
              */
             function (error) {
-                _this.errorMessage = (/** @type {?} */ (error));
+                _this.errorMessage = (/** @type {?} */ (error.replace(/"/g, "")));
                 _this.isAnyFeeGroupAvilable = false;
                 _this.setDefaults();
             }));
         }
         this.checkForExceptionRecord();
-        this.OrderslistService.getisFromServiceRequestPages().subscribe((/**
-         * @param {?} data
-         * @return {?}
-         */
-        function (data) { return _this.isFromServiceRequestPage = data; }));
+        if (this.OrderslistService.getisFromServiceRequestPages() !== null) {
+            this.OrderslistService.getisFromServiceRequestPages().subscribe((/**
+             * @param {?} data
+             * @return {?}
+             */
+            function (data) { return _this.isFromServiceRequestPage = data; }));
+        }
     };
     /**
      * @return {?}
@@ -2974,21 +3159,13 @@ var CaseTransactionsComponent = /** @class */ (function () {
      * @return {?}
      */
     function (event, orderef) {
-        event.preventDefault();
-        // if(!this.isAnyFeeGroupAvilable || this.isTurnOff) {
-        // let url = this.isBulkScanEnable ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
-        //   url += this.isTurnOff ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
-        //   url += this.isStrategicFixEnable ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
-        //   url +=`&caseType=${this.caseType}`
-        //   url += this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
-        //   url += this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
-        // this.router.navigateByUrl(`/fee-search?selectedOption=${this.selectedOption}&ccdCaseNumber=${this.ccdCaseNumber}${url}`);
-        // } else {
-        this.paymentLibComponent.bspaymentdcn = null;
-        this.paymentLibComponent.paymentGroupReference = orderef;
-        this.paymentLibComponent.isTurnOff = this.isTurnOff;
-        this.paymentLibComponent.viewName = 'fee-summary';
-        //}
+        if (orderef.orderAddBtnEnable) {
+            event.preventDefault();
+            this.paymentLibComponent.bspaymentdcn = null;
+            this.paymentLibComponent.paymentGroupReference = orderef;
+            this.paymentLibComponent.isTurnOff = this.isTurnOff;
+            this.paymentLibComponent.viewName = 'fee-summary';
+        }
     };
     /**
      * @param {?} event
@@ -3003,15 +3180,6 @@ var CaseTransactionsComponent = /** @class */ (function () {
         this.isFromServiceRequestPage = false;
         this.viewStatus = 'main';
         this.paymentLibComponent.viewName = 'case-transactions';
-        //  this.paymentViewService.getBSfeature().subscribe(
-        //    features => {
-        //      let result = JSON.parse(features).filter(feature => feature.uid === BS_ENABLE_FLAG);
-        //      this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
-        //    },
-        //    err => {
-        //      this.paymentLibComponent.ISBSENABLE = false;
-        //    }
-        //  );
     };
     /**
      * @return {?}
@@ -3318,39 +3486,43 @@ var CaseTransactionsComponent = /** @class */ (function () {
      */
     function (fee) {
         var _this = this;
-        this.feeId = fee;
-        this.viewStatus = 'addremission';
-        this.paymentViewService.getApportionPaymentDetails(this.payment.reference).subscribe((/**
-         * @param {?} paymentGroup
-         * @return {?}
-         */
-        function (paymentGroup) {
-            _this.paymentGroup = paymentGroup;
-            _this.paymentGroup.payments = _this.paymentGroup.payments.filter((/**
-             * @param {?} paymentGroupObj
+        if (this.chkForAddRemission(fee.code)) {
+            this.feeId = fee;
+            this.viewStatus = 'addremission';
+            this.paymentViewService.getApportionPaymentDetails(this.payment.reference).subscribe((/**
+             * @param {?} paymentGroup
              * @return {?}
              */
-            function (paymentGroupObj) { return paymentGroupObj['reference'].includes(_this.paymentLibComponent.paymentReference); }));
-            _this.payment = _this.paymentGroup.payments[0];
-            // const paymentAllocation = this.paymentGroup.payments[0].payment_allocation;
-            // this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
-        }), (/**
-         * @param {?} error
-         * @return {?}
-         */
-        function (error) { return _this.errorMessage = error; }));
+            function (paymentGroup) {
+                _this.paymentGroup = paymentGroup;
+                _this.paymentGroup.payments = _this.paymentGroup.payments.filter((/**
+                 * @param {?} paymentGroupObj
+                 * @return {?}
+                 */
+                function (paymentGroupObj) { return paymentGroupObj['reference'].includes(_this.paymentLibComponent.paymentReference); }));
+                _this.payment = _this.paymentGroup.payments[0];
+                // const paymentAllocation = this.paymentGroup.payments[0].payment_allocation;
+                // this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
+            }), (/**
+             * @param {?} error
+             * @return {?}
+             */
+            function (error) { return _this.errorMessage = error; }));
+        }
     };
     /**
      * @param {?} payment
      * @param {?} remission
+     * @param {?} fees
      * @return {?}
      */
     CaseTransactionsComponent.prototype.addRefundForRemission = /**
      * @param {?} payment
      * @param {?} remission
+     * @param {?} fees
      * @return {?}
      */
-    function (payment, remission) {
+    function (payment, remission, fees) {
         var _this = this;
         this.viewStatus = 'addrefundforremission';
         this.payment = payment;
@@ -3367,6 +3539,11 @@ var CaseTransactionsComponent = /** @class */ (function () {
             function (paymentGroupObj) { return paymentGroupObj['reference'].includes(_this.payment.reference); }));
             _this.payment = _this.paymentGroup.payments[0];
             _this.remissions = remission;
+            _this.remissionFeeAmt = fees.filter((/**
+             * @param {?} data
+             * @return {?}
+             */
+            function (data) { return data.code === _this.remissions['fee_code']; }))[0].net_amount;
             // const paymentAllocation = this.paymentGroup.payments[0].payment_allocation;
             // this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
         }), (/**
@@ -3386,13 +3563,6 @@ var CaseTransactionsComponent = /** @class */ (function () {
     function (event) {
         event.preventDefault();
         this.paymentLibComponent.viewName = 'remission';
-        //   let url = this.isBulkScanEnable ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
-        //   url += this.isTurnOff ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
-        //   url += this.isStrategicFixEnable ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
-        //   url += this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
-        //   url += this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
-        //   url +=`&caseType=${this.caseType}`
-        // this.router.navigateByUrl(`/fee-search?selectedOption=${this.selectedOption}&ccdCaseNumber=${this.ccdCaseNumber}${url}`);
     };
     /**
      * @param {?} event
@@ -3566,9 +3736,11 @@ var CaseTransactionsComponent = /** @class */ (function () {
      * @return {?}
      */
     function (payment) {
-        this.viewStatus = 'issuerefund';
-        this.payment = payment;
-        this.isRefundRemission = true;
+        if (this.chkIssueRefundBtnEnable(payment)) {
+            this.viewStatus = 'issuerefund';
+            this.payment = payment;
+            this.isRefundRemission = true;
+        }
     };
     /**
      * @param {?} feeCode
@@ -3675,7 +3847,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
                  * @return {?}
                  */
                 function (payment) {
-                    if (payment.method.toLocaleLowerCase() === 'payment by account' && payment.status.toLocaleLowerCase() === 'success') {
+                    if (payment.method.toLocaleLowerCase() === 'payment by account' && payment.status.toLocaleLowerCase() === 'success' && _this.allowFurtherAccessAfter4Days(payment)) {
                         _this.isRefundRemissionBtnEnable = true;
                     }
                 }));
@@ -3703,8 +3875,8 @@ var CaseTransactionsComponent = /** @class */ (function () {
     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\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            <!-- <ccpay-app-unprocessed-payments\n            *ngIf=\"isBulkScanEnable\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTREF]=\"paymentRef\"\n            [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n            [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n            </ccpay-app-unprocessed-payments> -->\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        [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n        [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\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      <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\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                    Sorry, there is a problem with the service\n                </h2>\n                <p>Payment requests and payments cannot currently be shown. Try again.</p>\n                <div class=\"govuk-error-summary__body\">\n                  {{ errorMessage }}\n                </div>\n              </div>\n            </div>\n        <div class=\"govuk-grid-column-full\">\n            <div>\n                <h3 class=\"heading-medium\">Service requests</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-14\" scope=\"col\">Status</td>\n                        <td class=\"govuk-table__header  col-10\" scope=\"col\">Amount</td>\n                        <td class=\"govuk-table__header  col-15\" scope=\"col\">Party</td>\n                        <td class=\"govuk-table__header  col-25\" 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\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <tr class=\"govuk-table__row\">\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 whitespace-inherit\"></td> \n                        <td class=\"govuk-table__cell whitespace-inherit\">\t\n                            <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                      </td>\n                      </tr>\n                    </tbody>\n                  \n                    <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0\">\n                      <tr class=\"govuk-table__row\" >\n                        <td class=\"govuk-table__cell\" colspan=\"7\" style=\"text-align:left;\">No service requests on this case.</td>\n                      </tr>\n                    </tbody>\n                </table>\n                <!-- <span>\n                    <a (click)=\"redirectToFeeSearchPage($event)\"\n                      [class.disabled]=\"!isAddFeeBtnEnabled\">Create payment request and pay</a>\n              </span> -->\n\n            </div>\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              <!-- <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td class=\"govuk-table__cell\" colspan=\"8\">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]=\"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          <div class=\"govuk-grid-row\">\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\" style=\"align-self: flex-end;\">\n                <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"col-61  govuk-!-margin-bottom-3 col-55\" style=\"align-self: flex-end;\">\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div class=\"govuk-grid-row\">\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 govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated 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                    \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 *ngIf=\"orderLevelFees?.length > 0\">\n              <table class=\"govuk-table\" *ngIf=\"orderLevelFees?.length > 0\">\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-15\" scope=\"col\">Party</td>\n                    <td class=\"govuk-table__header  col-25\" 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\" *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\">\t\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                      </td>\n                      <td  style=\"text-align: right;\">\n                        \n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef.orderRefId)\"\n                        *ngIf=\"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                  </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 *ngIf=\"allPayments?.length > 0\">\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\">\n                    <td class=\"govuk-table__cell\" colspan=\"8\">No payments recorded</td>\n                  </tbody>\n                </table>\n               \n              </ng-container>\n        \n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>Refunds</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\" \n              [isTurnOff]=\"isTurnOff\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" \n              [isNewPcipalOff]=\"isNewPcipalOff\"\n              [isOldPcipalOff]=\"isOldPcipalOff\"\n              ></ccpay-refund-status>\n          </div>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"!takePayment && viewStatus !== 'issuerefund' && viewStatus !== 'addrefundforremission' && viewStatus !== 'order-full-view' && viewStatus !== 'addremission' && viewStatus !== 'feeRemovalConfirmation' \">\n      <div *ngIf=\"errorMessage && serviceRequestValue === 'false'\">\n          <div *ngIf=\"isCPODown && isAnyFeeGroupAvilable\" class=\" error govuk-inset-text govuk-!-margin-top-7\">\n              No party information currently available - try again later.\n          </div>\n          <div *ngIf=\"!isAnyFeeGroupAvilable\" class=\"error\">\n              <h3 class=\"govuk-heading-m govuk-!-margin-top-7 govuk-!-margin-bottom-1\">Sorry, there is a problem with the service</h3>\n              <p>Payment requests and payments cannot currently be shown. Try again.</p>\n        </div>\n        </div>\n      <div  class=\"govuk-grid-row govuk-grid__surplus-payments\">\n          \n        <div class=\"govuk-grid-column-full\">\n              <!-- <div  *ngIf=\"serviveRequestValue === 'true'\"> -->\n                  <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span>\n                  <ng-container *ngIf=\"orderLevelFees?.length > 0\">\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-8\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header col-14\" scope=\"col\">Party</td>\n                          <td class=\"govuk-table__header col-20\" 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\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                          <tr class=\"govuk-table__row\">\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()\"> Make a payment</a></td> \n                            <td class=\"govuk-table__cell\">\t\n                                <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                          </td>\n                          </tr>\n                        </tbody>\n                    </table>\n                  </ng-container>\n                  <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                    <br/>No service requests on this case.<br/>\n                  </ng-container>\n                  <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false'\">\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        <div class=\"govuk-grid-column-full\">\n            <div *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Payments</span>\n            <ng-container *ngIf=\"allPayments?.length > 0\">\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\">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 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.paymentGroupReference }}</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 class=\"govuk-table__cell\" colspan=\"8\">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            <ng-container *ngIf=\"allPayments?.length  === 0\">\n                <br/>No payments.\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Refunds</span>\n            <ccpay-refund-status [ccdCaseNumber]=\"ccdCaseNumber\" ></ccpay-refund-status>\n        </div>\n\n          \n      </div>\n\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    <div class=\"govuk-breadcrumbs\">\n        <ol class=\"govuk-breadcrumbs__list\">\n          <li class=\"govuk-breadcrumbs__list-item\">\n            <a href=\"#\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n          </li>\n        </ol>\n      </div>\n    <div class=\"govuk-grid-column-full\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n        </div>\n        <table >\n            <tbody>\n            <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Service request reference</td>\n                <td>{{orderRef}}</td>\n              </tr>\n             <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Status</td>\n              <td>{{orderStatus}}</td>\n            </tr>\n            <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Date created</td>\n                <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n              </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Party</td>\n              <td>{{orderParty}}</td>\n            </tr>\n\n\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">CCD event</td>\n              <td>{{orderCCDEvent}}</td>\n            </tr>\n            </tbody>\n          </table>\n    </div>\n\n    <div class=\"govuk-grid-column-full order-class\">\n        <div class=\"column\">\n          <table class=\"govuk-table \">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Fee</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n              <td  class=\"govuk-table__header\" scope=\"col\"></td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n              <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n                <td class=\"govuk-table__cell col-60 whitespace-inherit\">{{fee.description}}</td>\n                <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                <td  *ngIf=\"chkForAddRemission(fee.code)\" class=\"govuk-table__cell\" style=\"text-align: right;\" >\n                    <button (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n                </td>\n                <td  *ngIf=\"!chkForAddRemission(fee.code)\" class=\"govuk-table__cell\" style=\"text-align: right;\" >\n                 \n              </td>\n              </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n              <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n                <td class=\"govuk-table__cell\" colspan=\"7\" style=\"text-align:left;\">No fees recorded</td>\n              </tr>\n            </tbody>\n          </table>\n\n        </div>\n        <div style=\"width: 100%;\">  \n            <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\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\n     <!-- remissions -->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n     <div *ngIf=\"order.remissions?.length > 0\" class=\"govuk-grid-column-full order-class\"> \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\" >\n         <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n             <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n             <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n             <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n             <td *ngIf=\"chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n                <button (click)=\"addRefundForRemission(order.payments[0],remission)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n             </td>\n             <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              \n           </td>\n           </tr>\n       </tbody>\n       \n\n     </table>\n     <div class=\"summarypagealign\">\n        <p>Total reductions: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n    </div>\n    <div class=\"summarypagealign\">\n        <br>\n          <p class=\"summarypage\">Total fees to pay: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n      </div>\n    </div>\n    <div *ngIf=\"order.remissions?.length === 0\">\n       <span class=\"mar-17\" >No help with fees or remissions.</span>\n    </div>\n    \n  </ng-container>\n    \n   \n     <!--Payments-->\n    <ng-container *ngFor=\"let order of orderDetail;\" >\n     <div *ngIf=\"order.payments?.length > 0\" class=\"govuk-grid-column-full order-class\"> \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\" scope=\"col\"></td>\n              <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Amount</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 payment of order.payments\">\n              <td class=\"govuk-table__cell whitespace-inherit\">\n                <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n              </td>\n              <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n              <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td *ngIf=\"chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n                <button (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n              </td>\n              <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n              </td>\n            </tr>\n        </tbody>\n      </table>\n    </div>\n    <div *ngIf=\"order.payments === undefined || order.payments === null\">\n        <h3 class=\"heading-medium mar-17\">Payments</h3>\n              <span class=\"mar-17\" >No Payments</span>\n    </div>\n    \n  </ng-container>\n    <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n        <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n    </div>\n    <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n        <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n    </div>\n\n   \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \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\n\n\n\n<!-- <table class=\"table\">\n    <tr>\n      <th class=\"bold font-xsmall\">Payment Group reference</th>\n      <th class=\"bold font-xsmall\">Payment reference</th>\n      <th class=\"bold font-xsmall\">Date created</th>\n      <th class=\"bold font-xsmall\">Channel</th>\n      <th class=\"bold font-xsmall\">Method</th>\n      <th class=\"bold font-xsmall\">Amount</th>\n      <th class=\"bold font-xsmall\">Status</th>\n    </tr>\n    <tr *ngFor=\"let payment of payments.payments\">\n      <td class=\"font-xsmall\">\n        <a href=\"javascript:void(0)\" (click)=\"loadPaymentViewComponent(payment.payment_group_reference, payment.payment_reference, payment.method)\">{{ payment.payment_group_reference }}</a>\n      <td class=\"font-xsmall\">{{ payment.payment_reference }}</td>\n      <td class=\"font-xsmall\">{{ payment.date_created | date:'dd MMM yyyy hh:mm:ss' }}</td>\n      <td class=\"font-xsmall\">{{ payment.channel | titlecase }}</td>\n      <td class=\"font-xsmall\">{{ payment.method | titlecase }}</td>\n      <td class=\"font-xsmall\">\u00A3{{ payment.amount | number:'.2' }}</td>\n      <td *ngIf=\"payment.method === 'card' && payment.channel === 'online'\">\n        <details>\n          <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n          <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Failed'\">\n            <div *ngFor=\"let statusHistory of payment.status_histories\">\n              <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0010'\">\n                Payment rejected due to payment method selected or payment information entered, for example, failed fraud check, a 3D Secure authentication failure, or the user does not have enough money in account\n              </p>\n              <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0020'\">\n                Payment was not confirmed and completed within 90 minutes of being created\n              </p>\n              <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0030'\">\n                User clicked on the \u201CCancel payment\u201D button during the payment journey\n              </p>\n              <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0050'\">\n                Multiple possible causes, for example a configuration problem with the payment provider, or incorrect login credentials\n              </p>\n            </div>\n          </div>\n        </details>\n      </td>\n      <td *ngIf=\"payment.method === 'card' && payment.channel === 'telephony'\" class=\"font-xsmall\">\n        {{ payment.status}}\n      </td>\n      <td *ngIf=\"payment.method === 'payment by account'\">\n        <details>\n          <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n          <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Pending'\">\n            <p class=\"font-xsmall\">This means the transaction is being processed by Liberata.</p>\n          </div>\n        </details>\n      </td>\n    </tr>\n  </table> -->\n\n</main>\n</div>",
-                    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-25{width:25%!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%}.of-visible{overflow:visible!important}"]
+                    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\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            <!-- <ccpay-app-unprocessed-payments\n            *ngIf=\"isBulkScanEnable\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTREF]=\"paymentRef\"\n            [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n            [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n            </ccpay-app-unprocessed-payments> -->\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        [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n        [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\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      <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\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                    Sorry, there is a problem with the service\n                </h2>\n                <p>Payment requests and payments cannot currently be shown. Try again.</p>\n                <div class=\"govuk-error-summary__body\">\n                  {{ errorMessage }}\n                </div>\n              </div>\n            </div>\n        <div class=\"govuk-grid-column-full\">\n            <div>\n                <h3 class=\"heading-medium\">Service requests</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-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\" scope=\"col\"></td>\n                    </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <tr class=\"govuk-table__row\">\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 whitespace-inherit\"></td> \n                        <td class=\"govuk-table__cell whitespace-inherit\">\t\n                            <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                      </td>\n                      </tr>\n                    </tbody>\n                  \n                    <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0\">\n                      <tr class=\"govuk-table__row\" >\n                        <td class=\"govuk-table__cell\" colspan=\"7\" style=\"text-align:left;\">No service requests on this case.</td>\n                      </tr>\n                    </tbody>\n                </table>\n                <!-- <span>\n                    <a (click)=\"redirectToFeeSearchPage($event)\"\n                      [class.disabled]=\"!isAddFeeBtnEnabled\">Create payment request and pay</a>\n              </span> -->\n\n            </div>\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              <!-- <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td class=\"govuk-table__cell\" colspan=\"8\">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]=\"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 class=\"govuk-grid-row\">\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\" style=\"align-self: flex-end;\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"col-61  govuk-!-margin-bottom-3 col-55\" style=\"align-self: flex-end;\">\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div class=\"govuk-grid-row\">\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 *ngIf=\"orderLevelFees?.length > 0\">\n              <table class=\"govuk-table\" *ngIf=\"orderLevelFees?.length > 0\">\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\" *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\">\t\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                      </td>\n                      <td  style=\"text-align: right;\">\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                  </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 *ngIf=\"allPayments?.length > 0\">\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\">\n                    <td class=\"govuk-table__cell\" colspan=\"8\">No payments recorded</td>\n                  </tbody>\n                </table>\n               \n              </ng-container>\n        \n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>Refunds</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\" \n              [isTurnOff]=\"isTurnOff\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" \n              [isNewPcipalOff]=\"isNewPcipalOff\"\n              [isOldPcipalOff]=\"isOldPcipalOff\"\n              ></ccpay-refund-status>\n          </div>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n      <div *ngIf=\"errorMessage && serviceRequestValue === 'false'\">\n          <div *ngIf=\"isCPODown && isAnyFeeGroupAvilable\" class=\" error govuk-inset-text govuk-!-margin-top-7\">\n              No party information currently available - try again later.\n          </div>\n          <div *ngIf=\"!isAnyFeeGroupAvilable\" class=\"error\">\n              <h3 class=\"govuk-heading-m govuk-!-margin-top-7 govuk-!-margin-bottom-1\">Sorry, there is a problem with the service</h3>\n              <p>Payment requests and payments cannot currently be shown. Try again.</p>\n        </div>\n        </div>\n       \n      <div  class=\"govuk-grid-row govuk-grid__surplus-payments\">\n          \n        <div class=\"govuk-grid-column-full\">\n              <!-- <div  *ngIf=\"serviveRequestValue === 'true'\"> -->\n                  <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span>\n                  <ng-container *ngIf=\"orderLevelFees?.length > 0\">\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\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\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                          <tr class=\"govuk-table__row\">\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'\"> Make a payment</a></td> \n                            <td class=\"govuk-table__cell\">\t\n                                <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                          </td>\n                          </tr>\n                        </tbody>\n                    </table>\n                  </ng-container>\n                  <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                    <br/>No service requests on this case.<br/>\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        <div class=\"govuk-grid-column-full\">\n            <div *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Payments</span>\n            <ng-container *ngIf=\"allPayments?.length > 0\">\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\">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 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.paymentGroupReference }}</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 class=\"govuk-table__cell\" colspan=\"8\">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            <ng-container *ngIf=\"allPayments?.length  === 0\">\n                <br/>No payments.\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Refunds</span>\n            <ccpay-refund-status [ccdCaseNumber]=\"ccdCaseNumber\" ></ccpay-refund-status>\n        </div>\n\n          \n      </div>\n\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    <div class=\"govuk-breadcrumbs\">\n        <ol class=\"govuk-breadcrumbs__list\">\n          <li class=\"govuk-breadcrumbs__list-item\">\n            <a href=\"#\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n          </li>\n        </ol>\n      </div>\n    <div class=\"govuk-grid-column-full\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n        </div>\n        <table >\n            <tbody>\n            <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Service request reference</td>\n                <td>{{orderRef}}</td>\n              </tr>\n             <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Status</td>\n              <td>{{orderStatus}}</td>\n            </tr>\n            <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Date created</td>\n                <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n              </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Party</td>\n              <td>{{orderParty}}</td>\n            </tr>\n\n\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">CCD event</td>\n              <td>{{orderCCDEvent}}</td>\n            </tr>\n            </tbody>\n          </table>\n    </div>\n\n    <div class=\"govuk-grid-column-full order-class\">\n        <div class=\"column\">\n          <table class=\"govuk-table \">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header col-51\" scope=\"col\">Fee</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n              <td  class=\"govuk-table__header\" scope=\"col\"></td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n              <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n                <td class=\"govuk-table__cell col-60 whitespace-inherit\">{{fee.description}}</td>\n                <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\" style=\"text-align: right;\" >\n                    <button  [disabled]=\"!chkForAddRemission(fee.code)\"  (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n                </td>\n            \n              </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n              <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n                <td class=\"govuk-table__cell\" colspan=\"7\" style=\"text-align:left;\">No fees recorded</td>\n              </tr>\n            </tbody>\n          </table>\n\n        </div>\n        <div style=\"width: 100%;\">  \n            <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\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\n     <!-- remissions -->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n     <div *ngIf=\"order.remissions?.length > 0\" class=\"govuk-grid-column-full order-class\"> \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\" >\n         <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n             <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n             <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n             <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n             <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n                <button [disabled]=\"!chkIsRefundRemissionBtnEnable()\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n             </td>\n             <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              \n           </td> -->\n           </tr>\n       </tbody>\n       \n\n     </table>\n     <div class=\"summarypagealign\">\n        <p>Total reductions: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n    </div>\n    <div class=\"summarypagealign\">\n          <p class=\"summarypage\">Total fees to pay: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n      </div>\n    </div>\n    <div *ngIf=\"order.remissions?.length === 0\">\n       <span class=\"mar-17\" >No help with fees or remissions.</span>\n    </div>\n    \n  </ng-container>\n    \n   \n     <!--Payments-->\n    <ng-container *ngFor=\"let order of orderDetail;\" >\n     <div *ngIf=\"order.payments?.length > 0\" class=\"govuk-grid-column-full\"> \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-25\" scope=\"col\"></td>\n              <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Amount</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 payment of order.payments\">\n              <td class=\"govuk-table__cell whitespace-inherit\">\n                <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n              </td>\n              <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n              <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\" style=\"text-align: right;\">\n                <button [disabled] = \"!chkIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n              </td>\n              <!-- <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n              </td> -->\n            </tr>\n        </tbody>\n      </table>\n    </div>\n    <div *ngIf=\"order.payments === undefined || order.payments === null\">\n        <h3 class=\"heading-medium mar-17\">Payments</h3>\n              <span class=\"mar-17\" >No Payments</span>\n    </div>\n    \n  </ng-container>\n    <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n        <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n    </div>\n    <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n        <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n    </div>\n\n   \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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>",
+                    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%}.of-visible{overflow:visible!important}.col-25{width:25%!important}.col-51{width:51%!important}"]
                 }] }
     ];
     /** @nocollapse */
@@ -3963,7 +4135,7 @@ var FeeSummaryComponent = /** @class */ (function () {
          * @param {?} error
          * @return {?}
          */
-        function (error) { return _this.errorMessage = error; }));
+        function (error) { return _this.errorMessage = error.replace(/"/g, ""); }));
     };
     /**
      * @param {?} fee
@@ -6114,9 +6286,10 @@ var AddRemissionComponent = /** @class */ (function () {
     function () {
         var _this = this;
         this.default = 'Select a different reason';
-        if (this.remission) {
-            this.cd.detectChanges();
+        if (this.viewCompStatus !== '' && this.viewCompStatus !== undefined) {
+            this.viewStatus = '';
         }
+        if (this.remission) ;
         if (this.fee) {
             this.amount = (this.fee.volume * this.fee.calculated_amount);
         }
@@ -6135,7 +6308,7 @@ var AddRemissionComponent = /** @class */ (function () {
             ])),
             amount: new FormControl('', Validators.compose([
                 Validators.required,
-                Validators.pattern('^[0-9]+(\\.[0-9]{2})?$')
+                Validators.pattern('^[0-9]+(\.[0-9]{1,2})?$')
             ])),
             refundReason: new FormControl('', Validators.compose([Validators.required])),
             refundDDReason: new FormControl('', Validators.compose([Validators.required])),
@@ -6158,12 +6331,23 @@ var AddRemissionComponent = /** @class */ (function () {
                  * @return {?}
                  */
                 function (data) { return data.recently_used === false; }));
+                _this.refundReasons = _this.refundReasons.filter((/**
+                 * @param {?} data
+                 * @return {?}
+                 */
+                function (data) { return data.name !== 'Retrospective remission'; }));
                 _this.cd.detectChanges();
                 _this.commonRefundReasons = refundReasons['data'].filter((/**
                  * @param {?} data
                  * @return {?}
                  */
                 function (data) { return data.recently_used === true; }));
+                _this.commonRefundReasons.sort((/**
+                 * @param {?} a
+                 * @param {?} b
+                 * @return {?}
+                 */
+                function (a, b) { return a.toString().localeCompare(b); }));
                 _this.cd.detectChanges();
             }));
         }
@@ -6256,7 +6440,7 @@ var AddRemissionComponent = /** @class */ (function () {
          * @return {?}
          */
         function (error) {
-            _this.errorMessage = error;
+            _this.errorMessage = error.replace(/"/g, "");
             _this.isConfirmationBtnDisabled = false;
         }));
     };
@@ -6303,6 +6487,9 @@ var AddRemissionComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.errorMessage = false;
+        this.viewStatus = '';
+        this.isRefundRemission = false;
         this.resetRemissionForm([false, false, false, false, false, false], 'All');
         /** @type {?} */
         var remissionctrls = this.remissionForm.controls;
@@ -6343,6 +6530,7 @@ var AddRemissionComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.errorMessage = false;
         if (this.isRefundRemission) {
             this.paymentLibComponent.iscancelClicked = true;
             this.refundListAmount.emit();
@@ -6361,9 +6549,6 @@ var AddRemissionComponent = /** @class */ (function () {
         this.isRefundRemission = true;
         this.errorMessage = '';
         if (this.isFromPaymentDetailPage) {
-            // this.paymentLibComponent.paymentMethod = this.payment.method;
-            // this.paymentLibComponent.paymentGroupReference = this.paymentGroupRef;
-            // this.paymentLibComponent.paymentReference = this.payment.payment_group_reference;
             this.paymentLibComponent.viewName = 'payment-view';
         }
     };
@@ -6385,7 +6570,7 @@ var AddRemissionComponent = /** @class */ (function () {
             /** @type {?} */
             var isRemissionLessThanFee = this.fee.calculated_amount >= remissionctrls.amount.value;
             if (this.remissionForm.dirty) {
-                if (remissionctrls['amount'].value == '') {
+                if (remissionctrls['amount'].value == '' || remissionctrls['amount'].value < 0) {
                     this.resetRemissionForm([false, false, true, false, false], 'amount');
                 }
                 else if (remissionctrls['amount'].value != '' && remissionctrls['amount'].invalid) {
@@ -6404,7 +6589,7 @@ var AddRemissionComponent = /** @class */ (function () {
             /** @type {?} */
             var remissionctrls = this.remissionForm.controls;
             //if (this.remissionForm.dirty ) {
-            if (remissionctrls['amount'].value == '') {
+            if (remissionctrls['amount'].value == '' || remissionctrls['amount'].value < 0) {
                 this.resetRemissionForm([false, false, true, false, false], 'amount');
             }
             else {
@@ -6435,56 +6620,32 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this.isConfirmationBtnDisabled = true;
-        this.retroRemission = true;
-        this.remissionamt = this.remissionForm.controls.amount.value;
-        // if(this.remessionPayment.status === 'Success') {
-        //   if(this.fee.calculated_amount.toString() === this.remissionForm.controls.amount.value) {
-        //     this.remissionamt =this.remissionForm.controls.amount.value
-        //   }
-        //   else 
-        //   {
-        //     this.remissionamt = this.fee.calculated_amount - this.remissionForm.controls.amount.value;
-        //   }
-        // } else {
-        //   this.remissionamt = this.remissionForm.controls.amount.value;
-        // }
-        /** @type {?} */
-        var requestBody = new AddRetroRemissionRequest(this.remissionamt, this.remissionForm.controls.remissionCode.value);
-        this.paymentViewService.postPaymentGroupWithRetroRemissions(decodeURIComponent(this.paymentGroupRef).trim(), this.fee.id, requestBody).subscribe((/**
-         * @param {?} response
-         * @return {?}
-         */
-        function (response) {
-            if (JSON.parse(response)) {
-                _this.isRemissionApplied = true;
-                _this.viewCompStatus = '';
-                _this.viewStatus = 'retroremissionconfirmationpage';
-                _this.remissionReference = JSON.parse(response).remission_reference;
-                //if (this.retroRemission) {
-                //   } else {
-                //   let LDUrl = this.isTurnOff ? '&isTurnOff=Enable' : '&isTurnOff=Disable'
-                //     LDUrl += `&caseType=${this.caseType}`
-                //     LDUrl += this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable'
-                //     LDUrl += this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable'
-                //     if (this.paymentLibComponent.bspaymentdcn) {
-                //       this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-                //       this.router.onSameUrlNavigation = 'reload';
-                //       this.router.navigateByUrl(`/payment-history/${this.ccdCaseNumber}?view=fee-summary&selectedOption=${this.option}&paymentGroupRef=${this.paymentGroupRef}&dcn=${this.paymentLibComponent.bspaymentdcn}${LDUrl}`);
-                //     }else {
-                //       this.gotoCasetransationPage();
-                //     }
-                // }
-            }
-        }), (/**
-         * @param {?} error
-         * @return {?}
-         */
-        function (error) {
-            _this.errorMessage = error;
-            _this.isConfirmationBtnDisabled = false;
-            _this.cd.detectChanges();
-        }));
+        if (!this.isConfirmationBtnDisabled) {
+            this.retroRemission = true;
+            this.remissionamt = this.remissionForm.controls.amount.value;
+            /** @type {?} */
+            var requestBody = new AddRetroRemissionRequest(this.remissionamt, this.remissionForm.controls.remissionCode.value);
+            this.paymentViewService.postPaymentGroupWithRetroRemissions(decodeURIComponent(this.paymentGroupRef).trim(), this.fee.id, requestBody).subscribe((/**
+             * @param {?} response
+             * @return {?}
+             */
+            function (response) {
+                if (JSON.parse(response)) {
+                    _this.isRemissionApplied = true;
+                    _this.viewCompStatus = '';
+                    _this.viewStatus = 'retroremissionconfirmationpage';
+                    _this.remissionReference = JSON.parse(response).remission_reference;
+                }
+            }), (/**
+             * @param {?} error
+             * @return {?}
+             */
+            function (error) {
+                _this.errorMessage = error.replace(/"/g, "");
+                _this.isConfirmationBtnDisabled = false;
+                _this.cd.detectChanges();
+            }));
+        }
     };
     /**
      * @return {?}
@@ -6520,7 +6681,7 @@ var AddRemissionComponent = /** @class */ (function () {
          * @return {?}
          */
         function (error) {
-            _this.errorMessage = error;
+            _this.errorMessage = error.replace(/"/g, "");
             _this.isConfirmationBtnDisabled = false;
         }));
     };
@@ -6538,9 +6699,12 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function (payment) {
         this.paymentLibComponent.iscancelClicked = false;
+        if (this.paymentLibComponent.REFUNDLIST === "true") {
+            this.isFromRefundListPage = true;
+        }
         this.errorMessage = '';
         this.refundReason = this.remissionForm.controls['refundReason'].value === null ? this.remissionForm.controls['refundDDReason'].value : this.remissionForm.controls['refundReason'].value;
-        if (!this.refundReason) {
+        if (!this.refundReason || this.refundReason === 'Select a different reason') {
             this.refundHasError = true;
         }
         else if (this.selectedRefundReason.includes('Other') && (this.remissionForm.controls['reason'].value == '' || this.remissionForm.controls['reason'].value == null)) {
@@ -6594,6 +6758,7 @@ var AddRemissionComponent = /** @class */ (function () {
         // this.remissionForm.controls['refundReason'].setValue('Duplicate payment');
         this.errorMessage = '';
         this.refundHasError = false;
+        this.isReasonEmpty = false;
         this.viewCompStatus = 'issuerefund';
         this.viewStatus = '';
         this.isRefundRemission = true;
@@ -6631,7 +6796,7 @@ var AddRemissionComponent = /** @class */ (function () {
          * @return {?}
          */
         function (error) {
-            _this.errorMessage = error;
+            _this.errorMessage = error.replace(/"/g, "");
             _this.isConfirmationBtnDisabled = false;
             _this.cd.detectChanges();
         }));
@@ -6655,7 +6820,6 @@ var AddRemissionComponent = /** @class */ (function () {
         }
         /** @type {?} */
         var requestBody = new PostRefundRetroRemission(this.payment.reference, 'RR004-Retrospective remission');
-        // const requestBody = new IssueRefundRequest(this.payment.reference,'RR004-Retro remission',this.payment.amount);
         this.paymentViewService.postRefundsReason(requestBody).subscribe((/**
          * @param {?} response
          * @return {?}
@@ -6674,7 +6838,7 @@ var AddRemissionComponent = /** @class */ (function () {
          * @return {?}
          */
         function (error) {
-            _this.errorMessage = error;
+            _this.errorMessage = error.replace(/"/g, "");
             _this.isConfirmationBtnDisabled = false;
         }));
     };
@@ -6693,7 +6857,6 @@ var AddRemissionComponent = /** @class */ (function () {
         /** @type {?} */
         var remissionctrls = this.remissionForm.controls;
         remissionctrls['refundDDReason'].setValue('Select a different reason', { onlySelf: true });
-        // remissionctrls['refundDDReason'].reset();
         remissionctrls['reason'].reset();
         this.isRefundReasonsSelected = true;
         this.errorMessage = false;
@@ -6724,6 +6887,7 @@ var AddRemissionComponent = /** @class */ (function () {
         this.showReasonText = false;
         this.refundHasError = false;
         this.selectedRefundReason = args.target.options[args.target.options.selectedIndex].id;
+        this.reasonLength = (29 - this.selectedRefundReason.split('- ')[1].length);
         if (this.selectedRefundReason.includes('Other')) {
             this.showReasonText = true;
             this.refundHasError = false;
@@ -6731,30 +6895,27 @@ var AddRemissionComponent = /** @class */ (function () {
         }
     };
     /**
+     * @param {?} event
      * @return {?}
      */
     AddRemissionComponent.prototype.gotoServiceRequestPage = /**
+     * @param {?} event
      * @return {?}
      */
-    function () {
-        event.preventDefault();
-        this.viewStatus = 'main';
-        this.OrderslistService.setpaymentPageView(null);
-        this.paymentLibComponent.viewName = 'case-transactions';
-        this.OrderslistService.setisFromServiceRequestPage(true);
-        this.OrderslistService.setnavigationPage('servicerequestpage');
-        this.paymentLibComponent.isFromServiceRequestPage = true;
-    };
-    /**
-     * @return {?}
-     */
-    AddRemissionComponent.prototype.gotoCasetransationPage = /**
-     * @return {?}
-     */
-    function () {
+    function (event) {
         var _this = this;
+        event.preventDefault();
+        if (this.paymentLibComponent.TAKEPAYMENT === undefined && this.paymentLibComponent.SERVICEREQUEST === undefined) {
+            this.paymentLibComponent.SERVICEREQUEST = 'false';
+            this.paymentLibComponent.TAKEPAYMENT = false;
+        }
         if (this.isFromServiceRequestPage) {
-            this.gotoServiceRequestPage();
+            //this.paymentLibComponent.TAKEPAYMENT = false;
+            this.paymentLibComponent.isFromRefundStatusPage = false;
+            this.viewStatus = 'main';
+            this.paymentLibComponent.viewName = 'case-transactions';
+            this.OrderslistService.setisFromServiceRequestPage(true);
+            this.OrderslistService.setnavigationPage('servicerequestpage');
         }
         if (this.isFromRefundListPage) {
             this.paymentLibComponent.iscancelClicked = true;
@@ -6762,14 +6923,22 @@ var AddRemissionComponent = /** @class */ (function () {
             this.paymentLibComponent.isFromRefundStatusPage = true;
         }
         if (!this.paymentLibComponent.isFromRefundStatusPage) {
-            this.OrderslistService.setpaymentPageView({ method: this.payment.method, payment_group_reference: this.paymentGroupRef, reference: this.payment.reference });
-            this.OrderslistService.setnavigationPage('paymentdetailspage');
+            if (this.payment) {
+                this.OrderslistService.setpaymentPageView({ method: this.payment.method, payment_group_reference: this.paymentGroupRef, reference: this.payment.reference });
+            }
+            if (this.isFromServiceRequestPage) {
+                this.OrderslistService.setnavigationPage('servicerequestpage');
+            }
+            else {
+                this.OrderslistService.setnavigationPage('paymentdetailspage');
+            }
             this.errorMessage = '';
             this.paymentLibComponent.viewName = 'case-transactions';
-            this.paymentLibComponent.TAKEPAYMENT = true;
+            // this.paymentLibComponent.TAKEPAYMENT = true;
             this.paymentLibComponent.ISTURNOFF = this.isTurnOff;
             this.paymentLibComponent.ISNEWPCIPALOFF = this.isNewPcipalOff;
             this.paymentLibComponent.ISOLDPCIPALOFF = this.isOldPcipalOff;
+            this.paymentLibComponent.isFromServiceRequestPage = true;
             this.paymentViewService.getBSfeature().subscribe((/**
              * @param {?} features
              * @return {?}
@@ -6800,14 +6969,29 @@ var AddRemissionComponent = /** @class */ (function () {
             if (this.isFromPaymentDetailPage) {
                 partUrl += this.paymentLibComponent.isFromPaymentDetailPage;
             }
-            /** @type {?} */
-            var url = "/payment-history/" + this.ccdCaseNumber + "?view=case-transactions&takePayment=true&selectedOption=" + this.option + partUrl;
-            this.router.routeReuseStrategy.shouldReuseRoute = (/**
-             * @return {?}
-             */
-            function () { return false; });
-            this.router.onSameUrlNavigation = 'reload';
-            this.router.navigateByUrl(url);
+            if (!this.paymentLibComponent.TAKEPAYMENT) {
+                this.paymentLibComponent.TAKEPAYMENT = undefined;
+            }
+            if (this.paymentLibComponent.SERVICEREQUEST) {
+                /** @type {?} */
+                var url = "/payment-history/" + this.ccdCaseNumber + "?view=case-transactions&selectedOption=" + this.option + partUrl;
+                this.router.routeReuseStrategy.shouldReuseRoute = (/**
+                 * @return {?}
+                 */
+                function () { return false; });
+                this.router.onSameUrlNavigation = 'reload';
+                this.router.navigateByUrl(url);
+            }
+            else {
+                /** @type {?} */
+                var url = "/payment-history/" + this.ccdCaseNumber + "?view=case-transactions&takePayment=" + this.paymentLibComponent.TAKEPAYMENT + "&selectedOption=" + this.option + partUrl;
+                this.router.routeReuseStrategy.shouldReuseRoute = (/**
+                 * @return {?}
+                 */
+                function () { return false; });
+                this.router.onSameUrlNavigation = 'reload';
+                this.router.navigateByUrl(url);
+            }
         }
         else {
             this.paymentLibComponent.viewName === 'refundstatuslist';
@@ -6817,11 +7001,132 @@ var AddRemissionComponent = /** @class */ (function () {
     /**
      * @return {?}
      */
-    AddRemissionComponent.prototype.goToServiceRequestPage = /**
+    AddRemissionComponent.prototype.gotoCasetransationPage = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.OrderslistService.setnavigationPage('casetransactions');
+        this.errorMessage = '';
+        this.paymentLibComponent.viewName = 'case-transactions';
+        this.paymentLibComponent.ISTURNOFF = this.isTurnOff;
+        this.paymentLibComponent.ISNEWPCIPALOFF = this.isNewPcipalOff;
+        this.paymentLibComponent.ISOLDPCIPALOFF = this.isOldPcipalOff;
+        this.paymentLibComponent.isFromServiceRequestPage = true;
+        this.paymentViewService.getBSfeature().subscribe((/**
+         * @param {?} features
+         * @return {?}
+         */
+        function (features) {
+            /** @type {?} */
+            var result = JSON.parse(features).filter((/**
+             * @param {?} feature
+             * @return {?}
+             */
+            function (feature) { return feature.uid === BS_ENABLE_FLAG$3; }));
+            _this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
+        }), (/**
+         * @param {?} err
+         * @return {?}
+         */
+        function (err) {
+            _this.paymentLibComponent.ISBSENABLE = false;
+        }));
+        /** @type {?} */
+        var partUrl = this.bsPaymentDcnNumber ? "&dcn=" + this.bsPaymentDcnNumber : '';
+        partUrl += this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
+        partUrl += this.paymentLibComponent.ISTURNOFF ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
+        partUrl += this.isStrategicFixEnable ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
+        partUrl += "&caseType=" + this.caseType;
+        partUrl += this.paymentLibComponent.ISNEWPCIPALOFF ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
+        partUrl += this.paymentLibComponent.ISOLDPCIPALOFF ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
+        if (this.isFromPaymentDetailPage) {
+            partUrl += this.paymentLibComponent.isFromPaymentDetailPage;
+        }
+        /** @type {?} */
+        var url = "/payment-history/" + this.ccdCaseNumber + "?view=case-transactions&takePayment=" + this.paymentLibComponent.TAKEPAYMENT + "&selectedOption=" + this.option + partUrl;
+        this.router.routeReuseStrategy.shouldReuseRoute = (/**
+         * @return {?}
+         */
+        function () { return false; });
+        this.router.onSameUrlNavigation = 'reload';
+        this.router.navigateByUrl(url);
+    };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoCasetransationPageCancelBtnClicked = /**
      * @return {?}
      */
     function () {
-        this.paymentLibComponent.viewName;
+        var _this = this;
+        if (this.paymentLibComponent.REFUNDLIST) {
+            this.paymentLibComponent.viewName = 'refund-list';
+            return;
+        }
+        if (this.paymentLibComponent.TAKEPAYMENT === undefined && this.paymentLibComponent.SERVICEREQUEST === undefined) {
+            this.paymentLibComponent.SERVICEREQUEST = 'false';
+        }
+        this.OrderslistService.setisFromServiceRequestPage(false);
+        this.OrderslistService.setpaymentPageView({ method: '', payment_group_reference: '', reference: '' });
+        this.OrderslistService.setnavigationPage('casetransactions');
+        this.errorMessage = '';
+        this.paymentLibComponent.viewName = 'case-transactions';
+        //this.paymentLibComponent.TAKEPAYMENT = true;
+        this.paymentLibComponent.ISTURNOFF = this.isTurnOff;
+        this.paymentLibComponent.ISNEWPCIPALOFF = this.isNewPcipalOff;
+        this.paymentLibComponent.ISOLDPCIPALOFF = this.isOldPcipalOff;
+        this.paymentLibComponent.isFromServiceRequestPage = true;
+        this.paymentViewService.getBSfeature().subscribe((/**
+         * @param {?} features
+         * @return {?}
+         */
+        function (features) {
+            /** @type {?} */
+            var result = JSON.parse(features).filter((/**
+             * @param {?} feature
+             * @return {?}
+             */
+            function (feature) { return feature.uid === BS_ENABLE_FLAG$3; }));
+            _this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
+        }), (/**
+         * @param {?} err
+         * @return {?}
+         */
+        function (err) {
+            _this.paymentLibComponent.ISBSENABLE = false;
+        }));
+        /** @type {?} */
+        var partUrl = this.bsPaymentDcnNumber ? "&dcn=" + this.bsPaymentDcnNumber : '';
+        partUrl += this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
+        partUrl += this.paymentLibComponent.ISTURNOFF ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
+        partUrl += this.isStrategicFixEnable ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
+        partUrl += "&caseType=" + this.caseType;
+        partUrl += this.paymentLibComponent.ISNEWPCIPALOFF ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
+        partUrl += this.paymentLibComponent.ISOLDPCIPALOFF ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
+        if (this.isFromPaymentDetailPage) {
+            partUrl += this.paymentLibComponent.isFromPaymentDetailPage;
+        }
+        if (!this.paymentLibComponent.SERVICEREQUEST) {
+            /** @type {?} */
+            var url = "/payment-history/" + this.ccdCaseNumber + "?view=case-transactions&takePayment=" + this.paymentLibComponent.TAKEPAYMENT + "&selectedOption=" + this.option + partUrl;
+            this.router.routeReuseStrategy.shouldReuseRoute = (/**
+             * @return {?}
+             */
+            function () { return false; });
+            this.router.onSameUrlNavigation = 'reload';
+            this.router.navigateByUrl(url);
+        }
+        else {
+            /** @type {?} */
+            var url = "/payment-history/" + this.ccdCaseNumber + "?selectedOption=" + this.option + partUrl;
+            this.router.routeReuseStrategy.shouldReuseRoute = (/**
+             * @return {?}
+             */
+            function () { return false; });
+            this.router.onSameUrlNavigation = 'reload';
+            this.router.navigateByUrl(url);
+        }
     };
     /**
      * @param {?} currency
@@ -6840,8 +7145,8 @@ var AddRemissionComponent = /** @class */ (function () {
     AddRemissionComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-add-remission',
-                    template: "<div class=\"add-remission\">\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n  <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</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' && isRefundRemission\">\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</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            \n            </form>\n            <div class=\"govuk-button-group\">\n                <button (click)=\"gotoCasetransationPage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n              <p><a (click)=\"gotoCasetransationPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n            </div>\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'\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success'\" 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                          <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=\"number\" 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\">You cannot add a remission that's more than the fee amount.</span>\n                              </p>\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                    <p>\n                        <a (click)=\"gotoCasetransationPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                    </p>\n                  </div>\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 }} </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)=\"gotoProcessRetroRemissionPage()\">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 (click)=\"gotoCasetransationPage()\" 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\" style=\"color: 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 (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</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\" style=\"color: 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 (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</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                                  <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                                      <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=\"30\" formControlName=\"reason\">\n                                  \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                                    <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=\"30\"  formControlName=\"reason\">\n                                \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)=\"gotoCasetransationPage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n            <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n          <p>\n              <a (click)=\"gotoCasetransationPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n                  Cancel\n              </a>\n          </p>\n        </div>\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\"> {{ selectedRefundReason }}\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\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      <p>\n          <a (click)=\"gotoCasetransationPage()\" 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\">{{this.remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">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      <p>\n          <a (click)=\"gotoCasetransationPage()\" 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\" style=\"color: 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 (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\n  </ng-container>\n\n</div>\n\n\n\n",
-                    styles: [".add-remission .button{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 .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}.add-remission .inline-error-message{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:36ex}"]
+                    template: "<div class=\"add-remission\">\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n  <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</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</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              <p><a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n            </div>\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                    <p>\n                        <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                    </p>\n                  </div>\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 }} </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 (click)=\"gotoCasetransationPageCancelBtnClicked()\" 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\" style=\"color: 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 (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</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\" style=\"color: 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 (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</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          <p>\n              <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n                  Cancel\n              </a>\n          </p>\n        </div>\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\"> {{ selectedRefundReason }}\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\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      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" 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\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      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" 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\" style=\"color: 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 (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\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 .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}"]
                 }] }
     ];
     /** @nocollapse */
@@ -6872,6 +7177,7 @@ var AddRemissionComponent = /** @class */ (function () {
         isFromRefundListPage: [{ type: Input }],
         isFromPaymentDetailPage: [{ type: Input }],
         isFromServiceRequestPage: [{ type: Input }],
+        feeamount: [{ type: Input }],
         cancelRemission: [{ type: Output }],
         refundListReason: [{ type: Output }],
         refundListAmount: [{ type: Output }]
@@ -7601,7 +7907,8 @@ var TableComponent = /** @class */ (function () {
         this.paymentLibComponent = paymentLibComponent;
         this.cdRef = cdRef;
         this.OrderslistService = OrderslistService$$1;
-        this.displayedColumns = ['ccdCaseNumber', 'refundReference', 'reason', 'createBy', 'updateDate', 'Action'];
+        // displayedColumns = ['ccdCaseNumber', 'refundReference', 'reason', 'createBy', 'updateDate', 'Action'];
+        this.displayedColumns = ['ccd_case_number', 'refund_reference', 'reason', 'user_full_name', 'date_updated', 'Action'];
     }
     /**
      * @return {?}
@@ -7632,6 +7939,12 @@ var TableComponent = /** @class */ (function () {
             }), {});
             this.userLst = Object.keys(this.userLst);
         }
+        this.userLst.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        function (a, b) { return a.toString().localeCompare(b); }));
     };
     /**
      * Set the paginator and sort after the view init since this component will
@@ -7648,6 +7961,11 @@ var TableComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.dataSource.sort = this.sort;
+        //const sortState: Sort = {active: 'date_updated', direction: 'desc'};
+        // this.sort.active = sortState.active;
+        // this.sort.direction = sortState.direction;
+        // this.sort.sortChange.emit(sortState);
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
         this.cdRef.detectChanges();
@@ -7676,6 +7994,7 @@ var TableComponent = /** @class */ (function () {
     function (args) {
         this.dataSource.filter = args.target.value;
         this.actualcount = this.dataSource.data.length;
+        this.dataSource.paginator = this.paginator;
     };
     /**
      * @param {?} refundReference
@@ -7712,8 +8031,8 @@ var TableComponent = /** @class */ (function () {
     TableComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-table',
-                    template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n<div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group\" style=\"float: right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option  *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container mat-elevation-z8\">\n\n  <mat-table [dataSource]=\"dataSource\" matSort>\n\n    <ng-container matColumnDef=\"ccdCaseNumber\">\n      <mat-header-cell  *matHeaderCellDef mat-sort-header>Case ID </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"refundReference\">\n      <mat-header-cell  *matHeaderCellDef mat-sort-header> Refund reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"reason\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header> Reason </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.reason}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"createBy\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header> Submitted by </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"updateDate\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Date updated </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n        </ng-container>\n      \n        <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n        </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n    </mat-row>\n  </mat-table>\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
-                    styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#005ea5;cursor:pointer;font-family:inherit}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}"]
+                    template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n<div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group\" style=\"float: right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option  *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container mat-elevation-z8\">\n\n  <mat-table [dataSource]=\"dataSource\" matSort>\n\n    <ng-container matColumnDef=\"ccd_case_number\">\n      <mat-header-cell  *matHeaderCellDef >Case ID </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"refund_reference\">\n      <mat-header-cell  *matHeaderCellDef > Refund reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"reason\">\n      <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.reason}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"user_full_name\">\n      <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Date updated </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n        </ng-container>\n      \n        <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n        </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n    </mat-row>\n  </mat-table>\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
+                    styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#005ea5;cursor:pointer;font-family:inherit}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}"]
                 }] }
     ];
     /** @nocollapse */
@@ -7771,7 +8090,8 @@ var RefundStatusComponent = /** @class */ (function () {
         this.refundHasError = false;
         this.refundReasons = [];
         this.isRefundBtnDisabled = true;
-        this.allowedRolesToAccessRefund = ['payments-refund-approver', 'payments-refund'];
+        this.isLastUpdatedByCurrentUser = true;
+        this.isProcessRefund = false;
     }
     /**
      * @return {?}
@@ -7814,27 +8134,35 @@ var RefundStatusComponent = /** @class */ (function () {
                  * @return {?}
                  */
                 function (error) {
-                    _this.errorMessage = error;
+                    _this.errorMessage = error.replace(/"/g, "");
                 });
         }
         this.refundStatusForm = this.formBuilder.group({
             amount: new FormControl('', Validators.compose([
                 Validators.required,
-                Validators.pattern('^[0-9]+(\\.[0-9]{2})?$')
+                Validators.pattern('^[0-9]+(\.[0-9]{1,2})?$')
             ])),
             refundReason: new FormControl('', Validators.compose([Validators.required])),
             reason: new FormControl()
         });
         this.getRefundsStatusHistoryList();
-        this.allowedRolesToAccessRefund.forEach((/**
-         * @param {?} role
+        if (this.LOGGEDINUSERROLES.some((/**
+         * @param {?} i
          * @return {?}
          */
-        function (role) {
-            if (_this.LOGGEDINUSERROLES.indexOf(role) !== -1) {
-                _this.refundButtonState = _this.refundlist.refund_status.name;
-            }
-        }));
+        function (i) { return i.includes('payments-refund-approver'); }))) {
+            this.isProcessRefund = true;
+            this.refundButtonState = this.refundlist.refund_status.name;
+            return;
+        }
+        if (this.LOGGEDINUSERROLES.some((/**
+         * @param {?} i
+         * @return {?}
+         */
+        function (i) { return i.includes('payments-refund'); }))) {
+            this.isProcessRefund = false;
+            this.refundButtonState = this.refundlist.refund_status.name;
+        }
     };
     /**
      * @return {?}
@@ -7844,20 +8172,23 @@ var RefundStatusComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this.refundService.getRefundStatusHistory(this.refundlist.refund_reference).subscribe((/**
-         * @param {?} statusHistoryList
-         * @return {?}
-         */
-        function (statusHistoryList) {
-            _this.refundStatusHistories = statusHistoryList['data'];
-        })),
-            (/**
-             * @param {?} error
+        if (this.refundlist !== undefined) {
+            this.refundService.getRefundStatusHistory(this.refundlist.refund_reference).subscribe((/**
+             * @param {?} statusHistoryList
              * @return {?}
              */
-            function (error) {
-                _this.errorMessage = error;
-            });
+            function (statusHistoryList) {
+                _this.refundStatusHistories = statusHistoryList['data'].status_history_dto_list;
+                _this.isLastUpdatedByCurrentUser = statusHistoryList['data'].last_updated_by_current_user;
+            })),
+                (/**
+                 * @param {?} error
+                 * @return {?}
+                 */
+                function (error) {
+                    _this.errorMessage = error.replace(/"/g, "");
+                });
+        }
     };
     /**
      * @param {?} refundlist
@@ -7886,7 +8217,7 @@ var RefundStatusComponent = /** @class */ (function () {
     function () {
         var _this = this;
         this.paymentLibComponent.isRefundStatusView = false;
-        this.paymentLibComponent.TAKEPAYMENT = true;
+        //this.paymentLibComponent.TAKEPAYMENT = true;
         this.paymentLibComponent.viewName = 'case-transactions';
         this.paymentViewService.getBSfeature().subscribe((/**
          * @param {?} features
@@ -7917,7 +8248,7 @@ var RefundStatusComponent = /** @class */ (function () {
         partUrl += this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
         partUrl += this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
         /** @type {?} */
-        var url = "/payment-history/" + this.ccdCaseNumber + "?view=case-transactions&takePayment=true&" + partUrl;
+        var url = "/payment-history/" + this.ccdCaseNumber + "?view=case-transactions&takePayment=" + this.paymentLibComponent.TAKEPAYMENT + "&" + partUrl;
         this.router.navigateByUrl(url);
     };
     /**
@@ -7941,12 +8272,14 @@ var RefundStatusComponent = /** @class */ (function () {
         }
     };
     /**
+     * @param {?} event
      * @return {?}
      */
     RefundStatusComponent.prototype.gotoReviewDetailsPage = /**
+     * @param {?} event
      * @return {?}
      */
-    function () {
+    function (event) {
         event.preventDefault();
         this.errorMessage = false;
         this.paymentLibComponent.isRefundStatusView = true;
@@ -7966,6 +8299,7 @@ var RefundStatusComponent = /** @class */ (function () {
         var _this = this;
         this.viewName = 'reviewandsubmitview';
         this.oldRefundReason = this.refundlist.reason;
+        this.changedAmount = this.refundlist.amount;
         this.refundreason = this.refundStatusHistories.filter((/**
          * @param {?} data
          * @return {?}
@@ -7987,6 +8321,7 @@ var RefundStatusComponent = /** @class */ (function () {
      */
     function () {
         this.isRefundBtnDisabled = false;
+        this.paymentLibComponent.REFUNDLIST = "true";
         this.paymentLibComponent.isFromRefundStatusPage = true;
         this.ccdCaseNumber = this.paymentLibComponent.CCD_CASE_NUMBER;
         this.errorMessage = false;
@@ -7999,6 +8334,8 @@ var RefundStatusComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.errorMessage = false;
+        this.paymentLibComponent.REFUNDLIST = "true";
         this.isRefundBtnDisabled = false;
         this.ccdCaseNumber = this.paymentLibComponent.CCD_CASE_NUMBER;
         this.paymentLibComponent.isFromRefundStatusPage = true;
@@ -8103,7 +8440,8 @@ var RefundStatusComponent = /** @class */ (function () {
     function (amount) {
         if (this.paymentLibComponent.isFromRefundStatusPage && !this.paymentLibComponent.iscancelClicked) {
             if (amount > 0) {
-                this.refundlist.amount = amount;
+                this.changedAmount = amount;
+                // this.refundlist.amount = amount;
             }
         }
         else {
@@ -8124,7 +8462,7 @@ var RefundStatusComponent = /** @class */ (function () {
             this.refundCode = '';
         }
         /** @type {?} */
-        var resubmitRequest = new IResubmitRefundRequest(this.refundCode, this.refundlist.amount);
+        var resubmitRequest = new IResubmitRefundRequest(this.refundCode, this.changedAmount);
         this.refundService.patchResubmitRefund(resubmitRequest, this.refundlist.refund_reference).subscribe((/**
          * @param {?} response
          * @return {?}
@@ -8140,7 +8478,7 @@ var RefundStatusComponent = /** @class */ (function () {
          * @return {?}
          */
         function (error) {
-            _this.errorMessage = error;
+            _this.errorMessage = error.replace(/"/g, "");
         }));
     };
     /**
@@ -8161,8 +8499,8 @@ var RefundStatusComponent = /** @class */ (function () {
     RefundStatusComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-refund-status',
-                    template: "<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<ng-container *ngIf=\"viewName==='refundstatuslist'\">\n  <!-- payments -->\n\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n        <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n        <td class=\"govuk-table__header\" scope=\"col\">Date</td>\n        <td class=\"govuk-table__header\" scope=\"col\">Refund reference</td>\n        <td class=\"govuk-table__header\" scope=\"col\">Reason</td>\n        <td class=\"govuk-table__header\" scope=\"col\"></td>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList.refund_status['name'] | capitalize }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ refundList.date_created | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview'\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n    <tbody>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n<!-- Status history -->\n  <div>\n    <br />\n    <h2 class=\"govuk-heading-m\">Refund status history</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n          <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n          <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n          <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status | capitalize}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.date_created | date:'d MMMM yyyy hh:mm:ss'}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n        </tr>\n      </tbody>\n    </table>\n\n  </div>\n\n  <ng-container *ngIf=\"viewName==='refundview'\">\n    <div *ngIf=\"refundButtonState==='sent back'\">\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\" (click)=\"gotoReviewAndReSubmitPage()\">Resubmit\n        refund</button>\n    </div>\n    <div *ngIf=\"refundButtonState==='sent for approval'\">\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n    </div>\n  </ng-container>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview'\">\n    <div class=\"govuk-breadcrumbs\">\n        <ol class=\"govuk-breadcrumbs__list\">\n          <li class=\"govuk-breadcrumbs__list-item\">\n            <a (click)=\"gotoReviewDetailsPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n          </li>\n        </ol>\n      </div>\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"heading-large\">Review and resubmit refund</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 rejection</td>\n      <td class=\"govuk-table__cell\">{{refundreason}}</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n      <td class=\"govuk-table__cell\"> {{ refundlist?.reason}}\n        <a (click)=\"gotoRefundReasonPage()\" *ngIf=\"refundlist?.reason !== 'Retrospective remission'\" class=\"govuk-link right\">Change</a>\n        </td>\n\n      <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n      <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n      <td class=\"govuk-table__cell\"> \u00A3{{ refundlist?.amount | number:'.2' }}\n        <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason === 'Retrospective remission'\" class=\"govuk-link right\">Change</a>\n      </td>\n      \n    </tr>\n  </table>\n  <div class=\"govuk-button-group\">\n      <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\"   class=\"govuk-button button\" data-module=\"govuk-button\">\n        Submit refund\n      </button>\n </div>\n <p>\n    <a (click)=\"gotoReviewDetailsPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n </p>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund'\">\n    <ccpay-add-remission \n    [isFromRefundListPage] = \"true\"\n    [viewCompStatus] = \"viewName\"\n    [isRefundRemission] = \"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    (refundListReason) = \"getRefundListReason($event)\"\n    ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage'\">\n  <ccpay-add-remission \n  [isFromRefundListPage] = \"true\"\n  [viewCompStatus] = \"viewName\"\n  [isRefundRemission] = \"true\"\n  [ccdCaseNumber]=\"ccdCaseNumber\"\n  (refundListAmount) = \"getRefundAmount($event)\"\n  ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage'\">\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\" style=\"color: white\"><strong>Refund reference:{{refundReference}} </strong></p>\n          </div>\n    \n        </div>\n        \n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{refundAmount}}  has been passed to a team leader to approve.\n        </p>\n     \n        <p class=\"govuk-body\">\n          <a  (click)=\"loadCaseTransactionPage()\" class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\n  </ng-container>",
-                    styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.govuk-label--s,.govuk-warning-text__text,.hmcts-currency-input__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:#a71414 solid 3px;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-body,.govuk-body-m{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}"]
+                    template: "<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<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList\">\n  <!-- payments -->\n\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n        <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n        <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n        <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n        <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n        <td class=\"govuk-table__header\" scope=\"col\"></td>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] | capitalize }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ refundList?.date_created | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview'\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n    \n    <tbody>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n  <!-- Status history -->\n  <div>\n    <br />\n    <h2 class=\"govuk-heading-m\">Refund status history</h2>\n    <div *ngIf=\"refundStatusHistories\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n          <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n          <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n          <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status | capitalize}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.date_created | date:'d MMMM yyyy\n            hh:mm:ss'}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  </div>\n\n  <ng-container *ngIf=\"viewName==='refundview'\">\n    <div *ngIf=\"refundButtonState==='sent back'\">\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n        (click)=\"gotoReviewAndReSubmitPage()\">Resubmit\n        refund</button>\n    </div>\n    <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\">\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary\"\n        (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n    </div>\n  </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview'\">\n  <!-- <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div> -->\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"heading-large\">Review and resubmit refund</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 rejection</td>\n      <td class=\"govuk-table__cell\">{{refundreason}}</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n      <td class=\"govuk-table__cell\"> {{ refundlist?.reason}}\n        <a (click)=\"gotoRefundReasonPage()\" *ngIf=\"refundlist?.reason !== 'Retrospective remission'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n      <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n      <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n      <td class=\"govuk-table__cell\"> \u00A3{{ changedAmount | number:'.2' }}\n        <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason === 'Retrospective remission'\"\n          class=\"govuk-link right\">Change</a>\n      </td>\n\n    </tr>\n  </table>\n  <div class=\"govuk-button-group\">\n    <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n  <p><a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n  <!-- <div class=\"govuk-button-group\">\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n  </div> -->\n  <!-- <p>\n    <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n  </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund'\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage'\">\n  <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n    [ccdCaseNumber]=\"ccdCaseNumber\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage'\">\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\" style=\"color: white\"><strong>Refund reference:{{refundReference}} </strong></p>\n        </div>\n\n      </div>\n\n      <h2 class=\"govuk-heading-l\">What happens next</h2>\n      <p class=\"govuk-body\">\n        A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n      </p>\n\n      <p class=\"govuk-body\">\n        <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>",
+                    styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.govuk-label--s,.govuk-warning-text__text,.hmcts-currency-input__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:#a71414 solid 3px;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-body,.govuk-body-m{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}"]
                 }] }
     ];
     /** @nocollapse */
@@ -8222,6 +8560,7 @@ var PbaPaymentComponent = /** @class */ (function () {
         this.isInSufficiantFund = false;
         this.isPBAAccountNotExist = false;
         this.isPBAServerError = false;
+        this.isGetPBAAccountSucceed = false;
         this.selectedPbaAccount = '';
         this.pbaAccountRef = '';
         this.isContinueButtondisabled = true;
@@ -8244,6 +8583,7 @@ var PbaPaymentComponent = /** @class */ (function () {
          * @return {?}
          */
         function (result) {
+            _this.isGetPBAAccountSucceed = true;
             _this.pbaAccountList = result.organisationEntityResponse.paymentAccount;
         }), (/**
          * @param {?} error
@@ -8352,8 +8692,8 @@ var PbaPaymentComponent = /** @class */ (function () {
     PbaPaymentComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-pba-payment',
-                    template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountPaymentSuccess\">\n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n        There is a problem\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            Your PBA account cannot be found.\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            If you know your organisation has a PBA, try again.\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            You can also <a href=\"#\">pay by credit or debit card</a>.\n          </li>\n        </ul>\n      </div>\n    </div>\n    <h1 class=\"heading-medium\">Pay fee using Payment by Account (PBA)</h1>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        Amount to pay \n      </label>\n      <span class=\"pba-payments-19-font\">\u00A3{{pbaPayOrderRef.orderTotalFees}}</span>\n    </div>\n\n    <div class=\"govuk-form-group pba-payments-select-box--size\" *ngIf=\"!errorMsg\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n        Select a PBA  \n      </label>\n      <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n        <option value=\"\" selected='selected'>Select option</option>\n        <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n      </select>\n    </div>\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n        Enter a reference for your PBA account statements \n      </label>\n      <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font\">\n        This should be your own unique reference to identify the case. It will appear on your statements.\n    </div>\n    <input class=\"govuk-input pba-payments-ref-box--size\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n    </div>\n    <div class=\"govuk-button--group\">\n      <button type=\"button\" *ngIf=\"errorMsg\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        Return to Service Request\n      </button>\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        Continue\n      </button>\n    </div>\n\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Pay by credit or debit card</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            We recommend that you apply to get a new PBA to pay for fees.\n          </p>\n          <p class=\"govuk-bod ypba-payments-19-font\">\n            you can also pay by credit or debit card if you need to pay now\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n              Pay by card\n            </button>\n          </p>\n          \n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Register an existing PBA with MyHMCTS</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            You may find it easier in future to pay by PBA, your organisation administrator will need to \n            email <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a> to ask for your PBA to be registered with your \n            MyHMCTS account. You should include your organisation name and PBA number.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim \n            again to pay the fee.\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Apply to get a new PBA </h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Read more information on <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">registering for PBA</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            There is a problem\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                You don't have enough funds in your PBA account to pay for this fee or your PBA account has been put on hold.\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Should you need any further advice</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a>or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" >View service requests</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            There is a problem\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                Your PBA account ({{selectedPbaAccount}}) no longer exists.\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Should you need any further advice</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a>or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">View service requests</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">Sorry, there is a problem with the service</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Try again later.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">View service requests</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title\">\n              Payment successful\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body\">\n              Your payment reference is <br><strong>{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">View service requests</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n",
-                    styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}"]
+                    template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountPaymentSuccess\">\n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n        There is a problem\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            Your PBA account cannot be found.\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            If you know your organisation has a PBA, try again.\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            You can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\">pay by credit or debit card</a>.\n          </li>\n        </ul>\n      </div>\n    </div>\n    <h1 class=\"heading-medium\">Pay fee using Payment by Account (PBA)</h1>\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        Amount to pay \n      </label>\n      <span class=\"pba-payments-19-font\">\u00A3{{pbaPayOrderRef.orderTotalFees}}</span>\n    </div>\n\n    <div class=\"govuk-form-group pba-payments-select-box--size\" *ngIf=\"!errorMsg\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n        Select a PBA  \n      </label>\n      <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n        <option value=\"\" selected='selected'>Select option</option>\n        <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n      </select>\n    </div>\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n        Enter a reference for your PBA account statements \n      </label>\n      <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font\">\n        This should be your own unique reference to identify the case. It will appear on your statements.\n    </div>\n    <input class=\"govuk-input pba-payments-ref-box--size\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n    </div>\n    <div class=\"govuk-button--group\">\n      <button type=\"button\" *ngIf=\"errorMsg\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        Return to Service Request\n      </button>\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        Continue\n      </button>\n    </div>\n\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-warning-text\">\n          <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n          <strong class=\"govuk-warning-text__text\">\n            <span class=\"govuk-warning-text__assistive\">Warning</span>\n            <h2 class=\"warning-heading-m\">You don\u2019t have a registered PBA.</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Pay by credit or debit card</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            We recommend that you apply to get a new PBA to pay for fees.\n          </p>\n          <p class=\"govuk-bod ypba-payments-19-font\">\n            you can also pay by credit or debit card if you need to pay now\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n              Pay by card\n            </button>\n          </p>\n          \n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Register an existing PBA with MyHMCTS</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            You may find it easier in future to pay by PBA, your organisation administrator will need to \n            email <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a> to ask for your PBA to be registered with your \n            MyHMCTS account. You should include your organisation name and PBA number.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim \n            again to pay the fee.\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Apply to get a new PBA </h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Read more information on <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">registering for PBA</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            There is a problem\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                You don't have enough funds in your PBA account to pay for this fee or your PBA account has been put on hold.\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Should you need any further advice</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a>or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" >View service requests</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            There is a problem\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                Your PBA account ({{selectedPbaAccount}}) no longer exists.\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">Should you need any further advice</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a>or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">View service requests</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">Sorry, there is a problem with the service</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            Try again later.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">View service requests</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title\">\n              Payment successful\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body\">\n              Your payment reference is <br><strong>{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">View service requests</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n",
+                    styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}"]
                 }] }
     ];
     /** @nocollapse */
@@ -8386,8 +8726,6 @@ var PaymentLibModule = /** @class */ (function () {
                         MatSortModule,
                         MatFormFieldModule,
                         MatInputModule,
-                        BrowserAnimationsModule,
-                        NoopAnimationsModule
                     ],
                     declarations: [
                         PaymentLibComponent,