@hmcts/ccpay-web-component 4.0.0-beta543 → 4.0.0-beta548

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.
Files changed (44) hide show
  1. package/bundles/hmcts-ccpay-web-component.umd.js +102 -143
  2. package/bundles/hmcts-ccpay-web-component.umd.js.map +1 -1
  3. package/bundles/hmcts-ccpay-web-component.umd.min.js +1 -1
  4. package/bundles/hmcts-ccpay-web-component.umd.min.js.map +1 -1
  5. package/esm2015/hmcts-ccpay-web-component.js +4 -5
  6. package/esm2015/lib/components/add-remission/add-remission.component.js +33 -45
  7. package/esm2015/lib/components/allocate-payments/allocate-payments.component.js +24 -11
  8. package/esm2015/lib/components/case-transactions/case-transactions.component.js +13 -21
  9. package/esm2015/lib/components/payment-view/payment-view.component.js +24 -21
  10. package/esm2015/lib/components/refund-list/refund-list.component.js +1 -10
  11. package/esm2015/lib/components/refund-status/refund-status.component.js +2 -2
  12. package/esm2015/lib/components/reports/reports.component.js +8 -3
  13. package/esm2015/lib/components/table/table.component.js +2 -2
  14. package/esm2015/lib/payment-lib.component.js +1 -2
  15. package/esm2015/lib/payment-lib.module.js +1 -3
  16. package/esm2015/lib/services/shared/error-handler.service.js +3 -3
  17. package/esm2015/lib/services/xl-file/xl-file.service.js +2 -2
  18. package/esm5/hmcts-ccpay-web-component.js +4 -5
  19. package/esm5/lib/components/add-remission/add-remission.component.js +34 -47
  20. package/esm5/lib/components/allocate-payments/allocate-payments.component.js +24 -11
  21. package/esm5/lib/components/case-transactions/case-transactions.component.js +13 -25
  22. package/esm5/lib/components/payment-view/payment-view.component.js +28 -22
  23. package/esm5/lib/components/refund-list/refund-list.component.js +1 -10
  24. package/esm5/lib/components/refund-status/refund-status.component.js +2 -2
  25. package/esm5/lib/components/reports/reports.component.js +8 -3
  26. package/esm5/lib/components/table/table.component.js +2 -2
  27. package/esm5/lib/payment-lib.component.js +2 -2
  28. package/esm5/lib/payment-lib.module.js +1 -3
  29. package/esm5/lib/services/shared/error-handler.service.js +3 -3
  30. package/esm5/lib/services/xl-file/xl-file.service.js +2 -2
  31. package/fesm2015/hmcts-ccpay-web-component.js +95 -137
  32. package/fesm2015/hmcts-ccpay-web-component.js.map +1 -1
  33. package/fesm5/hmcts-ccpay-web-component.js +101 -149
  34. package/fesm5/hmcts-ccpay-web-component.js.map +1 -1
  35. package/hmcts-ccpay-web-component.d.ts +3 -4
  36. package/hmcts-ccpay-web-component.metadata.json +1 -1
  37. package/lib/components/add-remission/add-remission.component.d.ts +20 -1
  38. package/lib/components/allocate-payments/allocate-payments.component.d.ts +3 -0
  39. package/lib/components/case-transactions/case-transactions.component.d.ts +4 -4
  40. package/lib/components/payment-view/payment-view.component.d.ts +1 -0
  41. package/package.json +1 -1
  42. package/esm2015/lib/components/refunds/refunds.component.js +0 -23
  43. package/esm5/lib/components/refunds/refunds.component.js +0 -29
  44. package/lib/components/refunds/refunds.component.d.ts +0 -5
@@ -148,7 +148,6 @@ PaymentLibComponent.decorators = [
148
148
  [isNewPcipalOff]="ISNEWPCIPALOFF"
149
149
  ></ccpay-fee-summary>
150
150
  <ccpay-reports *ngIf="viewName === 'reports'"></ccpay-reports>
151
- <ccpay-refunds *ngIf="viewName === 'remission'"></ccpay-refunds>
152
151
  `
153
152
  }] }
154
153
  ];
@@ -213,10 +212,10 @@ class ErrorHandlerService {
213
212
  }
214
213
  else if (err.error) {
215
214
  if (typeof err.error === 'string') {
216
- errorMessage = err.error.replace(/"/g, "");
215
+ errorMessage = err.error.toString().replace(/"/g, "");
217
216
  }
218
217
  else {
219
- errorMessage = JSON.parse(err.error)["err"].split('-')[1];
218
+ errorMessage = Object.values(err.error)[0].toString().replace(/"/g, "");
220
219
  }
221
220
  }
222
221
  else if (err.error.messsage === undefined) {
@@ -831,8 +830,6 @@ OrderslistService.ctorParameters = () => [];
831
830
  * @fileoverview added by tsickle
832
831
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
833
832
  */
834
- /** @type {?} */
835
- const BS_ENABLE_FLAG = 'bulk-scan-enabling-fe';
836
833
  class PaymentViewComponent {
837
834
  /**
838
835
  * @param {?} paymentViewService
@@ -952,25 +949,16 @@ class PaymentViewComponent {
952
949
  this.OrderslistService.setnavigationPage('casetransactions');
953
950
  this.OrderslistService.setisFromServiceRequestPage(false);
954
951
  this.paymentLibComponent.viewName = 'case-transactions';
955
- this.paymentViewService.getBSfeature().subscribe((/**
956
- * @param {?} features
957
- * @return {?}
958
- */
959
- features => {
960
- /** @type {?} */
961
- let result = JSON.parse(features).filter((/**
962
- * @param {?} feature
963
- * @return {?}
964
- */
965
- feature => feature.uid === BS_ENABLE_FLAG));
966
- this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
967
- }), (/**
968
- * @param {?} err
969
- * @return {?}
970
- */
971
- err => {
972
- this.paymentLibComponent.ISBSENABLE = false;
973
- }));
952
+ this.paymentLibComponent.ISBSENABLE = true;
953
+ // this.paymentViewService.getBSfeature().subscribe(
954
+ // features => {
955
+ // let result = JSON.parse(features).filter(feature => feature.uid === BS_ENABLE_FLAG);
956
+ // this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
957
+ // },
958
+ // err => {
959
+ // this.paymentLibComponent.ISBSENABLE = false;
960
+ // }
961
+ // );
974
962
  }
975
963
  /**
976
964
  * @param {?} fee
@@ -1002,6 +990,18 @@ class PaymentViewComponent {
1002
990
  (error) => this.errorMessage = error));
1003
991
  }
1004
992
  }
993
+ /**
994
+ * @param {?} paymentGroup
995
+ * @return {?}
996
+ */
997
+ checkForFees(paymentGroup) {
998
+ if (paymentGroup !== null && paymentGroup !== undefined) {
999
+ if (paymentGroup.fees !== null && paymentGroup.fees !== undefined) {
1000
+ return true;
1001
+ }
1002
+ }
1003
+ return false;
1004
+ }
1005
1005
  /**
1006
1006
  * @param {?} payment
1007
1007
  * @param {?} remission
@@ -1137,7 +1137,7 @@ class PaymentViewComponent {
1137
1137
  PaymentViewComponent.decorators = [
1138
1138
  { type: Component, args: [{
1139
1139
  selector: 'ccpay-payment-view',
1140
- template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\n<div class=\"govuk-width-container\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n </div>\n </div>\n <table>\n <tbody>\n <!-- <tr class=\"section\" *ngIf=\"isTurnOff\">\n <td class=\"bold tb-col-w\">Payment group reference</td>\n <td>{{ paymentGroup.payment_group_reference }}</td>\n </tr> -->\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment reference</td>\n <td>{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment amount</td>\n <td>\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment method</td>\n <td>{{ paymentGroup?.payments[0]?.method }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Type</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Channel</td>\n <td>{{ paymentGroup.payments[0].channel }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup.payments[0].method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Allocaton Status</td>\n <td>{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n </tr>\n \n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n </div>\n \n <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup?.fees.length > 0\">\n <div class=\"column\">\n \n <h2 class=\"heading-large\">Fee and remission details</h2>\n \n </div>\n </div>\n\n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Description</td>\n <td>Application for {{ fee.description }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Fee code</td>\n <td>{{ fee.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">\u00A3{{ fee.calculated_amount | number:'.2' }}</td>\n </tr>\n \n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\n\n \n <!-- <button *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n -->\n\n </div>\n\n <!-- remissions -->\n <div class=\"order-class\">\n <div class=\"column\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!chkIsRefundRemissionBtnEnable()\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n \n </td> -->\n </tr>\n </tbody>\n \n\n </table>\n </div></div>\n \n <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n <span class=\"mar-17\" >No help with fees or remissions.</span>\n </div>\n \n \n\n\n\n <!-- card details -->\n <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n <!-- pba details -->\n <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n \n\n </div>\n\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n <ccpay-add-remission \n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\" \n [isOldPcipalOff]=\"isOldPcipalOff\" \n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [isNewPcipalOff]=\"isNewPcipalOff\" \n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\" \n [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n [ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n <div class=\"govuk-width-container\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n \n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n \n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n \n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup\">\n \n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n </div>\n </div>\n <table>\n <tbody>\n <tr class=\"section\" *ngIf=\"isTurnOff\">\n <td class=\"bold tb-col-w\">Payment group reference</td>\n <td>{{ paymentGroup.payment_group_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment reference</td>\n <td>{{ paymentGroup.payments[0].reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment amount</td>\n <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n <td>{{ paymentGroup.payments[0].external_reference }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n <td>{{ paymentGroup.payments[0].document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n <td class=\"bold tb-col-w\">Banked date</td>\n <td>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n </tbody>\n </table>\n \n <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <h2 class=\"heading-large\">Fee and remission details</h2>\n </div>\n </div>\n \n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Description</td>\n <td>Application for {{ fee.description }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Fee code</td>\n <td>{{ fee.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">\u00A3{{ fee.calculated_amount | number:'.2' }}</td>\n </tr>\n <tr *ngIf=\"fee.net_amount && isTurnOff\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n </tr>\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee.apportion_amount | number:'.2' }}</td>\n </tr>\n \n <tr *ngIf=\"fee.remissions\">\n <td class=\"bold tb-col-w\">Remission code</td>\n <td>{{fee.remissions.hwf_reference}}</td>\n </tr>\n <tr *ngIf=\"fee.remissions\">\n <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n </tr>\n </tbody>\n </table>\n \n </div>\n \n <!-- card details -->\n <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n -->\n <!-- pba details -->\n <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n <!-- Status histories -->\n <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n \n </div>\n \n </main>\n </div> -->\n<!-- </ng-container> --> \n",
1140
+ 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",
1141
1141
  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}"]
1142
1142
  }] }
1143
1143
  ];
@@ -1663,15 +1663,6 @@ class RefundListComponent {
1663
1663
  * @return {?}
1664
1664
  */
1665
1665
  ngOnInit() {
1666
- // this.refundService.getUserDetails().subsc
1667
- // userdetail => {
1668
- // console.log('govindu');
1669
- // console.log(userdetail.headers);
1670
- // console.log('govindu1');
1671
- // console.log(userdetail.headers.get('Set-Cookie'));
1672
- // console.log(userdetail);
1673
- // console.log(userdetail['data']);
1674
- // } );
1675
1666
  this.userLst = this.LOGGEDINUSERROLES;
1676
1667
  if (this.LOGGEDINUSERROLES.some((/**
1677
1668
  * @param {?} i
@@ -2335,9 +2326,9 @@ class CaseTransactionsComponent {
2335
2326
  paymentGroups => {
2336
2327
  this.isAnyFeeGroupAvilable = true;
2337
2328
  this.paymentGroups = paymentGroups['payment_groups'];
2338
- this.calculateAmounts(Event);
2339
- this.calculateOrderFeesAmounts(Event);
2340
- this.calculateRefundAmount(Event);
2329
+ this.calculateAmounts();
2330
+ this.calculateOrderFeesAmounts();
2331
+ this.calculateRefundAmount();
2341
2332
  if (this.isFromServiceRequestPage) {
2342
2333
  this.OrderslistService.getSelectedOrderRefId().subscribe((/**
2343
2334
  * @param {?} data
@@ -2379,9 +2370,9 @@ class CaseTransactionsComponent {
2379
2370
  paymentGroups => {
2380
2371
  this.isAnyFeeGroupAvilable = true;
2381
2372
  this.paymentGroups = paymentGroups['payment_groups'];
2382
- this.calculateAmounts(Event);
2383
- this.calculateOrderFeesAmounts(Event);
2384
- this.totalRefundAmount = this.calculateRefundAmount(Event);
2373
+ this.calculateAmounts();
2374
+ this.calculateOrderFeesAmounts();
2375
+ this.totalRefundAmount = this.calculateRefundAmount();
2385
2376
  this.paymentViewService.getPartyDetails(this.ccdCaseNumber).subscribe((/**
2386
2377
  * @param {?} response
2387
2378
  * @return {?}
@@ -2407,7 +2398,7 @@ class CaseTransactionsComponent {
2407
2398
  this.setDefaults();
2408
2399
  }));
2409
2400
  }
2410
- this.checkForExceptionRecord(Event);
2401
+ this.checkForExceptionRecord();
2411
2402
  if (this.OrderslistService.getisFromServiceRequestPages() !== null) {
2412
2403
  this.OrderslistService.getisFromServiceRequestPages().subscribe((/**
2413
2404
  * @param {?} data
@@ -2438,11 +2429,9 @@ class CaseTransactionsComponent {
2438
2429
  //return "-";
2439
2430
  }
2440
2431
  /**
2441
- * @param {?} event
2442
2432
  * @return {?}
2443
2433
  */
2444
- checkForExceptionRecord(event) {
2445
- event.preventDefault();
2434
+ checkForExceptionRecord() {
2446
2435
  if (this.paymentGroups.length === 0 && (this.selectedOption.toLocaleLowerCase() === 'ccdorexception' || this.selectedOption.toLocaleLowerCase() === 'rc')) {
2447
2436
  this.bulkScaningPaymentService.getBSPaymentsByCCD(this.ccdCaseNumber).subscribe((/**
2448
2437
  * @param {?} recordData
@@ -2502,11 +2491,9 @@ class CaseTransactionsComponent {
2502
2491
  }));
2503
2492
  }
2504
2493
  /**
2505
- * @param {?} event
2506
2494
  * @return {?}
2507
2495
  */
2508
- calculateOrderFeesAmounts(event) {
2509
- event.preventDefault();
2496
+ calculateOrderFeesAmounts() {
2510
2497
  this.paymentGroups.forEach((/**
2511
2498
  * @param {?} paymentGroup
2512
2499
  * @return {?}
@@ -2685,11 +2672,9 @@ class CaseTransactionsComponent {
2685
2672
  this.paymentLibComponent.viewName = 'case-transactions';
2686
2673
  }
2687
2674
  /**
2688
- * @param {?} event
2689
2675
  * @return {?}
2690
2676
  */
2691
- calculateAmounts(event) {
2692
- event.preventDefault();
2677
+ calculateAmounts() {
2693
2678
  /** @type {?} */
2694
2679
  let feesTotal = 0.00;
2695
2680
  /** @type {?} */
@@ -2784,11 +2769,9 @@ class CaseTransactionsComponent {
2784
2769
  }));
2785
2770
  }
2786
2771
  /**
2787
- * @param {?} event
2788
2772
  * @return {?}
2789
2773
  */
2790
- calculateRefundAmount(event) {
2791
- event.preventDefault();
2774
+ calculateRefundAmount() {
2792
2775
  if (!this.isTurnOff) {
2793
2776
  /** @type {?} */
2794
2777
  let isNewPaymentGroup = false;
@@ -3262,7 +3245,7 @@ class CaseTransactionsComponent {
3262
3245
  CaseTransactionsComponent.decorators = [
3263
3246
  { type: Component, args: [{
3264
3247
  selector: 'ccpay-case-transactions',
3265
- 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=\"#\" (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>",
3248
+ 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>",
3266
3249
  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%}"]
3267
3250
  }] }
3268
3251
  ];
@@ -4863,6 +4846,8 @@ class AllocatePaymentsComponent {
4863
4846
  this.paymentRef = null;
4864
4847
  this.isStrategicFixEnable = true;
4865
4848
  this.orderLevelFees = [];
4849
+ this.cookieUserName = [];
4850
+ this.userNameField = null;
4866
4851
  this.reasonList = {
4867
4852
  overPayment: {
4868
4853
  hwfReward: 'Help with Fees (HWF) awarded. Please include the HWF reference number in the explanatory note',
@@ -5053,21 +5038,29 @@ class AllocatePaymentsComponent {
5053
5038
  * @return {?}
5054
5039
  */
5055
5040
  confirmAllocatePayement() {
5041
+ this.enCookieUserName = document.cookie.split(";").find((/**
5042
+ * @param {?} row
5043
+ * @return {?}
5044
+ */
5045
+ row => row.includes("user-info"))).split("=")[1].split(";");
5046
+ this.cookieUserName = JSON.parse(decodeURIComponent(this.enCookieUserName));
5047
+ /** @type {?} */
5048
+ const fullName = this.cookieUserName['forename'] + ' ' + this.cookieUserName['surname'];
5056
5049
  /** @type {?} */
5057
5050
  const paymentDetailsField = this.overUnderPaymentForm.controls.moreDetails;
5058
5051
  /** @type {?} */
5059
5052
  const paymentFormError = this.overUnderPaymentForm.controls.moreDetails.errors;
5060
5053
  /** @type {?} */
5061
- const userNameField = this.overUnderPaymentForm.controls.userName;
5054
+ const userNameField = fullName;
5062
5055
  /** @type {?} */
5063
5056
  const isEmptyCondtion = this.paymentReason && this.paymentExplanation;
5064
5057
  /** @type {?} */
5065
5058
  const isOtherOptionSelected = this.paymentExplanation === 'Other';
5066
5059
  this.resetForm([false, false, false, false, false, false, false, false], 'all');
5067
- if ((!this.isRemainingAmountGtZero && !this.isRemainingAmountLtZero) || isEmptyCondtion && (!isOtherOptionSelected && userNameField.valid || isOtherOptionSelected && userNameField.valid && paymentDetailsField.valid)) {
5060
+ if ((!this.isRemainingAmountGtZero && !this.isRemainingAmountLtZero) || isEmptyCondtion && (!isOtherOptionSelected && userNameField.length > 0 || isOtherOptionSelected && userNameField.length > 0 && paymentDetailsField.valid)) {
5068
5061
  this.isConfirmButtondisabled = true;
5069
5062
  this.otherPaymentExplanation = this.paymentExplanation === 'Other' ? paymentDetailsField.value : this.paymentExplanation;
5070
- this.userName = userNameField.value;
5063
+ this.userName = userNameField;
5071
5064
  this.finalServiceCall();
5072
5065
  }
5073
5066
  else {
@@ -5091,12 +5084,9 @@ class AllocatePaymentsComponent {
5091
5084
  this.resetForm([false, false, false, false, false, true, false, false], 'other');
5092
5085
  }
5093
5086
  }
5094
- if (userNameField.value === "") {
5087
+ if (userNameField.length === 0) {
5095
5088
  this.resetForm([false, false, false, false, false, false, true, false], 'username');
5096
5089
  }
5097
- if (userNameField.value !== "" && userNameField.invalid) {
5098
- this.resetForm([false, false, false, false, false, false, false, true], 'username');
5099
- }
5100
5090
  }
5101
5091
  }
5102
5092
  /**
@@ -5249,10 +5239,10 @@ class AllocatePaymentsComponent {
5249
5239
  this.isRemainingAmountGtZero = remainingToBeAssigned > 0;
5250
5240
  this.isRemainingAmountLtZero = remainingToBeAssigned < 0;
5251
5241
  this.paymentSectionLabel = this.isRemainingAmountGtZero ? {
5252
- title: 'There is a surplus of',
5242
+ title: 'There is an Over payment of',
5253
5243
  reason: 'Provide a reason. This will be used in the Refund process.',
5254
5244
  } : this.isRemainingAmountLtZero ? {
5255
- title: 'There is a shortfall of',
5245
+ title: 'There is an Under payment of',
5256
5246
  reason: 'Provide a reason',
5257
5247
  } : {
5258
5248
  title: 'Amount left to be allocated',
@@ -5338,7 +5328,7 @@ class AllocatePaymentsComponent {
5338
5328
  AllocatePaymentsComponent.decorators = [
5339
5329
  { type: Component, args: [{
5340
5330
  selector: 'app-allocate-payments',
5341
- template: "<div class=\"allocate-payments\">\n <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n \n <div class=\"paymentrequest\">\n <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n </div>\n \n <div *ngFor=\"let orderRef of orderLevelFees; let i of index;\" class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'orderfee'+i+''\"\n aria-label=\"orderLevelRecord\"\n name=\"orderLevelRecord\"\n \n (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n type=\"radio\"\n value=\"{{orderRef.orderTotalFees}}\" />\n <label for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n </div>\n \n <div class=\"paymentrequest\">\n <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"button allbtb button--disabled govuk-!-margin-right-1\">\n Continue\n </button>\n </div>\n \n </ng-container>\n\n <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-heading-section\">\n <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n </div>\n <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\">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\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n <div class=\"multiple-choice\">\n <input id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n (click)=\"selectedPaymentGroup(paymentGroup)\" />\n <label for=\"unpaiedFee-{{i}}\"></label>\n </div>\n </td>\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\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{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\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n </tr>\n\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 class=\"govuk-button-group-allocate\">\n <button type=\"button\" class=\"button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n Cancel\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n </h2>\n <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n </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\">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 </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\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | 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 class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </strong>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n {{paymentSectionLabel.reason}}\n </span>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [(ngModel)]=\"paymentReason\" value={{reason.value}}>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [(ngModel)]=\"paymentReason\" value={{reason.value}}>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n Provide an explanatory note\n </span>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [(ngModel)]=\"paymentExplanation\" value={{explanation.value}}\n (click)=\"selectRadioButton(explanation.key, 'explanation')\">\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [(ngModel)]=\"paymentExplanation\" value={{explanation.value}}\n (click)=\"selectRadioButton(explanation.key, 'explanation')\">\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n\n <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n <div\n [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n id=\"conditional-how-contacted-conditional-3\">\n <div class=\"govuk-form-group\">\n <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n Please enter details\n </span>\n <textarea class=\"govuk-textarea\"\n [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n </textarea>\n <p class=\"inline-error-message\"\n *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n </p>\n </div>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n <label class=\"govuk-label govuk-font__custom\" for=\"userName\">\n Enter your name\n </label>\n <input class=\"govuk-input\" id=\"userName\" name=\"userName\" type=\"text\"\n [ngClass]=\"{'inline-error-class': isUserNameEmpty || isUserNameInvalid}\" formControlName=\"userName\">\n <p class=\"inline-error-message\" *ngIf=\"isUserNameEmpty || isUserNameInvalid\">\n <span *ngIf=\"isUserNameEmpty\">Enter your name.</span>\n <span *ngIf=\"isUserNameInvalid\">Enter a valid name</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n [ngClass]=\"isConfirmButtondisabled ? 'button button--disabled' : 'button'\"\n (click)=\"confirmAllocatePayement()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n Cancel\n </button>\n </div>\n </form>\n </ng-container>\n</div>",
5331
+ template: "<div class=\"allocate-payments\">\n <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n \n <div class=\"paymentrequest\">\n <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n </div>\n \n <div *ngFor=\"let orderRef of orderLevelFees; let i of index;\" class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'orderfee'+i+''\"\n aria-label=\"orderLevelRecord\"\n name=\"orderLevelRecord\"\n \n (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n type=\"radio\"\n value=\"{{orderRef.orderTotalFees}}\" />\n <label for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n </div>\n \n <div class=\"paymentrequest\">\n <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"button allbtb button--disabled govuk-!-margin-right-1\">\n Continue\n </button>\n </div>\n \n </ng-container>\n\n <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-heading-section\">\n <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n </div>\n <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\">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\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n <div class=\"multiple-choice\">\n <input id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n (click)=\"selectedPaymentGroup(paymentGroup)\" />\n <label for=\"unpaiedFee-{{i}}\"></label>\n </div>\n </td>\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\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{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\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n </tr>\n\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 class=\"govuk-button-group-allocate\">\n <button type=\"button\" class=\"button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n Cancel\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n </h2>\n <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n </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\">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 </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\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | 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 class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </strong>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n {{paymentSectionLabel.reason}}\n </span>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [(ngModel)]=\"paymentReason\" value={{reason.value}}>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [(ngModel)]=\"paymentReason\" value={{reason.value}}>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n Provide an explanatory note\n </span>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [(ngModel)]=\"paymentExplanation\" value={{explanation.value}}\n (click)=\"selectRadioButton(explanation.key, 'explanation')\">\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [(ngModel)]=\"paymentExplanation\" value={{explanation.value}}\n (click)=\"selectRadioButton(explanation.key, 'explanation')\">\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n\n <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n <div\n [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n id=\"conditional-how-contacted-conditional-3\">\n <div class=\"govuk-form-group\">\n <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n Please enter details\n </span>\n <textarea class=\"govuk-textarea\"\n [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n </textarea>\n <p class=\"inline-error-message\"\n *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n </p>\n </div>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n [ngClass]=\"isConfirmButtondisabled ? 'button button--disabled' : 'button'\"\n (click)=\"confirmAllocatePayement()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n Cancel\n </button>\n </div>\n </form>\n </ng-container>\n</div>",
5342
5332
  styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-font__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-hint,.allocate-payments .govuk-label--m,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-warning-text__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .form-group-error{border-left:5px solid #b10e1e;padding-left:15px}.allocate-payments .inline-error-class{outline:#a71414 solid 3px;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.multiple-choice{font-size:19px}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}"]
5343
5333
  }] }
5344
5334
  ];
@@ -5511,9 +5501,8 @@ class AddRemissionComponent {
5511
5501
  refundDDReason: new FormControl('', Validators.compose([Validators.required])),
5512
5502
  reason: new FormControl()
5513
5503
  });
5514
- /** @type {?} */
5515
- const remissionctrls = this.remissionForm.controls;
5516
- remissionctrls['refundDDReason'].setValue('Select a different reason', { onlySelf: true });
5504
+ // const remissionctrls=this.remissionForm.controls;
5505
+ // remissionctrls['refundDDReason'].setValue('Select a different reason', {onlySelf: true});
5517
5506
  if (this.viewCompStatus === '') {
5518
5507
  this.viewStatus = 'main';
5519
5508
  }
@@ -5607,13 +5596,15 @@ class AddRemissionComponent {
5607
5596
  * @return {?}
5608
5597
  */
5609
5598
  response => {
5610
- if (JSON.parse(response).success) {
5599
+ if (response.success) {
5600
+ console.log('kumar1');
5611
5601
  /** @type {?} */
5612
5602
  let LDUrl = this.isTurnOff ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
5613
5603
  LDUrl += `&caseType=${this.caseType}`;
5614
5604
  LDUrl += this.isNewPcipalOff ? '&isNewPcipalOff=Enable' : '&isNewPcipalOff=Disable';
5615
5605
  LDUrl += this.isOldPcipalOff ? '&isOldPcipalOff=Enable' : '&isOldPcipalOff=Disable';
5616
5606
  if (this.paymentLibComponent.bspaymentdcn) {
5607
+ console.log('kumar2');
5617
5608
  this.router.routeReuseStrategy.shouldReuseRoute = (/**
5618
5609
  * @return {?}
5619
5610
  */
@@ -5622,6 +5613,7 @@ class AddRemissionComponent {
5622
5613
  this.router.navigateByUrl(`/payment-history/${this.ccdCaseNumber}?view=fee-summary&selectedOption=${this.option}&paymentGroupRef=${this.paymentGroupRef}&dcn=${this.paymentLibComponent.bspaymentdcn}${LDUrl}`);
5623
5614
  }
5624
5615
  else {
5616
+ console.log('kumar3');
5625
5617
  this.gotoCasetransationPage();
5626
5618
  }
5627
5619
  }
@@ -6063,25 +6055,16 @@ class AddRemissionComponent {
6063
6055
  this.paymentLibComponent.ISNEWPCIPALOFF = this.isNewPcipalOff;
6064
6056
  this.paymentLibComponent.ISOLDPCIPALOFF = this.isOldPcipalOff;
6065
6057
  this.paymentLibComponent.isFromServiceRequestPage = true;
6066
- this.paymentViewService.getBSfeature().subscribe((/**
6067
- * @param {?} features
6068
- * @return {?}
6069
- */
6070
- features => {
6071
- /** @type {?} */
6072
- let result = JSON.parse(features).filter((/**
6073
- * @param {?} feature
6074
- * @return {?}
6075
- */
6076
- feature => feature.uid === BS_ENABLE_FLAG$3));
6077
- this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
6078
- }), (/**
6079
- * @param {?} err
6080
- * @return {?}
6081
- */
6082
- err => {
6083
- this.paymentLibComponent.ISBSENABLE = false;
6084
- }));
6058
+ // this.paymentViewService.getBSfeature().subscribe(
6059
+ // features => {
6060
+ // let result = JSON.parse(features).filter(feature => feature.uid === BS_ENABLE_FLAG);
6061
+ // this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
6062
+ // },
6063
+ // err => {
6064
+ // this.paymentLibComponent.ISBSENABLE = false;
6065
+ // }
6066
+ // );
6067
+ this.paymentLibComponent.ISBSENABLE = true;
6085
6068
  /** @type {?} */
6086
6069
  let partUrl = this.bsPaymentDcnNumber ? `&dcn=${this.bsPaymentDcnNumber}` : '';
6087
6070
  partUrl += this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
@@ -6133,25 +6116,16 @@ class AddRemissionComponent {
6133
6116
  this.paymentLibComponent.ISNEWPCIPALOFF = this.isNewPcipalOff;
6134
6117
  this.paymentLibComponent.ISOLDPCIPALOFF = this.isOldPcipalOff;
6135
6118
  this.paymentLibComponent.isFromServiceRequestPage = true;
6136
- this.paymentViewService.getBSfeature().subscribe((/**
6137
- * @param {?} features
6138
- * @return {?}
6139
- */
6140
- features => {
6141
- /** @type {?} */
6142
- let result = JSON.parse(features).filter((/**
6143
- * @param {?} feature
6144
- * @return {?}
6145
- */
6146
- feature => feature.uid === BS_ENABLE_FLAG$3));
6147
- this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
6148
- }), (/**
6149
- * @param {?} err
6150
- * @return {?}
6151
- */
6152
- err => {
6153
- this.paymentLibComponent.ISBSENABLE = false;
6154
- }));
6119
+ // this.paymentViewService.getBSfeature().subscribe(
6120
+ // features => {
6121
+ // let result = JSON.parse(features).filter(feature => feature.uid === BS_ENABLE_FLAG);
6122
+ // this.paymentLibComponent.ISBSENABLE = result[0] ? result[0].enable : false;
6123
+ // },
6124
+ // err => {
6125
+ // this.paymentLibComponent.ISBSENABLE = false;
6126
+ // }
6127
+ // );
6128
+ this.paymentLibComponent.ISBSENABLE = true;
6155
6129
  /** @type {?} */
6156
6130
  let partUrl = this.bsPaymentDcnNumber ? `&dcn=${this.bsPaymentDcnNumber}` : '';
6157
6131
  partUrl += this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
@@ -6173,9 +6147,11 @@ class AddRemissionComponent {
6173
6147
  this.router.navigateByUrl(url);
6174
6148
  }
6175
6149
  /**
6150
+ * @param {?} event
6176
6151
  * @return {?}
6177
6152
  */
6178
- gotoCasetransationPageCancelBtnClicked() {
6153
+ gotoCasetransationPageCancelBtnClicked(event) {
6154
+ event.preventDefault();
6179
6155
  if (this.paymentLibComponent.REFUNDLIST) {
6180
6156
  this.paymentLibComponent.viewName = 'refund-list';
6181
6157
  return;
@@ -6258,7 +6234,7 @@ class AddRemissionComponent {
6258
6234
  AddRemissionComponent.decorators = [
6259
6235
  { type: Component, args: [{
6260
6236
  selector: 'ccpay-add-remission',
6261
- template: "<div class=\"add-remission\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">Add remission </h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n Add remission to {{ fee?.code }}: {{ fee?.description }}\n <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n How much does the applicant need to pay?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n <div class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n Submit\n </button>\n </div>\n </form>\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to add remission to this fee?\n </strong>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n Cancel\n </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmRemission()\">\n Confirm\n </button>\n\n </ng-container>\n\n <!-- Add retro remission changes-->\n\n <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">Process remission</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n <span class=\"form-hint\">For example: HWF-A1B-23C</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n </p>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n \n </div>\n \n </form>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n </div>\n <p><a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n </div>\n </form>\n\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">Process remission</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n <h1 *ngIf=\"remessionPayment?.status === 'Success' || isFromRefundListPage\" class=\"heading-medium\">\n Enter the amount to be refunded\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n Enter the remission amount\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n Enter the amount\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n </p>\n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n \n \n </div>\n </fieldset>\n </form>\n \n <div class=\"govuk-button-group\">\n <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n \n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n </p>\n </div>\n \n </form>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Help with fees or remission reference</td>\n <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n <p> <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Remission added\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n \n </div>\n </div>\n <div *ngIf=\"remessionPayment.status === 'Success'\" >\n <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </button>\n </div>\n <p class=\"govuk-body\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n \n </ng-container>\n\n <!-- Issue Refund Section -->\n\n <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n <h1 class=\"heading-large\">Process refund</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n <h1 class=\"heading-large\">Why are you making this refund?\n </h1>\n \n\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n \n <div\n [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" >\n <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n <span *ngIf=\"refundHasError\">Select a reason why you\u2019re making this refund</span>\n </p>\n\n \n\n <div class = \"container-fluid\">\n <div class=\"row\">\n <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n <input class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n formControlName=\"refundReason\" value={{refund.code}}\n (change)=\"selectRadioButton(refund.name, refund.name)\">\n <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{refund.name}}\n </label>\n\n <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n Enter reason\n </label>\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n </p>\n \n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <br/>\n <div>\n <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\" (change)=\"selectchange($event)\">\n <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option> \n <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n <option *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\" value=\"{{refund.code}}\">{{refund.name}}</option>\n </select>\n \n </div>\n <br/>\n <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText && !isRefundReasonsSelected\" >\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n \n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\"> {{ selectedRefundReason }}\n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </table>\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmIssueRefund()\">\n Submit refund\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n\n <!--Retro Refund-->\n <ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\"> Retrospective remission </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">{{this.remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </table>\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n </ng-container>\n\n</div>\n\n\n\n",
6237
+ template: "<div class=\"add-remission\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">Add remission </h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n Add remission to {{ fee?.code }}: {{ fee?.description }}\n <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n How much does the applicant need to pay?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n <div class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n Submit\n </button>\n </div>\n </form>\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to add remission to this fee?\n </strong>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n Cancel\n </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmRemission()\">\n Confirm\n </button>\n\n </ng-container>\n\n <!-- Add retro remission changes-->\n\n <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">Process remission</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber}}</h1>\n <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n <span class=\"form-hint\">For example: HWF-A1B-23C</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n </p>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n \n </div>\n \n </form>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n </div>\n </form>\n\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">Process remission</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber }}</h1>\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n <h1 *ngIf=\"remessionPayment?.status === 'Success' || isFromRefundListPage\" class=\"heading-medium\">\n Enter the amount to be refunded\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n Enter the remission amount\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n Enter the amount\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n </p>\n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n \n \n </div>\n </fieldset>\n </form>\n \n <div class=\"govuk-button-group\">\n <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n \n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n </p>\n </div>\n \n </form>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Help with fees or remission reference</td>\n <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Remission added\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n \n </div>\n </div>\n <div *ngIf=\"remessionPayment.status === 'Success'\" >\n <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </button>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n \n </ng-container>\n\n <!-- Issue Refund Section -->\n\n <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n <h1 class=\"heading-large\">Process refund</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber }}</h1>\n <h1 class=\"heading-large\">Why are you making this refund?\n </h1>\n \n\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n \n <div\n [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" >\n <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n <span *ngIf=\"refundHasError\">Select a reason why you\u2019re making this refund</span>\n </p>\n\n \n\n <div class = \"container-fluid\">\n <div class=\"row\">\n <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n <input class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n formControlName=\"refundReason\" value={{refund.code}}\n (change)=\"selectRadioButton(refund.name, refund.name)\">\n <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{refund.name}}\n </label>\n\n <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n Enter reason\n </label>\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n </p>\n \n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <br/>\n <div>\n <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\" (change)=\"selectchange($event)\">\n <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option> \n <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n <option *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\" value=\"{{refund.code}}\">{{refund.name}}</option>\n </select>\n \n </div>\n <br/>\n <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText && !isRefundReasonsSelected\" >\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n \n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\"> {{ selectedRefundReason }}\n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </table>\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmIssueRefund()\">\n Submit refund\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n\n <!--Retro Refund-->\n <ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\"> Retrospective remission </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">{{this.remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </table>\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n\n <ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n </ng-container>\n\n</div>\n\n\n\n",
6262
6238
  styles: [".add-remission .button{padding:.5em;font-size:19px;font-weight:200;margin:20px 2px}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-label--s,.add-remission .govuk-warning-text__text,.add-remission .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:#a71414 solid 3px;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body,.add-remission .govuk-body-m{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .radio,.add-remission .right{float:right}.govuk-input{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.white{color:#fff}"]
6263
6239
  }] }
6264
6240
  ];
@@ -6550,7 +6526,7 @@ class XlFileService {
6550
6526
  setShortFallReportHeaders(worksheet) {
6551
6527
  worksheet.A1.v = "Resp_Service ID";
6552
6528
  worksheet.B1.v = "Resp_Service Name";
6553
- worksheet.C1.v = "Surplus_Shortfall";
6529
+ worksheet.C1.v = "Over Payment_Under Payment";
6554
6530
  worksheet.D1.v = "Balance";
6555
6531
  worksheet.E1.v = "Payment_Amount";
6556
6532
  worksheet.F1.v = "CCD_Case_Ref";
@@ -6706,6 +6682,11 @@ class ReportsComponent {
6706
6682
  if (res['data'][i]["balance"] !== undefined) {
6707
6683
  res['data'][i]['balance'] = this.convertToFloatValue(res['data'][i]["balance"]);
6708
6684
  }
6685
+ /** @type {?} */
6686
+ let Op = res['data'][i]["surplus_shortfall"];
6687
+ if (Op !== undefined) {
6688
+ res['data'][i]['surplus_shortfall'] = Op == "Surplus" ? "Over payment" : "Under payment";
6689
+ }
6709
6690
  if (res['data'][i]["payment_amount"] !== undefined) {
6710
6691
  res['data'][i]['payment_amount'] = this.convertToFloatValue(res['data'][i]['payment_amount']);
6711
6692
  }
@@ -6827,7 +6808,7 @@ class ReportsComponent {
6827
6808
  break;
6828
6809
  }
6829
6810
  case 'SURPLUS_AND_SHORTFALL': {
6830
- result = 'Surplus_Shortfall';
6811
+ result = 'Over Payment_Under Payment';
6831
6812
  break;
6832
6813
  }
6833
6814
  default: {
@@ -6868,7 +6849,7 @@ class ReportsComponent {
6868
6849
  ReportsComponent.decorators = [
6869
6850
  { type: Component, args: [{
6870
6851
  selector: 'ccpay-reports',
6871
- template: "<div class=\"header\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='REPORTS'>\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <legend class=\"govuk-fieldset__legend--xl\">\n <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input \n required\n id=\"DataLoss\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n (click)=\"validateDates('DATA_LOSS')\"\n name=\"selectedreport\"\n type=\"radio\"\n value=\"DATA_LOSS\" \n data-aria-controls=\"DataLoss\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n <span class=\"form-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input \n id=\"UnprocessedTransactions\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n (click)=\"validateDates('UNPROCESSED')\"\n name=\"selectedreport\"\n type=\"radio\"\n value=\"UNPROCESSED\" \n data-aria-controls=\"UnprocessedTransactions\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n <span class=\"form-hint\">Transaction records that are still unprocessed by staff.</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input \n id=\"ProcessedUnallocated\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n type=\"radio\"\n value=\"PROCESSED_UNALLOCATED\" \n data-aria-controls=\"ProcessedUnallocated\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n <span class=\"form-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input \n id=\"ShortfallsandSurplus\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n type=\"radio\"\n value=\"SURPLUS_AND_SHORTFALL\" \n data-aria-controls=\"ShortfallsandSurplus\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Shortfalls and surplus</label>\n <span class=\"form-hint\">Requests where balances are marked as shortfall/surplus further case management.\n E.g: Refund approval, Customer contact</span>\n </div>\n \n </div>\n </div>\n <div class=\"govuk-form-group\">\n <div class=\"datefrom\">\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-from\" name=\"date-from\" type=\"date\" formControlName=\"startDate\" required/>\n </div>\n\n <div class=\"dateto\">\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n </div>\n </div>\n <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek\">\n <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n </p>\n <div class=\"btnsubmit\">\n <button type=\"submit\" (click)=\"downloadReport()\" class=\"button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek\">Download report</button>\n </div>\n </form>\n ",
6852
+ template: "<div class=\"header\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='REPORTS'>\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <legend class=\"govuk-fieldset__legend--xl\">\n <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input \n required\n id=\"DataLoss\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n (click)=\"validateDates('DATA_LOSS')\"\n name=\"selectedreport\"\n type=\"radio\"\n value=\"DATA_LOSS\" \n data-aria-controls=\"DataLoss\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n <span class=\"form-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input \n id=\"UnprocessedTransactions\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n (click)=\"validateDates('UNPROCESSED')\"\n name=\"selectedreport\"\n type=\"radio\"\n value=\"UNPROCESSED\" \n data-aria-controls=\"UnprocessedTransactions\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n <span class=\"form-hint\">Transaction records that are still unprocessed by staff.</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input \n id=\"ProcessedUnallocated\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n type=\"radio\"\n value=\"PROCESSED_UNALLOCATED\" \n data-aria-controls=\"ProcessedUnallocated\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n <span class=\"form-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input \n id=\"ShortfallsandSurplus\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n type=\"radio\"\n value=\"SURPLUS_AND_SHORTFALL\" \n data-aria-controls=\"ShortfallsandSurplus\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n <span class=\"form-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n E.g: Refund approval, Customer contact</span>\n </div>\n \n </div>\n </div>\n <div class=\"govuk-form-group\">\n <div class=\"datefrom\">\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-from\" name=\"date-from\" type=\"date\" formControlName=\"startDate\" required/>\n </div>\n\n <div class=\"dateto\">\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n </div>\n </div>\n <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek\">\n <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n </p>\n <div class=\"btnsubmit\">\n <button type=\"submit\" (click)=\"downloadReport()\" class=\"button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek\">Download report</button>\n </div>\n </form>\n \n",
6872
6853
  styles: [".govuk-radios__input:focus+.govuk-radios__label::before{border-width:4px;box-shadow:0 0 0 4px #ffaf00}.datefrom{width:50%;float:left}.dateto{width:50%;float:right}.govuk-label--m{font-size:large}.form-hint{padding-left:.7em}.header{margin-top:10px;margin-bottom:15px}.btnsubmit{margin-bottom:30px}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}"]
6873
6854
  }] }
6874
6855
  ];
@@ -6881,28 +6862,6 @@ ReportsComponent.ctorParameters = () => [
6881
6862
  { type: PaymentViewService }
6882
6863
  ];
6883
6864
 
6884
- /**
6885
- * @fileoverview added by tsickle
6886
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
6887
- */
6888
- class RefundsComponent {
6889
- constructor() { }
6890
- /**
6891
- * @return {?}
6892
- */
6893
- ngOnInit() {
6894
- }
6895
- }
6896
- RefundsComponent.decorators = [
6897
- { type: Component, args: [{
6898
- selector: 'ccpay-refunds',
6899
- template: "<main class=\"govuk-main-wrapper \" id=\"main-content\" role=\"main\" class=\"refundsmain\">\n <div class=\"processrefund\">\n <h1 class=\"govuk-heading-l\">Process refund</h1>\n <h2 class=\"govuk-heading-m\">#4692-3164-5845-4819</h2>\n <br>\n\n <div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"event-name\">\n Enter help with fees or remission reference\n </label>\n </h1>\n\n <div id=\"event-name-hint\" class=\"govuk-hint\">\n For example: HWF-A1B-23C\n </div>\n \n <input class=\"govuk-input govuk-input--width-10\" id=\"event-name\" name=\"event-name\" type=\"text\" aria-describedby=\"event-name-hint\">\n </div>\n \n \n \n <div class=\"govuk-button-group\">\n \n \n \n \n \n \n \n \n <a href=\"reason\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Previous\n </a>\n \n \n \n \n \n \n \n <a href=\"transaction\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n Continue\n </a>\n \n </div>\n \n <p>\n <a href=\"../v1paymenthistory\">Cancel</a>\n </p>\n <br>\n <br>\n </div>\n </main>",
6900
- styles: [".processrefund{min-width:960px;max-width:1860px;margin:0 30px}.refundsmain{padding-top:25px}"]
6901
- }] }
6902
- ];
6903
- /** @nocollapse */
6904
- RefundsComponent.ctorParameters = () => [];
6905
-
6906
6865
  /**
6907
6866
  * @fileoverview added by tsickle
6908
6867
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7017,7 +6976,7 @@ class TableComponent {
7017
6976
  TableComponent.decorators = [
7018
6977
  { type: Component, args: [{
7019
6978
  selector: 'ccpay-table',
7020
- template: "<div class=\"add-remission\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n<div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group\" style=\"float: right\">\n <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n Filter by caseworker:\n </label>\n <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>All caseworkers</option>\n <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n </select>\n </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n <mat-table [dataSource]=\"dataSource\" matSort>\n\n <ng-container matColumnDef=\"ccd_case_number\">\n <mat-header-cell *matHeaderCellDef >Case ID </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"refund_reference\">\n <mat-header-cell *matHeaderCellDef > Refund reference </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"reason\">\n <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.reason}} </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"user_full_name\">\n <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"date_updated\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> Date updated </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"\" (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n </ng-container>\n \n <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n </mat-row>\n </mat-table>\n <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
6979
+ template: "<div class=\"add-remission\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n<div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group\" style=\"float: right\">\n <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n Filter by caseworker:\n </label>\n <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>All caseworkers</option>\n <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n </select>\n </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n <mat-table [dataSource]=\"dataSource\" matSort>\n\n <ng-container matColumnDef=\"ccd_case_number\">\n <mat-header-cell *matHeaderCellDef >Case ID </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"refund_reference\">\n <mat-header-cell *matHeaderCellDef > Refund reference </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"reason\">\n <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.reason}} </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"user_full_name\">\n <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"date_updated\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> Date updated </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"javascript:void(0)\" (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n </ng-container>\n \n <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n </mat-row>\n </mat-table>\n <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
7021
6980
  styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#005ea5;cursor:pointer;font-family:inherit}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}"]
7022
6981
  }] }
7023
6982
  ];
@@ -7430,7 +7389,7 @@ class RefundStatusComponent {
7430
7389
  RefundStatusComponent.decorators = [
7431
7390
  { type: Component, args: [{
7432
7391
  selector: 'ccpay-refund-status',
7433
- template: "<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] | capitalize }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status | capitalize}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.date_created | date:'d MMMM yyyy\n hh:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n\n <ng-container *ngIf=\"viewName==='refundview'\">\n <div *ngIf=\"refundButtonState==='sent back'\">\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Resubmit\n refund</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\">\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview'\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">Review and resubmit refund</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for rejection</td>\n <td class=\"govuk-table__cell\">{{refundreason}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\"> {{ refundlist?.reason}}\n <a (click)=\"gotoRefundReasonPage()\" *ngIf=\"refundlist?.reason !== 'Retrospective remission'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"refundlist?.reason === 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td *ngIf=\"refundlist?.reason !== 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\"> \u00A3{{ changedAmount | number:'.2' }}\n <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason === 'Retrospective remission'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n </table>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n</div>\n<p><a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n <!-- <div class=\"govuk-button-group\">\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n </div> -->\n <!-- <p>\n <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund'\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage'\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>",
7392
+ template: "<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.date_created | date:'d MMMM yyyy\n hh:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n\n <ng-container *ngIf=\"viewName==='refundview'\">\n <div *ngIf=\"refundButtonState==='sent back'\">\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Resubmit\n refund</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\">\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview'\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">Review and resubmit refund</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for rejection</td>\n <td class=\"govuk-table__cell\">{{refundreason}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\"> {{ refundlist?.reason}}\n <a (click)=\"gotoRefundReasonPage()\" *ngIf=\"refundlist?.reason !== 'Retrospective remission'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"refundlist?.reason === 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td *ngIf=\"refundlist?.reason !== 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\"> \u00A3{{ changedAmount | number:'.2' }}\n <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason === 'Retrospective remission'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n </table>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n <!-- <div class=\"govuk-button-group\">\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n </div> -->\n <!-- <p>\n <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund'\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage'\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadCaseTransactionPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>",
7434
7393
  styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.govuk-label--s,.govuk-warning-text__text,.hmcts-currency-input__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:#a71414 solid 3px;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-body,.govuk-body-m{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.white{color:#fff}"]
7435
7394
  }] }
7436
7395
  ];
@@ -7494,7 +7453,6 @@ PaymentLibModule.decorators = [
7494
7453
  SanitizeHtmlPipe,
7495
7454
  ReportsComponent,
7496
7455
  ErrorBannerComponent,
7497
- RefundsComponent,
7498
7456
  TableComponent,
7499
7457
  RefundStatusComponent
7500
7458
  ],
@@ -7517,6 +7475,6 @@ PaymentLibModule.decorators = [
7517
7475
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
7518
7476
  */
7519
7477
 
7520
- export { PaymentLibService, PaymentLibComponent, PaymentLibModule, AddRemissionComponent as ɵba, AllocatePaymentsComponent as ɵv, CardDetailsComponent as ɵl, CaseTransactionsComponent as ɵy, ErrorBannerComponent as ɵbh, FeeSummaryComponent as ɵz, MarkUnidentifiedPaymentComponent as ɵq, MarkUnsolicitedPaymentComponent as ɵs, PageNotFoundComponent as ɵn, PaymentListComponent as ɵa, PaymentViewComponent as ɵe, PbaDetailsComponent as ɵx, ProcessRefundComponent as ɵi, ProcessedPaymentsComponent as ɵu, RefundListComponent as ɵk, RefundStatusComponent as ɵbk, RefundsComponent as ɵbi, ReportsComponent as ɵbf, StatusHistoryComponent as ɵo, TableComponent as ɵbj, UnprocessedPaymentsComponent as ɵt, CapitalizePipe as ɵbc, CcdHyphensPipe as ɵbb, keyValuePipe as ɵbd, SanitizeHtmlPipe as ɵbe, BulkScaningPaymentService as ɵr, CardDetailsService as ɵm, CaseTransactionsService as ɵw, OrderslistService as ɵh, PaymentListService as ɵb, PaymentViewService as ɵf, RefundsService as ɵj, ErrorHandlerService as ɵd, WebComponentHttpClient as ɵg, ConsoleLoggerService as ɵbl, LoggerService as ɵc, StatusHistoryService as ɵp, XlFileService as ɵbg };
7478
+ export { PaymentLibService, PaymentLibComponent, PaymentLibModule, AddRemissionComponent as ɵba, AllocatePaymentsComponent as ɵv, CardDetailsComponent as ɵl, CaseTransactionsComponent as ɵy, ErrorBannerComponent as ɵbh, FeeSummaryComponent as ɵz, MarkUnidentifiedPaymentComponent as ɵq, MarkUnsolicitedPaymentComponent as ɵs, PageNotFoundComponent as ɵn, PaymentListComponent as ɵa, PaymentViewComponent as ɵe, PbaDetailsComponent as ɵx, ProcessRefundComponent as ɵi, ProcessedPaymentsComponent as ɵu, RefundListComponent as ɵk, RefundStatusComponent as ɵbj, ReportsComponent as ɵbf, StatusHistoryComponent as ɵo, TableComponent as ɵbi, UnprocessedPaymentsComponent as ɵt, CapitalizePipe as ɵbc, CcdHyphensPipe as ɵbb, keyValuePipe as ɵbd, SanitizeHtmlPipe as ɵbe, BulkScaningPaymentService as ɵr, CardDetailsService as ɵm, CaseTransactionsService as ɵw, OrderslistService as ɵh, PaymentListService as ɵb, PaymentViewService as ɵf, RefundsService as ɵj, ErrorHandlerService as ɵd, WebComponentHttpClient as ɵg, ConsoleLoggerService as ɵbk, LoggerService as ɵc, StatusHistoryService as ɵp, XlFileService as ɵbg };
7521
7479
 
7522
7480
  //# sourceMappingURL=hmcts-ccpay-web-component.js.map