@hmcts/ccpay-web-component 5.0.1-beta38 → 5.0.1-beta43

package/bundles/hmcts-ccpay-web-component.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs/observable/throw'), require('rxjs'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/platform-browser'), require('@angular/common'), require('file-saver'), require('xlsx'), require('@angular/material/table'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/core'), require('@angular/forms'), require('@angular/router')) :
-    typeof define === 'function' && define.amd ? define('@hmcts/ccpay-web-component', ['exports', 'rxjs/observable/throw', 'rxjs', '@angular/common/http', 'rxjs/operators', '@angular/platform-browser', '@angular/common', 'file-saver', 'xlsx', '@angular/material/table', '@angular/material/paginator', '@angular/material/sort', '@angular/material/form-field', '@angular/material/input', '@angular/core', '@angular/forms', '@angular/router'], factory) :
-    (factory((global.hmcts = global.hmcts || {}, global.hmcts['ccpay-web-component'] = {}),global.rxjs['observable/throw'],global.rxjs,global.ng.common.http,global.rxjs.operators,global.ng.platformBrowser,global.ng.common,global.FileSaver,global.XLSX,global.ng.material.table,global.ng.material.paginator,global.ng.material.sort,global.ng.material['form-field'],global.ng.material.input,global.ng.core,global.ng.forms,global.ng.router));
-}(this, (function (exports,_throw,rxjs,i1,operators,i5,common,FileSaver,XLSX,table,paginator,sort,formField,input,i0,forms,router) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs/observable/throw'), require('rxjs'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/platform-browser'), require('@angular/common'), require('file-saver'), require('xlsx'), require('@angular/material/table'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/core'), require('@angular/router')) :
+    typeof define === 'function' && define.amd ? define('@hmcts/ccpay-web-component', ['exports', 'rxjs/observable/throw', 'rxjs', '@angular/common/http', 'rxjs/operators', '@angular/platform-browser', '@angular/common', 'file-saver', 'xlsx', '@angular/material/table', '@angular/material/paginator', '@angular/material/sort', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/core', '@angular/router'], factory) :
+    (factory((global.hmcts = global.hmcts || {}, global.hmcts['ccpay-web-component'] = {}),global.rxjs['observable/throw'],global.rxjs,global.ng.common.http,global.rxjs.operators,global.ng.platformBrowser,global.ng.common,global.FileSaver,global.XLSX,global.ng.material.table,global.ng.material.paginator,global.ng.material.sort,global.ng.material['form-field'],global.ng.material.input,global.ng.forms,global.ng.core,global.ng.router));
+}(this, (function (exports,_throw,rxjs,i1,operators,i5,common,FileSaver,XLSX,table,paginator,sort,formField,input,forms,i0,router) { 'use strict';
 
     /**
      * @fileoverview added by tsickle
@@ -372,11 +372,14 @@
                 else {
                     this.viewName = this.VIEW;
                 }
+                if (this.isTakePayment) {
+                    this.TAKEPAYMENT = true;
+                }
             };
         PaymentLibComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'ccpay-payment-lib',
-                        template: "\n  <ccpay-refund-list [USERID]=\"USERID\" [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" [LOGGEDINUSEREMAIL]=\"LOGGEDINUSEREMAIL\" *ngIf=\"viewName === 'refund-list'\"></ccpay-refund-list>\n    <ccpay-payment-list *ngIf=\"viewName === 'payment-list'\"></ccpay-payment-list>\n    <ccpay-refund-status [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'refundstatuslist'\"> </ccpay-refund-status >\n    <ccpay-payment-view [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'payment-view'\"\n    [isTurnOff]=\"ISTURNOFF\" [isTakePayment]=\"TAKEPAYMENT\"  [caseType]=\"CASETYPE\"\n    [isOldPcipalOff]=\"ISOLDPCIPALOFF\"\n    [isNewPcipalOff]=\"ISNEWPCIPALOFF\"></ccpay-payment-view>\n\n    <ccpay-process-refund *ngIf=\"viewName === 'process-refund'\"\n    [refundReference]=\"refundReference\"\n    [refundlistsource]=\"refundlistsource\"\n    ></ccpay-process-refund>\n\n\n    <ccpay-case-transactions [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'case-transactions'\"></ccpay-case-transactions>\n    <app-mark-unidentified-payment *ngIf=\"viewName === 'unidentifiedPage'\"\n    [caseType]=\"CASETYPE\"></app-mark-unidentified-payment>\n    <app-mark-unsolicited-payment *ngIf=\"viewName === 'unsolicitedPage'\"\n    [caseType]=\"CASETYPE\"></app-mark-unsolicited-payment>\n    <app-allocate-payments *ngIf=\"viewName === 'allocate-payments'\"\n    [isTurnOff]=\"ISTURNOFF\"\n    [caseType]=\"CASETYPE\"\n    ></app-allocate-payments>\n    <ccpay-fee-summary *ngIf=\"viewName === 'fee-summary'\"\n      [ccdCaseNumber]=\"CCD_CASE_NUMBER\" \n      [paymentGroupRef]=\"paymentGroupReference\"\n      [isTurnOff]=\"ISTURNOFF\"\n      [caseType]=\"CASETYPE\"\n      [isOldPcipalOff]=\"ISOLDPCIPALOFF\"\n      [isNewPcipalOff]=\"ISNEWPCIPALOFF\"\n      ></ccpay-fee-summary>\n    <ccpay-reports *ngIf=\"viewName === 'reports'\"></ccpay-reports>\n    "
+                        template: "\n  <ccpay-refund-list [USERID]=\"USERID\" [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" [LOGGEDINUSEREMAIL]=\"LOGGEDINUSEREMAIL\" *ngIf=\"viewName === 'refund-list'\"></ccpay-refund-list>\n    <ccpay-payment-list *ngIf=\"viewName === 'payment-list'\"></ccpay-payment-list>\n    <ccpay-refund-status [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'refundstatuslist'\"> </ccpay-refund-status >\n    <ccpay-payment-view [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'payment-view'\"\n    [isTurnOff]=\"ISTURNOFF\" [isTakePayment]=\"TAKEPAYMENT\"  [caseType]=\"CASETYPE\"\n    [isOldPcipalOff]=\"ISOLDPCIPALOFF\"\n    [isNewPcipalOff]=\"ISNEWPCIPALOFF\"></ccpay-payment-view>\n\n    <ccpay-process-refund *ngIf=\"viewName === 'process-refund'\"\n    [refundReference]=\"refundReference\"\n    [refundlistsource]=\"refundlistsource\"\n    ></ccpay-process-refund>\n\n\n    <ccpay-case-transactions [isTakePayment]=\"isTakePayment\" [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'case-transactions'\"></ccpay-case-transactions>\n    <app-mark-unidentified-payment *ngIf=\"viewName === 'unidentifiedPage'\"\n    [caseType]=\"CASETYPE\"></app-mark-unidentified-payment>\n    <app-mark-unsolicited-payment *ngIf=\"viewName === 'unsolicitedPage'\"\n    [caseType]=\"CASETYPE\"></app-mark-unsolicited-payment>\n    <app-allocate-payments *ngIf=\"viewName === 'allocate-payments'\"\n    [isTurnOff]=\"ISTURNOFF\"\n    [caseType]=\"CASETYPE\"\n    ></app-allocate-payments>\n    <ccpay-fee-summary *ngIf=\"viewName === 'fee-summary'\"\n      [ccdCaseNumber]=\"CCD_CASE_NUMBER\" \n      [paymentGroupRef]=\"paymentGroupReference\"\n      [isTurnOff]=\"ISTURNOFF\"\n      [caseType]=\"CASETYPE\"\n      [isOldPcipalOff]=\"ISOLDPCIPALOFF\"\n      [isNewPcipalOff]=\"ISNEWPCIPALOFF\"\n      ></ccpay-fee-summary>\n    <ccpay-reports *ngIf=\"viewName === 'reports'\"></ccpay-reports>\n    "
                     }] }
         ];
         /** @nocollapse */
@@ -1516,7 +1519,7 @@
         PaymentViewComponent.decorators = [
             { type: i0.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\">\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 reference</td>\n          <td>{{ serviceReference  }}</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]?.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        <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\" >\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 *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 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>{{ 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>{{ 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>{{ 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>{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n      \n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button [disabled]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *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  </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\"></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",
+                        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 reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td> \n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td class=\"tb-col-w\">{{  paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Banked date</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">Allocaton status</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n          \n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA number</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">Customer internal reference</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n      \n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button [disabled]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *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 class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n        \n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\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  </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\"></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: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}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}.text-transform::first-letter{text-transform:capitalize}"]
                     }] }
         ];
@@ -1828,6 +1831,7 @@
          */
             function (code) {
                 var _this = this;
+                this.refundActionsHasError = false;
                 if (code === 'Return to caseworker') {
                     this.isConfirmButtondisabled = true;
                     this.isSendMeBackClicked = true;
@@ -1995,10 +1999,38 @@
                  * @return {?}
                  */function (data) { return _this.navigationpage = data; }));
                 if (this.navigationpage === 'casetransactions') {
+                    // window.location.href='/refund-list?takePayment=false&refundlist=true';
+                    // // this.OrderslistService.setnavigationPage('casetransactions');
+                    // // this.OrderslistService.setisFromServiceRequestPage(false);
+                    // // this.paymentLibComponent.VIEW ='case-transactions';
+                    // // this.paymentLibComponent.viewName = 'case-transactions';
+                    // // this.paymentLibComponent.ISBSENABLE = true;
+                    // // this.paymentLibComponent.isRefundStatusView = false;
+                    this.paymentLibComponent.viewName = 'refundstatuslist';
+                    this.paymentLibComponent.isRefundStatusView = true;
+                }
+                else {
+                    this.paymentLibComponent.viewName = 'refundstatuslist';
+                    this.paymentLibComponent.isRefundStatusView = true;
+                }
+            };
+        /**
+         * @return {?}
+         */
+        ProcessRefundComponent.prototype.loadRefundsHomePage = /**
+         * @return {?}
+         */
+            function () {
+                if (typeof this.paymentLibComponent.TAKEPAYMENT === 'string' && this.paymentLibComponent.TAKEPAYMENT === 'false') {
                     window.location.href = '/refund-list?takePayment=false&refundlist=true';
                 }
                 else {
-                    this.paymentLibComponent.viewName = 'refund-list';
+                    this.OrderslistService.setnavigationPage('casetransactions');
+                    this.OrderslistService.setisFromServiceRequestPage(false);
+                    this.paymentLibComponent.VIEW = 'case-transactions';
+                    this.paymentLibComponent.viewName = 'case-transactions';
+                    this.paymentLibComponent.ISBSENABLE = true;
+                    this.paymentLibComponent.isRefundStatusView = false;
                 }
             };
         /**
@@ -2008,7 +2040,7 @@
          * @return {?}
          */
             function () {
-                if (this.paymentLibComponent.API_ROOT === 'api/payment-history') {
+                if (typeof this.paymentLibComponent.TAKEPAYMENT === 'string' && this.paymentLibComponent.TAKEPAYMENT === 'false') {
                     window.location.href = '/refund-list?takePayment=false&refundlist=true';
                 }
                 else {
@@ -2128,7 +2160,7 @@
         ProcessRefundComponent.decorators = [
             { type: i0.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 *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 reason-font\"\n                [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n                  id=\"sendmeback\"\n                  name=\"sendMeBackField\" \n                  formControlName=\"sendMeBackField\"\n                rows=\"5\"></textarea>\n              \n              </div>\n\n            </div>\n  \n          </div>\n      \n        </fieldset>\n      </div>\n\n      <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h2 class=\"heading-medium\">\n              Why are you rejecting this refund?\n            </h2>\n          </legend>\n          <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundRejectReasonHasError\">\n            <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundRejectReason-{{j}}\"\n              formControlName=\"refundRejectReasonField\"\n              name=\"refundRejectReasonField\"\n              (click)=\"checkRefundActions(refundRejectReason.code)\"\n              type=\"radio\" value=\"{{refundRejectReason.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n                {{refundRejectReason.name}}\n              </label>\n            </div>\n            </div>\n      <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n            Enter reason\n          </label>\n          <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n            <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n            <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n          </p>\n          <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n          [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n          formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n        \n      </div>\n      \n        </fieldset>\n      </div>\n\n      <div class=\"govuk-button-group\">\n        <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n        <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n          data-module=\"govuk-button\">\n          Submit \n        </button>\n      <br/><br/>\n    </div>\n   \n  <div 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  </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 (click) = \"goToCaseReview()\" class=\"govuk-link\">Return to case</a>\n        </p>\n      </div>\n  </main>\n</div>\n</ng-container>\n\n",
+                        template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <div *ngIf=\"errorMessage.showError\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          {{errorMessage.title}}\n        </h2>\n        <div class=\"govuk-error-summary__body process-refund-font\">\n          {{errorMessage.body}}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment to be refunded</td>\n          <td>\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 reason-font\"\n                [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n                  id=\"sendmeback\"\n                  name=\"sendMeBackField\" \n                  formControlName=\"sendMeBackField\"\n                rows=\"5\"></textarea>\n              \n              </div>\n\n            </div>\n  \n          </div>\n      \n        </fieldset>\n      </div>\n\n      <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n            <h2 class=\"heading-medium\">\n              Why are you rejecting this refund?\n            </h2>\n          </legend>\n          <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n            <p class=\"inline-error-message\"\n            *ngIf=\"refundRejectReasonHasError\">\n            <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n          </p>\n            <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n              <input class=\"govuk-radios__input\" \n              id=\"refundRejectReason-{{j}}\"\n              formControlName=\"refundRejectReasonField\"\n              name=\"refundRejectReasonField\"\n              (click)=\"checkRefundActions(refundRejectReason.code)\"\n              type=\"radio\" value=\"{{refundRejectReason.code}}\">\n              <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n                {{refundRejectReason.name}}\n              </label>\n            </div>\n            </div>\n      <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n            Enter reason\n          </label>\n          <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n            <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n            <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n          </p>\n          <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n          [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n          formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n        \n      </div>\n      \n        </fieldset>\n      </div>\n\n      <div class=\"govuk-button-group\">\n        <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n        <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n          data-module=\"govuk-button\">\n          Submit \n        </button>\n      <br/><br/>\n    </div>\n   \n  <div class=\"govuk-button-group margin\">\n\n  <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n  </div>\n \n\n  </main>\n \n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row\">\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 (click) = \"goToCaseReview()\" 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:1.875rem;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;border-color:#c11717}.inline-error-class{outline:#c11717 solid 3px;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{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}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}"]
                     }] }
         ];
@@ -2872,6 +2904,9 @@
                 }
                 this.excReference = this.paymentLibComponent.EXC_REFERENCE;
                 this.takePayment = this.paymentLibComponent.TAKEPAYMENT;
+                // if(this.isTakePayment) {
+                //   this.takePayment = this.isTakePayment;
+                // }
                 this.servicerequest = this.paymentLibComponent.SERVICEREQUEST;
                 if (this.paymentLibComponent.SERVICEREQUEST === 'true') {
                     this.serviceRequestValue = 'true';
@@ -2907,18 +2942,20 @@
                             _this.goToOrderViewDetailSection(_this.orderRef);
                             // this.viewStatus = 'order-full-view';
                         }
-                        _this.paymentViewService.getPartyDetails(_this.ccdCaseNumber).subscribe(( /**
-                         * @param {?} response
-                         * @return {?}
-                         */function (response) {
-                            _this.cpoDetails = JSON.parse(response).content[0];
-                        }), ( /**
-                         * @param {?} error
-                         * @return {?}
-                         */function (error) {
-                            _this.errorMessage = ( /** @type {?} */(error.replace(/"/g, "")));
-                            _this.isCPODown = true;
-                        }));
+                        else {
+                            _this.paymentViewService.getPartyDetails(_this.ccdCaseNumber).subscribe(( /**
+                             * @param {?} response
+                             * @return {?}
+                             */function (response) {
+                                _this.cpoDetails = JSON.parse(response).content[0];
+                            }), ( /**
+                             * @param {?} error
+                             * @return {?}
+                             */function (error) {
+                                _this.errorMessage = ( /** @type {?} */(error.replace(/"/g, "")));
+                                _this.isCPODown = true;
+                            }));
+                        }
                     }), ( /**
                      * @param {?} error
                      * @return {?}
@@ -3238,20 +3275,6 @@
                     this.paymentLibComponent.viewName = 'fee-summary';
                 }
             };
-        /**
-         * @param {?} event
-         * @return {?}
-         */
-        CaseTransactionsComponent.prototype.goToCaseTransationPage = /**
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                event.preventDefault();
-                this.isFromServiceRequestPage = false;
-                this.viewStatus = 'main';
-                this.paymentLibComponent.viewName = 'case-transactions';
-            };
         /**
          * @return {?}
          */
@@ -3922,7 +3945,7 @@
         CaseTransactionsComponent.decorators = [
             { type: i0.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\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          \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 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div 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>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header  col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">Party</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header  col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header col\" scope=\"col\"></td>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n                      <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\t\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                      </td>\n                      <td  class=\"alignright\">\n                        \n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n                        [disabled]=\"!orderRef.orderAddBtnEnable\"\n                        [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                        Take telephony payment\n                      </button></td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n                    <td colspan=\"6\">No service requests on this case.</td>\n                  </tbody>\n              </table>\n            </ng-container>\n              <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n                  <br/>No service requests on this case.<br/>\n              </ng-container> -->\n              <span>\n                  <br/>\n                  <a (click)=\"redirectToFeeSearchPage($event)\"\n                    [class.disabled]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>Payments</span>\n              <ccpay-app-unprocessed-payments\n              *ngIf=\"isBulkScanEnable\"\n              [IS_BUTTON_ENABLE]=\"takePayment\"\n              [LEVEL]=\"3\"\n              [PAYMENTSLENGTH]=\"allPayments?.length\"\n              [ISTURNOFF]=\"isTurnOff\"\n              [ISSFENABLE]=\"isStrategicFixEnable\"\n              [PAYMENTREF]=\"paymentRef\"\n              [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"  \n              (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n              [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n               </ccpay-app-unprocessed-payments>\n\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                    <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                        <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status }}</td>\n                        <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                        <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                        <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                        <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                        <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                          </td>\n                      </tr>\n                  </tbody>\n                        \n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n                    <td colspan=\"6\">No payments recorded</td>\n                  </tbody>\n                </table>\n               \n              </ng-container>\n        \n          </div>\n          <div>\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\">\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-column-full\">\n        <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span>\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable)\">\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                \n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell  whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n                  <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell  whitespace-inherit\"></td> \n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td> \n                  \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              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                <tr class=\"govuk-table__row\" >\n                  <td class=\"alignleft\" colspan=\"7\">No service requests on this case.</td>\n                </tr>\n              </tbody>\n          </table>\n        </ng-container>\n        <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n          <h1 class=\"govuk-heading-l govuk-heading-lw\">If you are expecting to pay and are not able to see a service request,</h1>\n          <p>please refresh and try in some time.</p>\n        </ng-container>\n\n    <!-- </div> -->\n\n      </div>\n        \n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Payments</span>\n            <ng-container >\n              <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">Date</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">Payment reference</td>\n                    <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td colspan=\"6\">No payments recorded</td>\n              </tbody>\n              </table>\n              <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"4\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\" \n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n              </ccpay-app-unprocessed-payments>\n            </ng-container>\n\n            <!-- <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   </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=\"javascript:void(0)\" (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 alignright\">\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    <!-- <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 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]=\"!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 *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] = \"!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   \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=\"((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>",
+                        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\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          \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\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 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div 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>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header  col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">Party</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header  col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header col\" scope=\"col\"></td>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n                      <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\t\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                      </td>\n                      <td  class=\"alignright\">\n                        \n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n                        [disabled]=\"!orderRef.orderAddBtnEnable\"\n                        [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                        Take telephony payment\n                      </button></td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n                    <td colspan=\"6\">No service requests on this case.</td>\n                  </tbody>\n              </table>\n            </ng-container>\n              <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n                  <br/>No service requests on this case.<br/>\n              </ng-container> -->\n              <span>\n                  <br/>\n                  <a (click)=\"redirectToFeeSearchPage($event)\"\n                    [class.disabled]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>Payments</span>\n              <ccpay-app-unprocessed-payments\n              *ngIf=\"isBulkScanEnable\"\n              [IS_BUTTON_ENABLE]=\"takePayment\"\n              [LEVEL]=\"3\"\n              [PAYMENTSLENGTH]=\"allPayments?.length\"\n              [ISTURNOFF]=\"isTurnOff\"\n              [ISSFENABLE]=\"isStrategicFixEnable\"\n              [PAYMENTREF]=\"paymentRef\"\n              [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"  \n              (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n              [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n               </ccpay-app-unprocessed-payments>\n\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                    <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                        <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status }}</td>\n                        <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                        <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                        <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                        <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                        <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                          </td>\n                      </tr>\n                  </tbody>\n                        \n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n                    <td colspan=\"6\">No payments recorded</td>\n                  </tbody>\n                </table>\n               \n              </ng-container>\n        \n          </div>\n          <div>\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\">\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-column-full\">\n        <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span>\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable)\">\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                \n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell  whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n                  <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell  whitespace-inherit\"></td> \n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td> \n                  \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              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                <tr class=\"govuk-table__row\" >\n                  <td class=\"alignleft\" colspan=\"7\">No service requests on this case.</td>\n                </tr>\n              </tbody>\n          </table>\n        </ng-container>\n        <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n          <h1 class=\"govuk-heading-l govuk-heading-lw\">If you are expecting to pay and are not able to see a service request,</h1>\n          <p>please refresh and try in some time.</p>\n        </ng-container>\n\n    <!-- </div> -->\n\n      </div>\n        \n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Payments</span>\n            <ng-container >\n              <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">Date</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">Payment reference</td>\n                    <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td colspan=\"6\">No payments recorded</td>\n              </tbody>\n              </table>\n              <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"4\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\" \n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n              </ccpay-app-unprocessed-payments>\n            </ng-container>\n\n            <!-- <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   </ng-container>\n\n\n<input #myInput type='hidden' id='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  ></ccpay-service-request>\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}.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%}"]
                     }] }
         ];
@@ -3938,7 +3961,8 @@
             ];
         };
         CaseTransactionsComponent.propDecorators = {
-            LOGGEDINUSERROLES: [{ type: i0.Input, args: ['LOGGEDINUSERROLES',] }]
+            LOGGEDINUSERROLES: [{ type: i0.Input, args: ['LOGGEDINUSERROLES',] }],
+            isTakePayment: [{ type: i0.Input }]
         };
         return CaseTransactionsComponent;
     }());
@@ -6890,79 +6914,93 @@
          * @return {?}
          */
             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.paymentLibComponent.TAKEPAYMENT = false;
-                    this.paymentLibComponent.isFromRefundStatusPage = false;
-                    this.viewStatus = 'main';
-                    this.paymentLibComponent.viewName = 'case-transactions';
-                    this.OrderslistService.setisFromServiceRequestPage(true);
-                    this.OrderslistService.setnavigationPage('servicerequestpage');
+                    this.viewStatus = 'order-full-view';
+                    this.viewCompStatus = '';
                 }
-                if (this.isFromRefundListPage) {
+                else if (this.isFromRefundListPage) {
                     this.paymentLibComponent.iscancelClicked = true;
                     this.refundListReason.emit({ reason: this.selectedRefundReason, code: this.refundReason });
                     this.paymentLibComponent.isFromRefundStatusPage = true;
                 }
-                if (!this.paymentLibComponent.isFromRefundStatusPage) {
-                    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.ISTURNOFF = this.isTurnOff;
-                    this.paymentLibComponent.ISNEWPCIPALOFF = this.isNewPcipalOff;
-                    this.paymentLibComponent.ISOLDPCIPALOFF = this.isOldPcipalOff;
-                    this.paymentLibComponent.isFromServiceRequestPage = true;
-                    this.paymentLibComponent.ISBSENABLE = true;
-                    /** @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.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 = ( /**
+                else {
+                    this.paymentLibComponent.paymentMethod = this.payment.method;
+                    this.paymentLibComponent.paymentGroupReference = this.paymentLibComponent.paymentGroupReference;
+                    this.paymentLibComponent.paymentReference = this.payment.reference;
+                    this.paymentLibComponent.viewName = 'payment-view';
+                    this.viewStatus = 'payment-view';
+                    if (this.LOGGEDINUSERROLES === undefined) {
+                        this.OrderslistService.getUserRolesList().subscribe(( /**
+                         * @param {?} data
                          * @return {?}
-                         */function () { return false; });
-                        this.router.onSameUrlNavigation = 'reload';
-                        this.router.navigateByUrl(url);
+                         */function (data) { return _this.LOGGEDINUSERROLES = data; }));
                     }
+                    this.viewCompStatus = '';
                 }
-                else {
-                    this.paymentLibComponent.viewName === 'refundstatuslist';
-                    this.paymentLibComponent.isFromRefundStatusPage = true;
-                }
+                // if (this.paymentLibComponent.TAKEPAYMENT === undefined && this.paymentLibComponent.SERVICEREQUEST === undefined) {
+                //   this.paymentLibComponent.SERVICEREQUEST = 'false';
+                //   this.paymentLibComponent.TAKEPAYMENT = false;
+                // }
+                // if (this.isFromServiceRequestPage) {
+                //   //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;
+                //   this.refundListReason.emit({reason: this.selectedRefundReason, code: this.refundReason});
+                //   this.paymentLibComponent.isFromRefundStatusPage = true;
+                // } 
+                // if(!this.paymentLibComponent.isFromRefundStatusPage)  {
+                //     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.ISTURNOFF = this.isTurnOff;
+                //     this.paymentLibComponent.ISNEWPCIPALOFF = this.isNewPcipalOff;
+                //     this.paymentLibComponent.ISOLDPCIPALOFF = this.isOldPcipalOff;
+                //     this.paymentLibComponent.isFromServiceRequestPage = true;  
+                //     this.paymentLibComponent.ISBSENABLE = true;
+                //     let 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.TAKEPAYMENT) {
+                //       this.paymentLibComponent.TAKEPAYMENT = undefined;
+                //     }
+                //     if ( this.paymentLibComponent.SERVICEREQUEST) {
+                //       const url = `/payment-history/${this.ccdCaseNumber}?view=case-transactions&selectedOption=${this.option}${partUrl}`;
+                //       this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+                //       this.router.onSameUrlNavigation = 'reload';
+                //       this.router.navigateByUrl(url);
+                //     } else {
+                //       const url = `/payment-history/${this.ccdCaseNumber}?view=case-transactions&takePayment=${this.paymentLibComponent.TAKEPAYMENT}&selectedOption=${this.option}${partUrl}`;
+                //       this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+                //       this.router.onSameUrlNavigation = 'reload';
+                //       this.router.navigateByUrl(url);
+                //     }
+                // } else {
+                //   this.paymentLibComponent.viewName === 'refundstatuslist';
+                //   this.paymentLibComponent.isFromRefundStatusPage = true;
+                // }
             };
         /**
          * @return {?}
@@ -7090,7 +7128,7 @@
         AddRemissionComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'ccpay-add-remission',
-                        template: "<div class=\"add-remission pagesize\">\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n      <h1 class=\"heading-large\">Add remission </h1>\n      <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  Add remission to {{ fee?.code }}: {{ fee?.description }}\n                <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C OR PA21-123456</span>\n              </label>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n              </p>\n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n                How much does the applicant need to pay?\n              </label>\n\n              <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                <div class=\"hmcts-currency-input\">\n                <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                  <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                  <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                  <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n                </p>\n              </div>\n            </div>\n          </form>\n          <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n              Submit\n            </button>\n        </div>\n      </form>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n          <span class=\"govuk-warning-text__assistive\">Warning</span>\n          Are you sure you want to add remission to this fee?\n        </strong>\n      </div>\n      <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n            <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n            <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n        </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n        Cancel\n      </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"confirmRemission()\">\n        Confirm\n      </button>\n\n  </ng-container>\n\n  <!-- Add retro remission changes-->\n\n  <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n      <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n      <form novalidate>\n          <div class=\"govuk-form-group\">\n            <form [formGroup]=\"remissionForm\" novalidate>\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  <span class=\"form-hint\">For example: HWF-A1B-23C OR PA21-123456</span>\n                </label>\n                <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                  <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                  <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n                </p>\n                <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n             \n              </div>\n            \n            </form>\n            <div class=\"govuk-button-group\">\n                <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n            </div>\n            <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n          </div>\n      </form>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                      <fieldset class=\"govuk-fieldset\">\n                        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                            <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the remission amount\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                                Enter the  amount\n                            </h1> \n                          </legend>\n                       <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                       <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                        <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                        <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                        <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n                      </p>\n                          <div class=\"hmcts-currency-input\">\n                           \n                              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                              <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                              \n              \n                        </div>\n                      </fieldset>\n                  </form>\n            \n                  <div class=\"govuk-button-group\">\n                      <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                      <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n                  \n                  </div>\n                  <p>\n                    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                </p>\n              </div>\n    \n          </form>\n      </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n              <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Help with fees or remission reference</td>\n              <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n               <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n              <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                  <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n      <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Remission added\n          </h1>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n             \n            </div>\n          </div>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" >\n              <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </button>\n            </div>\n        <p class=\"govuk-body\">\n          <a href=\"javascript:void(0)\" (click)=\"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 white\"><strong>Refund reference: {{refundReference}}</strong></p>\n            </div>\n      \n          </div>\n          <div *ngIf=\"isPaymentSuccess\">\n          <h2 class=\"govuk-heading-l\">What happens next</h2>\n          <p class=\"govuk-body\">\n            A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n          </p>\n        </div>\n          <p class=\"govuk-body\">\n            <a href=\"javascript:void(0)\" (click)=\"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        </div>\n        <p>\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n      \n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> {{ displayRefundReason  }} \n               <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <!--Retro Refund-->\n  <ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> Retrospective remission </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td class=\"govuk-table__cell\">{{this.remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n              <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n              <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"processRefund()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Refund submitted\n          </h1>\n          \n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n    \n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n        </p>\n      </div>\n        <p class=\"govuk-body\">\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\"  class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\n  </ng-container>\n\n</div>\n\n\n\n",
+                        template: "<div class=\"add-remission pagesize\">\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n      <h1 class=\"heading-large\">Add remission </h1>\n      <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  Add remission to {{ fee?.code }}: {{ fee?.description }}\n                <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C OR PA21-123456</span>\n              </label>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n              </p>\n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n                How much does the applicant need to pay?\n              </label>\n\n              <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                <div class=\"hmcts-currency-input\">\n                <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                  <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                  <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                  <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n                </p>\n              </div>\n            </div>\n          </form>\n          <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n              Submit\n            </button>\n        </div>\n      </form>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n          <span class=\"govuk-warning-text__assistive\">Warning</span>\n          Are you sure you want to add remission to this fee?\n        </strong>\n      </div>\n      <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n            <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n            <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n        </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n        Cancel\n      </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"confirmRemission()\">\n        Confirm\n      </button>\n\n  </ng-container>\n\n  <!-- Add retro remission changes-->\n\n  <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n      <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n      <form novalidate>\n          <div class=\"govuk-form-group\">\n            <form [formGroup]=\"remissionForm\" novalidate>\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  <span class=\"form-hint\">For example: HWF-A1B-23C OR PA21-123456</span>\n                </label>\n                <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                  <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                  <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n                </p>\n                <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n             \n              </div>\n            \n            </form>\n            <div class=\"govuk-button-group\">\n                <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n            </div>\n            <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n          </div>\n      </form>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                      <fieldset class=\"govuk-fieldset\">\n                        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                            <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the remission amount\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                                Enter the  amount\n                            </h1> \n                          </legend>\n                       <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                       <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                        <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                        <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                        <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n                      </p>\n                          <div class=\"hmcts-currency-input\">\n                           \n                              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                              <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                              \n              \n                        </div>\n                      </fieldset>\n                  </form>\n            \n                  <div class=\"govuk-button-group\">\n                      <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                      <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n                  \n                  </div>\n                  <p>\n                    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                </p>\n              </div>\n    \n          </form>\n      </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n              <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Help with fees or remission reference</td>\n              <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n               <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n              <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                  <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n      <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Remission added\n          </h1>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n             \n            </div>\n          </div>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" >\n              <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </button>\n            </div>\n        <p class=\"govuk-body\">\n          <a href=\"javascript:void(0)\" (click)=\"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 white\"><strong>Refund reference: {{refundReference}}</strong></p>\n            </div>\n      \n          </div>\n          <div *ngIf=\"isPaymentSuccess\">\n          <h2 class=\"govuk-heading-l\">What happens next</h2>\n          <p class=\"govuk-body\">\n            A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n          </p>\n        </div>\n          <p class=\"govuk-body\">\n            <a href=\"javascript:void(0)\" (click)=\"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        </div>\n        <p>\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n      \n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> {{ displayRefundReason  }} \n               <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <!--Retro Refund-->\n  <ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> Retrospective remission </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td class=\"govuk-table__cell\">{{this.remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n              <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n              <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"processRefund()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Refund submitted\n          </h1>\n          \n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n    \n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n        </p>\n      </div>\n        <p class=\"govuk-body\">\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\"  class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n    <ccpay-service-request\n    [viewStatus] = \"viewStatus\"\n    [orderRef] = \"orderRef\"\n    [orderStatus] = \"orderStatus\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n    [takePayment] = \"takePayment\"\n    [ccdCaseNumber] = \"ccdCaseNumber\">\n  </ccpay-service-request>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'payment-view'\">\n    <ccpay-payment-view \n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n    [isTurnOff] = \"isTurnOff\" \n    [isTakePayment] = \"takePayment\"  \n    [caseType] = \"caseType\"\n    [isOldPcipalOff] = \"isOldPcipalOff\"\n    [isNewPcipalOff] = \"isNewPcipalOff\">\n  </ccpay-payment-view>\n  </ng-container>\n\n</div>\n\n\n\n",
                         styles: [".add-remission .button{padding:.5em;font-size:19px;font-weight:200;margin:20px 2px}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-label--s,.add-remission .govuk-warning-text__text,.add-remission .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:#a71414 solid 3px;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body,.add-remission .govuk-body-m{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .radio,.add-remission .right{float:right}.govuk-input{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.white{color:#fff}.pagesize{margin:2em;width:97%}"]
                     }] }
         ];
@@ -7119,12 +7157,19 @@
             isOldPcipalOff: [{ type: i0.Input }],
             isNewPcipalOff: [{ type: i0.Input }],
             isStrategicFixEnable: [{ type: i0.Input }],
-            orderStatus: [{ type: i0.Input }],
             paidAmount: [{ type: i0.Input }],
             isFromRefundListPage: [{ type: i0.Input }],
             isFromPaymentDetailPage: [{ type: i0.Input }],
             isFromServiceRequestPage: [{ type: i0.Input }],
             feeamount: [{ type: i0.Input }],
+            LOGGEDINUSERROLES: [{ type: i0.Input, args: ['LOGGEDINUSERROLES',] }],
+            orderDetail: [{ type: i0.Input, args: ['orderDetail',] }],
+            orderRef: [{ type: i0.Input, args: ['orderRef',] }],
+            orderStatus: [{ type: i0.Input, args: ['orderStatus',] }],
+            orderParty: [{ type: i0.Input, args: ['orderParty',] }],
+            orderCreated: [{ type: i0.Input, args: ['orderCreated',] }],
+            orderCCDEvent: [{ type: i0.Input, args: ['orderCCDEvent',] }],
+            takePayment: [{ type: i0.Input, args: ['takepayment',] }],
             cancelRemission: [{ type: i0.Output }],
             refundListReason: [{ type: i0.Output }],
             refundListAmount: [{ type: i0.Output }]
@@ -8427,7 +8472,7 @@
         RefundStatusComponent.decorators = [
             { type: i0.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' && 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'] }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell  whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview'\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a  href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n    \n    <tbody>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n  <!-- 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}}</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==='Update required'\">\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      <!-- <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 *ngIf=\"refundlist?.reason === 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n      <td *ngIf=\"refundlist?.reason !== 'Retrospective remission'\" 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</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n  <!-- <div class=\"govuk-button-group\">\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n  </div> -->\n  <!-- <p>\n    <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n  </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === '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 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 href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>",
+                        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'] }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell  whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview'\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a  href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n    \n    <tbody>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n  <!-- 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}}</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==='Update required'\">\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      <!-- <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 *ngIf=\"refundlist?.reason === 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n      <td *ngIf=\"refundlist?.reason !== 'Retrospective remission'\" 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</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n  <!-- <div class=\"govuk-button-group\">\n    <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n      data-module=\"govuk-button\">\n      Submit refund\n    </button>\n  </div> -->\n  <!-- <p>\n    <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n  </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === '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 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 href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" 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}.white{color:#fff}"]
                     }] }
         ];
@@ -8452,6 +8497,432 @@
         return RefundStatusComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ServiceRequestComponent = /** @class */ (function () {
+        function ServiceRequestComponent(paymentLibComponent, paymentViewService, OrderslistService$$1, router$$1) {
+            var _this = this;
+            this.paymentLibComponent = paymentLibComponent;
+            this.paymentViewService = paymentViewService;
+            this.OrderslistService = OrderslistService$$1;
+            this.router = router$$1;
+            this.paymentGroups = [];
+            this.payments = [];
+            this.nonPayments = [];
+            this.allPayments = [];
+            this.remissions = [];
+            this.fees = [];
+            this.isRefundRemission = true;
+            this.isAddFeeBtnEnabled = true;
+            this.isExceptionRecord = false;
+            this.isUnprocessedRecordSelected = false;
+            this.isAnyFeeGroupAvilable = true;
+            this.isHistoricGroupAvailable = false;
+            this.isRemoveBtnDisabled = false;
+            this.clAmountDue = 0;
+            this.isFeeRecordsExist = false;
+            this.isGrpOutstandingAmtPositive = false;
+            this.isAddRemissionEnable = false;
+            this.orderRemissionDetails = [];
+            this.orderLevelFees = [];
+            this.cpoDetails = null;
+            this.orderFeesTotal = 0.00;
+            this.orderRemissionTotal = 0.00;
+            this.orderTotalPayments = 0.00;
+            this.orderPendingPayments = 0.00;
+            this.isPBA = false;
+            this.isIssueRefunfBtnEnable = false;
+            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 {?}
+         */
+        ServiceRequestComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                if (this.viewStatus === undefined) {
+                    this.viewStatus = this.paymentLibComponent.viewName;
+                }
+                // if (this.takePayment) {
+                //   this.paymentLibComponent.TAKEPAYMENT = this.takePayment;
+                // }
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        ServiceRequestComponent.prototype.goToCaseTransationPage = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                event.preventDefault();
+                this.OrderslistService.setnavigationPage('servicerequestpage');
+                this.OrderslistService.setisFromServiceRequestPage(false);
+                this.paymentLibComponent.viewName = 'case-transactions';
+                this.paymentLibComponent.ISBSENABLE = true;
+                // this.paymentLibComponent.isTakePayment = this.paymentLibComponent.TAKEPAYMENT;
+                // if (this.takePayment) {
+                //   this.paymentLibComponent.isTakePayment = this.takePayment;
+                // }
+                this.paymentLibComponent.SERVICEREQUEST = "true";
+                this.paymentLibComponent.isFromServiceRequestPage = false;
+                this.paymentLibComponent.isFromRefundStatusPage = false;
+                this.paymentLibComponent.viewName = 'case-transactions';
+                // this.OrderslistService.setisFromServiceRequestPage(false);
+                // this.OrderslistService.setnavigationPage('servicerequestpage');
+                //  this.OrderslistService.setpaymentPageView({ method: this.payment.method, payment_group_reference: this.paymentGroupRef, reference: this.payment.reference });
+                // this.OrderslistService.setnavigationPage('servicerequestpage');
+                // let partUrl = this.bsPaymentDcnNumber ? `&dcn=${this.bsPaymentDcnNumber}` : '';
+                /** @type {?} */
+                var partUrl = this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
+                partUrl += this.paymentLibComponent.ISTURNOFF ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
+                partUrl += this.paymentLibComponent.TAKEPAYMENT ? '&takePayment=true' : '&takePayment=false';
+                partUrl += this.isStrategicFixEnable ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
+                partUrl += "&caseType=" + this.paymentLibComponent.CASETYPE;
+                partUrl += this.paymentLibComponent.ISNEWPCIPALOFF ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
+                partUrl += this.paymentLibComponent.ISOLDPCIPALOFF ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
+                /** @type {?} */
+                var url = "/payment-history/" + this.paymentLibComponent.CCD_CASE_NUMBER + "?view=case-transactions&selectedOption=" + this.paymentLibComponent.SELECTED_OPTION + partUrl;
+                this.router.routeReuseStrategy.shouldReuseRoute = ( /**
+                 * @return {?}
+                 */function () { return false; });
+                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 {?}
+         */
+        ServiceRequestComponent.prototype.addRemission = /**
+         * @param {?} fee
+         * @return {?}
+         */
+            function (fee) {
+                var _this = this;
+                if (this.chkForAddRemission(fee.code)) {
+                    this.feeId = fee;
+                    this.viewStatus = 'addremission';
+                    this.payment = this.orderDetail[0].payments[0];
+                    this.paymentViewService.getApportionPaymentDetails(this.orderDetail[0].payments[0].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.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.replace(/"/g, ""); }));
+                }
+            };
+        /**
+         * @param {?} payment
+         * @param {?} remission
+         * @param {?} fees
+         * @return {?}
+         */
+        ServiceRequestComponent.prototype.addRefundForRemission = /**
+         * @param {?} payment
+         * @param {?} remission
+         * @param {?} fees
+         * @return {?}
+         */
+            function (payment, remission, fees) {
+                var _this = this;
+                this.viewStatus = 'addrefundforremission';
+                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;
+                    // 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 {?}
+         */
+        ServiceRequestComponent.prototype.cancelRemoval = /**
+         * @return {?}
+         */
+            function () {
+                this.viewStatus = 'main';
+            };
+        /**
+         * @param {?} fee
+         * @return {?}
+         */
+        ServiceRequestComponent.prototype.removeFee = /**
+         * @param {?} fee
+         * @return {?}
+         */
+            function (fee) {
+                var _this = this;
+                this.isRemoveBtnDisabled = true;
+                this.paymentViewService.deleteFeeFromPaymentGroup(fee).subscribe(( /**
+                 * @param {?} success
+                 * @return {?}
+                 */function (success) {
+                    window.location.reload();
+                }), ( /**
+                 * @param {?} error
+                 * @return {?}
+                 */function (error) {
+                    _this.errorMessage = error;
+                    _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 {?}
+         */
+        ServiceRequestComponent.prototype.issueRefund = /**
+         * @param {?} payment
+         * @return {?}
+         */
+            function (payment) {
+                if (payment !== null && payment !== undefined) {
+                    if (this.chkIssueRefundBtnEnable(payment)) {
+                        this.viewStatus = 'issuerefund';
+                        this.payment = payment;
+                        this.paymentLibComponent.isFromServiceRequestPage = true;
+                        this.isRefundRemission = true;
+                    }
+                }
+            };
+        /**
+         * @param {?} paymentGroupReference
+         * @param {?} paymentReference
+         * @param {?} paymentMethod
+         * @return {?}
+         */
+        ServiceRequestComponent.prototype.goToPayementView = /**
+         * @param {?} paymentGroupReference
+         * @param {?} paymentReference
+         * @param {?} paymentMethod
+         * @return {?}
+         */
+            function (paymentGroupReference, paymentReference, paymentMethod) {
+                this.goToPaymentViewComponent({ paymentGroupReference: paymentGroupReference, paymentReference: paymentReference, paymentMethod: paymentMethod });
+            };
+        /**
+         * @param {?} paymentGroup
+         * @return {?}
+         */
+        ServiceRequestComponent.prototype.goToPaymentViewComponent = /**
+         * @param {?} paymentGroup
+         * @return {?}
+         */
+            function (paymentGroup) {
+                this.paymentLibComponent.paymentMethod = paymentGroup.paymentMethod;
+                this.paymentLibComponent.paymentGroupReference = paymentGroup.paymentGroupReference;
+                this.paymentLibComponent.paymentReference = paymentGroup.paymentReference;
+                this.paymentLibComponent.viewName = 'payment-view';
+            };
+        ServiceRequestComponent.decorators = [
+            { type: i0.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\">\n          <a href=\"javascript:void(0)\" (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 alignright\">\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  <!-- <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 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]=\"!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 *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] = \"!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 \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=\"((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\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"></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\"></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\"></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>",
+                        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}.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%}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        ServiceRequestComponent.ctorParameters = function () {
+            return [
+                { type: PaymentLibComponent },
+                { type: PaymentViewService },
+                { type: OrderslistService },
+                { type: router.Router }
+            ];
+        };
+        ServiceRequestComponent.propDecorators = {
+            LOGGEDINUSERROLES: [{ type: i0.Input, args: ['LOGGEDINUSERROLES',] }],
+            viewStatus: [{ type: i0.Input, args: ['viewStatus',] }],
+            orderDetail: [{ type: i0.Input, args: ['orderDetail',] }],
+            orderRef: [{ type: i0.Input, args: ['orderRef',] }],
+            orderStatus: [{ type: i0.Input, args: ['orderStatus',] }],
+            orderParty: [{ type: i0.Input, args: ['orderParty',] }],
+            orderCreated: [{ type: i0.Input, args: ['orderCreated',] }],
+            orderCCDEvent: [{ type: i0.Input, args: ['orderCCDEvent',] }],
+            takePayment: [{ type: i0.Input }],
+            ccdCaseNumber: [{ type: i0.Input, args: ['ccdCaseNumber',] }]
+        };
+        return ServiceRequestComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -8499,7 +8970,8 @@
                             ReportsComponent,
                             ErrorBannerComponent,
                             TableComponent,
-                            RefundStatusComponent
+                            RefundStatusComponent,
+                            ServiceRequestComponent
                         ],
                         exports: [PaymentLibComponent],
                         providers: [
@@ -8542,6 +9014,7 @@
     exports.ɵk = RefundListComponent;
     exports.ɵbj = RefundStatusComponent;
     exports.ɵbf = ReportsComponent;
+    exports.ɵbk = ServiceRequestComponent;
     exports.ɵo = StatusHistoryComponent;
     exports.ɵbi = TableComponent;
     exports.ɵt = UnprocessedPaymentsComponent;
@@ -8558,7 +9031,7 @@
     exports.ɵj = RefundsService;
     exports.ɵe = ErrorHandlerService;
     exports.ɵh = WebComponentHttpClient;
-    exports.ɵbk = ConsoleLoggerService;
+    exports.ɵbl = ConsoleLoggerService;
     exports.ɵd = LoggerService;
     exports.ɵp = StatusHistoryService;
     exports.ɵbg = XlFileService;