@hmcts/ccpay-web-component 5.0.1-beta165 → 5.0.1-beta166

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

@@ -2,6 +2,7 @@ import { _throw } from 'rxjs/observable/throw';
 import { BehaviorSubject } from 'rxjs';
 import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';
+import { __values } from 'tslib';
 import { Meta, DomSanitizer } from '@angular/platform-browser';
 import { Location, formatDate, CommonModule } from '@angular/common';
 import { saveAs } from 'file-saver';
@@ -12,7 +13,6 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormBuilder, Validators, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { __values } from 'tslib';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Injectable, Component, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef, Pipe, NgModule, defineInjectable, inject } from '@angular/core';
 
@@ -1390,7 +1390,6 @@ var PaymentViewService = /** @class */ (function () {
  */
 var PaymentViewComponent = /** @class */ (function () {
     function PaymentViewComponent(paymentViewService, paymentLibComponent, cd, OrderslistService$$1) {
-        var _this = this;
         this.paymentViewService = paymentViewService;
         this.paymentLibComponent = paymentLibComponent;
         this.cd = cd;
@@ -1400,30 +1399,6 @@ var PaymentViewComponent = /** @class */ (function () {
         this.isIssueRefunfBtnEnable = false;
         this.allowedRolesToAccessRefund = ['payments-refund-approver', 'payments-refund'];
         this.remissions = [];
-        this.check4AllowedRoles2AccessRefund = (/**
-         * @return {?}
-         */
-        function () {
-            return _this.allowedRolesToAccessRefund.some((/**
-             * @param {?} role
-             * @return {?}
-             */
-            function (role) {
-                return _this.LOGGEDINUSERROLES.indexOf(role) !== -1;
-            }));
-        });
-        this.allowFurtherAccessAfter4Days = (/**
-         * @param {?} payment
-         * @return {?}
-         */
-        function (payment) {
-            if (payment !== null && payment !== undefined) {
-                /** @type {?} */
-                var tmp4DayAgo = new Date();
-                tmp4DayAgo.setDate(tmp4DayAgo.getDate() - 4);
-                return tmp4DayAgo >= new Date(payment.date_created);
-            }
-        });
     }
     /**
      * @return {?}
@@ -1607,7 +1582,7 @@ var PaymentViewComponent = /** @class */ (function () {
      */
     function (fee) {
         var _this = this;
-        if (this.chkForAddRemission(fee.code)) {
+        if (this.chkIsAddRemissionBtnEnable(fee)) {
             this.feeId = fee;
             this.paymentViewService.getApportionPaymentDetails(this.paymentGroup.payments[0].reference).subscribe((/**
              * @param {?} paymentGroup
@@ -1662,7 +1637,7 @@ var PaymentViewComponent = /** @class */ (function () {
      */
     function (payment, remission, fees) {
         var _this = this;
-        if (this.chkIsRefundRemissionBtnEnable()) {
+        if (this.chkIsIssueRefundBtnEnable(payment)) {
             this.payment = payment;
             this.paymentViewService.getApportionPaymentDetails(this.payment.reference).subscribe((/**
              * @param {?} paymentGroup
@@ -1692,32 +1667,6 @@ var PaymentViewComponent = /** @class */ (function () {
             function (error) { return _this.errorMessage = error; }));
         }
     };
-    /**
-     * @return {?}
-     */
-    PaymentViewComponent.prototype.chkIsRefundRemissionBtnEnable = /**
-     * @return {?}
-     */
-    function () {
-        var _this = this;
-        if (this.paymentGroup !== null && this.paymentGroup !== undefined) {
-            this.paymentGroup.payments.forEach((/**
-             * @param {?} payment
-             * @return {?}
-             */
-            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
      * @return {?}
@@ -1728,7 +1677,7 @@ var PaymentViewComponent = /** @class */ (function () {
      */
     function (paymentgrp) {
         if (paymentgrp !== null && paymentgrp !== undefined) {
-            if (this.chkIssueRefundBtnEnable(paymentgrp.payments[0])) {
+            if (this.chkIsIssueRefundBtnEnable(paymentgrp.payments[0])) {
                 this.paymentGroup = paymentgrp;
                 this.viewStatus = 'issuerefund';
                 this.isRefundRemission = true;
@@ -1773,72 +1722,58 @@ var PaymentViewComponent = /** @class */ (function () {
      * @param {?} payment
      * @return {?}
      */
-    PaymentViewComponent.prototype.chkIssueRefundBtnEnable = /**
+    PaymentViewComponent.prototype.chkIsIssueRefundBtnEnable = /**
      * @param {?} payment
      * @return {?}
      */
     function (payment) {
-        if (this.check4AllowedRoles2AccessRefund() && this.allowFurtherAccessAfter4Days(payment) &&
-            payment.method === 'payment by account' && payment.status.toLocaleLowerCase() === 'success') {
-            this.isIssueRefunfBtnEnable = true;
-        }
-        if (this.isIssueRefunfBtnEnable) {
+        if (!payment.issue_refund_add_refund_add_remission) {
             return true;
         }
-        else {
+        else if (payment.issue_refund && payment.refund_enable && payment.issue_refund_add_refund_add_remission) {
             return false;
         }
+        else {
+            return true;
+        }
     };
     /**
+     * @param {?} remission
      * @return {?}
      */
-    PaymentViewComponent.prototype.chkForPBAPayment = /**
+    PaymentViewComponent.prototype.chkIsAddRefundBtnEnable = /**
+     * @param {?} remission
      * @return {?}
      */
-    function () {
-        if (this.paymentGroup !== null && this.paymentGroup !== undefined) {
-            /** @type {?} */
-            var payment = this.paymentGroup.payments[0];
-            if (payment.method.toLocaleLowerCase() === 'payment by account' && this.allowFurtherAccessAfter4Days(payment)) {
-                return true;
-            }
+    function (remission) {
+        if (!remission.issue_refund_add_refund_add_remission) {
+            return true;
+        }
+        else if (remission.add_refund && remission.issue_refund_add_refund_add_remission) {
             return false;
         }
+        else {
+            return true;
+        }
     };
     /**
-     * @param {?} feeCode
+     * @param {?} fee
      * @return {?}
      */
-    PaymentViewComponent.prototype.chkForAddRemission = /**
-     * @param {?} feeCode
+    PaymentViewComponent.prototype.chkIsAddRemissionBtnEnable = /**
+     * @param {?} fee
      * @return {?}
      */
-    function (feeCode) {
-        var e_2, _a;
-        if (this.chkForPBAPayment() && this.check4AllowedRoles2AccessRefund() && this.allowFurtherAccessAfter4Days(this.paymentGroup.payments[0])) {
-            if (this.paymentGroup.remissions && this.paymentGroup.remissions.length > 0) {
-                try {
-                    for (var _b = __values(this.paymentGroup.remissions), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var remission = _c.value;
-                        if (remission.fee_code === feeCode) {
-                            return false;
-                        }
-                    }
-                }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                finally {
-                    try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                    }
-                    finally { if (e_2) throw e_2.error; }
-                }
-                return true;
-            }
+    function (fee) {
+        if (!fee.issue_refund_add_refund_add_remission) {
             return true;
         }
-        else {
+        else if (fee.remission_enable && fee.issue_refund_add_refund_add_remission) {
             return false;
         }
+        else {
+            return true;
+        }
     };
     /**
      * @return {?}
@@ -1859,7 +1794,7 @@ 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=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Payment details could not be retrieved\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n     \n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Service request reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td> \n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td class=\"tb-col-w\">{{  paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Banked date</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">Allocaton status</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n          \n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA number</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">Customer internal reference</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n      \n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!paymentGroup?.payments[0]?.refund_enable\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n          <br/>\n          <br/>\n          <h2 class=\"heading-large\">Fee and remission details</h2>\n        \n        </div>\n      </div>\n    \n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Description</td>\n            <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n        \n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!fee.remission_enable\" (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]=\"!paymentGroup.payments[0].refund_enable\" (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  </div>\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\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[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\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [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    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [fees] =\"paymentFees\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n    \n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n\n\n\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",
+                    template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Payment details could not be retrieved\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n     \n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Service request reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td> \n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td class=\"tb-col-w\">{{  paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Banked date</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">Allocaton status</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n          \n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA number</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">Customer internal reference</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n      \n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n          <br/>\n          <br/>\n          <h2 class=\"heading-large\">Fee and remission details</h2>\n        \n        </div>\n      </div>\n    \n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Description</td>\n            <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n        \n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"chkIsAddRemissionBtnEnable(fee)\" (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]=\"chkIsAddRefundBtnEnable(remission)\" (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  </div>\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\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[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\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [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    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [fees] =\"paymentFees\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n    \n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n\n\n\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:19px;float:left;margin-top:2em}.remission{margin-bottom:7em}.govuk-error-summary__title{font-size:24px!important}.govuk-table__cell,.govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}.text-transform::first-letter{text-transform:capitalize}.govuk-link{cursor:pointer}.mar-17{font-size:19px!important}"]
                 }] }
     ];
@@ -10296,7 +10231,6 @@ var RefundStatusComponent = /** @class */ (function () {
  */
 var ServiceRequestComponent = /** @class */ (function () {
     function ServiceRequestComponent(paymentLibComponent, paymentViewService, OrderslistService$$1, router) {
-        var _this = this;
         this.paymentLibComponent = paymentLibComponent;
         this.paymentViewService = paymentViewService;
         this.OrderslistService = OrderslistService$$1;
@@ -10327,30 +10261,6 @@ var ServiceRequestComponent = /** @class */ (function () {
         this.isAddRemissionBtnEnabled = false;
         this.isRefundRemissionBtnEnable = false;
         this.allowedRolesToAccessRefund = ['payments-refund-approver', 'payments-refund'];
-        this.check4AllowedRoles2AccessRefund = (/**
-         * @return {?}
-         */
-        function () {
-            return _this.allowedRolesToAccessRefund.some((/**
-             * @param {?} role
-             * @return {?}
-             */
-            function (role) {
-                return _this.LOGGEDINUSERROLES.indexOf(role) !== -1;
-            }));
-        });
-        this.allowFurtherAccessAfter4Days = (/**
-         * @param {?} payment
-         * @return {?}
-         */
-        function (payment) {
-            if (payment !== null && payment !== undefined) {
-                /** @type {?} */
-                var tmp4DayAgo = new Date();
-                tmp4DayAgo.setDate(tmp4DayAgo.getDate() - 4);
-                return tmp4DayAgo >= new Date(payment.date_created);
-            }
-        });
     }
     /**
      * @return {?}
@@ -10466,75 +10376,6 @@ var ServiceRequestComponent = /** @class */ (function () {
         this.router.onSameUrlNavigation = 'reload';
         this.router.navigateByUrl(url);
     };
-    /**
-     * @param {?} feeCode
-     * @return {?}
-     */
-    ServiceRequestComponent.prototype.chkForAddRemission = /**
-     * @param {?} feeCode
-     * @return {?}
-     */
-    function (feeCode) {
-        var e_1, _a;
-        if (this.chkForPBAPayment() && this.check4AllowedRoles2AccessRefund()) {
-            if (this.orderDetail[0]['remissions'].length > 0) {
-                try {
-                    for (var _b = __values(this.orderDetail[0]['remissions']), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var remission = _c.value;
-                        if (remission.fee_code === feeCode) {
-                            return false;
-                        }
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            }
-            return true;
-        }
-        else {
-            return false;
-        }
-    };
-    /**
-     * @return {?}
-     */
-    ServiceRequestComponent.prototype.chkForPBAPayment = /**
-     * @return {?}
-     */
-    function () {
-        var _this = this;
-        if (this.orderDetail !== null && this.orderDetail !== undefined) {
-            this.orderDetail.forEach((/**
-             * @param {?} orderDetail
-             * @return {?}
-             */
-            function (orderDetail) {
-                if (orderDetail.payments) {
-                    orderDetail.payments.forEach((/**
-                     * @param {?} payment
-                     * @return {?}
-                     */
-                    function (payment) {
-                        if (payment.method.toLocaleLowerCase() === 'payment by account' && _this.allowFurtherAccessAfter4Days(payment)) {
-                            _this.paymentLibComponent.paymentReference = payment.reference;
-                            _this.isPBA = true;
-                        }
-                    }));
-                }
-            }));
-            if (this.isPBA) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        }
-    };
     /**
      * @param {?} fee
      * @return {?}
@@ -10545,7 +10386,7 @@ var ServiceRequestComponent = /** @class */ (function () {
      */
     function (fee) {
         var _this = this;
-        if (this.chkForAddRemission(fee.code)) {
+        if (this.chkIsAddRemissionBtnEnable(fee)) {
             this.feeId = fee;
             this.viewStatus = 'addremission';
             this.payment = this.orderDetail[0].payments[0];
@@ -10561,8 +10402,8 @@ var ServiceRequestComponent = /** @class */ (function () {
                  */
                 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;
+                //  const paymentAllocation = this.paymentGroup.payments[0].payment_allocation;
+                //  this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
             }), (/**
              * @param {?} error
              * @return {?}
@@ -10647,61 +10488,6 @@ var ServiceRequestComponent = /** @class */ (function () {
             _this.isRemoveBtnDisabled = false;
         }));
     };
-    /**
-     * @param {?} payment
-     * @return {?}
-     */
-    ServiceRequestComponent.prototype.chkIssueRefundBtnEnable = /**
-     * @param {?} payment
-     * @return {?}
-     */
-    function (payment) {
-        if (this.check4AllowedRoles2AccessRefund() && this.allowFurtherAccessAfter4Days(payment) &&
-            payment.method === 'payment by account' && payment.status.toLocaleLowerCase() === 'success') {
-            this.isIssueRefunfBtnEnable = true;
-        }
-        if (this.isIssueRefunfBtnEnable) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    };
-    /**
-     * @return {?}
-     */
-    ServiceRequestComponent.prototype.chkIsRefundRemissionBtnEnable = /**
-     * @return {?}
-     */
-    function () {
-        var _this = this;
-        if (this.orderDetail !== null && this.orderDetail !== undefined) {
-            this.paymentLibComponent.isFromServiceRequestPage = true;
-            this.orderDetail.forEach((/**
-             * @param {?} orderDetail
-             * @return {?}
-             */
-            function (orderDetail) {
-                if (orderDetail.payments) {
-                    orderDetail.payments.forEach((/**
-                     * @param {?} payment
-                     * @return {?}
-                     */
-                    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 {?} payment
      * @return {?}
@@ -10712,7 +10498,7 @@ var ServiceRequestComponent = /** @class */ (function () {
      */
     function (payment) {
         if (payment !== null && payment !== undefined) {
-            if (this.chkIssueRefundBtnEnable(payment)) {
+            if (this.chkIsIssueRefundBtnEnable(payment)) {
                 this.viewStatus = 'issuerefund';
                 this.payment = payment;
                 this.paymentLibComponent.isFromServiceRequestPage = true;
@@ -10720,38 +10506,13 @@ var ServiceRequestComponent = /** @class */ (function () {
             }
         }
     };
-    // goToServiceRequestPage(event: any) {
-    //   event.preventDefault();
-    //   this.isFromServiceRequestPage = true;
-    //   this.viewStatus = 'main'
-    //   this.paymentLibComponent.viewName = 'case-transactions';
-    //   this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-    //   this.router.onSameUrlNavigation = 'reload';
-    // }
-    // goToServiceRequestPage(event: any) {
-    //   event.preventDefault();
-    //   this.isFromServiceRequestPage = true;
-    //   this.viewStatus = 'main'
-    //   this.paymentLibComponent.viewName = 'case-transactions';
-    //   this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-    //   this.router.onSameUrlNavigation = 'reload';
-    // }
     /**
      * @param {?} paymentGroupReference
      * @param {?} paymentReference
      * @param {?} paymentMethod
      * @return {?}
      */
-    ServiceRequestComponent.prototype.goToPayementView = 
-    // goToServiceRequestPage(event: any) {
-    //   event.preventDefault();
-    //   this.isFromServiceRequestPage = true;
-    //   this.viewStatus = 'main'
-    //   this.paymentLibComponent.viewName = 'case-transactions';
-    //   this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-    //   this.router.onSameUrlNavigation = 'reload';
-    // }
-    /**
+    ServiceRequestComponent.prototype.goToPayementView = /**
      * @param {?} paymentGroupReference
      * @param {?} paymentReference
      * @param {?} paymentMethod
@@ -10783,6 +10544,63 @@ var ServiceRequestComponent = /** @class */ (function () {
         this.OrderslistService.setorderFeesTotal(this.orderFeesTotal);
         this.viewStatus = 'payment-view';
     };
+    /**
+     * @param {?} payment
+     * @return {?}
+     */
+    ServiceRequestComponent.prototype.chkIsIssueRefundBtnEnable = /**
+     * @param {?} payment
+     * @return {?}
+     */
+    function (payment) {
+        if (!payment.issue_refund_add_refund_add_remission) {
+            return true;
+        }
+        else if (payment.issue_refund && payment.refund_enable && payment.issue_refund_add_refund_add_remission) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    };
+    /**
+     * @param {?} remission
+     * @return {?}
+     */
+    ServiceRequestComponent.prototype.chkIsAddRefundBtnEnable = /**
+     * @param {?} remission
+     * @return {?}
+     */
+    function (remission) {
+        if (!remission.issue_refund_add_refund_add_remission) {
+            return true;
+        }
+        else if (remission.add_refund && remission.issue_refund_add_refund_add_remission) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    };
+    /**
+     * @param {?} fee
+     * @return {?}
+     */
+    ServiceRequestComponent.prototype.chkIsAddRemissionBtnEnable = /**
+     * @param {?} fee
+     * @return {?}
+     */
+    function (fee) {
+        if (!fee.issue_refund_add_refund_add_remission) {
+            return true;
+        }
+        else if (fee.remission_enable && fee.issue_refund_add_refund_add_remission) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    };
     /**
      * @return {?}
      */
@@ -10802,7 +10620,7 @@ var ServiceRequestComponent = /** @class */ (function () {
     ServiceRequestComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-service-request',
-                    template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">Back</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            <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\" *ngIf=\"isServiceRequest === 'false'\">Fee</td>\n            <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">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\" *ngIf=\"isServiceRequest === 'false'\"></td>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{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 alignright\" *ngIf=\"isServiceRequest === 'false'\">\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 alignleft\" colspan=\"7\">No fees recorded</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">  \n          <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\"> \n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</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  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!order.payments[0].refund_enable\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n           </td>\n           <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n            \n         </td> -->\n         </tr>\n     </tbody>\n     \n\n   </table>\n   <div *ngIf=\"order.remissions?.length === 0\">\n    <span >No help with fees or remissions.</span>\n </div>\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  \n  \n</ng-container>\n  \n \n   <!--Payments-->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full\" *ngIf=\"order.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-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  *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\"  *ngFor=\"let payment of order.payments\">\n            <td class=\"govuk-table__cell whitespace-inherit\">\n              <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n            <td class=\"govuk-table__cell alignright\">\n              <button  [disabled]=\"!payment.refund_enable\"  (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 \n  <div *ngIf=\"order.payments === undefined || order.payments === null\">\n      <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n            <span class=\"mar-17\" >No Payments recorded</span>\n  </div>\n</div>\n</ng-container>\n<div *ngIf=\"isServiceRequest === 'false'\">\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</div>\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\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n\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\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-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\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\" \n[isTakePayment] = \"takePayment\"  \n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isOldPcipalOff] = \"isOldPcipalOff\"\n[isNewPcipalOff] = \"isNewPcipalOff\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</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>",
+                    template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">Back</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            <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\" *ngIf=\"isServiceRequest === 'false'\">Fee</td>\n            <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">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\" *ngIf=\"isServiceRequest === 'false'\"></td>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{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 alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"chkIsAddRemissionBtnEnable(fee)\" (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 alignleft\" colspan=\"7\">No fees recorded</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">  \n          <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\"> \n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</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  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"chkIsAddRefundBtnEnable(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n           </td>\n           <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n            \n         </td> -->\n         </tr>\n     </tbody>\n     \n\n   </table>\n   <div *ngIf=\"order.remissions?.length === 0\">\n    <span >No help with fees or remissions.</span>\n </div>\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  \n  \n</ng-container>\n  \n \n   <!--Payments-->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full\" *ngIf=\"order.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-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  *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\"  *ngFor=\"let payment of order.payments\">\n            <td class=\"govuk-table__cell whitespace-inherit\">\n              <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n            <td class=\"govuk-table__cell alignright\">\n              <button  [disabled]=\"chkIsIssueRefundBtnEnable(payment)\"  (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n            </td>\n            <!-- <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n            </td> -->\n          </tr>\n      </tbody>\n    </table>\n \n  <div *ngIf=\"order.payments === undefined || order.payments === null\">\n      <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n            <span class=\"mar-17\" >No Payments recorded</span>\n  </div>\n</div>\n</ng-container>\n<div *ngIf=\"isServiceRequest === 'false'\">\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</div>\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\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n\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\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-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\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\" \n[isTakePayment] = \"takePayment\"  \n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isOldPcipalOff] = \"isOldPcipalOff\"\n[isNewPcipalOff] = \"isNewPcipalOff\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</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>",
                     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}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__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}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}"]
                 }] }
     ];