@hmcts/ccpay-web-component 5.0.2-beta3 → 5.0.2-beta8

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

@@ -83,6 +83,26 @@ var PaymentLibService = /** @class */ (function () {
     function () {
         return this.REFUNDS_API_ROOT;
     };
+    /**
+     * @param {?} notificationapiRoot
+     * @return {?}
+     */
+    PaymentLibService.prototype.setNoticationApiRootUrl = /**
+     * @param {?} notificationapiRoot
+     * @return {?}
+     */
+    function (notificationapiRoot) {
+        this.NOTIFICATION_API_ROOT = notificationapiRoot;
+    };
+    /**
+     * @return {?}
+     */
+    PaymentLibService.prototype.getNoticationApiRootUrl = /**
+     * @return {?}
+     */
+    function () {
+        return this.NOTIFICATION_API_ROOT;
+    };
     /**
      * @param {?} cardPaymentReturnUrl
      * @return {?}
@@ -558,6 +578,7 @@ var PaymentLibComponent = /** @class */ (function () {
         this.paymentLibService.setApiRootUrl(this.API_ROOT);
         this.paymentLibService.setBulkScanApiRootUrl(this.BULKSCAN_API_ROOT);
         this.paymentLibService.setRefundndsApiRootUrl(this.REFUNDS_API_ROOT);
+        this.paymentLibService.setNoticationApiRootUrl(this.NOTIFICATION_API_ROOT);
         this.paymentLibService.setCardPaymentReturnUrl(this.CARDPAYMENTRETURNURL);
         if (this.LOGGEDINUSERROLES.length > 0) {
             this.OrderslistService.setUserRolesList(this.LOGGEDINUSERROLES);
@@ -601,6 +622,7 @@ var PaymentLibComponent = /** @class */ (function () {
         API_ROOT: [{ type: Input, args: ['API_ROOT',] }],
         BULKSCAN_API_ROOT: [{ type: Input, args: ['BULKSCAN_API_ROOT',] }],
         REFUNDS_API_ROOT: [{ type: Input, args: ['REFUNDS_API_ROOT',] }],
+        NOTIFICATION_API_ROOT: [{ type: Input, args: ['NOTIFICATION_API_ROOT',] }],
         CARDPAYMENTRETURNURL: [{ type: Input, args: ['CARDPAYMENTRETURNURL',] }],
         CCD_CASE_NUMBER: [{ type: Input, args: ['CCD_CASE_NUMBER',] }],
         EXC_REFERENCE: [{ type: Input, args: ['EXC_REFERENCE',] }],
@@ -993,7 +1015,7 @@ var WebComponentHttpClient = /** @class */ (function () {
              * @param {?} row
              * @return {?}
              */
-            function (row) { return row.startsWith('XSRF-TOKEN'); })) !== undefined) {
+            function (row) { return row.startsWith('XSRF-TOKEN'); })).split('=')[1] !== undefined) {
                 headers['CSRF-Token'] = document.cookie.split(';').find((/**
                  * @param {?} row
                  * @return {?}
@@ -1378,6 +1400,7 @@ var PaymentViewComponent = /** @class */ (function () {
         this.isIssueRefunfBtnEnable = false;
         this.allowedRolesToAccessRefund = ['payments-refund-approver', 'payments-refund'];
         this.remissions = [];
+        this.isContinueBtnDisabled = true;
         this.check4AllowedRoles2AccessRefund = (/**
          * @return {?}
          */
@@ -1455,6 +1478,7 @@ var PaymentViewComponent = /** @class */ (function () {
                 }
             }));
             paymentGroup.fees = fees;
+            _this.paymentFees = fees;
             _this.paymentGroup = paymentGroup;
             _this.paymentGroup.payments = _this.paymentGroup.payments.filter((/**
              * @param {?} paymentGroupObj
@@ -1499,19 +1523,6 @@ var PaymentViewComponent = /** @class */ (function () {
     function () {
         this.paymentLibComponent.viewName = 'payment-list';
     };
-    /**
-     * @return {?}
-     */
-    PaymentViewComponent.prototype.goToServiceRequestPage = /**
-     * @return {?}
-     */
-    function () {
-        this.paymentLibComponent.viewName = 'case-transactions';
-        this.paymentLibComponent.TAKEPAYMENT = false;
-        this.paymentLibComponent.SERVICEREQUEST = 'true';
-        this.paymentLibComponent.isFromServiceRequestPage = true;
-        window.location.reload();
-    };
     /**
      * @param {?} event
      * @return {?}
@@ -1523,9 +1534,6 @@ var PaymentViewComponent = /** @class */ (function () {
     function (event) {
         var _this = this;
         event.preventDefault();
-        if (this.isServiceRequest !== 'false') {
-            this.paymentLibComponent.isFromServiceRequestPage = true;
-        }
         if (!this.paymentLibComponent.isFromServiceRequestPage) {
             this.OrderslistService.setnavigationPage('casetransactions');
             this.OrderslistService.setisFromServiceRequestPage(false);
@@ -1587,7 +1595,7 @@ var PaymentViewComponent = /** @class */ (function () {
      */
     function (fee) {
         var _this = this;
-        if (this.chkForAddRemission(fee.code)) {
+        if (this.chkForAddRemission(fee.code, fee.id)) {
             this.feeId = fee;
             this.paymentViewService.getApportionPaymentDetails(this.paymentGroup.payments[0].reference).subscribe((/**
              * @param {?} paymentGroup
@@ -1628,6 +1636,29 @@ var PaymentViewComponent = /** @class */ (function () {
         }
         return false;
     };
+    /**
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.processRefund = /**
+     * @return {?}
+     */
+    function () {
+    };
+    /**
+     * @param {?=} note
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.gotoAddressPage = /**
+     * @param {?=} note
+     * @return {?}
+     */
+    function (note) {
+        if (note) {
+            this.notification = { contact_details: note, notification_type: note.notification_type };
+        }
+        this.errorMessage = '';
+        this.viewCompStatus = 'overPaymentAddressCapture';
+    };
     /**
      * @param {?} payment
      * @param {?} remission
@@ -1708,13 +1739,18 @@ var PaymentViewComponent = /** @class */ (function () {
      */
     function (paymentgrp) {
         if (paymentgrp !== null && paymentgrp !== undefined) {
-            if (this.chkIssueRefundBtnEnable(paymentgrp.payments[0])) {
-                this.paymentGroup = paymentgrp;
-                this.viewStatus = 'issuerefund';
-                this.isRefundRemission = true;
-                this.paymentLibComponent.isFromPaymentDetailPage = true;
-                this.isFromPaymentDetailPage = true;
-                this.isFromServiceRequestPage = this.paymentLibComponent.isFromServiceRequestPage;
+            if (paymentgrp.fees[0].over_payment > 0) {
+                this.viewCompStatus = 'overpayment';
+            }
+            else {
+                if (this.chkIssueRefundBtnEnable(paymentgrp.payments[0])) {
+                    this.paymentGroup = paymentgrp;
+                    this.viewStatus = 'issuerefund';
+                    this.isRefundRemission = true;
+                    this.paymentLibComponent.isFromPaymentDetailPage = true;
+                    this.isFromPaymentDetailPage = true;
+                    this.isFromServiceRequestPage = this.paymentLibComponent.isFromServiceRequestPage;
+                }
             }
         }
     };
@@ -1787,20 +1823,22 @@ var PaymentViewComponent = /** @class */ (function () {
     };
     /**
      * @param {?} feeCode
+     * @param {?} feeId
      * @return {?}
      */
     PaymentViewComponent.prototype.chkForAddRemission = /**
      * @param {?} feeCode
+     * @param {?} feeId
      * @return {?}
      */
-    function (feeCode) {
+    function (feeCode, feeId) {
         var e_2, _a;
         if (this.chkForPBAPayment() && this.check4AllowedRoles2AccessRefund() && this.allowFurtherAccessAfter4Days(this.paymentGroup.payments[0])) {
             if (this.paymentGroup.remissions && this.paymentGroup.remissions.length > 0) {
                 try {
                     for (var _b = __values(this.paymentGroup.remissions), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var remission = _c.value;
-                        if (remission.fee_code === feeCode) {
+                        if (remission.fee_code === feeCode && remission.fee_id === feeId) {
                             return false;
                         }
                     }
@@ -1820,6 +1858,52 @@ var PaymentViewComponent = /** @class */ (function () {
             return false;
         }
     };
+    /**
+     * @param {?} paymentType
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.selectPymentOption = /**
+     * @param {?} paymentType
+     * @return {?}
+     */
+    function (paymentType) {
+        this.paymentType = paymentType;
+        this.isContinueBtnDisabled = false;
+    };
+    /**
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.continuePayment = /**
+     * @return {?}
+     */
+    function () {
+        if (this.paymentType === 'op') ;
+        else if (this.paymentType === 'fp') ;
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.gotoPaymentSelectPage = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        event.preventDefault();
+        this.viewCompStatus = 'overpayment';
+    };
+    /**
+     * @param {?} obj
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.getContactDetails = /**
+     * @param {?} obj
+     * @return {?}
+     */
+    function (obj) {
+        this.contactDetailsObj = obj;
+        this.viewCompStatus = 'overpaymentcheckandanswer';
+    };
     /**
      * @return {?}
      */
@@ -1839,7 +1923,7 @@ var PaymentViewComponent = /** @class */ (function () {
     PaymentViewComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-payment-view',
-                    template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Payment details could not be retrieved\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n     \n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Service request reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td> \n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td class=\"tb-col-w\">{{  paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Banked date</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">Allocaton status</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n          \n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA number</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">Customer internal reference</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n      \n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!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          <br/>\n          <br/>\n          <h2 class=\"heading-large\">Fee and remission details</h2>\n        \n        </div>\n      </div>\n    \n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Description</td>\n            <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n        \n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\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\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [isOldPcipalOff]=\"isOldPcipalOff\" \n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [isNewPcipalOff]=\"isNewPcipalOff\" \n    [orderStatus] =\"paymentGroup.payments[0].status\"\n    [paidAmount]= \"paymentGroup.payments[0].amount\"\n    [isRefundRemission]=\"isRefundRemission\"\n    [caseType]=\"caseType\" \n    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n\n\n\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n    <div class=\"govuk-width-container\">\n        <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a href=\"#\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n            </li>\n          </ol>\n        </div>\n      \n        <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n      \n          <div *ngIf=\"errorMessage\">\n            <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n              <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n                Payment details could not be retrieved\n              </h2>\n              <div class=\"govuk-error-summary__body\">\n                {{ errorMessage }}\n              </div>\n            </div>\n          </div>\n      \n          <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup\">\n      \n            <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n            <div class=\"govuk-grid-row\">\n              <div class=\"column\">\n                <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n              </div>\n            </div>\n            <table>\n              <tbody>\n            <tr class=\"section\" *ngIf=\"isTurnOff\">\n                <td class=\"bold tb-col-w\">Payment group reference</td>\n                <td>{{ paymentGroup.payment_group_reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment reference</td>\n                <td>{{ paymentGroup.payments[0].reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment amount</td>\n                <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</td>\n              </tr>\n              <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].external_reference\">\n                <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n                <td>{{ paymentGroup.payments[0].external_reference }}</td>\n              </tr>\n              <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n                <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n                <td>{{ paymentGroup.payments[0].document_control_number }}</td>\n              </tr>\n              <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n                <td class=\"bold tb-col-w\">Banked date</td>\n                <td>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n              </tr>\n              </tbody>\n            </table>\n      \n            <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n              <div class=\"column\">\n                <h2 class=\"heading-large\">Fee and remission details</h2>\n              </div>\n            </div>\n      \n            <div *ngFor=\"let fee of paymentGroup.fees\">\n              <table class=\"table\">\n                <tbody>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\">Description</td>\n                  <td>Application for {{ fee.description }}</td>\n                </tr>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\">Fee code</td>\n                  <td>{{ fee.code }}</td>\n                </tr>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">\u00A3{{ fee.calculated_amount | number:'.2' }}</td>\n                </tr>\n                <tr *ngIf=\"fee.net_amount && isTurnOff\">\n                  <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n                </tr>\n                <tr *ngIf=\"fee.apportion_amount\">\n                  <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee.apportion_amount | number:'.2' }}</td>\n                </tr>\n      \n                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w\">Remission code</td>\n                  <td>{{fee.remissions.hwf_reference}}</td>\n                </tr>\n                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n                  <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n                </tr>\n                </tbody>\n              </table>\n      \n            </div>\n      \n            <!-- card details -->\n            <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n       -->\n            <!-- pba details -->\n            <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n            <!-- Status histories -->\n            <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n      \n          </div>\n      \n        </main>\n      </div> -->\n<!-- </ng-container> --> \n",
+                    template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Payment details could not be retrieved\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n     \n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Service request reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td> \n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td class=\"tb-col-w\">{{  paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Banked date</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">Allocaton status</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n          \n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA number</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">Customer internal reference</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n      \n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!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          <br/>\n          <br/>\n          <h2 class=\"heading-large\">Fee and remission details</h2>\n        \n        </div>\n      </div>\n    \n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Description</td>\n            <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n        \n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkForAddRemission(fee.code, fee.id)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\n\n           \n        <!-- <button  *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n             -->\n\n      </div>\n\n                <!-- remissions -->\n                <div class=\"order-class\">\n                  <div class=\"column\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n            <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\"  *ngFor=\"let remission of paymentGroup.remissions\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n            <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n               <button  [disabled]=\"!paymentGroup.payments[0].refund_enable\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n            <!-- <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n             \n          </td> -->\n          </tr>\n      </tbody>\n      \n\n    </table>\n                  </div></div>\n    \n   <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n      <span class=\"mar-17\" >No help with fees or remissions.</span>\n   </div>\n   \n  </div>\n\n\n\n      <!-- card details -->\n      <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n      <!-- pba details -->\n      <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n  \n\n    </div>\n\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [isOldPcipalOff]=\"isOldPcipalOff\" \n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [isNewPcipalOff]=\"isNewPcipalOff\" \n    [orderStatus] =\"paymentGroup.payments[0].status\"\n    [paidAmount]= \"paymentGroup.payments[0].amount\"\n    [isRefundRemission]=\"isRefundRemission\"\n    [caseType]=\"caseType\" \n    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [fees] =\"paymentFees\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n    \n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n  <h1 class=\"heading-large\">Issue refund</h1>\n  <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n  <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n    Payment reference: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <b>\n        Select payment to refund\n      </b>\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"where-do-you-live\">\n          Over payment \u00A3{{paymentGroup?.fees[0]?.over_payment | number:'.2'}}\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"full-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"where-do-you-live-2\">\n          Full payment \u00A3{{paymentGroup?.fees[0]?.net_amount | number:'.2'}}\n        </label>\n      </div>\n    </div>\n      <button class=\"govuk-button govuk-button--secondary\"> Previous</button>\n      <button \n      (click)=\"continuePayment()\"\n      [disabled]=\"isContinueBtnDisabled\"\n      [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      class=\"govuk-button\"> Continue</button>\n  </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>      \n  <h1 class=\"govuk-heading-l\">Issue refund</h1>\n  <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n  <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n    Payment reference: {{paymentGroup?.payments[0]?.reference}}\n  </span>\n<ccpay-contact-details \n[addressObj] = contactDetailsObj\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n    <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n        Cancel\n    </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n  <div class=\"govuk-warning-text\">\n   \n      <h1 class=\"heading-large\"> Check your answers</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\"> {{paymentGroup.payments[0].reference}} </td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n          <td class=\"govuk-table__cell\">{{paymentGroup.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n          <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n          <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.over_payment | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reason</td>\n          <td class=\"govuk-table__cell\">Over payment</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n        <td class=\"govuk-table__cell\">{{orderParty}}</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n      <td class=\"govuk-table__cell\">\n        <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n          <strong>Email</strong>\n          <br/>\n          {{contactDetailsObj?.email}}\n        </div>\n        <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n          <strong>Post</strong>\n          <br/>\n          {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\n        </div>\n        <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right margin-top--size\" >Change</a>\n    </td>\n  </table>\n  <div class=\"govuk-button-group\">\n  <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n  <button type=\"submit\"\n  class=\"button govuk-!-margin-right-1\"\n  (click)=\"processRefund()\">\n    Submit refund\n  </button>\n  </div>\n  <p>\n      <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>",
                     styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:19px;float:left;margin-top:2em}.remission{margin-bottom:7em}.govuk-error-summary__title{font-size:24px!important}.govuk-table__cell,.govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}.text-transform::first-letter{text-transform:capitalize}.govuk-link{cursor:pointer}.mar-17{font-size:19px!important}"]
                 }] }
     ];
@@ -1866,8 +1950,7 @@ var PaymentViewComponent = /** @class */ (function () {
         orderCCDEvent: [{ type: Input }],
         orderFeesTotal: [{ type: Input }],
         orderRemissionTotal: [{ type: Input }],
-        orderDetail: [{ type: Input }],
-        isServiceRequest: [{ type: Input, args: ["isServiceRequest",] }]
+        orderDetail: [{ type: Input }]
     };
     return PaymentViewComponent;
 }());
@@ -2006,6 +2089,21 @@ var RefundsService = /** @class */ (function () {
     function (body) {
         return this.https.post(this.paymentLibService.REFUNDS_API_ROOT + "/refund", body).pipe(catchError(this.errorHandlerService.handleError));
     };
+    /**
+     * @param {?} body
+     * @param {?} refundRef
+     * @param {?} notificationType
+     * @return {?}
+     */
+    RefundsService.prototype.putResendOrEdit = /**
+     * @param {?} body
+     * @param {?} refundRef
+     * @param {?} notificationType
+     * @return {?}
+     */
+    function (body, refundRef, notificationType) {
+        return this.https.put(this.paymentLibService.REFUNDS_API_ROOT + "/resend/notification/" + refundRef + "?notificationType=" + notificationType, body).pipe(catchError(this.errorHandlerService.handleError));
+    };
     /**
      * @param {?} body
      * @param {?} refund_reference
@@ -2048,7 +2146,7 @@ var RefundsService = /** @class */ (function () {
              * @param {?} row
              * @return {?}
              */
-            function (row) { return row.startsWith('XSRF-TOKEN'); })) !== undefined) {
+            function (row) { return row.startsWith('XSRF-TOKEN'); })).split('=')[1] !== undefined) {
                 headers['CSRF-Token'] = document.cookie.split(';').find((/**
                  * @param {?} row
                  * @return {?}
@@ -2092,8 +2190,9 @@ var RefundsService = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var ProcessRefundComponent = /** @class */ (function () {
-    function ProcessRefundComponent(RefundsService$$1, formBuilder, OrderslistService$$1, paymentLibComponent, router, activeRoute) {
+    function ProcessRefundComponent(RefundsService$$1, paymentViewService, formBuilder, OrderslistService$$1, paymentLibComponent, router, activeRoute) {
         this.RefundsService = RefundsService$$1;
+        this.paymentViewService = paymentViewService;
         this.formBuilder = formBuilder;
         this.OrderslistService = OrderslistService$$1;
         this.paymentLibComponent = paymentLibComponent;
@@ -2116,6 +2215,7 @@ var ProcessRefundComponent = /** @class */ (function () {
         this.isReasonEmpty = false;
         this.isReasonInvalid = false;
         this.successMsg = null;
+        this.cpoDetails = null;
         this.isConfirmButtondisabled = true;
     }
     /**
@@ -2160,6 +2260,20 @@ var ProcessRefundComponent = /** @class */ (function () {
             ])),
         });
         this.ccdCaseNumber = this.refundlistsource.ccd_case_number;
+        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;
+        }));
         if ((typeof this.paymentLibComponent.TAKEPAYMENT === 'string' && this.paymentLibComponent.TAKEPAYMENT === 'false') || (typeof this.paymentLibComponent.TAKEPAYMENT === 'boolean' && !this.paymentLibComponent.TAKEPAYMENT)) {
             this.isFromRefundListPage = true;
         }
@@ -2514,13 +2628,14 @@ var ProcessRefundComponent = /** @class */ (function () {
     ProcessRefundComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-process-refund',
-                    template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <div *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 *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n  <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n  </div>\n \n\n  </main>\n \n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row\">\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 pointer\">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\">Sent to</td>\n          <td>{{cpoDetails?.responsibleParty}}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Sent via</td>\n          <td>\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.email}}\n          </div>\n          <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{refundlistsource?.contact_details?.address_line}} {{refundlistsource?.contact_details?.city}} {{refundlistsource?.contact_details?.county}} {{refundlistsource?.contact_details?.country}} {{refundlistsource?.contact_details?.postal_code}}\n          </div> \n          </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 *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n  <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n  </div>\n \n\n  </main>\n \n  <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n    <div class=\"govuk-grid-row\">\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 pointer\">Return to case</a>\n        </p>\n      </div>\n  </main>\n</div>\n</ng-container>\n\n",
                     styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:#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}.pointer{cursor:pointer}"]
                 }] }
     ];
     /** @nocollapse */
     ProcessRefundComponent.ctorParameters = function () { return [
         { type: RefundsService },
+        { type: PaymentViewService },
         { type: FormBuilder },
         { type: OrderslistService },
         { type: PaymentLibComponent },
@@ -2830,182 +2945,586 @@ var StatusHistoryComponent = /** @class */ (function () {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var PbaDetailsComponent = /** @class */ (function () {
-    function PbaDetailsComponent() {
-    }
-    /**
-     * @return {?}
-     */
-    PbaDetailsComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-    };
-    PbaDetailsComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'ccpay-pba-details',
-                    template: "\n  <h2 class=\"heading-large\">Payment method</h2>\n  <table>\n    <tbody>\n    <tr>\n      <td class=\"bold tb-col-w\">Method</td>\n      <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n    </tr>\n    <tr>\n      <td class=\"bold tb-col-w\">Type</td>\n      <td>Credit</td>\n    </tr>\n    <tr *ngIf=\"payment.organisation_name\">\n      <td class=\"bold tb-col-w\">PBA account name</td>\n      <td>{{ payment.organisation_name }}</td>\n    </tr>\n    <tr *ngIf=\"payment.account_number\">\n      <td class=\"bold tb-col-w\">PBA number</td>\n      <td>{{ payment.account_number }}</td>\n    </tr>\n    <tr *ngIf=\"payment.customer_reference\">\n      <td class=\"bold tb-col-w\">Customer internal reference</td>\n      <td>{{ payment.customer_reference }}</td>\n    </tr>\n    </tbody>\n  </table>\n",
-                    styles: [".capitalize::first-letter{text-transform:uppercase}.tb-col-w{width:330px}"]
-                }] }
-    ];
-    /** @nocollapse */
-    PbaDetailsComponent.ctorParameters = function () { return []; };
-    PbaDetailsComponent.propDecorators = {
-        payment: [{ type: Input }]
-    };
-    return PbaDetailsComponent;
-}());
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-var noop$1 = (/**
- * @return {?}
- */
-function () { return undefined; });
-var ConsoleLoggerService = /** @class */ (function () {
-    function ConsoleLoggerService() {
+var NotificationService = /** @class */ (function () {
+    function NotificationService(http, https, errorHandlerService, paymentLibService) {
+        this.http = http;
+        this.https = https;
+        this.errorHandlerService = errorHandlerService;
+        this.paymentLibService = paymentLibService;
     }
-    Object.defineProperty(ConsoleLoggerService.prototype, "info", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            {
-                return noop$1;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ConsoleLoggerService.prototype, "warn", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            {
-                return noop$1;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ConsoleLoggerService.prototype, "error", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            {
-                return noop$1;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
     /**
-     * @param {?} type
-     * @param {?=} args
+     * @param {?} reference
      * @return {?}
      */
-    ConsoleLoggerService.prototype.invokeConsoleMethod = /**
-     * @param {?} type
-     * @param {?=} args
+    NotificationService.prototype.getRefundNotification = /**
+     * @param {?} reference
      * @return {?}
      */
-    function (type, args) {
-        /** @type {?} */
-        var logFn = (console)[type] || console.log || noop$1;
-        logFn.apply(console, [args]);
+    function (reference) {
+        return this.http.get(this.paymentLibService.NOTIFICATION_API_ROOT + "/notifications/" + reference, {
+            withCredentials: true
+        })
+            .pipe(catchError(this.errorHandlerService.handleError));
     };
-    ConsoleLoggerService.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */ ConsoleLoggerService.ngInjectableDef = defineInjectable({ factory: function ConsoleLoggerService_Factory() { return new ConsoleLoggerService(); }, token: ConsoleLoggerService, providedIn: "root" });
-    return ConsoleLoggerService;
-}());
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var CaseTransactionsService = /** @class */ (function () {
-    function CaseTransactionsService(http, logger, errorHandlerService, paymentLibService) {
-        this.http = http;
-        this.logger = logger;
-        this.errorHandlerService = errorHandlerService;
-        this.paymentLibService = paymentLibService;
-    }
     /**
-     * @param {?} ccdCaseNumber
+     * @param {?} postcode
      * @return {?}
      */
-    CaseTransactionsService.prototype.getPaymentGroups = /**
-     * @param {?} ccdCaseNumber
+    NotificationService.prototype.getAddressByPostcode = /**
+     * @param {?} postcode
      * @return {?}
      */
-    function (ccdCaseNumber) {
-        this.logger.info('Case-transactions-service getPaymentGroups for: ', ccdCaseNumber);
-        return this.http.get(this.paymentLibService.API_ROOT + "/cases/" + ccdCaseNumber + "/paymentgroups", {
+    function (postcode) {
+        return this.http.get(this.paymentLibService.NOTIFICATION_API_ROOT + "/search/places/v1/postcode?postcode=" + postcode, {
             withCredentials: true
         })
             .pipe(catchError(this.errorHandlerService.handleError));
     };
-    CaseTransactionsService.decorators = [
+    NotificationService.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
                 },] }
     ];
     /** @nocollapse */
-    CaseTransactionsService.ctorParameters = function () { return [
+    NotificationService.ctorParameters = function () { return [
         { type: HttpClient },
-        { type: LoggerService },
+        { type: WebComponentHttpClient },
         { type: ErrorHandlerService },
         { type: PaymentLibService }
     ]; };
-    /** @nocollapse */ CaseTransactionsService.ngInjectableDef = defineInjectable({ factory: function CaseTransactionsService_Factory() { return new CaseTransactionsService(inject(HttpClient), inject(LoggerService), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: CaseTransactionsService, providedIn: "root" });
-    return CaseTransactionsService;
+    /** @nocollapse */ NotificationService.ngInjectableDef = defineInjectable({ factory: function NotificationService_Factory() { return new NotificationService(inject(HttpClient), inject(WebComponentHttpClient), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: NotificationService, providedIn: "root" });
+    return NotificationService;
 }());
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var BulkScaningPaymentService = /** @class */ (function () {
-    function BulkScaningPaymentService(http, https, errorHandlerService, paymentLibService) {
-        this.http = http;
-        this.https = https;
-        this.errorHandlerService = errorHandlerService;
-        this.paymentLibService = paymentLibService;
+var ContactDetailsComponent = /** @class */ (function () {
+    function ContactDetailsComponent(formBuilder, notificationService, paymentLibComponent) {
+        this.formBuilder = formBuilder;
+        this.notificationService = notificationService;
+        this.paymentLibComponent = paymentLibComponent;
+        this.assignContactDetails = new EventEmitter();
+        this.redirectToIssueRefund = new EventEmitter();
+        this.pageTitle = 'Payment status history';
+        this.isEmailSAddressClicked = true;
+        this.isShowPickAddress = false;
+        this.isPostcodeClicked = false;
+        this.isManualAddressClicked = false;
+        this.addressPostcodeList = [];
+        this.isAddressBoxEmpty = false;
+        this.isEmailEmpty = false;
+        this.emailHasError = false;
+        this.isPostcodeEmpty = false;
+        this.postcodeHasError = false;
+        this.isaddressLine1Empty = false;
+        this.addressLine1HasError = false;
+        this.addressLine2HasError = false;
+        this.isTownOrCityEmpty = false;
+        this.townOrCityHasError = false;
+        this.isCountyEmpty = false;
+        this.countyHasError = false;
+        this.isMPostcodeEmpty = false;
+        this.mpostcodeHasError = false;
+        this.isCountryEmpty = false;
     }
     /**
-     * @param {?} ccdCaseNumber
-     * @return {?}
-     */
-    BulkScaningPaymentService.prototype.getBSPaymentsByCCD = /**
-     * @param {?} ccdCaseNumber
-     * @return {?}
-     */
-    function (ccdCaseNumber) {
-        return this.http.get(this.paymentLibService.BULKSCAN_API_ROOT + "/cases/" + ccdCaseNumber, {
-            withCredentials: true
-        })
-            .pipe(catchError(this.errorHandlerService.handleError));
-    };
-    /**
-     * @param {?} dcn
      * @return {?}
      */
-    BulkScaningPaymentService.prototype.getBSPaymentsByDCN = /**
-     * @param {?} dcn
+    ContactDetailsComponent.prototype.ngOnInit = /**
      * @return {?}
      */
-    function (dcn) {
-        return this.http.get(this.paymentLibService.BULKSCAN_API_ROOT + "/cases?document_control_number=" + dcn, {
-            withCredentials: true
+    function () {
+        this.resetForm([false, false, false, false, false, false, false, false, false, false, false, false, false, false], 'all');
+        this.emailAddressForm = this.formBuilder.group({
+            email: new FormControl('', Validators.compose([
+                Validators.required,
+                Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9-]+\\.[a-z]{2,4}$')
+            ]))
+        });
+        this.postCodeForm = this.formBuilder.group({
+            postcode: new FormControl('', Validators.compose([
+                Validators.required,
+                Validators.pattern('^([A-Z]{1,2}[0-9]{1,2}[A-Z]{0,1} ?[0-9][A-Z]{2})')
+            ]))
+        });
+        this.manualAddressForm = this.formBuilder.group({
+            addressl1: new FormControl('', Validators.compose([
+                Validators.required,
+                Validators.pattern('^[a-zA-Z0-9\\s,\'-]*$')
+            ])),
+            addressl2: new FormControl('', Validators.compose([
+                Validators.pattern('^[a-zA-Z0-9\\s,\'-]*$')
+            ])),
+            townorcity: new FormControl('', Validators.compose([
+                Validators.required,
+                Validators.pattern('^[a-zA-Z0-9\\s,\'-]*$')
+            ])),
+            county: new FormControl('', Validators.compose([
+                Validators.pattern('^[a-zA-Z0-9\\s,\'-]*$')
+            ])),
+            mpostcode: new FormControl('', Validators.compose([
+                Validators.required,
+                Validators.pattern('^([A-Z]{1,2}[0-9]{1,2}[A-Z]{0,1} ?[0-9][A-Z]{2})')
+            ])),
+            country: new FormControl('', Validators.compose([
+                Validators.required
+            ]))
+        });
+        if (this.addressObj !== undefined && this.addressObj !== '') {
+            this.setEditDetails();
+        }
+    };
+    /**
+     * @return {?}
+     */
+    ContactDetailsComponent.prototype.setEditDetails = /**
+     * @return {?}
+     */
+    function () {
+        if (this.addressObj.notification_type === 'EMAIL') {
+            this.isEmailSAddressClicked = true;
+            this.isPostcodeClicked = false;
+            this.isManualAddressClicked = false;
+            this.emailAddressForm.setValue({ email: this.addressObj.contact_details.email });
+        }
+        else if (this.addressObj.notification_type === 'LETTER') {
+            this.isEmailSAddressClicked = false;
+            this.isPostcodeClicked = true;
+            this.isManualAddressClicked = true;
+            this.manualAddressForm.patchValue({
+                addressl1: this.addressObj.contact_details.address_line,
+                townorcity: this.addressObj.contact_details.city,
+                county: this.addressObj.contact_details.county,
+                country: this.addressObj.contact_details.country,
+                mpostcode: this.addressObj.contact_details.postal_code
+            });
+        }
+    };
+    /**
+     * @param {?} type
+     * @param {?} isLinkedClied
+     * @return {?}
+     */
+    ContactDetailsComponent.prototype.selectContactOption = /**
+     * @param {?} type
+     * @param {?} isLinkedClied
+     * @return {?}
+     */
+    function (type, isLinkedClied) {
+        this.resetForm([false, false, false, false, false, false, false, false, false, false, false, false, false, false, false], 'all');
+        if (type === 'Email' && isLinkedClied === 'false') {
+            this.isEmailSAddressClicked = true;
+            this.isPostcodeClicked = false;
+            this.isManualAddressClicked = false;
+        }
+        else if (type === 'Postcode' && isLinkedClied === 'false') {
+            this.isEmailSAddressClicked = false;
+            this.isPostcodeClicked = true;
+            this.isManualAddressClicked = false;
+        }
+        else if (type === 'Postcode' && isLinkedClied === 'true') {
+            this.isEmailSAddressClicked = false;
+            this.isPostcodeClicked = true;
+            this.isManualAddressClicked = true;
+        }
+    };
+    /**
+     * @return {?}
+     */
+    ContactDetailsComponent.prototype.finalFormSubmit = /**
+     * @return {?}
+     */
+    function () {
+        this.resetForm([false, false, false, false, false, false, false, false, false, false, false, false, false, false, false], 'all');
+        if (this.isEmailSAddressClicked) {
+            /** @type {?} */
+            var emailField = this.emailAddressForm.controls.email;
+            if (this.emailAddressForm.valid) {
+                this.assignContactDetails.emit({
+                    email: emailField.value,
+                    notification_type: 'EMAIL'
+                });
+            }
+            else {
+                if (emailField.value == '') {
+                    this.resetForm([true, false, false, false, false, false, false, false, false, false, false, false, false, false], 'email');
+                }
+                if (emailField.value != '' && emailField.invalid) {
+                    this.resetForm([false, true, false, false, false, false, false, false, false, false, false, false, false, false], 'email');
+                }
+            }
+        }
+        else if (this.isPostcodeClicked && !this.isManualAddressClicked) {
+            this.postcodeValidation('FS');
+        }
+        else if (this.isPostcodeClicked && this.isManualAddressClicked) {
+            /** @type {?} */
+            var fieldCtrls = this.manualAddressForm.controls;
+            if (this.manualAddressForm.valid) {
+                this.assignContactDetails.emit({
+                    address_line: fieldCtrls.addressl1.value + ' ' + fieldCtrls.addressl2.value,
+                    city: fieldCtrls.townorcity.value,
+                    county: fieldCtrls.county.value,
+                    postal_code: fieldCtrls.mpostcode.value,
+                    country: fieldCtrls.country.value,
+                    notification_type: 'LETTER'
+                });
+            }
+            else {
+                if (fieldCtrls.addressl1.value == '') {
+                    this.resetForm([false, false, false, false, true, false, false, false, false, false, false, false, false, false], 'address1');
+                }
+                if (fieldCtrls.addressl1.value != '' && fieldCtrls.addressl1.invalid) {
+                    this.resetForm([false, false, false, false, false, true, false, false, false, false, false, false, false, false], 'address1');
+                }
+                if (fieldCtrls.addressl2.value != '' && fieldCtrls.addressl2.invalid) {
+                    this.resetForm([false, false, false, false, false, false, true, false, false, false, false, false, false, false], 'address2');
+                }
+                if (fieldCtrls.townorcity.value == '') {
+                    this.resetForm([false, false, false, false, false, false, false, true, false, false, false, false, false, false], 'town');
+                }
+                if (fieldCtrls.townorcity.value != '' && fieldCtrls.townorcity.invalid) {
+                    this.resetForm([false, false, false, false, false, false, false, false, true, false, false, false, false, false], 'town');
+                }
+                if (fieldCtrls.county.value == '') {
+                    this.resetForm([false, false, false, false, false, false, false, false, false, true, false, false, false, false], 'county');
+                }
+                if (fieldCtrls.county.value != '' && fieldCtrls.county.invalid) {
+                    this.resetForm([false, false, false, false, false, false, false, false, false, false, true, false, false, false], 'county');
+                }
+                if (fieldCtrls.mpostcode.value == '') {
+                    this.resetForm([false, false, false, false, false, false, false, false, false, false, false, true, false, false], 'mpostcode');
+                }
+                if (fieldCtrls.mpostcode.value != '' && fieldCtrls.mpostcode.invalid) {
+                    this.resetForm([false, false, false, false, false, false, false, false, false, false, false, false, true, false], 'mpostcode');
+                }
+                if (fieldCtrls.country.value == '') {
+                    this.resetForm([false, false, false, false, false, false, false, false, false, false, false, false, false, true], 'country');
+                }
+            }
+        }
+    };
+    /**
+     * @param {?} str
+     * @return {?}
+     */
+    ContactDetailsComponent.prototype.postcodeValidation = /**
+     * @param {?} str
+     * @return {?}
+     */
+    function (str) {
+        var _this = this;
+        /** @type {?} */
+        var postcodeField = this.postCodeForm.controls.postcode;
+        if (this.postCodeForm.valid) {
+            if (str === 'FA') {
+                this.notificationService.getAddressByPostcode(postcodeField.value).subscribe((/**
+                 * @param {?} refundsNotification
+                 * @return {?}
+                 */
+                function (refundsNotification) {
+                    _this.addressPostcodeList = refundsNotification['data']['results'];
+                    _this.isShowPickAddress = true;
+                })),
+                    (/**
+                     * @param {?} error
+                     * @return {?}
+                     */
+                    function (error) {
+                        _this.isShowPickAddress = false;
+                        _this.errorMessage = error.replace(/"/g, "");
+                    });
+            }
+            else if (str === 'FS') {
+                if (this.postcodeAddress !== undefined && this.postcodeAddress) {
+                    this.isAddressBoxEmpty = false;
+                    /** @type {?} */
+                    var addressLine = "";
+                    /** @type {?} */
+                    var addressArray = this.postcodeAddress.ADDRESS.split(",");
+                    for (var i = 0; i < addressArray.length - 2; i++) {
+                        addressLine += addressArray[i];
+                    }
+                    this.assignContactDetails.emit({
+                        address_line: addressLine,
+                        city: this.postcodeAddress.POST_TOWN,
+                        county: this.postcodeAddress.LOCAL_CUSTODIAN_CODE_DESCRIPTION,
+                        postal_code: this.postcodeAddress.POSTCODE,
+                        country: 'United Kingdom',
+                        notification_type: 'LETTER'
+                    });
+                }
+                else {
+                    this.isAddressBoxEmpty = true;
+                }
+            }
+        }
+        else {
+            if (postcodeField.value == '') {
+                this.resetForm([false, false, true, false, false, false, false, false, false, false, false, false, false], 'postcode');
+            }
+            if (postcodeField.value != '' && postcodeField.invalid) {
+                this.resetForm([false, false, false, true, false, false, false, false, false, false, false, false, false], 'postcode');
+            }
+        }
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    ContactDetailsComponent.prototype.redirection = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this.redirectToIssueRefund.emit(event);
+    };
+    /**
+     * @param {?} val
+     * @param {?} field
+     * @return {?}
+     */
+    ContactDetailsComponent.prototype.resetForm = /**
+     * @param {?} val
+     * @param {?} field
+     * @return {?}
+     */
+    function (val, field) {
+        if (field === 'email' || field === 'all') {
+            this.isEmailEmpty = val[0];
+            this.emailHasError = val[1];
+        }
+        if (field === 'postcode' || field === 'all') {
+            this.isPostcodeEmpty = val[2];
+            this.postcodeHasError = val[3];
+        }
+        if (field === 'address1' || field === 'all') {
+            this.isaddressLine1Empty = val[4];
+            this.addressLine1HasError = val[5];
+        }
+        if (field === 'address2' || field === 'all') {
+            this.addressLine2HasError = val[6];
+        }
+        if (field === 'town' || field === 'all') {
+            this.isTownOrCityEmpty = val[7];
+            this.townOrCityHasError = val[8];
+        }
+        if (field === 'county' || field === 'all') {
+            this.isCountyEmpty = val[9];
+            this.countyHasError = val[10];
+        }
+        if (field === 'mpostcode' || field === 'all') {
+            this.isMPostcodeEmpty = val[11];
+            this.mpostcodeHasError = val[12];
+        }
+        if (field === 'country' || field === 'all') {
+            this.isCountryEmpty = val[13];
+        }
+    };
+    ContactDetailsComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'ccpay-contact-details',
+                    template: "<fieldset class=\"govuk-fieldset contact-details--size\">\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n  <div class=\"govuk-form-group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s govuk-font19px\">\n      {{ isEditOperation ? 'Edit contact information' : 'Contact information' }}\n    </legend>\n    <div id=\"contact-hint\" class=\"govuk-hint govuk-font19px\">\n      Notifications will be sent via email or post when this refund is issued or rejected. You can only choose one option.\n    </div>\n    <div class=\"govuk-form-group\">\n      <fieldset class=\"govuk-fieldset\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact\" name=\"contact\" (click)=\"selectContactOption('Email', 'false')\" type=\"radio\" value=\"email\" [checked]=\"isEmailSAddressClicked\"  aria-controls=\"conditional-contact\" aria-expanded=\"true\">\n            <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact\">\n              Email\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-email\" *ngIf=\"isEmailSAddressClicked\">\n            <form [formGroup]=\"emailAddressForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label \" for=\"email\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this email address.</span>\n              </label>\n\n              <div id=\"email-hint\" class=\"govuk-hint\">\n              </div>\n              <input class=\"govuk-input govuk-font19px\" id=\"email\" name=\"\" type=\"email\" [ngClass]=\"{ 'inline-error-class': isEmailEmpty || emailHasError }\" value=\"{{addressObj?.contact_details?.email}}\" formControlName=\"email\" aria-describedby=\"email-hint\">\n              <p class=\"inline-error-message\" *ngIf=\"isEmailEmpty || emailHasError\">\n                <span *ngIf=\"isEmailEmpty\">Enter a email address.</span>\n                <span *ngIf=\"emailHasError\">Enter a valid email address.</span>\n              </p>\n            </div>\n            </form>\n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"contact-2\" name=\"contact\" (click)=\"selectContactOption('Postcode', 'false')\" type=\"radio\" [checked]=\"isPostcodeClicked\" value=\"post\" aria-controls=\"conditional-contact-2\" aria-expanded=\"false\">\n            <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact-2\">\n              Post\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-contact-postcode\" *ngIf=\"isPostcodeClicked && !isManualAddressClicked\">\n            <form [formGroup]=\"postCodeForm\" novalidate>\n              <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Postcode\n              </label>\n              <div class=\"postcode-align-css\">\n              <div class=\"govuk-form-group govuk-margin-right-10px\">\n              <input class=\"govuk-input govuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isPostcodeEmpty || postcodeHasError }\" formControlName=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isPostcodeEmpty || postcodeHasError\">\n                <span *ngIf=\"isPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"postcodeHasError\">Enter a valid postcode.</span>\n              </p>\n            </div>\n            <div class=\"govuk-button-group\">\n              <button class=\"govuk-button govuk-button--secondary govuk-font19px\" (click)=\"postcodeValidation('FA')\" data-module=\"govuk-button\">\n                Find address\n              </button>\n            </div>\n          </div>\n            </form>\n            <div class=\"govuk-form-group govuk-margin-btm-20px\" *ngIf=\"isShowPickAddress\">\n              <label class=\"govuk-label govuk-font19px\" for=\"country\">\n                Pick an address\n              </label>\n              <select class=\"govuk-select govuk-font19px\" [(ngModel)]=\"postcodeAddress\" id=\"postcodeAddress\" [ngClass]=\"{ 'inline-error-class': isAddressBoxEmpty }\" name=\"postcodeAddress\">\n                <option *ngFor=\"let address of addressPostcodeList;\" [ngValue]=\"address.DPA\" > {{address.DPA.ADDRESS}}</option>\n              </select> \n              <p class=\"inline-error-message\" *ngIf=\"isAddressBoxEmpty\">\n                <span *ngIf=\"isAddressBoxEmpty\">Please select an address.</span>\n              </p>\n            </div>\n            <details class=\"govuk-details\" data-module=\"govuk-details\">\n              <summary class=\"govuk-details__summary\">\n                <span class=\"govuk-details__summary-text govuk-font19px\">\n                  <a href=\"Javascript:void(0);\" (click)=\"selectContactOption('Postcode', 'true')\">  Enter address manually</a>\n                </span>\n              </summary>\n            </details>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact-manual\" *ngIf=\"isPostcodeClicked && isManualAddressClicked\">\n            <form [formGroup]=\"manualAddressForm\" novalidate>\n\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-line-1\">\n                <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Building and street <span class=\"govuk-visually-hidden\">line 1 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-font19px\" id=\"address-line-1\" name=\"address-line-1\" [ngClass]=\"{ 'inline-error-class': isaddressLine1Empty || addressLine1HasError }\" value=\"{{addressObj?.contact_details?.address_line}}\" formControlName=\"addressl1\" type=\"text\" autocomplete=\"address-line1\">\n              <p class=\"inline-error-message\" *ngIf=\"isaddressLine1Empty || addressLine1HasError\">\n                <span *ngIf=\"isaddressLine1Empty\">Enter a Building and street.</span>\n                <span *ngIf=\"addressLine1HasError\">Enter a valid Building and street.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label\" for=\"address-line-2\">\n                <span class=\"govuk-visually-hidden govuk-font19px\">Building and street line 2 of 2</span>\n              </label>\n              <input class=\"govuk-input govuk-font19px\" id=\"address-line-2\" name=\"address-line-2\" [ngClass]=\"{ 'inline-error-class': addressLine2HasError}\" formControlName=\"addressl2\" type=\"text\" autocomplete=\"address-line2\">\n              <p class=\"inline-error-message\" *ngIf=\"addressLine2HasError\">\n                <span *ngIf=\"addressLine2HasError\">Enter a valid Building and street line 2 of 2.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-town\">\n                Town or city\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-town\" name=\"address-town\" [ngClass]=\"{ 'inline-error-class': isTownOrCityEmpty || townOrCityHasError}\" value=\"{{addressObj?.contact_details?.city}}\" formControlName=\"townorcity\" type=\"text\" autocomplete=\"address-level2\">\n              <p class=\"inline-error-message\" *ngIf=\"isTownOrCityEmpty || townOrCityHasError\">\n                <span *ngIf=\"isTownOrCityEmpty\">Enter a town or city.</span>\n                <span *ngIf=\"townOrCityHasError\">Enter a town or city.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-county\">\n                County\n              </label>\n              <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-county\" [ngClass]=\"{ 'inline-error-class': isCountyEmpty || countyHasError}\" value=\"{{addressObj?.contact_details?.county}}\" formControlName=\"county\" name=\"address-county\" type=\"text\">\n              <p class=\"inline-error-message\" *ngIf=\"isCountyEmpty || countyHasError\">\n                <span *ngIf=\"isCountyEmpty\">Enter a County.</span>\n                <span *ngIf=\"countyHasError\">Enter a valid County.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n                Postcode\n              </label>\n              <input class=\"govuk-input govuk-input--width-10 govuk-font19px\" id=\"address-postcode\" formControlName=\"mpostcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isMPostcodeEmpty || mpostcodeHasError}\" value=\"{{addressObj?.contact_details?.postal_code}}\" type=\"text\" autocomplete=\"postal-code\">\n              <p class=\"inline-error-message\" *ngIf=\"isMPostcodeEmpty || mpostcodeHasError\">\n                <span *ngIf=\"isMPostcodeEmpty\">Enter a postcode.</span>\n                <span *ngIf=\"mpostcodeHasError\">Enter a valid postcode.</span>\n              </p>  \n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-font19px\" for=\"country\">\n                Country\n              </label>\n              <select class=\"govuk-select govuk-font19px\" id=\"country\" name=\"country\" [ngClass]=\"{'inline-error-class': isCountryEmpty}\" formControlName=\"country\">\n                <option value=\"\" selected=\"selected\">Please select</option>\n                <option value=\"United Kingdom\" selected=\"{{ addressObj?.contact_details?.country ? 'selected' : '' }}\">United Kingdom</option>\n              </select>\n              <p class=\"inline-error-message\" *ngIf=\"isCountryEmpty\">\n                <span *ngIf=\"isCountryEmpty\">Select a Country.</span>\n              </p>  \n            </div>\n            </form>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n    <!---FORM--->\n  </div>\n\n<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n</fieldset>\n<div class=\"govuk-button-group\">\n<button type=\"submit\" class=\"button govuk-button--secondary govuk-font19px\" (click)=\"redirection($event)\"> Previous </button>\n&nbsp;\n<button type=\"submit\" class=\"button govuk-button govuk-font19px\" (click)=\"finalFormSubmit()\">\n  Continue\n</button>\n</div>",
+                    styles: [".govuk-font19px{font-size:19px}.inline-error-class{outline:#a71414 solid 3px;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.contact-details--size{width:50%}.postcode-align-css{display:flex;flex-direction:row}.govuk-margin-right-10px{margin-right:10px}.govuk-margin-btm-20px{margin-bottom:20px!important}"]
+                }] }
+    ];
+    /** @nocollapse */
+    ContactDetailsComponent.ctorParameters = function () { return [
+        { type: FormBuilder },
+        { type: NotificationService },
+        { type: PaymentLibComponent }
+    ]; };
+    ContactDetailsComponent.propDecorators = {
+        isEditOperation: [{ type: Input, args: ['isEditOperation',] }],
+        addressObj: [{ type: Input, args: ['addressObj',] }],
+        assignContactDetails: [{ type: Output }],
+        redirectToIssueRefund: [{ type: Output }]
+    };
+    return ContactDetailsComponent;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var PbaDetailsComponent = /** @class */ (function () {
+    function PbaDetailsComponent() {
+    }
+    /**
+     * @return {?}
+     */
+    PbaDetailsComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    PbaDetailsComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'ccpay-pba-details',
+                    template: "\n  <h2 class=\"heading-large\">Payment method</h2>\n  <table>\n    <tbody>\n    <tr>\n      <td class=\"bold tb-col-w\">Method</td>\n      <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n    </tr>\n    <tr>\n      <td class=\"bold tb-col-w\">Type</td>\n      <td>Credit</td>\n    </tr>\n    <tr *ngIf=\"payment.organisation_name\">\n      <td class=\"bold tb-col-w\">PBA account name</td>\n      <td>{{ payment.organisation_name }}</td>\n    </tr>\n    <tr *ngIf=\"payment.account_number\">\n      <td class=\"bold tb-col-w\">PBA number</td>\n      <td>{{ payment.account_number }}</td>\n    </tr>\n    <tr *ngIf=\"payment.customer_reference\">\n      <td class=\"bold tb-col-w\">Customer internal reference</td>\n      <td>{{ payment.customer_reference }}</td>\n    </tr>\n    </tbody>\n  </table>\n",
+                    styles: [".capitalize::first-letter{text-transform:uppercase}.tb-col-w{width:330px}"]
+                }] }
+    ];
+    /** @nocollapse */
+    PbaDetailsComponent.ctorParameters = function () { return []; };
+    PbaDetailsComponent.propDecorators = {
+        payment: [{ type: Input }]
+    };
+    return PbaDetailsComponent;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var noop$1 = (/**
+ * @return {?}
+ */
+function () { return undefined; });
+var ConsoleLoggerService = /** @class */ (function () {
+    function ConsoleLoggerService() {
+    }
+    Object.defineProperty(ConsoleLoggerService.prototype, "info", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            {
+                return noop$1;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ConsoleLoggerService.prototype, "warn", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            {
+                return noop$1;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ConsoleLoggerService.prototype, "error", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            {
+                return noop$1;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @param {?} type
+     * @param {?=} args
+     * @return {?}
+     */
+    ConsoleLoggerService.prototype.invokeConsoleMethod = /**
+     * @param {?} type
+     * @param {?=} args
+     * @return {?}
+     */
+    function (type, args) {
+        /** @type {?} */
+        var logFn = (console)[type] || console.log || noop$1;
+        logFn.apply(console, [args]);
+    };
+    ConsoleLoggerService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */ ConsoleLoggerService.ngInjectableDef = defineInjectable({ factory: function ConsoleLoggerService_Factory() { return new ConsoleLoggerService(); }, token: ConsoleLoggerService, providedIn: "root" });
+    return ConsoleLoggerService;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var CaseTransactionsService = /** @class */ (function () {
+    function CaseTransactionsService(http, logger, errorHandlerService, paymentLibService) {
+        this.http = http;
+        this.logger = logger;
+        this.errorHandlerService = errorHandlerService;
+        this.paymentLibService = paymentLibService;
+    }
+    /**
+     * @param {?} ccdCaseNumber
+     * @return {?}
+     */
+    CaseTransactionsService.prototype.getPaymentGroups = /**
+     * @param {?} ccdCaseNumber
+     * @return {?}
+     */
+    function (ccdCaseNumber) {
+        this.logger.info('Case-transactions-service getPaymentGroups for: ', ccdCaseNumber);
+        return this.http.get(this.paymentLibService.API_ROOT + "/cases/" + ccdCaseNumber + "/paymentgroups", {
+            withCredentials: true
+        })
+            .pipe(catchError(this.errorHandlerService.handleError));
+    };
+    CaseTransactionsService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    CaseTransactionsService.ctorParameters = function () { return [
+        { type: HttpClient },
+        { type: LoggerService },
+        { type: ErrorHandlerService },
+        { type: PaymentLibService }
+    ]; };
+    /** @nocollapse */ CaseTransactionsService.ngInjectableDef = defineInjectable({ factory: function CaseTransactionsService_Factory() { return new CaseTransactionsService(inject(HttpClient), inject(LoggerService), inject(ErrorHandlerService), inject(PaymentLibService)); }, token: CaseTransactionsService, providedIn: "root" });
+    return CaseTransactionsService;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var BulkScaningPaymentService = /** @class */ (function () {
+    function BulkScaningPaymentService(http, https, errorHandlerService, paymentLibService) {
+        this.http = http;
+        this.https = https;
+        this.errorHandlerService = errorHandlerService;
+        this.paymentLibService = paymentLibService;
+    }
+    /**
+     * @param {?} ccdCaseNumber
+     * @return {?}
+     */
+    BulkScaningPaymentService.prototype.getBSPaymentsByCCD = /**
+     * @param {?} ccdCaseNumber
+     * @return {?}
+     */
+    function (ccdCaseNumber) {
+        return this.http.get(this.paymentLibService.BULKSCAN_API_ROOT + "/cases/" + ccdCaseNumber, {
+            withCredentials: true
+        })
+            .pipe(catchError(this.errorHandlerService.handleError));
+    };
+    /**
+     * @param {?} dcn
+     * @return {?}
+     */
+    BulkScaningPaymentService.prototype.getBSPaymentsByDCN = /**
+     * @param {?} dcn
+     * @return {?}
+     */
+    function (dcn) {
+        return this.http.get(this.paymentLibService.BULKSCAN_API_ROOT + "/cases?document_control_number=" + dcn, {
+            withCredentials: true
         })
             .pipe(catchError(this.errorHandlerService.handleError));
     };
@@ -3182,6 +3701,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
         this.viewStatus = 'main';
         this.isRemoveBtnDisabled = false;
         this.clAmountDue = 0;
+        this.overPaymentAmount = 0;
         this.isFeeRecordsExist = false;
         this.isGrpOutstandingAmtPositive = false;
         //Order changes
@@ -3504,6 +4024,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
                  */
                 function (fee) {
                     _this.orderFeesTotal = _this.orderFeesTotal + fee.calculated_amount;
+                    _this.overPaymentAmount = _this.overPaymentAmount + fee.over_payment;
                 }));
             }
             if (paymentGroup.remissions) {
@@ -4381,7 +4902,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
     CaseTransactionsComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-case-transactions',
-                    template: "<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper\">\n    <ng-container  *ngIf=\"viewStatus === 'main1'\">\n      <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n            <div class=\"govuk-grid-column-two-thirds\">\n              <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n            </div>\n          </div>\n\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n            <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">CCD reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n\n            <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">Exception reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n            <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n              <hr class=\"govuk-section-break govuk-section-break--visible\">\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n                [disabled]=\"!isAddFeeBtnEnabled\"\n                [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                Take telephony payment\n              </button>\n          </div>\n\n          </div>\n          <div class=\"govuk-grid-row\">\n            \n          </div>\n          <div  *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n            <div class=\"govuk-grid-row\">\n              <div class=\"govuk-grid-column-full\">\n                  <h3 class=\"heading-medium\">Fees</h3>\n              </div>\n              <div class=\"govuk-grid-column-full\">\n                <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n                    <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n                      <td class=\"govuk-table__cell\">{{fee.description}}</td>\n                      <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n                      <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell govuk-!-font-weight-bold\"  [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n                    </td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n                    <tr class=\"govuk-table__row\" >\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n              <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n                  <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n                C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n              </svg>\n              <div class=\"hmcts-banner__message\">\n                <span class=\"hmcts-banner__assistive\">information</span>\n                * These fees have already been processed offline. Check the notes in CCD for more information.\n              </div>\n            </div>\n            <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n                <!-- payments -->\n                <h3 class=\"heading-medium\">Payments</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <h3 class=\"heading-medium\">Remissions</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n          </div>\n      </div>\n\n      <div  *ngIf=\"takePayment && isTurnOff\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n        </div>\n\n        <div  class=\"govuk-grid-column-one-third\" align=\"right\" >\n          <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n        </div>\n      </div> \n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n          <h3 class=\"heading-medium\">CCD reference:</h3>\n          <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n        </div>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n              </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n              <tr class=\"totalpayments govuk-table__row\">\n                <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n\n      <!-- No fees start -->\n      <div *ngIf=\"paymentGroups?.length === 0\">\n        <div class=\"govuk-grid-row\">\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Existing fees</span>\n          </div>\n\n          <div class=\"govuk-grid-column-full\">\n            <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n              </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- No fees end -->\n\n      <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n          <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n        </div>\n      </div>\n        <div class=\"govuk-grid-row\">\n\n          <!--New Code start-->\n\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Exisiting fees</span>\n          </div>\n          <div class=feeclass>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n              <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n            <tr class=\"govuk-table__row\"  *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n              <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n              <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n                {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n            </tbody>\n          </table>\n        </div>\n        </div>\n      <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n        <details>\n          <summary class=\"govuk-hidetext\">\n          <span class=\"summary\">Allocated payments and remissions</span>\n          </summary>\n\n            <div class=\"panel panel-border-narrow\">\n                <!-- payments -->\n                <span class=\"heading-medium\">Payments</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of paymentGroup.payments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <span class=\"heading-medium\">Remissions</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n      </details>\n    \n\n          <div *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n                [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n                [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                  Add telephone payment\n              </button>\n          </div>\n        </div>\n      </div>\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"5\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [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          \n        <div class=\"govuk-grid-column-full\">\n          \n          <span class=\"heading-medium\">Payments</span>\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status }}</td>\n                    <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n                    <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                      </td>\n                  </tr>\n              </tbody>\n          \n            </table>\n            <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"2\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"  \n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n        </ccpay-app-unprocessed-payments>\n        </div>\n      </div>\n    </ng-container>\n\n<!--Order Case Transactions Page-->\n   <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n      <div>\n          <div>\n              <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n              <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div>\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Amount due</td>\n                    \n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                 \n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n            <!--Payment Request-->\n          <div class=\"paymentrequest\">\n              <span class=\"heading-medium\">Service requests</span>\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header  col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">Party</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header  col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header col\" scope=\"col\"></td>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n                      <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\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 *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\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  class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n        <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Amount</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">Request reference\t</td>\n                <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell  whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n                  <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell  whitespace-inherit\"></td> \n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td> \n                  <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> Pay now</a></td> \n                  <td class=\"govuk-table__cell\">\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          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\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  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"serviceRequestValue\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n  ></ccpay-service-request>\n   \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[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>\n\n\n",
+                    template: "<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper\">\n    <ng-container  *ngIf=\"viewStatus === 'main1'\">\n      <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n            <div class=\"govuk-grid-column-two-thirds\">\n              <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n            </div>\n          </div>\n\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n            <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">CCD reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n\n            <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">Exception reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n            <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n              <hr class=\"govuk-section-break govuk-section-break--visible\">\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n                [disabled]=\"!isAddFeeBtnEnabled\"\n                [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                Take telephony payment\n              </button>\n          </div>\n\n          </div>\n          <div class=\"govuk-grid-row\">\n            \n          </div>\n          <div  *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n            <div class=\"govuk-grid-row\">\n              <div class=\"govuk-grid-column-full\">\n                  <h3 class=\"heading-medium\">Fees</h3>\n              </div>\n              <div class=\"govuk-grid-column-full\">\n                <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n                    <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n                      <td class=\"govuk-table__cell\">{{fee.description}}</td>\n                      <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n                      <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell govuk-!-font-weight-bold\"  [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n                    </td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n                    <tr class=\"govuk-table__row\" >\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n              <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n                  <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n                C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n              </svg>\n              <div class=\"hmcts-banner__message\">\n                <span class=\"hmcts-banner__assistive\">information</span>\n                * These fees have already been processed offline. Check the notes in CCD for more information.\n              </div>\n            </div>\n            <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n                <!-- payments -->\n                <h3 class=\"heading-medium\">Payments</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <h3 class=\"heading-medium\">Remissions</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n          </div>\n      </div>\n\n      <div  *ngIf=\"takePayment && isTurnOff\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n        </div>\n\n        <div  class=\"govuk-grid-column-one-third\" align=\"right\" >\n          <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n        </div>\n      </div> \n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n          <h3 class=\"heading-medium\">CCD reference:</h3>\n          <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n        </div>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n              </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n              <tr class=\"totalpayments govuk-table__row\">\n                <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n\n      <!-- No fees start -->\n      <div *ngIf=\"paymentGroups?.length === 0\">\n        <div class=\"govuk-grid-row\">\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Existing fees</span>\n          </div>\n\n          <div class=\"govuk-grid-column-full\">\n            <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n              </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- No fees end -->\n\n      <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n          <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n        </div>\n      </div>\n        <div class=\"govuk-grid-row\">\n\n          <!--New Code start-->\n\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Exisiting fees</span>\n          </div>\n          <div class=feeclass>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n              <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n            <tr class=\"govuk-table__row\"  *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n              <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n              <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n                {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n            </tbody>\n          </table>\n        </div>\n        </div>\n      <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n        <details>\n          <summary class=\"govuk-hidetext\">\n          <span class=\"summary\">Allocated payments and remissions</span>\n          </summary>\n\n            <div class=\"panel panel-border-narrow\">\n                <!-- payments -->\n                <span class=\"heading-medium\">Payments</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of paymentGroup.payments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <span class=\"heading-medium\">Remissions</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n      </details>\n    \n\n          <div *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n                [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n                [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                  Add telephone payment\n              </button>\n          </div>\n        </div>\n      </div>\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"5\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [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          \n        <div class=\"govuk-grid-column-full\">\n          \n          <span class=\"heading-medium\">Payments</span>\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status }}</td>\n                    <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n                    <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                      </td>\n                  </tr>\n              </tbody>\n          \n            </table>\n            <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"2\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"  \n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n        </ccpay-app-unprocessed-payments>\n        </div>\n      </div>\n    </ng-container>\n\n<!--Order Case Transactions Page-->\n   <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n      <div>\n          <div>\n              <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n              <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div>\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Over payment</td>\n\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                    <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' 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 *ngIf=\"!check4AllowedRoles2AccessPBApayment() && serviceRequestValue !== 'true'\">\n              <span class=\"heading-medium\"><br/>Refunds</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\" \n              [isTurnOff]=\"isTurnOff\"\n              [orderParty]=\"orderParty\"\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  class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n        <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Amount</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">Request reference\t</td>\n                <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell  whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n                  <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell  whitespace-inherit\"></td> \n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td> \n                  <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> Pay now</a></td> \n                  <td class=\"govuk-table__cell\">\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          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment() && serviceRequestValue !== 'true'\">\n            <span class=\"heading-medium\"><br/>Refunds</span>\n            <ccpay-refund-status \n            [ccdCaseNumber]=\"ccdCaseNumber\"\n            [orderParty] =\"orderParty\"\n             ></ccpay-refund-status>\n        </div>\n\n   </ng-container>\n\n\n<input #myInput type='hidden' id='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"serviceRequestValue\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n  ></ccpay-service-request>\n   \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[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</main>\n</div>\n\n\n",
                     styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel::first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize::first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__cell:last-child,.govuk-table__header:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}"]
                 }] }
     ];
@@ -6724,9 +7245,13 @@ var AddRetroRemissionRequest = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var PostRefundRetroRemission = /** @class */ (function () {
-    function PostRefundRetroRemission(payment_reference, refund_reason) {
+    function PostRefundRetroRemission(ccd_case_number, payment_reference, refund_reason, refund_amount, fees, contact_details) {
+        this.ccd_case_number = ccd_case_number;
         this.payment_reference = payment_reference;
         this.refund_reason = refund_reason;
+        this.refund_amount = refund_amount;
+        this.fees = fees;
+        this.contact_details = contact_details;
     }
     return PostRefundRetroRemission;
 }());
@@ -6736,8 +7261,9 @@ var PostRefundRetroRemission = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var PostIssueRefundRetroRemission = /** @class */ (function () {
-    function PostIssueRefundRetroRemission(remissionReference) {
+    function PostIssueRefundRetroRemission(remissionReference, contactDeatils) {
         this.remissionReference = remissionReference;
+        this.contact_details = contactDeatils;
     }
     return PostIssueRefundRetroRemission;
 }());
@@ -6787,6 +7313,8 @@ var AddRemissionComponent = /** @class */ (function () {
         this.isRemissionApplied = false;
         // refundReasons: any[] = [];
         this.commonRefundReasons = [];
+        this.class = '';
+        this.errorMsg = new Array();
     }
     /**
      * @return {?}
@@ -6796,6 +7324,8 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
+        this.errorMessage = '';
+        this.errorMsg = [];
         this.default = 'Select a different reason';
         this.pattern1 = '^([a-zA-Z0-9]{3})-([a-zA-Z0-9]{3})-([a-zA-Z0-9]{3})$';
         this.pattern2 = '^([A-Za-z]{2}[0-9]{2})-([0-9]{6})$';
@@ -6807,6 +7337,7 @@ var AddRemissionComponent = /** @class */ (function () {
             this.amount = (this.fee.volume * this.fee.calculated_amount);
         }
         if (this.payment) {
+            this.paymentReference = this.payment.reference;
             this.remessionPayment = this.payment;
             if (this.payment.status === 'Success') {
                 this.isPaymentSuccess = true;
@@ -6825,15 +7356,68 @@ var AddRemissionComponent = /** @class */ (function () {
             ])),
             refundReason: new FormControl('', Validators.compose([Validators.required])),
             refundDDReason: new FormControl('', Validators.compose([Validators.required])),
-            reason: new FormControl()
+            reason: new FormControl(),
+            feeAmount: new FormControl(),
+            feesList: this.formBuilder.array([])
         });
         /** @type {?} */
         var remissionctrls = this.remissionForm.controls;
         remissionctrls['refundDDReason'].setValue('Select a different reason', { onlySelf: true });
+        if (this.isFromServiceRequestPage) {
+            this.paymentViewService.getApportionPaymentDetails(this.paymentLibComponent.paymentReference).subscribe((/**
+             * @param {?} paymentGroup
+             * @return {?}
+             */
+            function (paymentGroup) {
+                /** @type {?} */
+                var fees = [];
+                paymentGroup.fees.forEach((/**
+                 * @param {?} fee
+                 * @return {?}
+                 */
+                function (fee) {
+                    _this.isRemissionsMatch = false;
+                    paymentGroup.remissions.forEach((/**
+                     * @param {?} rem
+                     * @return {?}
+                     */
+                    function (rem) {
+                        if (rem.fee_code === fee.code) {
+                            _this.isRemissionsMatch = true;
+                            fee['remissions'] = rem;
+                            fees.push(fee);
+                        }
+                    }));
+                    if (!_this.isRemissionsMatch) {
+                        fees.push(fee);
+                    }
+                }));
+                paymentGroup.fees = fees;
+                _this.paymentFees = fees;
+                _this.fees = fees;
+                _this.paymentGroup = paymentGroup;
+                _this.paymentGroup.payments = _this.paymentGroup.payments.filter((/**
+                 * @param {?} paymentGroupObj
+                 * @return {?}
+                 */
+                function (paymentGroupObj) { return paymentGroupObj['reference'].includes(_this.paymentLibComponent.paymentReference); }));
+                /** @type {?} */
+                var paymentAllocation = _this.paymentGroup.payments[0].payment_allocation;
+                _this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
+                _this.refundFeesList();
+            }), (/**
+             * @param {?} error
+             * @return {?}
+             */
+            function (error) { return _this.errorMessage = error; }));
+        }
+        if (this.fees && this.viewCompStatus === 'issuerefund') {
+            this.refundFeesList();
+        }
         if (this.viewCompStatus === '') {
             this.viewStatus = 'main';
         }
-        if (this.viewCompStatus === 'issuerefund') {
+        if (this.viewCompStatus === 'issuerefundpage1') {
             this.refundService.getRefundReasons().subscribe((/**
              * @param {?} refundReasons
              * @return {?}
@@ -6867,6 +7451,132 @@ var AddRemissionComponent = /** @class */ (function () {
         if (this.viewCompStatus === 'processretroremissonpage' && this.isFromRefundListPage) {
             this.viewStatus = 'processretroremissonpage';
         }
+        if (this.orderDetail !== undefined) {
+            this.fees = this.orderDetail[0].fees;
+            this.paymentReference = this.orderDetail[0].payments[0].reference;
+        }
+    };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.refundFeesList = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var creds = (/** @type {?} */ (this.remissionForm.controls.feesList));
+        for (var i = 0; i < this.fees.length; i++) {
+            creds.push(this.formBuilder.group({
+                id: this.fees[i].id,
+                code: this.fees[i].code,
+                volume: this.fees[i].volume,
+                calculated_amount: this.fees[i].calculated_amount,
+                apportion_amount: this.fees[i].apportion_amount,
+                ccd_case_number: this.fees[i].ccd_case_number,
+                description: this.fees[i].description,
+                net_amount: this.fees[i].net_amount,
+                version: this.fees[i].version,
+                amounttorefund: [''],
+                selected: [''],
+                updatedVolume: ''
+            }));
+        }
+        this.cd.detectChanges();
+    };
+    Object.defineProperty(AddRemissionComponent.prototype, "feesList", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var dd = (/** @type {?} */ (this.remissionForm.get('feesList')));
+            return (/** @type {?} */ (this.remissionForm.get('feesList')));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.noneSelected = /**
+     * @return {?}
+     */
+    function () {
+        if (!this.feesList.controls.some((/**
+         * @param {?} item
+         * @return {?}
+         */
+        function (item) { return item.get('selected').value === true; }))) {
+            this.errorMsg = [];
+            [].forEach.call(document.querySelectorAll('input'), (/**
+             * @param {?} el
+             * @return {?}
+             */
+            function (el) {
+                el.classList.remove('inline-error-class');
+            }));
+        }
+        return !this.feesList.controls.some((/**
+         * @param {?} item
+         * @return {?}
+         */
+        function (item) { return item.get('selected').value === true; }));
+    };
+    /**
+     * @param {?} i
+     * @param {?} v1
+     * @param {?} AppAmt
+     * @param {?} Volume
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.check_en = /**
+     * @param {?} i
+     * @param {?} v1
+     * @param {?} AppAmt
+     * @param {?} Volume
+     * @return {?}
+     */
+    function (i, v1, AppAmt, Volume) {
+        /** @type {?} */
+        var ele = (/** @type {?} */ (document.getElementById(v1)));
+        /** @type {?} */
+        var formArray = (/** @type {?} */ (this.remissionForm.controls.feesList));
+        if (ele.checked) {
+            formArray.at(i).get('amounttorefund').setValue(AppAmt);
+            formArray.at(i).get('volume').setValue(Volume);
+            formArray.at(i).get('selected').setValue(true);
+            formArray.at(i).get('updatedVolume').setValue(Volume);
+            ((/** @type {?} */ (document.getElementById('feeAmount_' + v1)))).value = AppAmt;
+            document.getElementById('feeAmount_' + v1).removeAttribute("disabled");
+            if (Volume === 1) {
+                ((/** @type {?} */ (document.getElementById('VolumeUpdated_' + v1)))).value = Volume;
+            }
+            else {
+                ((/** @type {?} */ (document.getElementById('feeVolumeUpdated_' + v1)))).value = Volume;
+            }
+            if (document.getElementById('feeVolumeUpdated_' + v1) !== null) {
+                document.getElementById('feeAmount_' + v1).removeAttribute("disabled");
+                document.getElementById('feeVolumeUpdated_' + v1).removeAttribute("disabled");
+            }
+            // this.remissionForm.value.feesList.find(x=>x=v1)['amounttorefund'] = AppAmt;
+            this.cd.detectChanges();
+        }
+        else {
+            this.errorMsg = [];
+            document.getElementById('feeAmount_' + v1).setAttribute("disabled", "true");
+            this.remissionForm.value.feesList[i]["amounttorefund"] = '';
+            this.remissionForm.value.feesList[i]["volume"] = '';
+            this.remissionForm.value.feesList[i]["selected"] = false;
+            ((/** @type {?} */ (document.getElementById('feeAmount_' + v1)))).value = '';
+            if (Volume > 1) {
+                this.remissionForm.value.feesList[i]["volume"] = '';
+                ((/** @type {?} */ (document.getElementById('feeVolumeUpdated_' + v1)))).value = '';
+            }
+            if (document.getElementById('feeVolumeUpdated_' + v1) !== null) {
+                document.getElementById('feeVolumeUpdated_' + v1).removeAttribute("disabled");
+            }
+            this.cd.detectChanges();
+        }
     };
     /**
      * @return {?}
@@ -6994,6 +7704,8 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function () {
         this.errorMessage = false;
+        this.isFromCheckAnsPage = true;
+        this.errorMsg = [];
         this.viewStatus = '';
         this.isRefundRemission = false;
         this.resetRemissionForm([false, false, false, false, false, false], 'All');
@@ -7038,6 +7750,8 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function () {
         this.errorMessage = false;
+        this.isFromCheckAnsPage = false;
+        this.errorMsg = [];
         if (this.isRefundRemission) {
             this.paymentLibComponent.iscancelClicked = true;
             this.refundListAmount.emit();
@@ -7055,6 +7769,7 @@ var AddRemissionComponent = /** @class */ (function () {
         this.viewCompStatus = "addremission";
         this.isRefundRemission = true;
         this.errorMessage = '';
+        this.errorMsg = [];
         if (this.isFromPaymentDetailPage) {
             this.paymentLibComponent.viewName = 'payment-view';
         }
@@ -7107,6 +7822,19 @@ var AddRemissionComponent = /** @class */ (function () {
             //}
         }
     };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoAmountRetroRemission = /**
+     * @return {?}
+     */
+    function () {
+        this.isFromCheckAnsPage = false;
+        this.viewStatus = 'processretroremissonpage';
+        this.viewCompStatus = '';
+        // this.isRefundRemission = true;
+        this.errorMessage = '';
+    };
     /**
      * @return {?}
      */
@@ -7114,10 +7842,30 @@ var AddRemissionComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.isFromCheckAnsPage = true;
         this.viewStatus = '';
         this.viewCompStatus = 'addremission';
         this.isRefundRemission = true;
         this.errorMessage = '';
+        this.errorMsg = [];
+    };
+    /**
+     * @param {?=} note
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoProcessRetroRemission = /**
+     * @param {?=} note
+     * @return {?}
+     */
+    function (note) {
+        if (note) {
+            this.notification = { contact_details: note, notification_type: note.notification_type };
+        }
+        this.isFromCheckAnsPage = true;
+        this.viewStatus = 'remissionAddressPage';
+        this.viewCompStatus = '';
+        this.isRefundRemission = true;
+        this.errorMessage = '';
     };
     /**
      * @return {?}
@@ -7163,6 +7911,7 @@ var AddRemissionComponent = /** @class */ (function () {
     function () {
         var _this = this;
         this.errorMessage = '';
+        this.errorMsg = [];
         this.isConfirmationBtnDisabled = true;
         if (this.isRefundRemission) {
             this.retroRemission = true;
@@ -7171,7 +7920,7 @@ var AddRemissionComponent = /** @class */ (function () {
             this.remissionReference = this.remission.remission_reference;
         }
         /** @type {?} */
-        var requestBody = new PostIssueRefundRetroRemission(this.remissionReference);
+        var requestBody = new PostIssueRefundRetroRemission(this.remissionReference, this.contactDetailsObj);
         this.paymentViewService.postRefundRetroRemission(requestBody).subscribe((/**
          * @param {?} response
          * @return {?}
@@ -7209,7 +7958,14 @@ var AddRemissionComponent = /** @class */ (function () {
         if (this.paymentLibComponent.REFUNDLIST === "true") {
             this.isFromRefundListPage = true;
         }
+        this.totalRefundAmount = this.remissionForm.value.feesList.reduce((/**
+         * @param {?} a
+         * @param {?} c
+         * @return {?}
+         */
+        function (a, c) { return a + c.amounttorefund * c.selected; }), 0);
         this.errorMessage = '';
+        this.errorMsg = [];
         this.refundReason = this.remissionForm.controls['refundReason'].value === null ? this.remissionForm.controls['refundDDReason'].value : this.remissionForm.controls['refundReason'].value;
         if (!this.refundReason || this.refundReason === 'Select a different reason') {
             this.refundHasError = true;
@@ -7225,36 +7981,257 @@ var AddRemissionComponent = /** @class */ (function () {
                 this.refundListReason.emit({ reason: this.displayRefundReason, code: this.refundReason });
             }
             else {
+                if (this.isFromCheckAnsPage) {
+                    this.totalRefundAmount = this.remissionForm.value.feesList.reduce((/**
+                     * @param {?} a
+                     * @param {?} c
+                     * @return {?}
+                     */
+                    function (a, c) { return a + c.amounttorefund * c.selected; }), 0);
+                    this.isFromCheckAnsPage = false;
+                    this.viewStatus = 'checkissuerefundpage';
+                    this.viewCompStatus = '';
+                    return;
+                }
                 this.viewCompStatus = '';
-                this.viewStatus = 'checkissuerefundpage';
+                this.viewStatus = 'contactDetailsPage';
             }
         }
         else {
             this.displayRefundReason = this.selectedRefundReason;
+            if (this.isFromCheckAnsPage) {
+                this.totalRefundAmount = this.remissionForm.value.feesList.reduce((/**
+                 * @param {?} a
+                 * @param {?} c
+                 * @return {?}
+                 */
+                function (a, c) { return a + c.amounttorefund * c.selected; }), 0);
+                this.isFromCheckAnsPage = false;
+                this.viewStatus = 'checkissuerefundpage';
+                this.viewCompStatus = '';
+                return;
+            }
             if (this.isFromRefundListPage) {
                 this.paymentLibComponent.isFromRefundStatusPage = true;
                 this.refundListReason.emit({ reason: this.selectedRefundReason, code: this.refundReason });
             }
             else {
                 this.viewCompStatus = '';
+                this.viewStatus = 'contactDetailsPage';
+            }
+        }
+    };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoIssueRefundPage = /**
+     * @return {?}
+     */
+    function () {
+        this.errorMessage = '';
+        this.viewCompStatus = 'issuerefund';
+        this.viewStatus = '';
+        this.isRefundRemission = true;
+        this.errorMessage = false;
+        this.errorMsg = [];
+        this.refundHasError = false;
+        this.isReasonEmpty = false;
+    };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoIssuePage = /**
+     * @return {?}
+     */
+    function () {
+        [].forEach.call(document.querySelectorAll('input'), (/**
+         * @param {?} el
+         * @return {?}
+         */
+        function (el) {
+            el.classList.remove('inline-error-class');
+        }));
+        /** @type {?} */
+        var checkboxs = document.getElementsByTagName('input');
+        this.errorMessage = '';
+        this.totalRefundAmount = 0;
+        this.errorMsg = [];
+        for (var j = 0; j < checkboxs.length; j++) {
+            if (checkboxs[j].checked) {
+                this.fullRefund = false;
+                /** @type {?} */
+                var quantity = +((/** @type {?} */ (document.getElementById('feeVolume_' + checkboxs[j].value)))).value;
+                /** @type {?} */
+                var amountToRefund = +((/** @type {?} */ (document.getElementById('feeAmount_' + checkboxs[j].value)))).value;
+                /** @type {?} */
+                var apportionAmount = +((/** @type {?} */ (document.getElementById('feeApportionAmount_' + checkboxs[j].value)))).value;
+                /** @type {?} */
+                var calculatedAmount = +((/** @type {?} */ (document.getElementById('calculatedAmount_' + checkboxs[j].value)))).value;
+                if (amountToRefund === apportionAmount) {
+                    this.fullRefund = true;
+                }
+                if (amountToRefund === 0) {
+                    this.elementId = 'feeAmount_' + checkboxs[j].value;
+                    this.errorMsg.push('You need to enter a refund amount');
+                    this.getErrorClass(this.elementId);
+                }
+                if (quantity === 1) {
+                    if (amountToRefund > 0 && amountToRefund > apportionAmount) {
+                        this.elementId = 'feeAmount_' + checkboxs[j].value;
+                        this.errorMsg.push('The amount you want to refund is more than the amount paid');
+                        this.getErrorClass(this.elementId);
+                    }
+                }
+                if (quantity > 1) {
+                    this.quantityUpdated = +((/** @type {?} */ (document.getElementById('feeVolumeUpdated_' + checkboxs[j].value)))).value;
+                    if (this.quantityUpdated === 0) {
+                        this.elementId = 'feeVolumeUpdated_' + checkboxs[j].value;
+                        this.errorMsg.push('You need to enter quantity');
+                        this.getErrorClass(this.elementId);
+                    }
+                    if (this.fullRefund && quantity !== this.quantityUpdated) {
+                        this.elementId = 'feeVolumeUpdated_' + checkboxs[j].value;
+                        this.errorMsg.push('The quantity you want to refund should be maximun available quantity');
+                        this.getErrorClass(this.elementId);
+                    }
+                    if (!this.fullRefund && this.quantityUpdated > 0 && amountToRefund > 0) {
+                        this.refundAmtForFeeVolumes = +((/** @type {?} */ (document.getElementById('feeVOl_' + checkboxs[j].value)))).innerText;
+                        this.allowedRefundAmount = this.quantityUpdated * this.refundAmtForFeeVolumes;
+                        if (this.allowedRefundAmount !== amountToRefund) {
+                            this.elementId = 'feeAmount_' + checkboxs[j].value;
+                            this.errorMsg.push('The Amount to Refund should be equal to the product of Fee Amount and quantity');
+                            this.getErrorClass(this.elementId);
+                        }
+                    }
+                    if (!this.fullRefund && amountToRefund > apportionAmount) {
+                        this.elementId = 'feeAmount_' + checkboxs[j].value;
+                        this.errorMsg.push('The amount you want to refund is more than the amount paid');
+                        this.getErrorClass(this.elementId);
+                    }
+                    if (!this.fullRefund && this.quantityUpdated > 0 && this.quantityUpdated > quantity) {
+                        this.elementId = 'feeVolumeUpdated_' + checkboxs[j].value;
+                        this.errorMsg.push('The quantity you want to refund is more than the available quantity');
+                        this.getErrorClass(this.elementId);
+                    }
+                }
+                //this.remissionForm.value.feesList.find(id=>id=checkboxs[j].value)['amounttorefund'] = apportionAmount;
+            }
+        }
+        if (this.errorMsg.length === 0) {
+            if (this.isFromCheckAnsPage) {
+                this.isFromCheckAnsPage = false;
+                this.totalRefundAmount = this.remissionForm.value.feesList.reduce((/**
+                 * @param {?} a
+                 * @param {?} c
+                 * @return {?}
+                 */
+                function (a, c) { return a + c.amounttorefund * c.selected; }), 0);
                 this.viewStatus = 'checkissuerefundpage';
+                this.viewCompStatus = '';
+                return;
             }
+            this.viewCompStatus = 'issuerefundpage1';
+            this.getRefundReasons();
+        }
+    };
+    /**
+     * @param {?} value
+     * @param {?} amount
+     * @param {?} volume
+     * @param {?} i
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.calAmtToRefund = /**
+     * @param {?} value
+     * @param {?} amount
+     * @param {?} volume
+     * @param {?} i
+     * @return {?}
+     */
+    function (value, amount, volume, i) {
+        /** @type {?} */
+        var volumeFee = amount / volume;
+        /** @type {?} */
+        var amtToRefund = value * volumeFee;
+        /** @type {?} */
+        var formArray = (/** @type {?} */ (this.remissionForm.controls.feesList));
+        formArray.at(i).get('amounttorefund').setValue(amtToRefund);
+        //  (<HTMLInputElement>document.getElementById('feeAmount_'+i)).value = +amtToRefund;
+        // const formControl = this.remissionForm.controls.feesList['amounttorefund'].at(index);
+        // formControl.setValue(amtToRefund);
+    };
+    /**
+     * @param {?=} note
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoContactDetailsPage = /**
+     * @param {?=} note
+     * @return {?}
+     */
+    function (note) {
+        if (note) {
+            this.notification = { contact_details: note, notification_type: note.notification_type };
+        }
+        this.errorMessage = '';
+        this.viewCompStatus = '';
+        this.viewStatus = 'contactDetailsPage';
+        this.isRefundRemission = true;
+        this.errorMessage = false;
+    };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.getRefundReasons = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        if (this.viewCompStatus === 'issuerefundpage1') {
+            this.refundService.getRefundReasons().subscribe((/**
+             * @param {?} refundReasons
+             * @return {?}
+             */
+            function (refundReasons) {
+                _this.refundReasons = refundReasons.filter((/**
+                 * @param {?} data
+                 * @return {?}
+                 */
+                function (data) { return data.recently_used === false; }));
+                _this.refundReasons = _this.refundReasons.filter((/**
+                 * @param {?} data
+                 * @return {?}
+                 */
+                function (data) { return data.name !== 'Retrospective remission'; }));
+                _this.cd.detectChanges();
+                _this.commonRefundReasons = refundReasons.filter((/**
+                 * @param {?} data
+                 * @return {?}
+                 */
+                function (data) { return data.recently_used === true; }));
+                _this.commonRefundReasons.sort((/**
+                 * @param {?} a
+                 * @param {?} b
+                 * @return {?}
+                 */
+                function (a, b) { return a.toString().localeCompare(b); }));
+                _this.cd.detectChanges();
+            }));
         }
     };
     /**
+     * @param {?} elementId
      * @return {?}
      */
-    AddRemissionComponent.prototype.gotoIssueRefundPage = /**
+    AddRemissionComponent.prototype.getErrorClass = /**
+     * @param {?} elementId
      * @return {?}
      */
-    function () {
-        this.errorMessage = '';
-        this.viewCompStatus = 'issuerefund';
-        this.viewStatus = '';
-        this.isRefundRemission = true;
-        this.errorMessage = false;
-        this.refundHasError = false;
-        this.isReasonEmpty = false;
+    function (elementId) {
+        if (this.errorMsg.length > 0) {
+            /** @type {?} */
+            var ele = document.getElementById(elementId);
+            ele.classList.add('inline-error-class');
+        }
     };
     /**
      * @return {?}
@@ -7263,11 +8240,12 @@ var AddRemissionComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        // this.remissionForm.controls['refundReason'].setValue('Duplicate payment');
+        this.isFromCheckAnsPage = true;
         this.errorMessage = '';
+        this.errorMsg = [];
         this.refundHasError = false;
         this.isReasonEmpty = false;
-        this.viewCompStatus = 'issuerefund';
+        this.viewCompStatus = 'issuerefundpage1';
         this.viewStatus = '';
         this.isRefundRemission = true;
     };
@@ -7281,11 +8259,17 @@ var AddRemissionComponent = /** @class */ (function () {
         var _this = this;
         this.isConfirmationBtnDisabled = true;
         this.errorMessage = '';
+        this.errorMsg = [];
         if (this.isRefundRemission) {
             this.retroRemission = true;
         }
+        this.fees = this.remissionForm.value.feesList.filter((/**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) { return value.selected === true; }));
         /** @type {?} */
-        var requestBody = new PostRefundRetroRemission(this.payment.reference, this.refundReason);
+        var requestBody = new PostRefundRetroRemission(this.ccdCaseNumber, this.payment.reference, this.refundReason, this.totalRefundAmount, this.fees, this.contactDetailsObj);
         this.paymentViewService.postRefundsReason(requestBody).subscribe((/**
          * @param {?} response
          * @return {?}
@@ -7309,53 +8293,98 @@ var AddRemissionComponent = /** @class */ (function () {
             _this.cd.detectChanges();
         }));
     };
-    // Retro Refund
-    // Retro Refund
     /**
      * @return {?}
      */
-    AddRemissionComponent.prototype.confirmRetroRefund = 
-    // Retro Refund
-    /**
+    AddRemissionComponent.prototype.gotoRefundReasonPage = /**
      * @return {?}
      */
     function () {
-        var _this = this;
-        this.isConfirmationBtnDisabled = true;
-        this.errorMessage = '';
-        if (this.isRefundRemission) {
-            this.retroRemission = true;
-        }
-        /** @type {?} */
-        var requestBody = new PostRefundRetroRemission(this.payment.reference, 'RR004-Retrospective remission');
-        this.paymentViewService.postRefundsReason(requestBody).subscribe((/**
-         * @param {?} response
-         * @return {?}
-         */
-        function (response) {
-            if (JSON.parse(response)) {
-                _this.viewCompStatus = '';
-                _this.viewStatus = 'retrorefundconfirmationpage';
-                _this.refundReference = JSON.parse(response).refund_reference;
-                if (JSON.parse(response).refund_amount) {
-                    _this.refundAmount = JSON.parse(response).refund_amount;
-                }
-            }
-        }), (/**
-         * @param {?} error
-         * @return {?}
-         */
-        function (error) {
-            _this.errorMessage = error;
-            _this.isConfirmationBtnDisabled = false;
-        }));
+        this.viewStatus = '';
+        this.viewCompStatus = 'issuerefundpage1';
     };
+    // Retro Refund
+    // confirmRetroRefund() {
+    //   this.isConfirmationBtnDisabled = true;
+    //   this.errorMessage = '';
+    //   this.errorMsg = [];
+    //   if( this.isRefundRemission) {
+    //     this.retroRemission = true;
+    //   }
+    //   const requestBody = new PostRefundRetroRemission(this.payment.reference,'RR004-Retrospective remission', this.contactDetailsObj);
+    //   this.paymentViewService.postRefundsReason(requestBody).subscribe(
+    //     response => {
+    //         if (JSON.parse(response)) {
+    //           this.viewCompStatus  = '';
+    //           this.viewStatus = 'retrorefundconfirmationpage';
+    //           this.refundReference =JSON.parse(response).refund_reference;
+    //           if(JSON.parse(response).refund_amount) {
+    //             this.refundAmount = JSON.parse(response).refund_amount;
+    //             }
+    //         }
+    //     },
+    //     (error: any) => {
+    //       this.errorMessage = error;
+    //       this.isConfirmationBtnDisabled = false;
+    //     });
+    // }
+    // Retro Refund
+    // confirmRetroRefund() {
+    //   this.isConfirmationBtnDisabled = true;
+    //   this.errorMessage = '';
+    //   this.errorMsg = [];
+    //   if( this.isRefundRemission) {
+    //     this.retroRemission = true;
+    //   }
+    //   const requestBody = new PostRefundRetroRemission(this.payment.reference,'RR004-Retrospective remission', this.contactDetailsObj);
+    //   this.paymentViewService.postRefundsReason(requestBody).subscribe(
+    //     response => {
+    //         if (JSON.parse(response)) {
+    //           this.viewCompStatus  = '';
+    //           this.viewStatus = 'retrorefundconfirmationpage';
+    //           this.refundReference =JSON.parse(response).refund_reference;
+    //           if(JSON.parse(response).refund_amount) {
+    //             this.refundAmount = JSON.parse(response).refund_amount;
+    //             }
+    //         }
+    //     },
+    //     (error: any) => {
+    //       this.errorMessage = error;
+    //       this.isConfirmationBtnDisabled = false;
+    //     });
+    // }
     /**
      * @param {?} key
      * @param {?} value
      * @return {?}
      */
-    AddRemissionComponent.prototype.selectRadioButton = /**
+    AddRemissionComponent.prototype.selectRadioButton = 
+    // Retro Refund
+    // confirmRetroRefund() {
+    //   this.isConfirmationBtnDisabled = true;
+    //   this.errorMessage = '';
+    //   this.errorMsg = [];
+    //   if( this.isRefundRemission) {
+    //     this.retroRemission = true;
+    //   }
+    //   const requestBody = new PostRefundRetroRemission(this.payment.reference,'RR004-Retrospective remission', this.contactDetailsObj);
+    //   this.paymentViewService.postRefundsReason(requestBody).subscribe(
+    //     response => {
+    //         if (JSON.parse(response)) {
+    //           this.viewCompStatus  = '';
+    //           this.viewStatus = 'retrorefundconfirmationpage';
+    //           this.refundReference =JSON.parse(response).refund_reference;
+    //           if(JSON.parse(response).refund_amount) {
+    //             this.refundAmount = JSON.parse(response).refund_amount;
+    //             }
+    //         }
+    //     },
+    //     (error: any) => {
+    //       this.errorMessage = error;
+    //       this.isConfirmationBtnDisabled = false;
+    //     });
+    // }
+    /**
      * @param {?} key
      * @param {?} value
      * @return {?}
@@ -7368,6 +8397,7 @@ var AddRemissionComponent = /** @class */ (function () {
         remissionctrls['reason'].reset();
         this.isRefundReasonsSelected = true;
         this.errorMessage = false;
+        this.errorMsg = [];
         this.isReasonEmpty = false;
         this.showReasonText = false;
         this.refundHasError = false;
@@ -7402,6 +8432,32 @@ var AddRemissionComponent = /** @class */ (function () {
             this.refundReason = args.target.options[args.target.options.selectedIndex].id;
         }
     };
+    /**
+     * @param {?} obj
+     * @param {?} type
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.getContactDetails = /**
+     * @param {?} obj
+     * @param {?} type
+     * @return {?}
+     */
+    function (obj, type) {
+        this.contactDetailsObj = obj;
+        this.viewCompStatus = '';
+        this.viewStatus = type;
+    };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoPartialFeeRefundScreen = /**
+     * @return {?}
+     */
+    function () {
+        this.refundHasError = false;
+        this.viewCompStatus = 'issuerefund';
+        this.viewStatus = '';
+    };
     /**
      * @param {?} event
      * @return {?}
@@ -7413,6 +8469,8 @@ var AddRemissionComponent = /** @class */ (function () {
     function (event) {
         var _this = this;
         this.errorMessage = '';
+        this.errorMsg = [];
+        this.isFromCheckAnsPage = false;
         event.preventDefault();
         if (this.isFromServiceRequestPage && !this.isFromPaymentDetailPage) {
             this.viewStatus = 'order-full-view';
@@ -7511,6 +8569,40 @@ var AddRemissionComponent = /** @class */ (function () {
         //   this.paymentLibComponent.isFromRefundStatusPage = true;
         // }
     };
+    /**
+     * @param {?=} note
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoAddressPage = /**
+     * @param {?=} note
+     * @return {?}
+     */
+    function (note) {
+        if (note) {
+            this.notification = { contact_details: note, notification_type: note.notification_type };
+        }
+        this.errorMessage = '';
+        this.viewCompStatus = 'addrefundforremission';
+        this.viewStatus = '';
+        this.isRefundRemission = true;
+        this.errorMessage = false;
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoRemissionSuccess = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        event.preventDefault();
+        this.errorMessage = '';
+        this.viewCompStatus = '';
+        this.viewStatus = 'retroremissionconfirmationpage';
+        this.isRefundRemission = true;
+        this.errorMessage = false;
+    };
     /**
      * @return {?}
      */
@@ -7520,6 +8612,7 @@ var AddRemissionComponent = /** @class */ (function () {
     function () {
         this.OrderslistService.setnavigationPage('casetransactions');
         this.errorMessage = '';
+        this.errorMsg = [];
         this.paymentLibComponent.viewName = 'case-transactions';
         this.paymentLibComponent.VIEW = 'case-transactions';
         this.paymentLibComponent.ISTURNOFF = this.isTurnOff;
@@ -7554,6 +8647,7 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function (event) {
         event.preventDefault();
+        this.errorMsg = [];
         if (!this.paymentLibComponent.isFromServiceRequestPage) {
             this.OrderslistService.setnavigationPage('casetransactions');
             this.OrderslistService.setisFromServiceRequestPage(false);
@@ -7646,6 +8740,17 @@ var AddRemissionComponent = /** @class */ (function () {
         this.OrderslistService.setorderRemissionTotal(null);
         this.OrderslistService.setorderFeesTotal(null);
     };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.changeRefundAmount = /**
+     * @return {?}
+     */
+    function () {
+        this.isFromCheckAnsPage = true;
+        this.viewCompStatus = 'issuerefund';
+        this.viewStatus = '';
+    };
     /**
      * @param {?} currency
      * @return {?}
@@ -7663,8 +8768,8 @@ var AddRemissionComponent = /** @class */ (function () {
     AddRemissionComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-add-remission',
-                    template: "<div class=\"add-remission pagesize\">\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n      <h1 class=\"heading-large\">Add remission </h1>\n      <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  Add remission to {{ fee?.code }}: {{ fee?.description }}\n                <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C OR PA21-123456</span>\n              </label>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n              </p>\n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n                How much does the applicant need to pay?\n              </label>\n\n              <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                <div class=\"hmcts-currency-input\">\n                <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                  <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                  <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                  <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n                </p>\n              </div>\n            </div>\n          </form>\n          <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n              Submit\n            </button>\n        </div>\n      </form>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n          <span class=\"govuk-warning-text__assistive\">Warning</span>\n          Are you sure you want to add remission to this fee?\n        </strong>\n      </div>\n      <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n            <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n            <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n        </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n        Cancel\n      </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"confirmRemission()\">\n        Confirm\n      </button>\n\n  </ng-container>\n\n  <!-- Add retro remission changes-->\n\n  <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n      <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n      <form novalidate>\n          <div class=\"govuk-form-group\">\n            <form [formGroup]=\"remissionForm\" novalidate>\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  <span class=\"form-hint\">For example: HWF-A1B-23C OR PA21-123456</span>\n                </label>\n                <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                  <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                  <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n                </p>\n                <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n             \n              </div>\n            \n            </form>\n            <div class=\"govuk-button-group\">\n                <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n            </div>\n            <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n          </div>\n      </form>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                      <fieldset class=\"govuk-fieldset\">\n                        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                            <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the remission amount\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                                Enter the  amount\n                            </h1> \n                          </legend>\n                       <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                       <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                        <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                        <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                        <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n                      </p>\n                          <div class=\"hmcts-currency-input\">\n                           \n                              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                              <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                              \n              \n                        </div>\n                      </fieldset>\n                  </form>\n            \n                  <div class=\"govuk-button-group\">\n                      <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                      <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n                  \n                  </div>\n                  <p>\n                    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                </p>\n              </div>\n    \n          </form>\n      </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n              <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Help with fees or remission reference</td>\n              <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n               <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n              <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                  <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n      <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Remission added\n          </h1>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n             \n            </div>\n          </div>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" >\n              <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </button>\n            </div>\n            <p class=\"govuk-body\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n              Return to case\n          </a>\n            </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n      <div class=\"govuk-grid-row\">\n        <div >\n          <div class=\"govuk-panel govuk-panel--confirmation\">\n            <h1 class=\"govuk-panel__title\">\n              Refund submitted\n            </h1>\n            \n            <div class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n            </div>\n      \n          </div>\n          <div *ngIf=\"isPaymentSuccess\">\n          <h2 class=\"govuk-heading-l\">What happens next</h2>\n          <p class=\"govuk-body\">\n            A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n          </p>\n        </div>\n        <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n          Return to case\n      </a>\n        </p>\n        </div>\n      </div>\n    \n  </ng-container>\n\n  <!-- Issue Refund Section -->\n\n  <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n      <h1 class=\"heading-large\">Process refund</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <h1 class=\"heading-large\">Why are you making this refund?\n        </h1>\n       \n\n        <div class=\"govuk-form-group\">\n            <form novalidate>\n                <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                    <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n                       \n                          <div\n                            [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n                            data-module=\"govuk-radios\" >\n                            <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n                              <span *ngIf=\"refundHasError\">Select a reason why you\u2019re making this refund</span>\n                            </p>\n\n                           \n\n                            <div class = \"container-fluid\">\n                              <div class=\"row\">\n                              <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n                                <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n                                  <input   class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n                                  formControlName=\"refundReason\" value={{refund.code}}\n                                    (change)=\"selectRadioButton(refund.name, refund.name)\">\n                                  <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                    {{refund.name}}\n                                  </label>\n\n                                  <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                      <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                          Enter reason\n                                      </label>\n                                      <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                      <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                          <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                        </p>\n                                       \n                                    <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                  </div>\n                                  </div>\n                                <!-- </div> -->\n                              </div>\n                              </div>\n                            </div>\n                            <br/>\n                            <div>\n                                <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                  <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                  <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                    <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                  </select>\n                              \n                            </div>\n                                <br/>\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                  <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                    <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                        Enter reason\n                                    </label>\n                                    <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                      </p>\n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                  </div>\n                                </div>\n\n                           \n                          </div>\n                    </fieldset>\n                  </form>\n               </div>\n               </form>\n        </div>\n        <div class=\"govuk-button-group\">\n            <button  (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n            <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n        </div>\n        <p>\n          <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n      \n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> {{ displayRefundReason  }} \n               <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <!--Retro Refund-->\n  <ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> Retrospective remission </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td class=\"govuk-table__cell\">{{this.remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n              <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n              <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"processRefund()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Refund submitted\n          </h1>\n          \n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n    \n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n        </p>\n      </div>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        Return to case\n    </a>\n      </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n    <ccpay-service-request\n    [viewStatus] = \"viewStatus\"\n    [orderRef] = \"orderRef\"\n    [orderStatus] = \"orderStatus\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n    [takePayment] = \"takePayment\"\n    [ccdCaseNumber] = \"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\">\n  </ccpay-service-request>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'payment-view'\">\n    <ccpay-payment-view \n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n    [isTurnOff] = \"isTurnOff\" \n    [isTakePayment] = \"takePayment\"  \n    [caseType] = \"caseType\"\n    [isOldPcipalOff] = \"isOldPcipalOff\"\n    [isNewPcipalOff] = \"isNewPcipalOff\"\n    [orderRef] = \"orderRef\"\n    [orderStatus] = \"orderStatus\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    >\n  </ccpay-payment-view>\n  </ng-container>\n\n</div>\n\n\n\n",
-                    styles: [".add-remission .button{padding:.5em;font-size:19px;font-weight:200;margin:20px 2px}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .right{cursor:pointer}.add-remission .govuk-label--s,.add-remission .govuk-warning-text__text,.add-remission .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:#a71414 solid 3px;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body,.add-remission .govuk-body-m{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .radio,.add-remission .right{float:right}.govuk-input{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.white{color:#fff}.pagesize{margin:2em;width:97%}.right{cursor:pointer}.form-hint{font-size:19px!important}"]
+                    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    <div *ngIf=\"errorMsg.length > 0\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n         \n          <li>{{err}}</li>\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n      <h1 class=\"heading-large\">Add remission </h1>\n      <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  Add remission to {{ fee?.code }}: {{ fee?.description }}\n                <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C OR PA21-123456</span>\n              </label>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n              </p>\n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n                How much does the applicant need to pay?\n              </label>\n\n              <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                <div class=\"hmcts-currency-input\">\n                <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                  <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                  <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                  <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n                </p>\n              </div>\n            </div>\n          </form>\n          <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n              Submit\n            </button>\n        </div>\n      </form>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n          <span class=\"govuk-warning-text__assistive\">Warning</span>\n          Are you sure you want to add remission to this fee?\n        </strong>\n      </div>\n      <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n            <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n            <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n        </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n        Cancel\n      </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"confirmRemission()\">\n        Confirm\n      </button>\n\n  </ng-container>\n\n  <!-- Add retro remission changes-->\n\n  <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n      <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n      <form novalidate>\n          <div class=\"govuk-form-group\">\n            <form [formGroup]=\"remissionForm\" novalidate>\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  <span class=\"form-hint\">For example: HWF-A1B-23C OR PA21-123456</span>\n                </label>\n                <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                  <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                  <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n                </p>\n                <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n             \n              </div>\n            \n            </form>\n            <div class=\"govuk-button-group\">\n                <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n            </div>\n            <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n          </div>\n      </form>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                      <fieldset class=\"govuk-fieldset\">\n                        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                            <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the remission amount\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                                Enter the  amount\n                            </h1> \n                          </legend>\n                       <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                       <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                        <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                        <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                        <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n                      </p>\n                          <div class=\"hmcts-currency-input\">\n                           \n                              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                              <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                              \n              \n                        </div>\n                      </fieldset>\n                  </form>\n            \n                  <div class=\"govuk-button-group\">\n                      <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                      <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n                  \n                  </div>\n                  <p>\n                    <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                </p>\n              </div>\n    \n          </form>\n      </div>\n  </ng-container>\n  <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n              <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n            <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n        </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Help with fees or remission reference</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)=\"gotoAmountRetroRemission()\">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)=\"gotoProcessRetroRemission()\">Continue </button>\n            </div>\n            <p class=\"govuk-body\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n              Return to case\n          </a>\n            </p>\n      </div>\n    </div>\n  </ng-container>\n\n\n  <ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n      <h1 class=\"govuk-heading-l\">Process refund</h1>\n      <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <ccpay-contact-details\n    [addressObj] = notification\n    (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n    (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n    <p>\n        <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            Cancel\n        </a>\n    </p>\n\n</ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n          <h1 class=\"heading-large\"> Check your answers</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              </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              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n            <td class=\"govuk-table__cell\">{{orderParty}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n          <td class=\"govuk-table__cell\">\n            <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n              <strong>Email</strong>\n              <br/>\n              {{contactDetailsObj?.email}}\n            </div>\n            <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n              <strong>Post</strong>\n              <br/>\n              {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\n            </div>\n            <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right margin-top--size\" >Change</a>\n        </td>\n        </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> Submit refund </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 === 'refundconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n      <div class=\"govuk-grid-row\">\n        <div >\n          <div class=\"govuk-panel govuk-panel--confirmation\">\n            <h1 class=\"govuk-panel__title\">\n              Refund submitted\n            </h1>\n            \n            <div class=\"govuk-panel__body\">\n              <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n            </div>\n      \n          </div>\n          <div *ngIf=\"isPaymentSuccess\">\n          <h2 class=\"govuk-heading-l\">What happens next</h2>\n          <p class=\"govuk-body\">\n            A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n          </p>\n        </div>\n        <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n          Return to case\n      </a>\n        </p>\n        </div>\n      </div>\n    \n  </ng-container>\n\n  <!-- Issue Refund Section -->\n  <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n    <div class=\"govuk-form-group\">\n      <form [formGroup]=\"remissionForm\" novalidate>\n      <h1 class=\"heading-large\">Issue refund</h1>\n      <h2 class=\"heading-medium\">Case reference:#{{ccdCaseNumber | ccdHyphens }}</h2>\n      <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n        Payment reference: {{paymentReference}}\n      </span>\n      <h3 class=\"heading-small\">Select fees to be refunded</h3>\n      <!--TABLE-->\n      <div>\n        <table class=\"govuk-table\">\n          <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header  col-1\" scope=\"col\">Select</td>\n              <td class=\"govuk-table__header col-18\" scope=\"col\">Fee description</td>\n              <td class=\"govuk-table__header col-6\" scope=\"col\">Fee amount</td>\n              <td class=\"govuk-table__header col-6\" scope=\"col\">Total paid</td>\n              <td class=\"govuk-table__header col-6\" scope=\"col\">Quantity</td>\n              <td class=\"govuk-table__header col-8\" scope=\"col\">Amount to refund</td>\n              <td class=\"govuk-table__header\" scope=\"col\"></td>\n            </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n              <td class=\"govuk-table__cell\">\n                <div  [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n                  <div class=\"govuk-checkboxes__item\">\n                    <input  class=\"govuk-checkboxes__input\" (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" id=\"{{fee.controls['id'].value}}\" name=\"organisation\" type=\"checkbox\" value=\"{{fee.controls['id'].value}}\" formControlName=\"selected\" >\n                    <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n                      <span style=\"display:none\">Select</span>\n                    </label>\n                  </div>\n                </div>\n              </td>\n              <td class=\"govuk-table__cell  whitespace-inherit\">{{fee.controls['description'].value}} </td>\n              <td class=\"govuk-table__cell  whitespace-inherit left\" >\n                <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n                {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n              </td>\n              <td class=\"govuk-table__cell  whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n              <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value >1\">\n                <div [formGroupName]=\"i\">\n                <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['volume'].value}}\"  name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updatedVolume\" type=\"text\" >\n              </div>\n              </td>\n              <td class=\"govuk-table__cell  whitespace-inherit left\"  *ngIf=\"fee.controls['volume'].value ===1\">\n                <input disabled=\"disabled\"  class=\"govuk-input govuk-input--width-4 center\"  id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\"   value=\"{{fee.controls['volume'].value}}\">\n              </td>\n              <td class=\"govuk-table__cell  whitespace-inherit center\" scope=\"row\">\n              \n                  <div  [formGroupName]=\"i\"  class=\"hmcts-currency-input\">\n                    \n                    <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                    <!-- <div *ngIf=\"fee.controls['volume'].value >1\"> -->\n                      <input   disabled=\"disabled\" class=\"govuk-input govuk-input--width-10\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \"  pattern=\"[0-9]*\" formControlName=\"amounttorefund\">\n                    <!-- </div> -->\n                    <!-- <div *ngIf=\"fee.controls['volume'].value ===1\">\n                      <input   disabled=\"disabled\" class=\"govuk-input govuk-input--width-10\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \"  pattern=\"[0-9]*\" formControlName=\"amounttorefund\">\n                    \n                    </div> -->\n                    <input  id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n\t\t\t\t\t          <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n\t\t\t\t\t          <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n                 </div> \n   \n              </td>\n            </tr>\n          </tbody>\n\n          <!-- <div formArrayName=\"feesList\" *ngFor=\"let item of feesList?.controls; let i = index\">\n            <div [formGroupName]=\"i\">\n                <label for=\"\">Your row</label>\n                \n                <input type=\"checkbox\" formControlName=\"selected\">\n                <input formControlName=\"amouttorefund\"> -->\n                <!-- <button (click)=\"removeProduct(group.value,i)\">remove</button> -->\n            <!-- </div>\n          </div> -->\n\n          <!-- {{remissionForm?.value|json}} -->\n          <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n          </tbody>\n        </table>\n      </div>\n      <div class=\"govuk-button-group\">\n  \n    \n    <a  (click)=\"gotoServiceRequestPage($event)\"  draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n      Previous\n    </a>\n    \n      \n    <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage()\" class=\"govuk-button\">\n      Continue\n    </button>\n    \n      </div>\n      <p>\n        <a  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n      </p>\n    </form>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n      <h1 class=\"heading-large\">Process refund</h1>\n      <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n      <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n        Payment reference: {{this.payment.reference}}\n      </span>\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)=\"gotoPartialFeeRefundScreen()\" 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 === 'contactDetailsPage'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'>      \n      <h1 class=\"govuk-heading-l\">Process refund</h1>\n      <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n      <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n        Payment reference: {{this.payment.reference}}\n      </span>\n    <ccpay-contact-details\n    [addressObj] = notification\n    (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n    (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n    <p>\n        <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n            Cancel\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          \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          <tr>\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\">Refund amount</td>\n            <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n            <a (click)=\"changeRefundAmount()\" 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\">Send to</td>\n            <td class=\"govuk-table__cell\">{{orderParty}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n          <td class=\"govuk-table__cell\">\n            <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n              <strong>Email</strong>\n              <br/>\n              {{contactDetailsObj?.email}}\n            </div>\n            <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n              <strong>Post</strong>\n              <br/>\n              {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\n            </div>\n            <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right margin-top--size\" >Change</a>\n        </td>\n      </tr>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> 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='ADDRESSDETAILSRETROREMISSIONPAGE'>      \n    <h1 class=\"govuk-heading-l\">Process refund</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n      Payment reference: {{this.payment.reference}}\n    </span>\n  <ccpay-contact-details \n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n  (redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n  </ng-container>\n  <ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</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          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n            <td class=\"govuk-table__cell\">{{orderParty}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n          <td class=\"govuk-table__cell\">\n            <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n              <strong>Email</strong>\n              <br/>\n              {{contactDetailsObj?.email}}\n            </div>\n            <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n              <strong>Post</strong>\n              <br/>\n              {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\n            </div>\n            <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right margin-top--size\" >Change</a>\n        </td>\n      </table>\n      <div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"processRefund()\">\n        Submit refund\n      </button>\n      </div>\n      <p>\n          <a href=\"javascript:void(0)\"  (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Refund submitted\n          </h1>\n          \n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n    \n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n        </p>\n      </div>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        Return to case\n    </a>\n      </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n    <ccpay-service-request\n    [viewStatus] = \"viewStatus\"\n    [orderRef] = \"orderRef\"\n    [orderStatus] = \"orderStatus\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n    [takePayment] = \"takePayment\"\n    [ccdCaseNumber] = \"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\">\n  </ccpay-service-request>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'payment-view'\">\n    <ccpay-payment-view \n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n    [isTurnOff] = \"isTurnOff\" \n    [isTakePayment] = \"takePayment\"  \n    [caseType] = \"caseType\"\n    [isOldPcipalOff] = \"isOldPcipalOff\"\n    [isNewPcipalOff] = \"isNewPcipalOff\"\n    [orderRef] = \"orderRef\"\n    [orderStatus] = \"orderStatus\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    >\n  </ccpay-payment-view>\n  </ng-container>\n\n</div>\n\n\n\n",
+                    styles: [".add-remission .button{padding:.5em;font-size:19px;font-weight:200;margin:20px 2px}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .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 .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-font19px,.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%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}"]
                 }] }
     ];
     /** @nocollapse */
@@ -7679,6 +8784,7 @@ var AddRemissionComponent = /** @class */ (function () {
     ]; };
     AddRemissionComponent.propDecorators = {
         fee: [{ type: Input }],
+        fees: [{ type: Input }],
         payment: [{ type: Input }],
         remission: [{ type: Input }],
         ccdCaseNumber: [{ type: Input }],
@@ -8446,13 +9552,29 @@ var TableComponent = /** @class */ (function () {
                 return (r[user_full_name] = '', r);
             }), {});
             this.userLst = Object.keys(this.userLst);
+            this.userLst.sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) { return a.toString().localeCompare(b); }));
+            this.serviceLst = this.refundList.reduce((/**
+             * @param {?} r
+             * @param {?} __1
+             * @return {?}
+             */
+            function (r, _a) {
+                var service_type = _a.service_type;
+                return (r[service_type] = '', r);
+            }), {});
+            this.serviceLst = Object.keys(this.serviceLst);
+            this.serviceLst.sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) { return a.toString().localeCompare(b); }));
         }
-        this.userLst.sort((/**
-         * @param {?} a
-         * @param {?} b
-         * @return {?}
-         */
-        function (a, b) { return a.toString().localeCompare(b); }));
     };
     /**
      * Set the paginator and sort after the view init since this component will
@@ -8552,8 +9674,8 @@ var TableComponent = /** @class */ (function () {
     TableComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-table',
-                    template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n<div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group\" style=\"float: right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option  *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n  <mat-table [dataSource]=\"dataSource\" matSort>\n\n    <ng-container matColumnDef=\"ccd_case_number\">\n      <mat-header-cell  *matHeaderCellDef >Case reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"refund_reference\">\n      <mat-header-cell  *matHeaderCellDef > Refund reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"user_full_name\">\n      <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_created\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header> Date created </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"javascript:void(0)\" (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n        </ng-container>\n      \n        <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n        </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n    </mat-row>\n  </mat-table>\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
-                    styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}"]
+                    template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  \n\n<div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group float-right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option  *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n</div>\n\n  <div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group float-right-padding\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by service:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All services</option>\n      <option  *ngFor=\"let name of serviceLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n  <mat-table [dataSource]=\"dataSource\" matSort>\n\n    <ng-container matColumnDef=\"ccd_case_number\">\n      <mat-header-cell  *matHeaderCellDef >Case reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"refund_reference\">\n      <mat-header-cell  *matHeaderCellDef > Refund reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"user_full_name\">\n      <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_created\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header> Date created </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"javascript:void(0)\" (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n        </ng-container>\n      \n        <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n        </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n    </mat-row>\n  </mat-table>\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
+                    styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}.float-right{float:right}.float-right-padding{float:right;padding-right:2em}"]
                 }] }
     ];
     /** @nocollapse */
@@ -8574,6 +9696,22 @@ var TableComponent = /** @class */ (function () {
     return TableComponent;
 }());
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var IPutNotificationRequest = /** @class */ (function () {
+    function IPutNotificationRequest(contactDetails, notificationType) {
+        if (notificationType === 'EMAIL') {
+            this.recipient_email_address = contactDetails;
+        }
+        else if (notificationType === 'LETTER') {
+            this.recipient_postal_address = contactDetails;
+        }
+    }
+    return IPutNotificationRequest;
+}());
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -8591,20 +9729,17 @@ var IResubmitRefundRequest = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var RefundStatusComponent = /** @class */ (function () {
-    function RefundStatusComponent(formBuilder, refundService, paymentLibComponent, paymentViewService, router, OrderslistService$$1) {
+    function RefundStatusComponent(formBuilder, refundService, notificationService, paymentLibComponent, OrderslistService$$1) {
         var _this = this;
         this.formBuilder = formBuilder;
         this.refundService = refundService;
+        this.notificationService = notificationService;
         this.paymentLibComponent = paymentLibComponent;
-        this.paymentViewService = paymentViewService;
-        this.router = router;
         this.OrderslistService = OrderslistService$$1;
         this.LOGGEDINUSERROLES = [];
         this.rejectedRefundList = [];
         this.approvalStatus = 'Sent for approval';
         this.rejectStatus = 'Update required';
-        // approvalStatus = 'sent for approval';
-        // rejectStatus = 'sent back';
         this.errorMessage = null;
         this.refundButtonState = '';
         this.isAmountEmpty = false;
@@ -8613,6 +9748,9 @@ var RefundStatusComponent = /** @class */ (function () {
         this.isRemissionLessThanFeeError = false;
         this.refundHasError = false;
         this.refundReasons = [];
+        this.isResendOperationSuccess = false;
+        this.isEditDetailsClicked = false;
+        this.isEditAddressDeatilsClicked = false;
         this.isRefundBtnDisabled = true;
         this.isLastUpdatedByCurrentUser = true;
         this.isProcessRefund = false;
@@ -8638,13 +9776,9 @@ var RefundStatusComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        // if (this.check4AllowedRoles2AccessRefund()) {
         this.resetRemissionForm([false, false, false, false], 'All');
         this.bsPaymentDcnNumber = this.paymentLibComponent.bspaymentdcn;
         this.isCallFromRefundList = this.paymentLibComponent.isCallFromRefundList;
-        // if(this.paymentLibComponent.isFromRefundStatusPage) {
-        //   this.viewName = 'reviewandsubmitview';
-        // }
         if (this.paymentLibComponent.isRefundStatusView) {
             this.viewName = 'refundview';
             this.OrderslistService.getRefundView().subscribe((/**
@@ -8684,6 +9818,7 @@ var RefundStatusComponent = /** @class */ (function () {
             reason: new FormControl()
         });
         if (this.refundlist !== undefined) {
+            this.getRefundsNotification();
             this.getRefundsStatusHistoryList();
             if (this.LOGGEDINUSERROLES.some((/**
              * @param {?} i
@@ -8703,7 +9838,6 @@ var RefundStatusComponent = /** @class */ (function () {
                 this.refundButtonState = this.refundlist.refund_status.name;
             }
         }
-        //}
     };
     /**
      * @return {?}
@@ -8731,6 +9865,29 @@ var RefundStatusComponent = /** @class */ (function () {
                 });
         }
     };
+    /**
+     * @return {?}
+     */
+    RefundStatusComponent.prototype.getRefundsNotification = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.notificationService.getRefundNotification(this.refundlist.refund_reference).subscribe((/**
+         * @param {?} refundsNotification
+         * @return {?}
+         */
+        function (refundsNotification) {
+            _this.notificationList = refundsNotification['notifications'];
+        })),
+            (/**
+             * @param {?} error
+             * @return {?}
+             */
+            function (error) {
+                _this.errorMessage = error.replace(/"/g, "");
+            });
+    };
     /**
      * @param {?} refundlist
      * @param {?} navigationpage
@@ -8988,6 +10145,128 @@ var RefundStatusComponent = /** @class */ (function () {
             _this.errorMessage = error.replace(/"/g, "");
         }));
     };
+    /**
+     * @param {?} note
+     * @return {?}
+     */
+    RefundStatusComponent.prototype.gotoEditAddressDetails = /**
+     * @param {?} note
+     * @return {?}
+     */
+    function (note) {
+        this.notification = note;
+        this.isEditDetailsClicked = true;
+        this.viewName = 'refundEditView';
+    };
+    /**
+     * @param {?} obj
+     * @return {?}
+     */
+    RefundStatusComponent.prototype.getContactDetails = /**
+     * @param {?} obj
+     * @return {?}
+     */
+    function (obj) {
+        this.addressDetails = obj;
+        this.viewName = 'revieweditdetailsconfirmationpage';
+    };
+    /**
+     * @param {?=} note
+     * @return {?}
+     */
+    RefundStatusComponent.prototype.gotoEditDetailsPage = /**
+     * @param {?=} note
+     * @return {?}
+     */
+    function (note) {
+        if (note) {
+            this.notification = { contact_details: note, notification_type: note.notification_type };
+        }
+        this.isEditDetailsClicked = true;
+        this.viewName = 'refundEditView';
+    };
+    /**
+     * @return {?}
+     */
+    RefundStatusComponent.prototype.submitEditDetail = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.isResendOperationSuccess = false;
+        /** @type {?} */
+        var contactDetails = this.addressDetails.notification_type === 'EMAIL' ? this.addressDetails.email :
+            {
+                address_line: this.addressDetails.address_line,
+                city: this.addressDetails.city,
+                county: this.addressDetails.county,
+                country: this.addressDetails.country,
+                postal_code: this.addressDetails.postal_code,
+            };
+        /** @type {?} */
+        var resendRequest = new IPutNotificationRequest(contactDetails, this.addressDetails.notification_type);
+        this.refundService.putResendOrEdit(resendRequest, this.refundlist.refund_reference, this.addressDetails.notification_type).subscribe((/**
+         * @param {?} response
+         * @return {?}
+         */
+        function (response) {
+            _this.isResendOperationSuccess = response;
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        function (error) {
+            _this.isResendOperationSuccess = false;
+            _this.errorMessage = error.replace(/"/g, "");
+        }));
+    };
+    /**
+     * @param {?} notification
+     * @return {?}
+     */
+    RefundStatusComponent.prototype.putResend = /**
+     * @param {?} notification
+     * @return {?}
+     */
+    function (notification) {
+        var _this = this;
+        this.isResendOperationSuccess = false;
+        /** @type {?} */
+        var contactDetails = notification.notification_type === 'EMAIL' ? notification.contact_details.email :
+            {
+                address_line: notification.contact_details.address_line,
+                city: notification.contact_details.city,
+                county: notification.contact_details.county,
+                country: notification.contact_details.country,
+                postal_code: notification.contact_details.postal_code,
+            };
+        /** @type {?} */
+        var resendRequest = new IPutNotificationRequest(contactDetails, notification.notification_type);
+        this.refundService.putResendOrEdit(resendRequest, this.refundlist.refund_reference, notification.notification_type).subscribe((/**
+         * @param {?} response
+         * @return {?}
+         */
+        function (response) {
+            _this.isResendOperationSuccess = response;
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        function (error) {
+            _this.isResendOperationSuccess = false;
+            _this.errorMessage = error.replace(/"/g, "");
+        }));
+    };
+    /**
+     * @param {?} Event
+     * @return {?}
+     */
+    RefundStatusComponent.prototype.gotoCasetransationPageCancelBtnClicked = /**
+     * @param {?} Event
+     * @return {?}
+     */
+    function (Event) {
+    };
     /**
      * @param {?} refundReference
      * @param {?} refundList
@@ -9006,17 +10285,16 @@ var RefundStatusComponent = /** @class */ (function () {
     RefundStatusComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-refund-status',
-                    template: "\n<div *ngIf=\"errorMessage\">\n  <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n    <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n      Error in processing the request\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      {{ errorMessage }}\n    </div>\n  </div>\n</div>\n<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 pagesize\">\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>\n",
-                    styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 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}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}"]
+                    template: "\n<div *ngIf=\"errorMessage\">\n  <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n    <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n      Error in processing the request\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      {{ errorMessage }}\n    </div>\n  </div>\n</div>\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- payments -->\n\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n        <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n        <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n        <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n        <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n        <td class=\"govuk-table__header\" scope=\"col\"></td>\n      </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n      <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n        <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n        <td class=\"govuk-table__cell  whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n        </td>\n        <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n        </td>\n      </tr>\n    </tbody>\n    <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n      <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n    </tbody>\n  </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a  href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <h2 class=\"govuk-heading-l\">Refund details</h2>\n  <table>\n    \n    <tbody>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Refund reference</td>\n        <td>{{ refundlist?.refund_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Payment to be refunded</td>\n        <td>{{refundlist?.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Reason for refund</td>\n        <td>{{ refundlist?.reason }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold tb-col-w\">Amount refunded</td>\n        <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n      </tr>\n\n    </tbody>\n  </table>\n\n\n    <!-- Notification sent details -->\n    <div>\n      <br />\n      <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n      <table class=\"govuk-table\">\n        <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n          </tr>\n        </thead>\n        <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n          <tr class=\"govuk-table__row\" *ngFor=\"let notification of notificationList\">\n            <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy hh:mm:ss'}}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n            <td class=\"govuk-table__cell whitespace-inherit col-40\">\n              <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n                <strong>Email</strong><br>\n                {{notification?.contact_details?.email}}\n              </div>\n              <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n                <strong>Post</strong><br>\n                {{notification?.contact_details?.address_line}} {{notification?.contact_details?.city}} {{notification?.contact_details?.county}} {{notification?.contact_details?.country}} {{notification?.contact_details?.postal_code}}\n              </div>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a></td>\n          </tr>\n        </tbody>\n        <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n          </tr>\n        </tbody>\n      </table>  \n    </div>\n  <!-- Status history -->\n  <div>\n    <br />\n    <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' && !isResendOperationSuccess && !isEditDetailsClicked\">\n    <div *ngIf=\"refundButtonState==='Update required'\">\n      <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n      <br />\n      <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n        (click)=\"gotoReviewAndReSubmitPage()\">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' && !isResendOperationSuccess && !isEditDetailsClicked\">\n  <!-- <div class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n    </ol>\n  </div> -->\n  <div class=\"govuk-warning-text\">\n    <h1 class=\"heading-large\">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    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n      <td class=\"govuk-table__cell\">{{orderParty}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n      <td class=\"govuk-table__cell\">\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Email</strong>\n          <br/>\n          {{refundlist?.contact_details?.email}}\n        </div>\n        <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n          <strong>Post</strong>\n          <br/>\n          {{refundlist?.contact_details?.address_line}} {{refundlist?.contact_details?.city}} {{refundlist?.contact_details?.county}} {{refundlist?.contact_details?.country}} {{refundlist?.contact_details?.postal_code}}\n        </div> \n      </td>\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' && !isResendOperationSuccess && !isEditDetailsClicked\">\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' && !isResendOperationSuccess && !isEditDetailsClicked\">\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' && !isResendOperationSuccess && !isEditDetailsClicked\">\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>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n  <div class=\"govuk-grid-row\">\n    <div>\n      <div class=\"govuk-panel govuk-panel--confirmation\">\n        <h1 class=\"govuk-panel__title\">\n          Notification sent\n        </h1>\n\n        <div class=\"govuk-panel__body\">\n          <p class=\"govuk-body white\"><strong>Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n        </div>\n\n      </div>\n      <p class=\"govuk-body\">\n        <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n      </p>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>      \n    <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span class=\"govuk-hint font-size-19px\">\n      Refund reference: {{ refundlist?.refund_reference}}\n    </span>\n    <ccpay-contact-details\n    [isEditOperation] = isEditDetailsClicked\n    [addressObj] = notification\n    (assignContactDetails)=\"getContactDetails($event)\"\n    (redirectToIssueRefund)=\"gotoCasetransationPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n  <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'>      \n    <h1 class=\"govuk-heading-l\">Check your answers</h1>\n    <dl class=\"govuk-summary-list\">\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Refund reference\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ refundlist?.refund_reference}}\n        </dd>\n        <span class=\"govuk-summary-list__actions\"></span> \n      </div>\n      <div class=\"govuk-summary-list__row font-size-19px\">\n        <dt class=\"govuk-summary-list__key\">\n          Send via\n          <br/>\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Email</strong>\n            <br/>\n            {{addressDetails?.email}}\n          </div>\n          <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n            <strong>Post</strong>\n            <br/>\n            {{addressDetails?.address_line}} {{addressDetails?.city}} {{addressDetails?.county}} {{addressDetails?.country}} {{addressDetails?.postal_code}}\n          </div>        \n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails)\">\n            Change\n          </a>\n        </dd>\n      </div>\n    </dl>\n    <div class=\"govuk-button-group\">\n      <button (click)=\"gotoEditDetailsPage(addressDetails)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n      <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n        data-module=\"govuk-button\">\n          Send notification\n      </button>\n  </div>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n",
+                    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-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}"]
                 }] }
     ];
     /** @nocollapse */
     RefundStatusComponent.ctorParameters = function () { return [
         { type: FormBuilder },
         { type: RefundsService },
+        { type: NotificationService },
         { type: PaymentLibComponent },
-        { type: PaymentViewService },
-        { type: Router },
         { type: OrderslistService }
     ]; };
     RefundStatusComponent.propDecorators = {
@@ -9024,7 +10302,8 @@ var RefundStatusComponent = /** @class */ (function () {
         isOldPcipalOff: [{ type: Input }],
         isNewPcipalOff: [{ type: Input }],
         ccdCaseNumber: [{ type: Input }],
-        isTurnOff: [{ type: Input }]
+        isTurnOff: [{ type: Input }],
+        orderParty: [{ type: Input }]
     };
     return RefundStatusComponent;
 }());
@@ -9099,6 +10378,7 @@ var ServiceRequestComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
+        this.isServiceRequest = 'false';
         if (this.viewStatus === undefined) {
             this.viewStatus = this.paymentLibComponent.viewName;
         }
@@ -9207,20 +10487,22 @@ var ServiceRequestComponent = /** @class */ (function () {
     };
     /**
      * @param {?} feeCode
+     * @param {?} feeId
      * @return {?}
      */
     ServiceRequestComponent.prototype.chkForAddRemission = /**
      * @param {?} feeCode
+     * @param {?} feeId
      * @return {?}
      */
-    function (feeCode) {
+    function (feeCode, feeId) {
         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) {
+                        if (remission.fee_code === feeCode && remission.fee_id === feeId) {
                             return false;
                         }
                     }
@@ -9284,7 +10566,7 @@ var ServiceRequestComponent = /** @class */ (function () {
      */
     function (fee) {
         var _this = this;
-        if (this.chkForAddRemission(fee.code)) {
+        if (this.chkForAddRemission(fee.code, fee.id)) {
             this.feeId = fee;
             this.viewStatus = 'addremission';
             this.payment = this.orderDetail[0].payments[0];
@@ -9516,7 +10798,7 @@ var ServiceRequestComponent = /** @class */ (function () {
     ServiceRequestComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-service-request',
-                    template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Backs</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" class=\"govuk-back-link\">Backz</a>\n        </li>\n      </ol>\n    </div>\n  <div class=\"govuk-grid-column-full\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n      </div>\n      <table >\n          <tbody>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Service request reference</td>\n              <td>{{orderRef}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Status</td>\n              <td>{{orderStatus}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Date created</td>\n              <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Party</td>\n              <td>{{orderParty}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">CCD event</td>\n              <td>{{orderCCDEvent}}</td>\n            </tr>\n          </tbody>\n        </table>\n  </div>\n\n  <div class=\"govuk-grid-column-full order-class\">\n      <div class=\"column\">\n        <table class=\"govuk-table \">\n          <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">Fee</td>\n            <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">Fee</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n            <td  class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n              </td>\n          \n            </tr>\n          </tbody>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n              <td class=\"govuk-table__cell alignleft\" colspan=\"7\">No fees recorded</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">  \n          <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\"> \n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n           <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n           <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n         </tr>\n     </thead>\n     <tbody  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!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=\"isServiceRequest === 'false'\">\n  <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n      <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n  </div>\n  <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n      <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n  </div>\n</div>\n \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\" \n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\" \n[isTakePayment] = \"takePayment\"  \n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isOldPcipalOff] = \"isOldPcipalOff\"\n[isNewPcipalOff] = \"isNewPcipalOff\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    Are you sure you want to delete this fee?\n  </strong>\n</div>\n<div class=\"govuk-button-grb\">\n  <form novalidate>\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n      Cancel\n    </button>\n    <button type=\"submit\" class=\"button\"\n    [disabled]=\"isRemoveBtnDisabled\"\n    [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"removeFee(feeId)\">\n      Remove\n    </button>\n  </form>\n</div>\n</ng-container>",
+                    template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n  <div class=\"govuk-grid-column-full\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n      </div>\n      <table >\n          <tbody>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Service request reference</td>\n              <td>{{orderRef}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Status</td>\n              <td>{{orderStatus}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Date created</td>\n              <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Party</td>\n              <td>{{orderParty}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">CCD event</td>\n              <td>{{orderCCDEvent}}</td>\n            </tr>\n          </tbody>\n        </table>\n  </div>\n\n  <div class=\"govuk-grid-column-full order-class\">\n      <div class=\"column\">\n        <table class=\"govuk-table \">\n          <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">Fee</td>\n            <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">Fee</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n            <td  class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"!chkForAddRemission(fee.code, fee.id)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n              </td>\n          \n            </tr>\n          </tbody>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n              <td class=\"govuk-table__cell alignleft\" colspan=\"7\">No fees recorded</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">  \n          <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\"> \n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n           <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n           <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n         </tr>\n     </thead>\n     <tbody  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!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=\"isServiceRequest === 'false'\">\n  <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n      <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n  </div>\n  <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n      <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n  </div>\n</div>\n \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\" \n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\" \n[isTakePayment] = \"takePayment\"  \n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isOldPcipalOff] = \"isOldPcipalOff\"\n[isNewPcipalOff] = \"isNewPcipalOff\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    Are you sure you want to delete this fee?\n  </strong>\n</div>\n<div class=\"govuk-button-grb\">\n  <form novalidate>\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n      Cancel\n    </button>\n    <button type=\"submit\" class=\"button\"\n    [disabled]=\"isRemoveBtnDisabled\"\n    [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"removeFee(feeId)\">\n      Remove\n    </button>\n  </form>\n</div>\n</ng-container>",
                     styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel::first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize::first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.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%}"]
                 }] }
     ];
@@ -9811,6 +11093,7 @@ var PaymentLibModule = /** @class */ (function () {
                         PaymentListComponent,
                         PaymentViewComponent,
                         PbaPaymentComponent,
+                        ContactDetailsComponent,
                         ProcessRefundComponent,
                         RefundListComponent,
                         CardDetailsComponent,
@@ -9856,6 +11139,6 @@ var PaymentLibModule = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { PaymentLibService, PaymentLibComponent, PaymentLibModule, AddRemissionComponent as ɵbb, AllocatePaymentsComponent as ɵw, CardDetailsComponent as ɵm, CaseTransactionsComponent as ɵz, ErrorBannerComponent as ɵbi, FeeSummaryComponent as ɵba, MarkUnidentifiedPaymentComponent as ɵr, MarkUnsolicitedPaymentComponent as ɵt, PageNotFoundComponent as ɵo, PaymentListComponent as ɵb, PaymentViewComponent as ɵf, PbaDetailsComponent as ɵy, PbaPaymentComponent as ɵi, ProcessRefundComponent as ɵj, ProcessedPaymentsComponent as ɵv, RefundListComponent as ɵl, RefundStatusComponent as ɵbk, ReportsComponent as ɵbg, ServiceRequestComponent as ɵbl, StatusHistoryComponent as ɵp, TableComponent as ɵbj, UnprocessedPaymentsComponent as ɵu, CapitalizePipe as ɵbd, CcdHyphensPipe as ɵbc, keyValuePipe as ɵbe, SanitizeHtmlPipe as ɵbf, BulkScaningPaymentService as ɵs, CardDetailsService as ɵn, CaseTransactionsService as ɵx, OrderslistService as ɵa, PaymentListService as ɵc, PaymentViewService as ɵg, RefundsService as ɵk, ErrorHandlerService as ɵe, WebComponentHttpClient as ɵh, ConsoleLoggerService as ɵbm, LoggerService as ɵd, StatusHistoryService as ɵq, XlFileService as ɵbh };
+export { PaymentLibService, PaymentLibComponent, PaymentLibModule, AddRemissionComponent as ɵbd, AllocatePaymentsComponent as ɵy, CardDetailsComponent as ɵo, CaseTransactionsComponent as ɵbb, ContactDetailsComponent as ɵj, ErrorBannerComponent as ɵbk, FeeSummaryComponent as ɵbc, MarkUnidentifiedPaymentComponent as ɵt, MarkUnsolicitedPaymentComponent as ɵv, PageNotFoundComponent as ɵq, PaymentListComponent as ɵb, PaymentViewComponent as ɵf, PbaDetailsComponent as ɵba, PbaPaymentComponent as ɵi, ProcessRefundComponent as ɵl, ProcessedPaymentsComponent as ɵx, RefundListComponent as ɵn, RefundStatusComponent as ɵbm, ReportsComponent as ɵbi, ServiceRequestComponent as ɵbn, StatusHistoryComponent as ɵr, TableComponent as ɵbl, UnprocessedPaymentsComponent as ɵw, CapitalizePipe as ɵbf, CcdHyphensPipe as ɵbe, keyValuePipe as ɵbg, SanitizeHtmlPipe as ɵbh, BulkScaningPaymentService as ɵu, CardDetailsService as ɵp, CaseTransactionsService as ɵz, NotificationService as ɵk, OrderslistService as ɵa, PaymentListService as ɵc, PaymentViewService as ɵg, RefundsService as ɵm, ErrorHandlerService as ɵe, WebComponentHttpClient as ɵh, ConsoleLoggerService as ɵbo, LoggerService as ɵd, StatusHistoryService as ɵs, XlFileService as ɵbj };
 
 //# sourceMappingURL=hmcts-ccpay-web-component.js.map