@hmcts/ccpay-web-component 4.0.0-beta553 → 4.0.0-beta554

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1439,7 +1439,7 @@ var PaymentViewComponent = /** @class */ (function () {
1439
1439
  PaymentViewComponent.decorators = [
1440
1440
  { type: Component, args: [{
1441
1441
  selector: 'ccpay-payment-view',
1442
- template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\n<div class=\"govuk-width-container\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n </div>\n </div>\n <table>\n <tbody>\n <!-- <tr class=\"section\" *ngIf=\"isTurnOff\">\n <td class=\"bold tb-col-w\">Payment group reference</td>\n <td>{{ paymentGroup.payment_group_reference }}</td>\n </tr> -->\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment reference</td>\n <td>{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment amount</td>\n <td>\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment method</td>\n <td>{{ paymentGroup?.payments[0]?.method }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Type</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Channel</td>\n <td>{{ paymentGroup?.payments[0]?.channel }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Allocaton Status</td>\n <td>{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n </tr>\n \n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n </div>\n \n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n \n <h2 class=\"heading-large\">Fee and remission details</h2>\n \n </div>\n </div>\n \n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Description</td>\n <td>Application for {{ fee.description }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Fee code</td>\n <td>{{ fee.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">\u00A3{{ fee.calculated_amount | number:'.2' }}</td>\n </tr>\n \n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\n\n \n <!-- <button *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n -->\n\n </div>\n\n <!-- remissions -->\n <div class=\"order-class\">\n <div class=\"column\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!chkIsRefundRemissionBtnEnable()\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n \n </td> -->\n </tr>\n </tbody>\n \n\n </table>\n </div></div>\n \n <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n <span class=\"mar-17\" >No help with fees or remissions.</span>\n </div>\n \n </div>\n\n\n\n <!-- card details -->\n <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n <!-- pba details -->\n <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n \n\n </div>\n\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n <ccpay-add-remission \n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\" \n [isOldPcipalOff]=\"isOldPcipalOff\" \n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [isNewPcipalOff]=\"isNewPcipalOff\" \n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\" \n [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n [ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n <div class=\"govuk-width-container\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n \n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n \n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n \n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup\">\n \n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n </div>\n </div>\n <table>\n <tbody>\n <tr class=\"section\" *ngIf=\"isTurnOff\">\n <td class=\"bold tb-col-w\">Payment group reference</td>\n <td>{{ paymentGroup.payment_group_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment reference</td>\n <td>{{ paymentGroup.payments[0].reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment amount</td>\n <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n <td>{{ paymentGroup.payments[0].external_reference }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n <td>{{ paymentGroup.payments[0].document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">Banked date</td>\n <td>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n </tbody>\n </table>\n \n <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <h2 class=\"heading-large\">Fee and remission details</h2>\n </div>\n </div>\n \n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Description</td>\n <td>Application for {{ fee.description }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Fee code</td>\n <td>{{ fee.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">\u00A3{{ fee.calculated_amount | number:'.2' }}</td>\n </tr>\n <tr *ngIf=\"fee.net_amount && isTurnOff\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n </tr>\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee.apportion_amount | number:'.2' }}</td>\n </tr>\n \n <tr *ngIf=\"fee.remissions\">\n <td class=\"bold tb-col-w\">Remission code</td>\n <td>{{fee.remissions.hwf_reference}}</td>\n </tr>\n <tr *ngIf=\"fee.remissions\">\n <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n </tr>\n </tbody>\n </table>\n \n </div>\n \n <!-- card details -->\n <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n -->\n <!-- pba details -->\n <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n <!-- Status histories -->\n <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n \n </div>\n \n </main>\n </div> -->\n<!-- </ng-container> --> \n",
1442
+ template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\n<div class=\"govuk-width-container\">\n\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div> -->\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n </div>\n </div>\n <table>\n <tbody>\n <!-- <tr class=\"section\" *ngIf=\"isTurnOff\">\n <td class=\"bold tb-col-w\">Payment group reference</td>\n <td>{{ paymentGroup.payment_group_reference }}</td>\n </tr> -->\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment reference</td>\n <td>{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment amount</td>\n <td>\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment method</td>\n <td>{{ paymentGroup?.payments[0]?.method }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Type</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Channel</td>\n <td>{{ paymentGroup?.payments[0]?.channel }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Allocaton Status</td>\n <td>{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n </tr>\n \n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n </div>\n \n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n \n <h2 class=\"heading-large\">Fee and remission details</h2>\n \n </div>\n </div>\n \n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Description</td>\n <td>Application for {{ fee.description }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Fee code</td>\n <td>{{ fee.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">\u00A3{{ fee.calculated_amount | number:'.2' }}</td>\n </tr>\n \n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\n\n \n <!-- <button *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n -->\n\n </div>\n\n <!-- remissions -->\n <div class=\"order-class\">\n <div class=\"column\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!chkIsRefundRemissionBtnEnable()\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n \n </td> -->\n </tr>\n </tbody>\n \n\n </table>\n </div></div>\n \n <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n <span class=\"mar-17\" >No help with fees or remissions.</span>\n </div>\n \n </div>\n\n\n\n <!-- card details -->\n <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n <!-- pba details -->\n <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n \n\n </div>\n\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n <ccpay-add-remission \n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\" \n [isOldPcipalOff]=\"isOldPcipalOff\" \n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [isNewPcipalOff]=\"isNewPcipalOff\" \n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\" \n [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n [ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n <div class=\"govuk-width-container\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n \n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n \n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n \n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup\">\n \n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n </div>\n </div>\n <table>\n <tbody>\n <tr class=\"section\" *ngIf=\"isTurnOff\">\n <td class=\"bold tb-col-w\">Payment group reference</td>\n <td>{{ paymentGroup.payment_group_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment reference</td>\n <td>{{ paymentGroup.payments[0].reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment amount</td>\n <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n <td>{{ paymentGroup.payments[0].external_reference }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n <td>{{ paymentGroup.payments[0].document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">Banked date</td>\n <td>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n </tbody>\n </table>\n \n <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <h2 class=\"heading-large\">Fee and remission details</h2>\n </div>\n </div>\n \n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Description</td>\n <td>Application for {{ fee.description }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Fee code</td>\n <td>{{ fee.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">\u00A3{{ fee.calculated_amount | number:'.2' }}</td>\n </tr>\n <tr *ngIf=\"fee.net_amount && isTurnOff\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n </tr>\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee.apportion_amount | number:'.2' }}</td>\n </tr>\n \n <tr *ngIf=\"fee.remissions\">\n <td class=\"bold tb-col-w\">Remission code</td>\n <td>{{fee.remissions.hwf_reference}}</td>\n </tr>\n <tr *ngIf=\"fee.remissions\">\n <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n </tr>\n </tbody>\n </table>\n \n </div>\n \n <!-- card details -->\n <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n -->\n <!-- pba details -->\n <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n <!-- Status histories -->\n <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n \n </div>\n \n </main>\n </div> -->\n<!-- </ng-container> --> \n",
1443
1443
  styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:19px;float:left;margin-top:2em}.remission{margin-bottom:7em}.govuk-error-summary__title{font-size:24px!important}.govuk-table__cell,.govuk-table__header{padding:0;line-height:1.3}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}"]
1444
1444
  }] }
1445
1445
  ];
@@ -2043,7 +2043,7 @@ var ProcessRefundComponent = /** @class */ (function () {
2043
2043
  ProcessRefundComponent.decorators = [
2044
2044
  { type: Component, args: [{
2045
2045
  selector: 'ccpay-process-refund',
2046
- template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"/refund-list?takePayment=false&refundlist=true\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div> -->\n <div *ngIf=\"errorMessage.showError\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body process-refund-font\">\n {{errorMessage.body}}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>\t{{refundlistsource?.refund_reference}} ({{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }})</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>\t{{refundlistsource?.reason}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount to be refunded</td>\n <td>{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Submitted by</td>\n <td>{{refundlistsource?.user_full_name}}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date submitted</td>\n <td>\t{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <div>\n </div>\n </div>\n <div class=\"process-refund__panel\">\n <form [formGroup]=\"processRefundForm\" novalidate>\n <div class=\"\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-large\">\n What do you want to do with this refund?\n </h1>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundActionsHasError\">\n <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundAction-{{i}}\" \n name=\"refundActionField\"\n type=\"radio\"\n formControlName=\"refundActionField\"\n (click)=\"checkRefundActions(refundAction.code)\"\n value=\"{{refundAction.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n {{refundAction.code}}\n </label>\n <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n {{refundAction.label}}\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n Add a reason\n </label>\n <p class=\"inline-error-message\"\n *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n <textarea class=\"govuk-textarea govuk-!-width-one-third\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\" \n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n \n </div>\n\n </div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n Enter reason\n </label>\n <input class=\"govuk-input govuk-!-width-one-third\" id=\"otherReason\" \n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n </div>\n \n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit \n </button>\n <br/><br/>\n </div>\n \n <div class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n \n<!-- \n <div class=\"govuk-button-group\">\n \n <button class=\"govuk-button govuk-button--secondary\" (click)=\"redirecttoRefundListPage()\">Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit\n </button>\n <div><a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></div>\n </div> -->\n\n <!-- <button class=\"govuk-button button-margin--left25\" data-module=\"govuk-button\" (click)=\"processRefundSubmit()\">\n Submit \n </button> -->\n </main>\n \n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"/orders/pages/v1caseinccd?result=approved\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n",
2046
+ 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\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\" \n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n \n </div>\n\n </div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n Enter reason\n </label>\n <input class=\"govuk-input govuk-!-width-one-third\" id=\"otherReason\" \n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n </div>\n \n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit \n </button>\n <br/><br/>\n </div>\n \n <div class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n \n\n </main>\n \n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"/orders/pages/v1caseinccd?result=approved\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n",
2047
2047
  styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:2.1875rem;float:left;margin-top:2em}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;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}"]
2048
2048
  }] }
2049
2049
  ];
@@ -3880,7 +3880,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
3880
3880
  CaseTransactionsComponent.decorators = [
3881
3881
  { type: Component, args: [{
3882
3882
  selector: 'ccpay-case-transactions',
3883
- template: "<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper\">\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n <!-- <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments> -->\n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div> \n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n \n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n <!-- <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Sorry, there is a problem with the service\n </h2>\n <p>Payment requests and payments cannot currently be shown. Try again.</p>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div> -->\n <div class=\"govuk-grid-column-full\">\n \n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n \n <!-- <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"8\">No payments recorded</td>\n </tbody> -->\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n \n <div class=\"govuk-grid-row\">\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div class=\"govuk-grid-row\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Amount due</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n \n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">Service requests</span>\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header col\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\t\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n </td>\n <td class=\"alignright\">\n \n <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n [disabled]=\"!orderRef.orderAddBtnEnable\"\n [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button></td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n <td colspan=\"6\">No service requests on this case.</td>\n </tbody>\n </table>\n </ng-container>\n <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n <br/>No service requests on this case.<br/>\n </ng-container> -->\n <span>\n <br/>\n <a (click)=\"redirectToFeeSearchPage($event)\"\n [class.disabled]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>Payments</span>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"3\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n \n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n <td colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n \n </ng-container>\n \n </div>\n <div>\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\" \n [isTurnOff]=\"isTurnOff\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" \n [isNewPcipalOff]=\"isNewPcipalOff\"\n [isOldPcipalOff]=\"isOldPcipalOff\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <!-- <div *ngIf=\"errorMessage\">\n <div *ngIf=\"isCPODown && isAnyFeeGroupAvilable\" class=\" error govuk-inset-text govuk-!-margin-top-7\">\n No party information currently available - try again later.\n </div>\n <div *ngIf=\"!isAnyFeeGroupAvilable\" class=\"error\">\n <h3 class=\"govuk-heading-m govuk-!-margin-top-7 govuk-!-margin-bottom-1\">Sorry, there is a problem with the service</h3>\n <p>Payment requests and payments cannot currently be shown. Try again.</p>\n </div>\n </div> -->\n \n <div class=\"govuk-grid-row govuk-grid__surplus-payments\">\n \n \n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviveRequestValue === '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\">Request reference</td>\n <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"allPayments?.length === 0\">\n <br/>No payments.\n </ng-container> -->\n </div>\n </div>\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status [ccdCaseNumber]=\"ccdCaseNumber\" ></ccpay-refund-status>\n </div>\n\n \n </div>\n\n \n </ng-container>\n\n\n<input #myInput type='hidden' id='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-column-full\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Service request reference</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{orderStatus}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date created</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Party</td>\n <td>{{orderParty}}</td>\n </tr>\n\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD event</td>\n <td>{{orderCCDEvent}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n </td>\n \n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n <td class=\"govuk-table__cell alignleft\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\"> \n <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div> -->\n\n <!-- remissions -->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\"> \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\"> \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 </div>\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >No Payments recorded</span>\n </div>\n \n </ng-container>\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n </div>\n\n \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\" \n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n\n</main>\n</div>",
3883
+ template: "<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper\">\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n <!-- <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments> -->\n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div> \n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n \n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n <!-- <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Sorry, there is a problem with the service\n </h2>\n <p>Payment requests and payments cannot currently be shown. Try again.</p>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div> -->\n <div class=\"govuk-grid-column-full\">\n \n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n \n <!-- <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"8\">No payments recorded</td>\n </tbody> -->\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n \n <div class=\"govuk-grid-row\">\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div class=\"govuk-grid-row\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Amount due</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n \n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">Service requests</span>\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header col\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\t\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n </td>\n <td class=\"alignright\">\n \n <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n [disabled]=\"!orderRef.orderAddBtnEnable\"\n [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button></td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n <td colspan=\"6\">No service requests on this case.</td>\n </tbody>\n </table>\n </ng-container>\n <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n <br/>No service requests on this case.<br/>\n </ng-container> -->\n <span>\n <br/>\n <a (click)=\"redirectToFeeSearchPage($event)\"\n [class.disabled]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>Payments</span>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"3\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n \n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n <td colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n \n </ng-container>\n \n </div>\n <div>\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\" \n [isTurnOff]=\"isTurnOff\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" \n [isNewPcipalOff]=\"isNewPcipalOff\"\n [isOldPcipalOff]=\"isOldPcipalOff\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <!-- <div *ngIf=\"errorMessage\">\n <div *ngIf=\"isCPODown && isAnyFeeGroupAvilable\" class=\" error govuk-inset-text govuk-!-margin-top-7\">\n No party information currently available - try again later.\n </div>\n <div *ngIf=\"!isAnyFeeGroupAvilable\" class=\"error\">\n <h3 class=\"govuk-heading-m govuk-!-margin-top-7 govuk-!-margin-bottom-1\">Sorry, there is a problem with the service</h3>\n <p>Payment requests and payments cannot currently be shown. Try again.</p>\n </div>\n </div> -->\n \n <div class=\"govuk-grid-row govuk-grid__surplus-payments\">\n \n \n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviveRequestValue === '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\">Request reference</td>\n <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"allPayments?.length === 0\">\n <br/>No payments.\n </ng-container> -->\n </div>\n </div>\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status [ccdCaseNumber]=\"ccdCaseNumber\" ></ccpay-refund-status>\n </div>\n\n \n </div>\n\n \n </ng-container>\n\n\n<input #myInput type='hidden' id='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-grid-column-full\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Service request reference</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{orderStatus}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date created</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Party</td>\n <td>{{orderParty}}</td>\n </tr>\n\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD event</td>\n <td>{{orderCCDEvent}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n </td>\n \n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n <td class=\"govuk-table__cell alignleft\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\"> \n <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div> -->\n\n <!-- remissions -->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\"> \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\"> \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 </div>\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >No Payments recorded</span>\n </div>\n \n </ng-container>\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n </div>\n\n \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\" \n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n\n</main>\n</div>",
3884
3884
  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%}"]
3885
3885
  }] }
3886
3886
  ];
@@ -6428,14 +6428,12 @@ var AddRemissionComponent = /** @class */ (function () {
6428
6428
  */
6429
6429
  function (response) {
6430
6430
  if (response.success) {
6431
- console.log('kumar1');
6432
6431
  /** @type {?} */
6433
6432
  var LDUrl = _this.isTurnOff ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
6434
6433
  LDUrl += "&caseType=" + _this.caseType;
6435
6434
  LDUrl += _this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
6436
6435
  LDUrl += _this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
6437
6436
  if (_this.paymentLibComponent.bspaymentdcn) {
6438
- console.log('kumar2');
6439
6437
  _this.router.routeReuseStrategy.shouldReuseRoute = (/**
6440
6438
  * @return {?}
6441
6439
  */
@@ -6444,7 +6442,6 @@ var AddRemissionComponent = /** @class */ (function () {
6444
6442
  _this.router.navigateByUrl("/payment-history/" + _this.ccdCaseNumber + "?view=fee-summary&selectedOption=" + _this.option + "&paymentGroupRef=" + _this.paymentGroupRef + "&dcn=" + _this.paymentLibComponent.bspaymentdcn + LDUrl);
6445
6443
  }
6446
6444
  else {
6447
- console.log('kumar3');
6448
6445
  _this.gotoCasetransationPage();
6449
6446
  }
6450
6447
  }